fix: Dockerfile stub binary not replaced, design system rules
- 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>
This commit is contained in:
@@ -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 <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/utils` for conditional classes
|
||||
|
||||
### Forbidden
|
||||
- No `style={}` JSX props
|
||||
- No `<style>` tags
|
||||
- No `.css` files (except index.css theme config)
|
||||
- No arbitrary color values like `bg-[#xxx]` or `bg-[oklch(...)]` — use semantic tokens or CSS variables via `bg-[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
|
||||
```bash
|
||||
cd ui/colony && npx shadcn@latest add <component-name>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user