Agent Skills
› cosmicstack-labs/mercury-agent-skills
› component-design-systems
component-design-systems
GitHub提供构建可扩展、可访问且易维护组件库的模式，涵盖设计令牌、基础组件与复合模式架构，指导API设计、版本管理及常见陷阱规避。
Trigger Scenarios
需要构建前端组件库
设计系统架构规划
提升UI组件可访问性
制定组件库版本策略
Install
npx skills add cosmicstack-labs/mercury-agent-skills --skill component-design-systems -g -y
SKILL.md
Frontmatter
{
"name": "component-design-systems",
"metadata": {
"tags": [
"design-systems",
"components",
"react",
"accessibility",
"design-tokens",
"storybook"
],
"author": "cosmicstack-labs",
"version": "1.0.0",
"category": "frontend"
},
"description": "Building and maintaining scalable component libraries, design tokens, accessibility, and cross-team collaboration patterns"
}
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
- No design tokens: Hardcoded values everywhere. Use tokens for colors, spacing, typography.
- Missing accessibility: Always include ARIA labels, keyboard nav, focus management.
- Too opinionated: Components should work out-of-box but be customizable via props/composition.
- No versioning strategy: Use semver. Document breaking changes clearly.
- No visual regression tests: Use Chromatic/Percy to catch unintended style changes.
Version History
- 38e2523 Current 2026-07-05 19:39
