KeiSeiKit-1.0/skills/design-system/SKILL.md
Parfii-bot ddd13e6422 docs: SKILL.md triggers + STATUS-TRUTH footer + phase placeholders
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>
2026-05-02 21:41:41 +08:00

2.2 KiB

name description arguments
design-system Use when building a design system — tokens, base components, Tailwind config, dark mode, docs
name description required
name Design system / project name true
name description required
style Visual direction: minimal, playful, corporate, editorial 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)