mcpField
D
design-system-creation

design-system-creation

github.com/secondskyDesign & UI240492 installsUpdated 5w ago
Repository

About design-system-creation

A skill for creating design systems that organize tokens, components, and patterns for consistent UI development across teams. It also outlines documentation and governance practices, including accessibility and dark-mode guidance.

Key features

  1. 01Design tokens for visual foundations
  2. 02Component and pattern layering
  3. 03Component documentation structure
  4. 04Review and contribution governance
  5. 05Accessibility and dark-mode guidance

Use cases

  1. 01Establishing shared UI foundations across teams
  2. 02Documenting reusable component variants
  3. 03Defining component review and release processes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/secondsky/claude-skills --skill design-system-creation

After installing, type/design-system-creationin Claude Code to confirm it loaded.

Details

From the project README

Design System Creation

Build comprehensive design systems for consistent UI development across teams.

Design System Layers

  1. Foundation: Colors, typography, spacing, elevation
  2. Components: Buttons, inputs, cards, navigation
  3. Patterns: Forms, layouts, empty states

Foundation - Design Tokens

:root {
  /* Colors */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;

  /* Semantic colors */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

Component Documentation

## Button

### Anatomy
- Container (padding, background)
- Label (text)
- Icon (optional)

### Variants
- Primary: Main actions
- Secondary: Alternative actions
- Ghost: Subtle actions

### States
- Default, Hover, Active, Disabled, Loading

### Accessibility
- Role: button
- Keyboard: Enter/Space to activate
- Focus: Visible focus ring

Component Example (React)

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
  disabled?: boolean;
  children: React.ReactNode;
}

function Button({ variant = 'primary', size = 'md', loading, disabled, children }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled || loading}
      aria-busy={loading}
    >
      {loading ? <Spinner /> : children}
    </button>
  );
}

Governance

  • Review Committee: Approves new components
  • Contribution Process: RFC → Review → Implementation
  • Versioning: Semantic versioning for releases
  • Deprecation: 3-month notice with migration guide

Best Practices

  • Start with foundational tokens
  • Document every component thoroughly
  • Ensure WCAG 2.1 AA compliance
  • Support dark mode from the start
  • Include usage guidelines with do/don't examples

Comments

Markdown supported