component-design-systems
Building and maintaining scalable component libraries, design tokens, accessibility, and cross-team collaboration patterns
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill component-design-systems --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.
# Component Design Systems Patterns for building scalable, accessible, and maintainable component libraries. ## Architecture ``` design-system/ ├── tokens/ # Design tokens │ ├── colors.json │ ├── typography.json │ └── spacing.json ├── primitives/ # Base components │ ├── Button/ │ ├── Input/ │ └── Text/ ├── patterns/ # Composed patterns │ ├── FormField/ │ ├── DataTable/ │ └── Modal/ └── docs/ # Documentation └── Storybook/ ``` ## Component API Design ```tsx // Compound component pattern <Select> <Select.Label>Country</Select.Label> <Select.Trigger> <Select.Value placeholder="Select a country" /> </Select.Trigger> <Select.Content> <Select.Item value="us">United States</Select.Item> <Select.Item value="uk">United Kingdom</Select.Item> </Select.Content> </Select> ``` --- ## Common Mistakes 1. **No design tokens**: Hardcoded values everywhere. Use tokens for colors, spacing, typography. 2. **Missing accessibility**: Always include ARIA labels, keyboard nav, focus management. 3. **Too opinionated**: Components should work out-of-box but be customizable via props/composition. 4. **No versioning strategy**: Use semver. Document breaking changes clearly. 5. **No visual regression tests**: U
- Architecture
- Component API Design
- Common Mistakes
What does the component-design-systems skill do?
Building and maintaining scalable component libraries, design tokens, accessibility, and cross-team collaboration patterns
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill component-design-systems --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.