Agent Skills
Claude Code Skill
Component Skill
Enforces component-driven architecture whenever writing any markup. Forces a component-first planning phase before any code is written — auditing existing components, planning reuse, identifying new components, and forbidding inline styles and hardcoded values. Ensures consistent design token usage across the entire application.
Key Features
Mandatory 3-step workflow: Component Audit → Plan → Build
Zero inline styles — all styling through design tokens
Forbids hardcoded colors, spacing, radii, and font sizes
Prevents duplicate components by auditing existing UI library
40-line extraction rule: oversized JSX becomes its own component
Semantic className identifiers with c- prefix on component roots