Eight rules. Every finding says what to write instead.

Colors must come from design tokens: no hex/rgb/oklch literals, arbitrary Tailwind colors or default-palette classes.

Catches

Hex/rgb/hsl/oklch literals in classes (bg-[#ef4444], [color:red]), styles and color attributes (<svg fill>; on components, only hex and color functions in props without known values); Tailwind default-palette classes (bg-gray-100)

Suggests

The nearest token of the same hue whose role fits the utility (text-gray-500 → text-muted-foreground), or the variant that already applies it

Why it matters

A hex value is a copy of a token that stops following it: when the theme changes, or in dark mode, the copy stays behind. Agents write them whenever a prompt names a color ("a red alert", "a green label"), and in the benchmark they were most of what the agents got wrong.

<div className="rounded-md bg-gray-100 p-3 text-[#737373]">  Only owners can delete a workspace.</div>

<div className="rounded-md bg-muted p-3 text-muted-foreground">  Only owners can delete a workspace.</div>

Option. Colors to accept anyway, as written in the class or the style: ["error", { "allow": ["#fff"] }].

Padding, margin and gap must use the spacing scale, not arbitrary px/rem values.

Catches

Arbitrary padding, margin and gap (p-[13px], style={{ marginTop: 6 }})

Suggests

Nearest step on the spacing scale, keeping the sign; with Tailwind v4, any whole or half step of --spacing (p-3, p-4.5, p-13) or p-px

Why it matters

Off-scale padding and gaps make layouts drift a pixel at a time, and an arbitrary value hides which step was meant. When the value is on the scale, the fix is just its name. A warning by default, because a deliberate one-off is sometimes right.

<div className="flex items-center gap-[6px] px-[18px] py-[13px]">  <Badge>Beta</Badge></div>

<div className="flex items-center gap-1.5 px-4.5 py-3">  <Badge>Beta</Badge></div>

Option. Values to accept anyway, as the class or the length: ["warn", { "allow": ["px-[18px]"] }].

Border radius must use radius tokens, not arbitrary values.

Catches

Arbitrary radius (rounded-[7px], borderRadius: 14)

Suggests

Nearest radius token (rounded-sm), including Tailwind's default keys; rounded-full (or a pill token) for values far above the scale (rounded-[999px])

Why it matters

Corners are part of the visual language. An arbitrary radius looks almost right next to the components and never quite matches them. A warning by default.

<div className="rounded-[7px] border p-4">  <Badge className="rounded-[999px]">New</Badge></div>

<div className="rounded-sm border p-4">  <Badge className="rounded-full">New</Badge></div>

Option. Values to accept anyway, as the class or the length.

Use the design-system component instead of the native element it wraps (<Button> over <button>).

Catches

Native elements a component wraps (<button>, <input>, <dialog>), inferred from each component's props and markup

Suggests

The root component and its import, preferring one that renders the element (NativeSelect over Select); the rename is auto-fixed when it renders that element, takes its attributes or is mapped in elements

Why it matters

A native <button> skips what the design system's Button carries: variants, focus styles, disabled states, and every fix the team made since. Agents write native elements with hand-rolled classes because that is what most code they learned from looks like.

<form className="flex gap-2">  <input type="email" placeholder="you@example.com" />  <button className="rounded-md bg-primary px-3 text-sm text-primary-foreground">    Invite  </button></form>

<form className="flex gap-2">  <Input type="email" placeholder="you@example.com" />  <Button className="rounded-md bg-primary px-3 text-sm text-primary-foreground">    Invite  </Button></form>

Option. Native elements to accept anyway: ["error", { "allow": ["a"] }].

Components must exist in the design system: no invented components or dot-notation members.

Catches

Invented components, dot-notation members that do not exist (<Card.Header>), typos

Suggests

The flat part (<CardHeader>) or closest name, auto-fixed only when that component is imported

Why it matters

Agents mix up conventions between libraries: <Card.Header> where the system exports flat parts, or a component that only exists in another kit. TypeScript reports it once the file compiles in the project; check_ui reports it in a snippet the agent has not saved yet, and names the part to use.

<Card>  <Card.Header>    <Card.Title>Billing</Card.Title>  </Card.Header></Card>

<Card>  <CardHeader>    <CardTitle>Billing</CardTitle>  </CardHeader></Card>

Props must exist on the component (own props or the HTML attributes it forwards).

Catches

Props a component does not accept, own or inherited (tone, isDisabled)

Suggests

Closest prop, with cross-library synonyms (tone → variant) and equivalents in either direction (checked ↔ isSelected, open ↔ isOpen); asChild on a Base UI component (or render on a Radix one) gets how that library composes

Why it matters

Props from other libraries (tone, isDisabled, isOpen) do nothing or break the build. The rule suggests the prop this system uses, with its allowed values, and explains how Radix (asChild) and Base UI (render) compose when an agent mixes them up.

<div className="grid gap-2">  <Badge tone="success">Active</Badge>  <Input isDisabled placeholder="Workspace name" /></div>

<div className="grid gap-2">  <Badge variant="success">Active</Badge>  <Input disabled placeholder="Workspace name" /></div>

Variant props (cva variants and string-literal unions) only accept their declared values.

Catches

Values outside a cva variant or literal union (variant="danger")

Suggests

Allowed values and a synonym match (danger → destructive, small → sm)

Why it matters

variant="danger" on a Button that only knows destructive renders without that variant's styles, so the mistake looks like a working button. The rule lists the allowed values and maps synonyms across libraries (danger → destructive, small → sm).

<Button variant="danger" size="small">  Delete workspace</Button>

<Button variant="destructive" size="sm">  Delete workspace</Button>

Buttons whose only content is an icon need an aria-label (or visually hidden text).

Catches

Buttons whose only content is an icon, with no aria-label, aria-labelledby, title or visually hidden text; a button passed as Base UI's render is judged by its host's children, a render-prop child ({() => <Trash2 />}) by what it returns, and hidden buttons are skipped

Suggests

aria-label, guessed from the icon (Trash2 → "Delete")

Why it matters

A button with only an icon is announced as just "button" to screen-reader users. It is the most common accessibility slip in real apps: check found 11 in vercel/ai-chatbot and 105 in midday's dashboard. The fix guesses the label from the icon (Trash2 → "Delete").

<Button variant="ghost" size="icon">  <Trash2 /></Button>

<Button aria-label="Delete" variant="ghost" size="icon">  <Trash2 /></Button>