Summary
This generates the full infrastructure for design systems, from primitive color tokens to CSS custom properties to React theme providers. It creates the three-layer token hierarchy (primitive, semantic, component) that scales across platforms, sets up Style Dictionary configs for multi-platform output, and builds variant systems with class-variance-authority. The theme switching implementation handles system preferences and persistence properly. Most design system tutorials skip the hard parts like token naming conventions and the CSS architecture that actually works in production. This gives you the complete foundation that design teams at companies like GitHub and Shopify actually use.
Install to Claude Code
npx -y skills add wshobson/agents --skill design-system-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Files
SKILL.md
Select a file.
Featured
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
