ESLint guardrails for design systems

UIConsistency

用 ESLint 把 shadcn/ui、Radix UI 与 Tailwind CSS 项目的 UI 规范前移到编码阶段,减少原始控件、硬编码颜色、任意值和导入路径漂移。

import { recommended } from
  "@aicode-nexus/.../presets";

export default [
  recommended,
  {
    rules: {
      "no-raw-palette-utility": "error",
      "no-arbitrary-utility": "warn"
    }
  }
];
01 Design tokens
02 UI primitives
03 Import paths

What it catches

把 UI 设计系统里最容易漂移的地方变成自动检查。

插件提供 11 条规则,覆盖交互控件、设计令牌、Tailwind 任意值、暗色模式、z-index、图标尺寸和组合组件导入路径。

组件使用

阻止原始 button、input、textarea、a、label 等交互元素绕过项目组件库。

Token 优先

禁止 raw palette、任意颜色、任意间距和暗色模式硬编码,保持主题可控。

结构边界

限制 shell-only 组件、内部 UI 路径和组合组件导入,减少跨层误用。

How teams adopt it

从 warn 到 error,给现有项目一条可迁移的路线。

推荐先在推荐预设下暴露问题,再按页面、组件层和设计令牌逐步收紧到严格模式。

01

安装插件

在 ESLint 9 flat config 中启用 recommended 或 strict 预设。

02

扫描漂移

先把高频违规点转成清晰列表,避免靠人工 Code Review 追样式细节。

03

沉淀模式

把重复页面写法迁移到 shared patterns 或 compositions,而不是堆 className。

04

收紧规则

新代码走 error,遗留代码逐步清理,最终让 UI 规范进入 CI。

Install

两行配置,把一致性检查放进 lint。

适合 shadcn/ui、Radix UI primitives、Tailwind CSS v4、设计令牌驱动的 React 项目。

pnpm add -D @aicode-nexus/eslint-plugin-ui-consistency

import { recommended } from
  "@aicode-nexus/eslint-plugin-ui-consistency/presets";

export default [recommended];