Summary
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-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 →
