| name | components |
| description | Reusable UI component patterns, design tokens, and CSS architecture. Use when creating, modifying, or reviewing UI components. Triggers: "component", "button", "card", "modal", "token", "css".
|
| category | web-ui |
Skill: components
Design Tokens
Use OKLCH CSS variables from DESIGN.md. Never use raw rgba().
color: var(--text);
background: var(--surface);
color: rgba(0, 0, 0, 0.87);
background: #fff;
Component Rules
- Card:
border-radius: 4px, subtle shadow, no nested cards
- Button: Flat, no gradient, pressed state on
:active
- Input: Single underline border, 48px min height on mobile
- Chip: Horizontal scrollable row, 44px min tap target
CSS Architecture
src/styles/
├── tokens.css # Design tokens (OKLCH)
├── base.css # Reset, typography, focus
├── layout.css # Header, sidebar, main
├── components.css # Reusable components
├── pages.css # Page-specific styles
├── responsive.css # Media queries
└── main.css # Entry point (imports all)
Rules
- Max 500 LOC per CSS file
- Use
var() for all colors, spacing, typography
- Container queries as primary responsive mechanism
- No
!important (except reduced motion)
