Design System

Gives you a complete design system foundation with tokens for colors, typography, spacing (8px scale), shadows, and responsive breakpoints at the standard mobile-first cuts. The accessibility checklist covers WCAG 2.1 AA requirements including contrast ratios and keyboard navigation, which saves you from hunting down those specs mid-project. Motion specs use CSS variables for duration and easing, so animations stay consistent without magic numbers scattered everywhere. It's structured for multi-agent workflows with separate validation rounds, which is either helpful or overkill depending on your team size. Best for greenfield projects where you want design consistency baked in from the start rather than bolted on later.

Install to Claude Code

npx -y skills add supercent-io/skills-template --skill design-system --agent claude-code