@danieltechdev/eslint-plugin-design

Estate design-law lint rules for ESLint 9 flat config. Semantic tokens only, no raw interactive HTML elements, guaranteed touch targets.

Rules

• design/no-raw-color — bans raw color literals (hex codes and oklch()/rgb()/rgba()/hsl()/hsla() function calls) in JSX className/class/style and cva/clsx/cx/cn call arguments. Bind a semantic token (bg-surface, text-ink, bg-accent, …) instead.
• design/no-raw-palette — bans raw Tailwind default-palette utility classes (bg-zinc-900, text-green-400, …) in the same surfaces. Use semantic tokens (bg-surface, text-ink-dim, border-line, bg-accent, bg-ok/bg-warn/bg-err) instead.
• design/min-touch-target — flags a lowercase JSX element with an onClick handler that has no class guaranteeing a >=48px touch target (min-h-touch, size-touch, h-touch, min-h-touch-lg). Uppercase component names are never checked — they own their own sizing contract.

Usage

// eslint.config.js
import design from '@danieltechdev/eslint-plugin-design';

export default [
  ...design.configs.recommended,
  // your other config objects
];

The recommended config also bans raw <button>/<input>/<textarea>/ <select>/<dialog> (use the matching @danieltechdev/ui-web primitive) and raw @heroicons/*/@phosphor-icons/* imports (use lucide-react).

Relationship to @danieltechdev/config

This package will be distributed via the @danieltechdev/config eslint/design flavor once BP29 lands. Until then, a direct import of this package (as shown above) is the documented interim path.