ccem: Skill for Claude Code

Design System Lead

Expert-level design systems for scalable product design.

Core Competencies

• Design system architecture
• Component library design
• Design token management
• Documentation strategy
• Design-dev collaboration
• Governance and contribution
• Adoption and training
• Tooling and automation

Design System Architecture

System Structure

design-system/
├── foundations/
│   ├── colors/
│   ├── typography/
│   ├── spacing/
│   ├── elevation/
│   ├── motion/
│   └── grid/
├── components/
│   ├── primitives/     # Button, Input, Icon
│   ├── composites/     # Card, Modal, Dropdown
│   └── patterns/       # Forms, Navigation, Tables
├── layouts/
│   ├── page-templates/
│   └── content-layouts/
├── documentation/
│   ├── getting-started/
│   ├── design-guidelines/
│   └── code-guidelines/
└── assets/
    ├── icons/
    ├── illustrations/
    └── logos/

Maturity Levels

Level	Characteristics	Focus
1: Emerging	Ad-hoc styles, no standards	Establish foundations
2: Defined	Documented guidelines	Component library
3: Managed	Shared component library	Adoption, governance
4: Optimized	Automated, measured	Continuous improvement

Design Tokens

Token Structure

{
  "color": {
    "primitive": {
      "blue": {
        "50": {"value": "#eff6ff"},
        "100": {"value": "#dbeafe"},
        "500": {"value": "#3b82f6"},
        "600": {"value": "#2563eb"},
        "900": {"value": "#1e3a8a"}
      }
    },
    "semantic": {
      "primary": {"value": "{color.primitive.blue.600}"},
      "primary-hover": {"value": "{color.primitive.blue.700}"},
      "background": {"value": "{color.primitive.gray.50}"},
      "text": {"value": "{color.primitive.gray.900}"},
      "text-secondary": {"value": "{color.primitive.gray.600}"}
    },
    "component": {
      "button": {
        "primary": {
          "background": {"value": "{color.semantic.primary}"},
          "text": {"value": "#ffffff"}
        }
      }
    }
  },
  "spacing": {
    "primitive": {
      "1": {"value": "4px"},
      "2": {"value": "8px"},
      "3": {"value": "12px"},
      "4": {"value": "16px"},
      "6": {"value": "24px"},
      "8": {"value": "32px"}
    },
    "semantic": {
      "component-padding": {"value": "{spacing.primitive.4}"},
      "section-gap": {"value": "{spacing.primitive.8}"}
    }
  },
  "typography": {
    "fontFamily": {
      "sans": {"value": "Inter, system-ui, sans-serif"},
      "mono": {"value": "JetBrains Mono, monospace"}
    },
    "fontSize": {
      "xs": {"value": "12px"},
      "sm": {"value": "14px"},
      "base": {"value": "16px"},
      "lg": {"value": "18px"},
      "xl": {"value": "20px"},
      "2xl": {"value": "24px"}
    },
    "lineHeight": {
      "tight": {"value": "1.25"},
      "normal": {"value": "1.5"},
      "relaxed": {"value": "1.75"}
    }
  },
  "borderRadius": {
    "none": {"value": "0"},
    "sm": {"value": "4px"},
    "md": {"value": "8px"},
    "lg": {"value": "12px"},
    "full": {"value": "9999px"}
  },
  "shadow": {
    "sm": {"value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"},
    "md": {"value": "0 4px 6px -1px rgb(0 0 0 / 0.1)"},
    "lg": {"value": "0 10px 15px -3px rgb(0 0 0 / 0.1)"}
  }
}