Design System Starter

This one gives you the scaffolding for a proper design system: design tokens in W3C format, component architecture using atomic design, accessibility guidelines baked in, and documentation templates. It's not just spitting out styled buttons. You get the primitive and semantic color tokens, spacing scales, typography systems, and WCAG 2.1 compliance patterns from the start. Use it when you're tired of inconsistent spacing values across your app or when you need to actually implement dark mode properly with semantic tokens instead of hardcoded colors. The bundled checklists and component templates mean you're not starting from a blank file. Worth it if you're building something that needs to scale beyond a handful of components.

skills.sh installs: 393
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill design-system-starter --agent claude-code

Installs into .claude/skills of the current project.

Files

Design System Starter

Build robust, scalable design systems that ensure visual consistency and exceptional user experiences.

Quick Start

Just describe what you need:

Create a design system for my React app with dark mode support

That's it. The skill provides tokens, components, and accessibility guidelines.

Triggers

Trigger	Example
Create design system	"Create a design system for my app"
Design tokens	"Set up design tokens for colors and spacing"
Component architecture	"Design component structure using atomic design"
Accessibility	"Ensure WCAG 2.1 compliance for my components"
Dark mode	"Implement theming with dark mode support"

Quick Reference

Task	Output
Design tokens	Color, typography, spacing, shadows JSON
Component structure	Atomic design hierarchy (atoms, molecules, organisms)
Theming	CSS variables or ThemeProvider setup
Accessibility	WCAG 2.1 AA compliant patterns
Documentation	Component docs with props, examples, a11y notes