diff --git a/.claude/rules/frontend.md b/.claude/rules/frontend.md index 327ca4d..93b6c7e 100644 --- a/.claude/rules/frontend.md +++ b/.claude/rules/frontend.md @@ -3,4 +3,42 @@ paths: - "ui/**" --- -When working on frontend code, always use the `/frontend-design` skill for component design, layout decisions, and UI implementation. +## Design System Rules + +**Stack:** React + Tailwind CSS + shadcn/ui. No exceptions. + +**Use the `/frontend-design` skill** for all component design and layout decisions. + +### Mandatory +- All styling via Tailwind utility classes +- Use shadcn/ui components from `@/components/ui/` — run `npx shadcn@latest add ` to install new ones +- Use semantic color tokens: `bg-background`, `text-foreground`, `bg-card`, `text-muted-foreground`, `border-border`, etc. +- Use theme spacing: Tailwind's default scale (p-2, p-3, p-4, gap-2, etc.) +- Mobile-first: base classes for mobile, `md:` for desktop overrides +- Touch targets: min 44px on mobile (`min-h-[44px] min-w-[44px]`) +- Use `cn()` from `@/lib/utils` for conditional classes + +### Forbidden +- No `style={}` JSX props +- No `