Skill · em Construir interface
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
Procedência
- Origem: davila7/claude-code-templates
- Caminho:
cli-tool/components/skills/development/design-system-starter - Versão fixada:
57f899e5394bb8ca166f38eacae8f0853cbfe033 - Licença: MIT
- Espelhado em 25/09/2026
- 3 downloads no Claude Code Templates (lido em 25/09/2026)
Antes de instalar
6 arquivos · 71,2 KB · inclui 1 script que executa: templates/component-template.tsx
Instalar na sua CLI
O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.
Claude Code
Neste projeto: instala em .claude/skills/design-system-starter/.
d=".claude/skills/design-system-starter" u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/design-system-starter" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/checklists/design-system-checklist.md" "$u/checklists/design-system-checklist.md" \ -o "$d/README.md" "$u/README.md" \ -o "$d/references/component-examples.md" "$u/references/component-examples.md" \ -o "$d/templates/component-template.tsx" "$u/templates/component-template.tsx" \ -o "$d/templates/design-tokens-template.json" "$u/templates/design-tokens-template.json"
Global: instala em ~/.claude/skills/design-system-starter/.
d="$HOME/.claude/skills/design-system-starter" u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/design-system-starter" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/checklists/design-system-checklist.md" "$u/checklists/design-system-checklist.md" \ -o "$d/README.md" "$u/README.md" \ -o "$d/references/component-examples.md" "$u/references/component-examples.md" \ -o "$d/templates/component-template.tsx" "$u/templates/component-template.tsx" \ -o "$d/templates/design-tokens-template.json" "$u/templates/design-tokens-template.json"
Codex
Neste projeto: instala em .agents/skills/design-system-starter/.
d=".agents/skills/design-system-starter" u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/design-system-starter" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/checklists/design-system-checklist.md" "$u/checklists/design-system-checklist.md" \ -o "$d/README.md" "$u/README.md" \ -o "$d/references/component-examples.md" "$u/references/component-examples.md" \ -o "$d/templates/component-template.tsx" "$u/templates/component-template.tsx" \ -o "$d/templates/design-tokens-template.json" "$u/templates/design-tokens-template.json"
Global: instala em ~/.agents/skills/design-system-starter/.
d="$HOME/.agents/skills/design-system-starter" u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/design-system-starter" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/checklists/design-system-checklist.md" "$u/checklists/design-system-checklist.md" \ -o "$d/README.md" "$u/README.md" \ -o "$d/references/component-examples.md" "$u/references/component-examples.md" \ -o "$d/templates/component-template.tsx" "$u/templates/component-template.tsx" \ -o "$d/templates/design-tokens-template.json" "$u/templates/design-tokens-template.json"
Antigravity
Neste projeto: instala em .agents/skills/design-system-starter/.
d=".agents/skills/design-system-starter" u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/design-system-starter" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/checklists/design-system-checklist.md" "$u/checklists/design-system-checklist.md" \ -o "$d/README.md" "$u/README.md" \ -o "$d/references/component-examples.md" "$u/references/component-examples.md" \ -o "$d/templates/component-template.tsx" "$u/templates/component-template.tsx" \ -o "$d/templates/design-tokens-template.json" "$u/templates/design-tokens-template.json"
Global: instala em ~/.gemini/antigravity-cli/skills/design-system-starter/.
d="$HOME/.gemini/antigravity-cli/skills/design-system-starter" u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/design-system-starter" curl -fsSL --create-dirs \ -o "$d/SKILL.md" "$u/SKILL.md" \ -o "$d/checklists/design-system-checklist.md" "$u/checklists/design-system-checklist.md" \ -o "$d/README.md" "$u/README.md" \ -o "$d/references/component-examples.md" "$u/references/component-examples.md" \ -o "$d/templates/component-template.tsx" "$u/templates/component-template.tsx" \ -o "$d/templates/design-tokens-template.json" "$u/templates/design-tokens-template.json"
Peça ao Rook
Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.design-system-starter
Prévia do SKILL.md
---
name: design-system-starter
description: Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
license: MIT
metadata:
version: 1.0.0
tags: [design-system, ui, components, design-tokens, accessibility, frontend]
---
# Design System Starter
Build robust, scalable design systems that ensure visual consistency and exceptional user experiences.
---
## Quick Start
Just describe what you need:
```
Create a design system for my React app with dark mode support
```
That's it. The skill provides tokens, components, and accessibility guidelines.
---
## Triggers
| Trigger | Example |
|---------|---------|
| Create design system | "Create a design system for my app" |
| Design tokens | "Set up design tokens for colors and spacing" |
| Component architecture | "Design component structure using atomic design" |
| Accessibility | "Ensure WCAG 2.1 compliance for my components" |
| Dark mode | "Implement theming with dark mode support" |
---
## Quick Reference
…