design-system
Production-grade UI design system with structured tokens, responsive layouts, and WCAG accessibility standards.
Install
npx skills add https://github.com/supercent-io/skills-template --skill design-systemStats
| Total installs | 3,248 |
| Weekly installs | 3.2K |
| GitHub stars | 88 |
| First seen | Mar 6, 2026 |
| Source | @supercent-io/skills-template |
Summary
- Provides structured design tokens for colors, typography, spacing, shadows, and breakpoints with 8px-based spacing scale
- Includes section-by-section component architecture with responsive breakpoints (mobile-first, 640/768/1024/1280px)
- Covers motion specifications with CSS variables for duration and easing, plus hover and transition patterns
- Built-in WCAG 2.1 AA accessibility checklist covering contrast ratios, keyboard navigation, screen reader support, and text readability
- Supports multi-agent workflows with validation rounds for visual direction, accessibility analysis, and handoff verification
Tags
Related skills
| Skill | Installs | vs design-system |
|---|---|---|
| ckm:design-system | 3,795 | +547 |
| high-end-visual-design | 3,325 | +77 |
| ckm:slides | 3,723 | +475 |
| building-components | 2,701 | -547 |
| qa-test-planner | 3,498 | +250 |
FAQ
- How many installs does design-system have?
- design-system has 3,248 total installs and 3.2K installs this week.
- Where is design-system hosted?
- design-system is published by @supercent-io/skills-template at https://github.com/supercent-io/skills-template.
- How many GitHub stars does design-system have?
- design-system has 88 GitHub stars.
- When was design-system first indexed?
- OrangeBot.AI first indexed design-system on Mar 6, 2026.
- How do I install design-system?
- Run: npx skills add https://github.com/supercent-io/skills-template --skill design-system