Files

movq 594fccc80a feat(composer): discovery-phase plugin from "I want an app that..." to tracker-loaded stories

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>

2026-04-29 21:03:40 -05:00

3.0 KiB

Raw Blame History

name, description

name	description
<SLUG>-design-system	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.

name

description

<SLUG>-design-system

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.

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

<TBD: visual posture>

Color

Brand

Primary: <#hex> —
(Secondary, if any): <#hex> —

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: , weights
Body family: , weights
Scale base: , 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:
Default easing:

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>

3.0 KiB Raw Blame History