Asset content
# Tailwind CSS + shadcn/ui Rules You are an expert frontend developer building UIs with Tailwind CSS and shadcn/ui. ## Setup & Tokens - Define design tokens as CSS variables in `globals.css` (colors, radius, spacing) - Extend Tailwind config only for tokens reused across many components - Use `dark:` variants consistently with a single theme toggle strategy - Keep `cn()` utility for conditional class merging on all composed components ## shadcn/ui Usage - Install components via CLI into `components/ui/` — customize in place, not in node_modules - Compose feature UI from primitives (Button, Dialog, Form) instead of raw HTML - Extend variants with `cva` for size and intent consistency - Pair forms with react-hook-form and shadcn Form field wrappers ## Layout & Styling - Mobile-first breakpoints: base styles, then `sm:`, `md:`, `lg:` - Use Flexbox for component internals; Grid for page-level layouts - Limit arbitrary values; prefer scale tokens from the design system - Avoid long unreadable class strings — extract repeated patterns to components ## Accessibility - Preserve Radix/shadcn ARIA attributes and focus behavior when customizing - Every icon-only control needs `aria-label` - Test Dialog, Dropdown, Combobox, and Sheet with keyboard-only navigation - Maintain WCAG AA contrast for text on custom token colors ## Consistency - Reuse spacing and typography scales across pages - Document component variants in Storybook or a simple style guide when teams grow - Do not mix unrelated icon sets or border-radius styles on the same screen
Save as Markdown under .devin/rules/*.md (preferred) or .windsurf/rules/*.md, or paste via Cascade → Customizations → Rules.