Agent-Skills.md

Agent Skills: Design System Lead

Expert design systems leadership covering component libraries, design tokens, documentation, and design-development collaboration.

UncategorizedID: borghei/claude-skills/design-system-lead

Repository

borghei/claude-skills
borgheiLicense: MIT
1

Install this agent skill to your local

pnpm dlx add-skill https://github.com/borghei/Claude-Skills/tree/HEAD/product-team/design-system-lead

Skill Files

Browse the full folder contents for design-system-lead.

Download Skill

Loading file tree…

product-team/design-system-lead/SKILL.md

Skill Metadata

Name
design-system-lead
Description
>

Design System Lead

The agent operates as a senior design system lead, delivering scalable component libraries, token architectures, governance processes, and adoption strategies for cross-functional product teams.

Workflow

  1. Assess maturity - Evaluate current design system maturity (Emerging, Defined, Managed, or Optimized). Audit existing patterns, inconsistencies, and custom components. Checkpoint: maturity level is documented with evidence.
  2. Define token architecture - Build a three-tier token structure: primitive (raw values), semantic (purpose-based aliases), and component (scoped to specific UI elements). Checkpoint: every semantic token references a primitive; no hardcoded values remain.
  3. Build component library - Design and implement components starting with primitives (Button, Input, Icon), then composites (Card, Modal, Dropdown), then patterns (Forms, Navigation, Tables). Checkpoint: each component has variants, sizes, states, props table, and accessibility requirements.
  4. Document everything - Create usage guidelines, code examples, do/don't rules, and accessibility notes for every component. Checkpoint: documentation covers installation, basic usage, all variants, and at least one accessibility note.
  5. Establish governance - Define the RFC-to-release contribution process. Set versioning strategy (SemVer). Checkpoint: contribution process is published and reviewed by both design and engineering leads.
  6. Measure adoption - Track coverage (% of products using DS), consistency (token compliance rate), efficiency (time to build), and quality (a11y score, bug reports). Checkpoint: adoption dashboard is updated monthly.

Design System Maturity Model

| 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 |

Token Architecture

Three-tier token system (primitive -> semantic -> component):

{
  "color": {
    "primitive": {
      "blue": {
        "50": {"value": "#eff6ff"},
        "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}"}
    },
    "component": {
      "button-primary-bg": {"value": "{color.semantic.primary}"},
      "button-primary-text": {"value": "#ffffff"}
    }
  },
  "spacing": {
    "primitive": {"1": {"value": "4px"}, "2": {"value": "8px"}, "4": {"value": "16px"}, "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": {"sm": {"value": "14px"}, "base": {"value": "16px"}, "lg": {"value": "18px"}, "xl": {"value": "20px"}}
  }
}

Example: Cross-Platform Token Generation

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'dist/css/',
      files: [{ destination: 'variables.css', format: 'css/variables' }]
    },
    scss: {
      transformGroup: 'scss',
      buildPath: 'dist/scss/',
      files: [{ destination: '_variables.scss', format: 'scss/variables' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'dist/ios/',
      files: [{ destination: 'StyleDictionaryColor.swift', format: 'ios-swift/class.swift' }]
    },
    android: {
      transformGroup: 'android',
      buildPath: 'dist/android/',
      files: [{ destination: 'colors.xml', format: 'android/colors' }]
    }
  }
};

Component Library 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)

Component Specification: Button

## Variants
- Primary: main action
- Secondary: supporting action
- Tertiary: low-emphasis action
- Destructive: dangerous/irreversible action

## Sizes
- Small: 32px height, 8px/12px padding
- Medium: 40px height (default), 10px/16px padding
- Large: 48px height, 12px/24px padding

## States
Default -> Hover -> Active -> Focus -> Disabled -> Loading

## Props
| Prop      | Type        | Default   | Description      |
|-----------|-------------|-----------|------------------|
| variant   | string      | 'primary' | Visual style     |
| size      | string      | 'medium'  | Button size      |
| disabled  | boolean     | false     | Disabled state   |
| loading   | boolean     | false     | Loading state    |
| leftIcon  | ReactNode   | -         | Leading icon     |
| onClick   | function    | -         | Click handler    |

## Accessibility
- Minimum touch target: 44x44px
- Visible focus ring on keyboard navigation
- aria-label required for icon-only buttons
- aria-busy="true" when loading

Example: Button Implementation (React + CVA)

import { cva, type VariantProps } from 'class-variance-authority';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-sm',
        lg: 'h-12 px-6 text-base',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  }
);

Governance: Contribution Process

1. REQUEST  - Create RFC describing problem and proposed component/change
2. REVIEW   - Design review + engineering review + accessibility review
3. BUILD    - Figma component + code implementation + unit tests + visual regression
4. DOCUMENT - API docs + usage guidelines + Storybook stories
5. RELEASE  - SemVer bump + changelog + announcement

Versioning Strategy

| Change Type | Version Bump | Examples | |-------------|-------------|---------| | Breaking | MAJOR | Component API change, token rename | | New feature | MINOR | New component, new variant, new token | | Bug fix | PATCH | Style fix, docs update, perf improvement |

Adoption Metrics Dashboard

Design System Health
  Adoption: 82% (12/15 products)
  Component Usage: 78% (45 components)
  Token Compliance: 95%
  Overrides: 23 (down from 38)

  Efficiency
  Avg time to build new feature: 3.2 days (was 5.1)
  Custom components created this quarter: 4 (was 12)

Scripts

# Token generator
python scripts/token_gen.py --source tokens.json --output dist/

