limiteinductive
791d7e2f69
- remove stub colony binary after dep cache so cargo rebuilds with real source - expand .claude/rules/frontend.md with full design system enforcement - mandatory: semantic tokens, shadcn components, Tailwind only, mobile-first - forbidden: inline styles, custom CSS, arbitrary colors, raw HTML elements Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1.7 KiB
1.7 KiB
paths
| paths | |
|---|---|
|
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/— runnpx shadcn@latest add <component>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/utilsfor conditional classes
Forbidden
- No
style={}JSX props - No
<style>tags - No
.cssfiles (except index.css theme config) - No arbitrary color values like
bg-[#xxx]orbg-[oklch(...)]— use semantic tokens or CSS variables viabg-[var(--color-name)] - No raw HTML elements when a shadcn component exists (use
<Button>not<button>,<Input>not<input>)
Color Palette
| Token | Use for |
|---|---|
bg-background / text-foreground |
Main content |
bg-card / text-card-foreground |
Elevated surfaces |
bg-muted / text-muted-foreground |
Subdued content |
bg-primary / text-primary-foreground |
Primary actions |
border-border |
All borders |
text-emerald-500 |
Result/success |
text-red-500 / text-red-400 |
Errors |
text-blue-500 / text-blue-400 |
Plans, agent accent |
text-amber-500 |
Code |
Adding shadcn components
cd ui/colony && npx shadcn@latest add <component-name>