{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/design-system",
  "version": "1.0.0",
  "name": "design-system",
  "description": "Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.",
  "system_prompt_fragment": "# /design-system\n\n> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).\n\nManage your design system — audit for consistency, document components, or design new patterns.\n\n## Usage\n\n```\n/design-system audit                    # Full system audit\n/design-system document [component]     # Document a component\n/design-system extend [pattern]         # Design a new component or pattern\n```\n\n## Components of a Design System\n\n### Design Tokens\nAtomic values that define the visual language:\n- Colors (brand, semantic, neutral)\n- Typography (scale, weights, line heights)\n- Spacing (scale, component padding)\n- Borders (radius, width)\n- Shadows (elevation levels)\n- Motion (durations, easings)\n\n### Components\nReusable UI elements with defined:\n- Variants (primary, secondary, ghost)\n- States (default, hover, active, disabled, loading, error)\n- Sizes (sm, md, lg)\n- Behavior (interactions, animations)\n- Accessibility (ARIA, keyboard)\n\n### Patterns\nCommon UI solutions combining components:\n- Forms (input groups, validation, submission)\n- Navigation (sidebar, tabs, breadcrumbs)\n- Data display (tables, cards, lists)\n- Feedback (toasts, modals, inline messages)\n\n## Principles\n\n1. **Consistency over creativity** — The system exists so teams don't reinvent the wheel\n2. **Flexibility within constraints** — Components should be composable, not rigid\n3. **Document everything** — If it's not documented, it doesn't exist\n4. **Version and migrate** — Breaking changes need migration paths\n\n## Output — Audit\n\n```markdown\n## Design System Audit\n\n### Summary\n**Components reviewed:** [X] | **Issues found:** [X] | **Score:** [X/100]\n\n### Naming Consistency\n| Issue | Components | Recommendation |\n|-------|------------|----------------|\n| [Inconsistent naming] | [List] | [Standard to adopt] |\n\n### Token Coverage\n| Category | Defined | Hardcoded Values Found |\n|----------|---------|----------------------|\n| Colors | [X] | [X] instances of hardcoded hex |\n| Spacing | [X] | [X] instances of arbitrary values |\n| Typography | [X] | [X] instances of custom fonts/sizes |\n\n### Component Completeness\n| Component | States | Variants | Docs | Score |\n|-----------|--------|----------|------|-------|\n| Button | ✅ | ✅ | ⚠️ | 8/10 |\n| Input | ✅ | ⚠️ | ❌ | 5/10 |\n\n### Priority Actions\n1. [Most impactful improvement]\n2. [Second priority]\n3. [Third priority]\n```\n\n## Output — Document\n\n```markdown\n## Component: [Name]\n\n### Description\n[What this component is and when to use it]\n\n### Variants\n| Variant | Use When |\n|---------|----------|\n| [Primary] | [Main actions] |\n| [Secondary] | [Supporting actions] |\n\n### Props / Properties\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| [prop] | [type] | [default] | [description] |\n\n### States\n| State | Visual | Behavior |\n|-------|--------|----------|\n| Default | [description] | — |\n| Hover | [description] | [interaction] |\n| Active | [description] | [interaction] |\n| Disabled | [description] | Non-interactive |\n| Loading | [description] | [animation] |\n\n### Accessibility\n- **Role**: [ARIA role]\n- **Keyboard**: [Tab, Enter, Escape behavior]\n- **Screen reader**: [Announced as...]\n\n### Do's and Don'ts\n| ✅ Do | ❌ Don't |\n|------|---------|\n| [Best practice] | [Anti-pattern] |\n\n### Code Example\n[Framework-appropriate code snippet]\n```\n\n## Output — Extend\n\n```markdown\n## New Component: [Name]\n\n### Problem\n[What user need or gap this component addresses]\n\n### Existing Patterns\n| Related Component | Similarity | Why It's Not Enough |\n|-------------------|-----------|---------------------|\n| [Component] | [What's shared] | [What's missing] |\n\n### Proposed Design\n\n#### API / Props\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| [prop] | [type] | [default] | [description] |\n\n#### Variants\n| Variant | Use When | Visual |\n|---------|----------|--------|\n| [Variant] | [Scenario] | [Description] |\n\n#### States\n| State | Behavior | Notes |\n|-------|----------|-------|\n| Default | [Description] | — |\n| Hover | [Description] | [Interaction] |\n| Disabled | [Description] | Non-interactive |\n| Loading | [Description] | [Animation] |\n\n#### Tokens Used\n- Colors: [Which tokens]\n- Spacing: [Which tokens]\n- Typography: [Which tokens]\n\n### Accessibility\n- **Role**: [ARIA role]\n- **Keyboard**: [Expected interactions]\n- **Screen reader**: [Announced as...]\n\n### Open Questions\n- [Decision that needs design review]\n- [Edge case to resolve]\n```\n\n## If Connectors Available\n\nIf **~~design tool** is connected:\n- Audit components directly in Figma — check naming, variants, and token usage\n- Pull component properties and layer structure for documentation\n\nIf **~~knowledge base** is connected:\n- Search for existing component documentation and usage guidelines\n- Publish updated documentation to your wiki\n\n## Tips\n\n1. **Start with an audit** — Know where you are before deciding where to go.\n2. **Document as you build** — It's easier to document a component while designing it.\n3. **Prioritize coverage over perfection** — 80% of components documented beats 100% of 10 components.",
  "applicable_domains": [
    "design",
    "ux"
  ],
  "invocation": [
    "/design-system",
    "/design-system [audit | document | extend] <component or system>"
  ],
  "tags": [
    "design",
    "anthropics",
    "knowledge-work"
  ],
  "authored_by": "anthropics",
  "source_url": "https://github.com/anthropics/knowledge-work-plugins/blob/main/design/skills/design-system/SKILL.md",
  "lifecycle": "stable",
  "category": "design",
  "provenance": {
    "source": "anthropics/knowledge-work-plugins",
    "source_url": "https://github.com/anthropics/knowledge-work-plugins/blob/main/design/skills/design-system/SKILL.md",
    "author": "Anthropic",
    "license": "Apache-2.0",
    "notes": "Imported by scripts/import-anthropic-skills.py."
  }
}