# Component scaffolder
python scripts/component_scaffold.py --name DatePicker --category composite

# Adoption analyzer
python scripts/adoption_analyzer.py --repos repos.yaml

# Visual regression test
python scripts/visual_regression.py --baseline main --compare feature/new-button

Reference Materials

  • references/token_architecture.md - Token system design
  • references/component_patterns.md - Component best practices
  • references/governance.md - Contribution guidelines
  • references/figma_setup.md - Figma library management

Tool Reference

token_gen.py

Generates a three-tier design token system (primitive, semantic, component) from a brand color. Supports CSS, SCSS, and JSON output. Includes WCAG contrast ratio checking.

| Flag | Type | Default | Description | |------|------|---------|-------------| | --color, -c | string | #0066CC | Brand color in hex | | --format, -f | choice | summary | Output format: json, css, scss, summary | | --tiers, -t | choice | all | Token tiers: all, primitive, semantic, component | | --output, -o | string | (stdout) | Output directory for generated files | | --json | flag | False | Shortcut for --format json |

python scripts/token_gen.py --color "#0066CC"
python scripts/token_gen.py --color "#0066CC" --format css --output dist/
python scripts/token_gen.py --color "#8B4513" --tiers primitive --json

component_scaffold.py

Generates component documentation scaffolds with props tables, variants, states, accessibility requirements, anatomy, usage guidelines, and code examples.

| Flag | Type | Default | Description | |------|------|---------|-------------| | --name, -n | string | (required) | Component name in PascalCase | | --category, -c | choice | (required) | Category: primitive, composite, pattern | | --variants, -v | string | (category default) | Comma-separated variant names | | --sizes, -s | string | sm,md,lg | Comma-separated size names | | --json | flag | False | Output as JSON |

python scripts/component_scaffold.py --name Button --category primitive
python scripts/component_scaffold.py --name DataTable --category pattern --variants "default,compact,striped"
python scripts/component_scaffold.py --name Modal --category composite --json

adoption_analyzer.py

Analyzes design system adoption across products by evaluating component coverage, token compliance, custom overrides, and accessibility scores. Produces a health dashboard with per-product and portfolio-level analysis.

| Flag | Type | Default | Description | |------|------|---------|-------------| | input | positional | (required) | CSV file with adoption data or "sample" | | --threshold, -t | int | 75 | Health score threshold for flagging | | --json | flag | False | Output as JSON |

CSV columns: product, total_components, ds_components, total_tokens, ds_tokens, custom_overrides, a11y_score, last_audit

python scripts/adoption_analyzer.py sample
python scripts/adoption_analyzer.py adoption_data.csv
python scripts/adoption_analyzer.py adoption_data.csv --threshold 80 --json

Troubleshooting

| Problem | Cause | Solution | |---------|-------|----------| | Token overrides in production | Teams bypassing design system | Run adoption_analyzer monthly; add lint rules for hardcoded values | | Inconsistent component behavior across products | Version drift | Enforce SemVer; automate DS dependency updates in CI | | Low adoption in older products | Migration cost perceived as too high | Prioritize high-traffic pages; create migration guides per product | | Token naming conflicts | No naming convention enforced | Adopt CTI (Category-Type-Item) naming; document in governance | | Component API breaking changes | Insufficient versioning discipline | Use codemods for migration; deprecation period of 2 minor versions | | Designers and developers out of sync | Figma/code token drift | Use Tokens Studio plugin; sync on every release | | Contribution bottleneck | RFC review queue backed up | Set SLA for reviews (48h); rotate reviewers weekly |

Success Criteria

| Criterion | Target | How to Measure | |-----------|--------|----------------| | Component coverage | >80% across all products | adoption_analyzer component coverage metric | | Token compliance | >90% (no hardcoded values) | adoption_analyzer token compliance metric | | Custom overrides | Trending downward quarter-over-quarter | Track total overrides in adoption report | | Time to build new feature | 30%+ reduction vs pre-DS baseline | Compare sprint velocity before/after DS adoption | | Accessibility score | >85% across all products | adoption_analyzer a11y score | | Contribution rate | 2+ external contributions per quarter | Track merged RFCs from non-core-team members | | Design-dev handoff time | <1 day for standard components | Measure time from design approval to code PR |

Scope & Limitations

In scope:

  • Three-tier token architecture design and generation
  • Component library structure and documentation scaffolding
  • Adoption tracking and health reporting
  • Cross-platform token export (CSS, SCSS, JSON)
  • Governance process definition
  • WCAG contrast ratio validation

Out of scope:

  • Visual regression testing execution (use Chromatic, Percy, or BackstopJS)
  • Figma plugin development (use Tokens Studio for token sync)
  • Runtime theme switching implementation (framework-specific)
  • Icon library creation and SVG optimization
  • Motion design and animation library
  • Component implementation code (scaffold generates docs, not runtime code)

Integration Points

| Tool / Platform | Integration Method | Use Case | |-----------------|-------------------|----------| | Figma / Tokens Studio | Import token_gen JSON output | Sync design tokens between design and code | | Style Dictionary | Use token_gen JSON as source | Build multi-platform tokens (iOS, Android, web) | | Storybook | component_scaffold output as stories template | Auto-generate component documentation | | Chromatic / Percy | Pair with component_scaffold test checklist | Visual regression testing pipeline | | CI/CD | adoption_analyzer --json in pipeline | Automated adoption health checks on PRs | | Tailwind / CSS-in-JS | token_gen CSS/JSON export | Theme configuration from design tokens |