Core Components

This one enforces design token discipline across your component library. It stops you from hard-coding colors, spacing, and typography by providing a complete token system (spacing from $1 to $8, semantic color tokens like $textPrimary, font sizes). You get wrapper components like Box, HStack, VStack, Button, and Card that only accept token values as props. The anti-patterns section is the real value here: it shows exactly what not to do (raw View components, inline styles, magic numbers) versus the token-based approach. Use this when you're tired of inconsistent spacing and want your design system to actually get enforced at the code level instead of just documented in Figma.

Install to Claude Code

npx -y skills add davila7/claude-code-templates --skill core-components --agent claude-code