components

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().

/* Good */
color: var(--text);
background: var(--surface);

/* Bad */
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)