UI Design System

When to Use

Activate this skill when:

• Creating new UI components that must follow a design system
• Building page layouts with consistent spacing and structure
• Setting up or extending design tokens (colors, typography, spacing)
• Choosing colors, fonts, or spacing values for a project
• Reviewing UI code for design consistency and accessibility
• Integrating shadcn/ui components into existing layouts

Do NOT use this skill for:

• Backend API implementation (use python-backend-expert)
• Component or hook testing (use react-testing-patterns)
• E2E browser testing (use e2e-testing)
• General React patterns unrelated to design system (use react-frontend-expert)
• Deployment or CI/CD (use deployment-pipeline)