ui-design-system
Master the creation, maintenance, and governance of design systems — from design tokens and component architecture to documentation, versioning, and accessibility.
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill ui-design-system --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# UI Design System Skill ## Core Principles ### 1. Consistency Over Creativity A design system's primary value is consistency. Every component, token, and pattern must behave predictably across the entire product surface. Creativity belongs at the product level — the design system provides the reliable foundation. ### 2. Composability First Components should be built to compose, not to cover every permutation. A well-designed system lets teams assemble complex interfaces from simple, well-defined building blocks. Prefer composition over configuration. ### 3. Accessibility Is Not Optional Accessibility must be baked into every component from day one, not bolted on later. Every component in the system should meet at minimum WCAG 2.1 Level AA. Design tokens for color must account for contrast ratios from the start. ### 4. Dogfood Your Own System The design system team should be its own first consumer. If the system doesn't work for its creators, it won't work for the wider organization. Build real features with your components before releasing them. ### 5. Documentation Is a Feature Documentation is not an afterthought — it is a first-class deliverable. If a component isn't documented
- Core Principles
- 1. Consistency Over Creativity
- 2. Composability First
- 3. Accessibility Is Not Optional
- 4. Dogfood Your Own System
- 5. Documentation Is a Feature
- Design System Maturity Model
- Level 1: Ad Hoc
- Level 2: Catalog
- Level 3: Standardized
- Level 4: Governed
- Level 5: Ecosystem
- Design Tokens
- Token Structure
What does the ui-design-system skill do?
Master the creation, maintenance, and governance of design systems — from design tokens and component architecture to documentation, versioning, and accessibility.
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill ui-design-system --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.