Component Interface Design

This is a comprehensive guide for building UIs with shadcn/ui and Tailwind CSS. It enforces strict design constraints: two to three font weights max, 4px-based spacing, three shadow levels, and 200-300ms animations. The workflow pushes you to complete the visual interface before adding logic, which keeps designs clean and prevents the usual React mess of interleaved state and markup. Includes checklists for accessibility (ARIA labels, WCAG AA contrast, keyboard focus) and ready-to-use patterns for dashboards, forms, and data tables. The core philosophy prompt is useful if you want Claude to internalize the design system quickly. Best for teams that want enforced consistency rather than creative freedom.

Install to Claude Code

npx -y skills add qodex-ai/ai-agent-skills --skill component-interface-design --agent claude-code