# design-system-starter

Generates design tokens, React component hierarchy, and accessibility rules to structure an application design system.

- skill · `type=skill` · Claude Code · 186 installs
- Author: davila7
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/design-system-starter
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/design-system-starter

## What it does

The skill provides scaffolding for UI foundations. It writes design tokens for typography, palettes, elevation, and spacing using the W3C JSON format. Values are organized into primitive scales and semantic aliases so interface changes stay manageable.

Inside the package are reference files: `templates/design-tokens-template.json`, a starter React component in `templates/component-template.tsx`, and `checklists/design-system-checklist.md` for audits. Components follow atomic design principles from atoms to organisms, configured with CSS custom properties or ThemeProvider for dark mode.

Interface elements require strict contrast ratios, demanding a minimum 4.5:1 ratio for regular body text under WCAG 2.1 AA.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/design-system-starter
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill design-system-starter -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/design-system-starter/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/design-system-starter/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/design-system-starter/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/design-system-starter/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates design-system-starter
```

2. **Manually: put the files in place**
- File: `.github/skills/design-system-starter/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/design-system-starter
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/design-system-starter/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/design-system-starter

## When to use it
- generate W3C-compliant design tokens for colors, typography, and spacing
- construct atomic component hierarchies in React
- configure dark mode theming with CSS variables or ThemeProvider
- audit interface elements against WCAG 2.1 AA contrast requirements

## Example prompts
- Set up a design system for my React project with dark mode support
- Generate color and spacing tokens using the W3C JSON specification
- Audit button contrast ratios against WCAG 2.1 AA standards

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 804 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md