Skip to main content
affpapa.org
RU EN
skill

design-system-starter — Claude Code skill: setup and guide

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

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/design-system-starter
Open on GitHub

What design-system-starter 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.

What it helps with

  • 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 for the agent

  • 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

How to install design-system-starter

1claude-code-templates

npx claude-code-templates@latest --skill development/design-system-starter

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill design-system-starter -a claude-code

3Manually: put the files in place

~/.claude/skills/design-system-starter/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/design-system-starter/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about design-system-starter

How do I install design-system-starter in Claude Code?

Run npx claude-code-templates@latest --skill development/design-system-starter in your terminal. Alternatively, install it with npx skills add davila7/claude-code-templates --skill design-system-starter -a claude-code or copy files to ~/.claude/skills/design-system-starter/SKILL.md.

What does design-system-starter do?

It guides the creation of design tokens, React component structures, and theme setups. It also supplies guidelines to ensure compliance with WCAG 2.1 AA.

What templates are bundled with the skill?

It includes templates/component-template.tsx for React code, templates/design-tokens-template.json for token data, references/component-examples.md, and an audit checklist in checklists/design-system-checklist.md.

Similar skills

All skills for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set804

The whole set →
semantic-kernel-dotnet A Claude subagent that writes and refactors .NET code for Semantic Kernel, checking the current Microsoft docs instead of trusting its own memory of the API. 189installs plan-writing Breaks work into short tasks, each with its own verification step. Useful for feature work, refactoring, or any multi-step job. 188installs skill-creation-guide A guide to planning and updating Claude Code skills, from the required SKILL.md fields to optional scripts, references, and assets. 188installs microsoft-agent-framework-python A Claude subagent that writes and refactors Python code on Microsoft Agent Framework: agents, workflows, and migration from Semantic Kernel or AutoGen. 188installs initref Builds reference docs about how the project is implemented into a /ref directory and links them from CLAUDE.md. 186installs file-uploads A Claude skill that guides the agent through file uploads and cloud storage: S3, Cloudflare R2, presigned URLs, multipart transfers and image optimization. 185installs code-permutation-tester Runs several implementation approaches through simulation and scored quality gates so you pick one before writing the real code. 184installs constraint-modeler Model system limits, map their dependencies, and explore optimization options. Use it to assess business, technical, regulatory, or resource constraints. 184installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor