036bc6a52e
Group G — markdown tech-debt cleanup (post-audit 2026-05-02).
- 36 SKILL.md files: added "## When to use" section. Was missing across the
catalog; orchestrator routing by keyword could not auto-dispatch.
- 20 code-implementer agent .md files: added Output Footer block prescribing
RULE 0.16 STATUS-TRUTH MARKER schema in agent's final report. Previously only
code-implementer-rust.md had it; other 27 language/role variants were silent
about the marker, breaking RULE 0.16 §3 status-truth aggregation for non-Rust
batches.
- skills/site-create/: added phase-5-preview.md and phase-6-deploy.md skeleton
files. SKILL.md table-of-contents referenced 7 phases; only 5 existed on disk.
- skills/{ai-animation,rag-pipeline}/skill.md: added migration banner comment
noting they should be SKILL.md (canonical filename). Case-rename via git is a
separate orchestrator task (macOS APFS is case-insensitive; Linux deploy needs
explicit rename).
- 3 deprecated skills (site-builder, competitor-analysis, design-inspiration):
added concrete removed-after dates (was vague "before v2").
- docs/CONVERGENCE-PLAN.md:129: TBD on _blocks/evidence-grading.md duplicate
resolved (file exists, not duplicated).
- docs/DNA-INDEX.md: count edits made then overwritten by auto-encyclopedia-refresh
hook during agent run. The .kei-registry-ignore files in test fixtures (Group F)
are the structural fix; kei-registry walker implementation is the follow-up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
67 lines
2.2 KiB
Markdown
67 lines
2.2 KiB
Markdown
---
|
|
name: design-system
|
|
description: Use when building a design system — tokens, base components, Tailwind config, dark mode, docs
|
|
arguments:
|
|
- name: name
|
|
description: Design system / project name
|
|
required: true
|
|
- name: style
|
|
description: "Visual direction: minimal, playful, corporate, editorial"
|
|
required: false
|
|
---
|
|
|
|
# Design System Workflow
|
|
|
|
## When to use
|
|
|
|
- Building a design system from scratch — tokens, base components, Tailwind config, dark mode, and docs.
|
|
- Establishing a shared visual language across a product or set of related apps.
|
|
- Auditing or extending an existing design system to add missing tokens or components.
|
|
|
|
## Step 1: Define Tokens
|
|
Design tokens (adapt to existing project if any):
|
|
|
|
### Colors
|
|
- Primary: main brand color + 50-950 scale
|
|
- Secondary: accent color + scale
|
|
- Neutral: gray scale for text, borders, backgrounds
|
|
- Semantic: success, warning, error, info
|
|
- Surface: background levels (0, 1, 2, 3)
|
|
|
|
### Typography
|
|
- Font families: heading, body, mono
|
|
- Size scale: xs, sm, base, lg, xl, 2xl, 3xl, 4xl
|
|
- Weight: normal, medium, semibold, bold
|
|
- Line heights: tight, normal, relaxed
|
|
|
|
### Spacing
|
|
- Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24
|
|
|
|
### Other
|
|
- Border radius: none, sm, md, lg, full
|
|
- Shadows: sm, md, lg, xl
|
|
- Transitions: fast (150ms), normal (300ms), slow (500ms)
|
|
|
|
## Step 2: Tailwind Config
|
|
- For Tailwind 4: declare tokens in CSS via `@theme { ... }` (no `tailwind.config.ts`)
|
|
- For Tailwind 3: generate `tailwind.config.ts` with all tokens
|
|
- CSS custom properties for runtime theming
|
|
- Dark mode: `class` strategy with token overrides
|
|
|
|
## Step 3: Base Components
|
|
Core primitives (adjust to framework):
|
|
- Button (primary, secondary, ghost, destructive + sizes)
|
|
- Input (text, textarea, select + states)
|
|
- Card (surface levels, padding variants)
|
|
- Badge (status colors + sizes)
|
|
- Typography components (Heading, Text, Label)
|
|
|
|
## Step 4: Dark Mode
|
|
- Map all color tokens to dark equivalents
|
|
- Test contrast ratios (WCAG AA minimum: 4.5:1 text, 3:1 large text)
|
|
- Surface hierarchy inverts (dark bg, lighter cards)
|
|
|
|
## Step 5: Documentation
|
|
- Token reference table
|
|
- Component API (props, variants, examples)
|
|
- Usage guidelines (do's and don'ts)
|