Mercury SkillsMercury Skills
v1.0.0 cosmicstack-labs

Component Design Systems

Building and maintaining scalable component libraries, design tokens, accessibility, and cross-team collaboration patterns

View source0 downloads
design-systemscomponentsreactaccessibilitydesign-tokensstorybook

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#

// 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: Use Chromatic/Percy to catch unintended style changes.

More in Frontend

View all →
Frontendv1.0.0

React Patterns

Component patterns, hooks, state management, and performance optimization for React applications

reacthooksstate-management
Designv1.0.0

UI Design System Skill

Master the creation, maintenance, and governance of design systems — from design tokens and component architecture to documentation, versioning, and accessibility.

design-systemsui-componentsdesign-tokens
Frontendv1.0.0

Frontend Testing

Comprehensive frontend testing strategy covering unit, integration, E2E, visual regression, and accessibility testing

testingfrontendvitest