About

Imported from secondsky/claude-skills (plugins/design-system-creation/skills/design-system-creation/SKILL.md) via skills.sh. Install upstream with npx skills add secondsky/claude-skills --skill design-system-creation. Copyright stays with the author (MIT).

Design System Creation

Name: design-system-creation
Author: secondsky

Build comprehensive design systems for consistent UI development across teams.

Design System Layers

Foundation: Colors, typography, spacing, elevation
Components: Buttons, inputs, cards, navigation
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

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/secondsky-claude-skills-design-system-creation/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

secondsky-claude-skills-design-system-creation.ocm.jsonjson

{
  "ocm": "1",
  "id": "secondsky-claude-skills-design-system-creation",
  "kind": "skill",
  "name": "design-system-creation",
  "description": "| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.",
  "publisher": "secondsky",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "design-tokens",
      "typography",
      "spacing",
      "color-palette",
      "components",
      "patterns",
      "variables",
      "dark-mode",
      "theming"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/secondsky/claude-skills",
      "path": "plugins/design-system-creation/skills/design-system-creation/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/secondsky/claude-skills/design-system-creation",
      "key": "secondsky/claude-skills/plugins/design-system-creation/skills/design-system-creation/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Design System Creation\n\nBuild comprehensive design systems for consistent UI development across teams.\n\n## Design System Layers\n\n1. **Foundation**: Colors, typography, spacing, elevation\n2. **Components**: Buttons, inputs, cards, navigation\n3. **Patterns**: Forms, layouts, empty states\n\n## Foundation - Design Tokens\n\n```css\n:root {\n  /* Colors */\n  --color-primary-50: #eff6ff;\n  --color-primary-500: #3b82f6;\n  --color-primary-900: #1e3a8a;\n\n  /* Semantic colors */\n  --color-success: #22c55e;\n  --color-warning: #f59e0b;\n  --color-error: #ef4444;\n\n  /* Typography */\n  --font-sans: 'Inter', sys",
  "cost": {
    "context_tokens": 603
  }
}

Fetch it by URL: GET /api/v1/registry/secondsky-claude-skills-design-system-creation/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.