594fccc80a
Plugin pairs with Symphony — Composer's output (issues in the project's tracker) is Symphony's input. State-aware /composer command walks the user through 11 phases: concept, users (with workflow probing for hidden actors), requirements/NFR/IA, design system, interaction design, flows, mocks, architecture, stories, roadmap, load. Each phase produces a reviewable artifact in docs/planning/ (or, for design and interaction, a project-local skill — see below). Architecture is intentionally LAST, after the spec is complete. Mocks are JSX/TSX regardless of final stack and pass a "text feasibility" audit — every visible string is categorized (static/computed/authored), computed strings are traced to source data, and any string implying an unspecified feature halts the commit. Design system and interaction design are produced as PROJECT-LOCAL SKILLS in .claude/skills/<slug>-design-system/ and .claude/skills/<slug>-interaction-design/, not as docs in docs/planning/. Skills auto-load via description matching whenever UI work happens; a reference doc gets read once and drifts out of context. The mocks skill imports tokens directly from the design-system skill for a single source of truth across mocks and (eventually) real code. ui-system is currently a PLACEHOLDER — captures the minimum needed for mocks to proceed with <TBD: ...> markers as a return-pass worklist. Full interview specification is the next pass. Council touchpoints baked in: PM/skeptic/end-user after requirements, end-user/a11y after mocks, full architecture council after architecture, plus auto-additions (legal-triage on regulated data, privacy-advocate on PII, finance-controller on money flows). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
95 lines
3.0 KiB
Markdown
95 lines
3.0 KiB
Markdown
---
|
|
name: <SLUG>-design-system
|
|
description: Design system for the <PROJECT NAME> project. Color tokens, typography, spacing, radii, shadows, motion durations, and component vocabulary. Load and apply whenever building UI for this project — generating mocks, writing components, picking colors, configuring Tailwind, styling native screens, building themes, designing CSS, or making any visual decision. The canonical visual reference for this project; if anything visible is being touched, this skill should be in context. Pairs with <SLUG>-interaction-design.
|
|
---
|
|
|
|
# <PROJECT NAME> design system
|
|
|
|
> **Status: <draft | reviewed | locked>**
|
|
> Generated by Composer's `ui-system` phase. Re-running that phase
|
|
> updates this skill (with confirmation).
|
|
|
|
## How to use this skill
|
|
|
|
Whenever you generate or edit UI for this project — a mock, a real
|
|
component, a theme, a CSS file — read this SKILL.md and the sidecar
|
|
files first, then use the tokens. Do not hardcode values. Do not
|
|
introduce new components without proposing them here first.
|
|
|
|
Sidecar files in this skill directory:
|
|
- `tokens.ts` — machine-readable token export. Import in mocks/code.
|
|
- `components.md` — component vocabulary with anatomy.
|
|
|
|
## Visual posture
|
|
|
|
<!-- One or two sentences describing the feel. "Quiet, dense, monochromatic with a single brand accent." Or "Playful, generous spacing, expressive type." -->
|
|
|
|
<TBD: visual posture>
|
|
|
|
## Color
|
|
|
|
### Brand
|
|
- Primary: `<#hex>` — <name>
|
|
- (Secondary, if any): `<#hex>` — <name>
|
|
|
|
### Neutrals
|
|
- Tone: <warm | cool | true>
|
|
- Scale: 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 / 950
|
|
|
|
### Semantic
|
|
| Role | Value |
|
|
|---|---|
|
|
| Success | `<#hex>` |
|
|
| Warning | `<#hex>` |
|
|
| Error | `<#hex>` |
|
|
| Info | `<#hex>` |
|
|
|
|
### Dark mode
|
|
<TBD: yes / no / system-following + token mapping>
|
|
|
|
## Typography
|
|
|
|
- **Display family**: <name>, weights <list>
|
|
- **Body family**: <name>, weights <list>
|
|
- **Scale base**: <px>, ratio <1.125 | 1.2 | 1.25 | 1.333>
|
|
- **Sizes**: xs / sm / base / lg / xl / 2xl / 3xl / 4xl
|
|
- **Line-height**: tight for display, normal for body, relaxed for long-form prose
|
|
|
|
See `tokens.ts` for exact px values.
|
|
|
|
## Spacing
|
|
|
|
- **Base unit**: <4px | 8px>
|
|
- **Scale (in base units)**: 0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24
|
|
|
|
## Radii
|
|
|
|
- `sm`, `md`, `lg`, `pill`, `full` — values in `tokens.ts`.
|
|
|
|
## Shadows
|
|
|
|
- `xs / sm / md / lg / xl` — values in `tokens.ts`.
|
|
- (Or: "flat — no shadows" if the posture is flat.)
|
|
|
|
## Visual motion
|
|
|
|
- **Default duration**: <ms>
|
|
- **Default easing**: <named curve or cubic-bezier>
|
|
|
|
Behavioral motion (when things animate, what does and doesn't) lives
|
|
in the interaction-design skill.
|
|
|
|
## Components
|
|
|
|
See `components.md` in this directory for the full vocabulary and
|
|
anatomy. The TL;DR list:
|
|
|
|
- Button (primary / secondary / ghost / destructive / link)
|
|
- Input (text / textarea / select / checkbox / radio / toggle)
|
|
- Card / Surface
|
|
- (project-specific components from `ia.md`)
|
|
|
|
## TBD on return
|
|
|
|
- <TBD: anything the placeholder pass couldn't answer>
|