Design System Starter
Create and evolve design systems with design tokens, component architecture...
Install
npx skills add softaworks/agent-toolkit --skill design-system-starter -g -a claude-code -y- Repository
- softaworks/agent-toolkit2.6k
- Category
- Design
- Updated
- 8mo ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
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 |
Bundled Resources
references/component-examples.md- Complete component implementationstemplates/design-tokens-template.json- W3C design token formattemplates/component-template.tsx- React component templatechecklists/design-system-checklist.md- Design system audit checklist
Design System Philosophy
What is a Design System?
A design system is more than a component library, it's a collection of:
- Design Tokens: Foundational design decisions (colors, spacing, typography)
- Components: Reusable UI building blocks
- Patterns: Common UX solutions and compositions
- Guidelines: Rules, principles, and best practices
- Documentation: How to use everything effectively
