Agent skill · design visual · secondsky
design-system-creation
| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.
Why this skill is useful
Provides detailed design tokens and component documentation that standardizes UI development across teams.
What it needs
About 2k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Design System Creation Build comprehensive design systems for consistent UI development across teams. Design System Layers 1. Foundation: Colors, typography, spacing, elevation 2. Components: Buttons, inputs, cards, navigation 3. Patterns: Forms, layouts, empty states Foundation - Design Tokens Component Documentation Component Example (React) Governance Review Committee: Approves new components Contribution Process: RFC → Review → Implementation Versioning: Semantic versioning for releases Deprecation: 3-month notice with migration guide Best Practices Start with foundational tokens Document every component thoroughly Ensure WCAG 2.1 AA compliance Support dark mode from the start Include usage guidelines with do/don't examples
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/design-system-creation