@radicool/throughline 0.12.1 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +2 -2
  2. package/adapters/codex/AGENTS.md +2 -1
  3. package/adapters/codex/prompts/component-builder.md +80 -2
  4. package/adapters/codex/prompts/design-system-audit.md +20 -0
  5. package/adapters/codex/prompts/document-component.md +26 -0
  6. package/adapters/codex/prompts/icon-system-builder.md +10 -2
  7. package/adapters/codex/prompts/repository-builder.md +14 -0
  8. package/adapters/codex/prompts/retrofit-planner.md +21 -1
  9. package/adapters/codex/prompts/storybook-chromatic-builder.md +52 -7
  10. package/adapters/codex/prompts/token-builder.md +16 -0
  11. package/adapters/codex/prompts/token-sheet-builder.md +15 -1
  12. package/adapters/codex/prompts/token-sync-layer.md +14 -7
  13. package/adapters/cursor/.cursor/commands/document-component.md +26 -0
  14. package/adapters/cursor/.cursor/rules/component-builder.mdc +80 -2
  15. package/adapters/cursor/.cursor/rules/design-system-audit.mdc +20 -0
  16. package/adapters/cursor/.cursor/rules/icon-system-builder.mdc +10 -2
  17. package/adapters/cursor/.cursor/rules/repository-builder.mdc +14 -0
  18. package/adapters/cursor/.cursor/rules/retrofit-planner.mdc +22 -2
  19. package/adapters/cursor/.cursor/rules/storybook-chromatic-builder.mdc +52 -7
  20. package/adapters/cursor/.cursor/rules/token-builder.mdc +16 -0
  21. package/adapters/cursor/.cursor/rules/token-sheet-builder.mdc +15 -1
  22. package/adapters/cursor/.cursor/rules/token-sync-layer.mdc +14 -7
  23. package/adapters/generic/AGENTS.md +2 -1
  24. package/adapters/generic/commands/document-component.md +26 -0
  25. package/adapters/generic/skills/component-builder/SKILL.md +80 -2
  26. package/adapters/generic/skills/design-system-audit/SKILL.md +20 -0
  27. package/adapters/generic/skills/icon-system-builder/SKILL.md +10 -2
  28. package/adapters/generic/skills/repository-builder/SKILL.md +14 -0
  29. package/adapters/generic/skills/retrofit-planner/SKILL.md +21 -1
  30. package/adapters/generic/skills/storybook-chromatic-builder/SKILL.md +52 -7
  31. package/adapters/generic/skills/token-builder/SKILL.md +16 -0
  32. package/adapters/generic/skills/token-sheet-builder/SKILL.md +15 -1
  33. package/adapters/generic/skills/token-sync-layer/SKILL.md +14 -7
  34. package/package.json +1 -1
  35. package/references/agent-routing.md +70 -0
  36. package/references/component-doc-archetypes.md +86 -0
  37. package/references/component-doc-schema.md +136 -0
  38. package/references/figma-component-standards.md +24 -0
  39. package/references/figma-scripting.md +62 -0
  40. package/references/manifest-schema.md +27 -5
  41. package/references/sync-adapters.md +5 -0
  42. package/scripts/README.md +11 -0
  43. package/scripts/build-docs-digest.mjs +74 -0
  44. package/scripts/docs-check.mjs +103 -0
  45. package/scripts/lib/doc-record.mjs +54 -0
@@ -173,8 +173,16 @@ Execute the library's mechanism:
173
173
  install/run and subset selection.
174
174
  - **Custom SVGs:** batch-import and componentize them.
175
175
 
176
- This is a Figma-authoring step — sequential, with the user in the loop; no
177
- subagents. When scripting the SVG-to-component pass, follow
176
+ **Execution model sequential Figma-lane subagent with model routing.** If your
177
+ host supports subagent dispatch, run the bring-in + componentize pass as a
178
+ **`figma-executor`** dispatch (balanced tier): preflight `figma_get_status`,
179
+ never run two Figma-touching subagents at once (the single bridge is
180
+ concurrency-1), build into a `WIP:` frame and finalize by build-verify-then-
181
+ replace with the read-back audit in Step 3. The subset + naming contract were
182
+ already settled with the user in Step 1, so no separate architect dispatch is
183
+ needed here. Route per `.throughline/references/agent-routing.md`. If
184
+ your host has no subagent dispatch, script the SVG-to-component pass inline,
185
+ sequentially, with the user in the loop. Either way, follow
178
186
  `.throughline/references/figma-scripting.md`.
179
187
 
180
188
  ## Step 3 — Normalize: page, naming, sizing, variants
@@ -110,6 +110,20 @@ in it" — they already have a working local repo.
110
110
  On success, set `workspace.stage` and `repo.stage` to `github` and record
111
111
  `repo.remote`. Append `repository-builder` to `completedSkills`.
112
112
 
113
+ ### Adopt the documentation store
114
+
115
+ The folder-resident documentation store at `design-system/docs/` (canonical
116
+ `*.doc.json` records plus the generated `index.json` + `llms.txt`) already exists
117
+ from the Figma phase. Bring it under version control as-is — **do not relocate it**
118
+ (the path is stable across folder→repo, and every manifest `doc.path` points at it).
119
+ Ensure it is committed (not git-ignored).
120
+
121
+ Wire the documentation drift gate into the repo's verification so it runs in CI
122
+ alongside `tokens:validate`: add a `docs:check` step (the `docs-check.mjs` script is
123
+ installed by `storybook-chromatic-builder`; if code hasn't been set up yet, note
124
+ that the gate comes online with the Storybook step). `docs:check` exits non-zero on
125
+ drift; Figma surfaces report `edit-unverified` and are checked in a Figma session.
126
+
113
127
  ## Secrets: the part most people have never done
114
128
 
115
129
  This is where users with low coding experience get stuck — many have never made
@@ -1,10 +1,11 @@
1
1
  ---
2
- description: "Orchestrate a full brownfield design-system retrofit end to end — audit, refine variables in place, rebind components, sync, capture a Chromatic baseline, retrofit the code with dual output, then remove the old tokens only after a zero-reference grep — with a human confirmation gate between every phase. Use this when the user wants to run a complete retrofit, migrate a mature codebase and populated Figma file onto tokens, resume an in-progress retrofit, or be walked through the safe retrofit sequence. Also trigger after design-system-audit has sized the system, or when figma-environment-setup detects an in-progress retrofit. Make sure to use this whenever someone wants the guided, gated, multi-session brownfield retrofit rather than running the individual skills by hand."
2
+ description: "Orchestrate a full brownfield design-system retrofit end to end — audit, refine variables in place, rebind components, sync, capture a Chromatic baseline, retrofit the code with dual output, adopt existing documentation then fill gaps, then remove the old tokens only after a zero-reference grep — with a human confirmation gate between every phase. Use this when the user wants to run a complete retrofit, migrate a mature codebase and populated Figma file onto tokens, resume an in-progress retrofit, or be walked through the safe retrofit sequence. Also trigger after design-system-audit has sized the system, or when figma-environment-setup detects an in-progress retrofit. Make sure to use this whenever someone wants the guided, gated, multi-session brownfield retrofit rather than running the individual skills by hand."
3
3
  alwaysApply: false
4
4
  ---
5
5
  # Retrofit planner (orchestrator)
6
6
 
7
- Sequences a brownfield retrofit through the safe 7-phase order, gating each phase on a
7
+ Sequences a brownfield retrofit through the safe seven-phase order (with `docs` inserted
8
+ as a gated Phase 6.5), gating each phase on a
8
9
  human confirmation. Like `component-pipeline`, this skill holds **zero domain logic of
9
10
  its own** — it is a sequencer that invokes the real skills and the phase work, and only
10
11
  updates the manifest fields it owns (`retrofit.*`, `completedSkills`). All the
@@ -106,6 +107,25 @@ triad as you go — `check-types`, `build-storybook` + Chromatic, **and run the
106
107
  + spot-check 5–7 routes (the build alone is blind to story-unreachable SCSS). **Gate:**
107
108
  confirm the triad passes before continuing.
108
109
 
110
+ ### Phase 6.5 — `docs` (adopt existing documentation, then fill gaps)
111
+
112
+ Set `retrofit.phase = "docs"`. Bring the documentation layer onto the system's
113
+ components **adopt-first**, so no existing human-written doc is lost:
114
+
115
+ 1. **Adopt.** For each component, run the doc-authoring ingest (Step 4.5 of
116
+ `component-builder`): read existing code JSDoc/MDX/README and Figma
117
+ `description`, seed the canonical `.doc.json` marked `provenance: imported`, and
118
+ stamp fingerprints. This first pass **claims** existing content — it is not a
119
+ re-render and must not overwrite it.
120
+ 2. **Fill gaps.** Run the remaining generation layers (infer → enrich → specialize
121
+ → interview) only for blocks the adoption did not populate; the user approves.
122
+ 3. **Project + gate.** Render the code surfaces (Step 5.5 of
123
+ `storybook-chromatic-builder`), run `docs:digest`, and run `docs:check` — it
124
+ should pass (surfaces just rendered) with Figma surfaces `edit-unverified`.
125
+
126
+ Confirm with the user before writing, consistent with every other phase. On a large
127
+ system, size the batch from `audit.docSurface` and adopt in reviewable chunks.
128
+
109
129
  ### Phase 7 — `cleanup`
110
130
 
111
131
  Remove the old token outputs **only after** the repo-wide token-removal guard returns
@@ -31,6 +31,16 @@ system). Wire it to consume `packages/tokens` output so stories render with the
31
31
  real design tokens (import the generated CSS/theme). Checkpoint: confirm
32
32
  Storybook runs and shows the token-themed canvas.
33
33
 
34
+ Install the documentation scripts alongside the token scripts (copy from the
35
+ plugin's `scripts/` — `build-docs-digest.mjs`, `docs-check.mjs`, and
36
+ `lib/doc-record.mjs` — into the repo and register npm scripts):
37
+
38
+ - `"docs:digest": "node scripts/build-docs-digest.mjs"`
39
+ - `"docs:check": "node scripts/docs-check.mjs"`
40
+
41
+ These are the documentation analog of `tokens:validate`; see
42
+ `.throughline/scripts/README.md`.
43
+
34
44
  **pnpm build-script allowlist (first-run gotcha).** On pnpm workspaces, the
35
45
  `@storybook/react-vite` install pulls `esbuild`, whose postinstall is blocked by
36
46
  pnpm's default `onlyBuiltDependencies` policy — Storybook then fails to start with a
@@ -71,13 +81,19 @@ Match the deterministic naming so `Button` (Figma) ↔ `Button` (code).
71
81
 
72
82
  ## Step 3 — Generate stories (subagent-driven, parallel)
73
83
 
74
- Story generation is independent and verifiable per component, so use the
75
- **subagent-driven model** (code-gen skills parallelize; this is the opposite of
76
- the sequential Figma-authoring skills): dispatch one subagent per component to
77
- write its stories a story per meaningful variant, controls wired to props,
78
- slot props demonstrated. Each subagent verifies its work (the story builds and
79
- renders). Two-stage review (does it match the component spec; is it quality
80
- code) before combining.
84
+ Story generation is independent and verifiable per component, so it
85
+ parallelizes one worker per component, unlike the concurrency-1 Figma lane.
86
+
87
+ **Execution modelparallel subagents with model routing.** If your host
88
+ supports subagent dispatch, dispatch **one `code-executor` per component** (fast
89
+ tier) to write its stories a story per meaningful variant, controls wired to
90
+ props, slot props demonstrated — each verifying its own work (the story builds
91
+ and renders); then a **`reviewer`** (balanced) two-stage pass (does it match the
92
+ component spec; is it quality code) before combining. Route per
93
+ `.throughline/references/agent-routing.md`, and only dispatch a
94
+ component once its story spec is complete enough to transcribe. If your host has
95
+ no subagent dispatch, generate and verify each component's stories inline
96
+ instead.
81
97
 
82
98
  **Controls must actually drive the component (args-through render).** A `render`
83
99
  that ignores its args silently breaks the Controls panel — the toggle writes to
@@ -168,6 +184,32 @@ mode shows the real code. It's plan-gated (Figma Organization/Enterprise).
168
184
  run after the user publishes. This does **not** block the code side: implement
169
185
  each slot prop from the recorded slot contract regardless of the Figma dropdown.
170
186
 
187
+ ## Step 5.5 — Render documentation to code
188
+
189
+ For each component that has a canonical record
190
+ (`design-system/docs/components/<Name>.doc.json`), render the code-side surfaces
191
+ from it (read `.throughline/references/component-doc-schema.md` for the
192
+ projection contract):
193
+
194
+ - **Storybook autodocs (MDX).** Generate `<Name>.mdx` next to the component (e.g.
195
+ `packages/ui/src/<Name>/<Name>.mdx`) rendering summary, description,
196
+ when-to-use/not, do's/don'ts, accessibility, and a variant/state table. Put the
197
+ record's fingerprint in MDX frontmatter as `docFingerprint: <fp>`.
198
+ - **JSDoc.** Add a doc comment to the code component from `summary` + `description`
199
+ and per-prop descriptions from `variants`/`states` meanings, so `argTypes`
200
+ descriptions surface in the Storybook controls table.
201
+ - **AI digest.** Run `docs:digest` to (re)generate `design-system/docs/index.json`
202
+ + `design-system/docs/llms.txt` from all records.
203
+
204
+ **Update the manifest:** add the `storybookMdx` surface to
205
+ `components.meta[<Name>].doc.surfaces` as `{ src: <fp>, render: <hash of the MDX
206
+ file>, file: "<repo-relative MDX path>" }`.
207
+
208
+ **Wire the gate.** Ensure `docs:check` is part of the repo's verification (a CI
209
+ step and/or a Turbo task). It compares every surface against its record and exits
210
+ non-zero on drift; Figma surfaces report `edit-unverified` (checked live in a Figma
211
+ session). Run `docs:check` once here and confirm it passes before handing off.
212
+
171
213
  ## Step 6 — Finalize component status (Figma write-back)
172
214
 
173
215
  A component built and storied here is now **done** — but its Figma doc card was
@@ -191,6 +233,9 @@ the `figma_execute` scripting gotchas — `getNodeByIdAsync` and an explicit
191
233
 
192
234
  - Set `components.meta[name].status` = `"stable"` and refresh
193
235
  `components.meta[name].updatedAt` to today.
236
+ - When promoting status (e.g. draft → stable), also set `status` + `updatedAt` in
237
+ the component's `.doc.json`, recompute its fingerprint, re-run `docs:digest`, and
238
+ re-render the affected surfaces so `docs:check` stays green.
194
239
  - If Figma is connected (per `figma.mechanism`), open the component's doc card and
195
240
  update the `Status Label` text to `stable`, re-bind the `Status` chip fill to
196
241
  the **success** semantic color variable (mode-aware, not a hardcoded hex), and
@@ -55,6 +55,22 @@ and why large `WRAP` grids time out. For a simple verification read, prefer the
55
55
  dedicated `figma_get_variables` tool (it handles dynamic-page correctly and
56
56
  resolves aliases with `resolveAliases: true`) over a hand-written script.
57
57
 
58
+ **Execution model — sequential architect → figma-executor with model routing.**
59
+ If your host supports subagent dispatch, plan the token architecture once with
60
+ one **architect** dispatch (deep tier) — it reads existing Figma state and emits
61
+ a transcription-grade spec in stable identifiers (collection/variable *names*,
62
+ never nodeIds) — then build the variables with **figma-executor** dispatches
63
+ (balanced tier), strictly sequentially: preflight `figma_get_status` and never
64
+ run two Figma-touching subagents at once (the single bridge is concurrency-1).
65
+ Each executor finalizes by build-verify-then-replace with a programmatic
66
+ read-back (`figma_get_variables`, not a screenshot); gate the result with a
67
+ **reviewer** pass. **Keep the human checkpoint between tiers** (the PAUSE in
68
+ Steps 2–4) — subagents run continuously within a tier, but you pause for the
69
+ human between them. Route per
70
+ `.throughline/references/agent-routing.md`; never parallelize Figma
71
+ work. If your host has no subagent dispatch, build and verify each tier inline,
72
+ sequentially, as the steps below describe.
73
+
58
74
  ## Step 1 — Brainstorm the structure (before building anything)
59
75
 
60
76
  Run the protocol in `.throughline/references/brainstorm-before-build.md`. **First establish
@@ -37,6 +37,20 @@ swatch/type grids — exactly the layouts that hit the two worst traps: the
37
37
  single-call `layoutWrap = "WRAP"` timeout on big grids (build manual rows or split
38
38
  across calls instead). Also run the single-bridge-instance preflight before writing.
39
39
 
40
+ **Execution model — sequential architect → figma-executor with model routing.**
41
+ If your host supports subagent dispatch, plan the sheet layout once with one
42
+ **architect** dispatch (deep tier) — a lighter plan than token-builder's, since
43
+ the tokens already exist; it emits a stable-identifier layout spec (which
44
+ collections/sections, how much per-token detail) — then build the page with
45
+ **figma-executor** dispatches (balanced tier), strictly sequentially: preflight
46
+ `figma_get_status`, concurrency-1, `WIP:` frame + build-verify-then-replace with
47
+ a programmatic read-back (spot-check that the swatches resolved to their bound
48
+ variables via `figma_get_variables`, not just a screenshot), gated by a
49
+ **reviewer** visual pass. Route per
50
+ `.throughline/references/agent-routing.md`; never parallelize Figma
51
+ work. If your host has no subagent dispatch, build and verify the page inline,
52
+ sequentially, as the steps below describe.
53
+
40
54
  ## Step 1 — Brainstorm the layout (lightly)
41
55
 
42
56
  Run `.throughline/references/brainstorm-before-build.md`, but keep it light — this is a
@@ -145,7 +159,7 @@ refresh the "Last updated" date instead of creating a second Cover.)
145
159
  ## Step 3 — Checkpoint
146
160
 
147
161
  Show the user the Foundations page and the Cover page. Sequential review (this is
148
- a Figma-authoring skill — no subagents). Iterate on layout/styling if they want
162
+ a Figma-authoring skill). Iterate on layout/styling if they want
149
163
  changes. Then update the manifest: `sheets.built` = `true`, append
150
164
  `token-sheet-builder` to `completedSkills`.
151
165
 
@@ -143,13 +143,18 @@ register the platform, transform group, format, and `outputReferences`
143
143
  flattens). Web adapters emit `:root`/`.dark` (or `[data-theme]`); the shadcn
144
144
  adapter also emits a Tailwind preset.
145
145
 
146
- **Execution model — subagent-driven for multiple platforms.** When more than one
147
- platform is targeted, generating each platform's output is independent and
148
- verifiable, so dispatch **one subagent per adapter**: each produces its
146
+ **Execution model — subagent dispatch with model routing.** Generating each
147
+ platform's output is independent and verifiable. If your host supports subagent
148
+ dispatch, dispatch **one `code-executor` per adapter** each produces its
149
149
  platform's files and verifies them (the config builds, the expected files
150
- appear, references resolve correctly for web / flatten for native). Review each
151
- before combining. For a single platform, run inline. (See the selective-
152
- subagent decision: code-gen skills parallelize; Figma-authoring skills don't.)
150
+ appear, references resolve for web / flatten for native) then a **`reviewer`**
151
+ to check each before combining. Choose each subagent's model from its role tier
152
+ per `.throughline/references/agent-routing.md` (`code-executor` fast,
153
+ `reviewer` → balanced), and only dispatch once each adapter's spec is complete
154
+ enough to transcribe. If your host has no subagent dispatch, generate and verify
155
+ each adapter inline instead. For a single platform, run inline either way. This
156
+ is a code-gen stage, so these subagents may run in parallel — unlike Figma
157
+ authoring, which is always sequential.
153
158
 
154
159
  ## Step 4 — Build and place outputs
155
160
 
@@ -173,7 +178,9 @@ icons (`icons.built` true):
173
178
  - **Custom icons** — these the repo owns, so generate them: export the custom
174
179
  SVGs from Figma, optimize, and componentize via SVGR into `packages/ui` (or a
175
180
  dedicated icons package). This is real code generation and rides the same
176
- PR-review and subagent model as token output.
181
+ **`code-executor` (fast) + `reviewer` (balanced)** routing and PR-review as
182
+ token output (SVGR transforms are the textbook mechanical op the fast tier is
183
+ for) — see the Step 4 execution model.
177
184
 
178
185
  ## Step 5 — Full regeneration + rename detection (the safety net)
179
186
 
@@ -10,7 +10,7 @@ ThroughLine builds a design system end to end. Read the matching skill file for
10
10
  - `figma-environment-setup` — Set up the local working folder and connect the agent to Figma so the design-system skills can read and write variables, styles, and components. → read `skills/figma-environment-setup/SKILL.md`.
11
11
  - `icon-system-builder` — Build an icon system in Figma — a dedicated "Icons" page populated with the user's chosen icon library (Lucide, Material, or custom SVGs) as well-named, scalable components — using the fastest, most-automated mechanism per library (for Lucide, batch-fetching the curated subset's official SVGs from the source repo and componentizing them hands-off; for Material, the official community file or importer plugin) rather than hand-generating icons or making the user copy components by hand. → read `skills/icon-system-builder/SKILL.md`.
12
12
  - `repository-builder` — Graduate the local design-system folder into a real monorepo — a pnpm + Turborepo workspace with packages for tokens and UI components and room for apps — and walk the user from a plain folder to local git to a GitHub remote with PRs and CI. → read `skills/repository-builder/SKILL.md`.
13
- - `retrofit-planner` — Orchestrate a full brownfield design-system retrofit end to end — audit, refine variables in place, rebind components, sync, capture a Chromatic baseline, retrofit the code with dual output, then remove the old tokens only after a zero-reference grep — with a human confirmation gate between every phase. → read `skills/retrofit-planner/SKILL.md`.
13
+ - `retrofit-planner` — Orchestrate a full brownfield design-system retrofit end to end — audit, refine variables in place, rebind components, sync, capture a Chromatic baseline, retrofit the code with dual output, adopt existing documentation then fill gaps, then remove the old tokens only after a zero-reference grep — with a human confirmation gate between every phase. → read `skills/retrofit-planner/SKILL.md`.
14
14
  - `storybook-chromatic-builder` — Stand up Storybook in the monorepo, build code components matching the Figma design system (consuming the synced tokens and implementing the captured slot contracts), generate stories for every component, set up Chromatic for visual regression testing, and wire Code Connect when the user's Figma plan supports it. → read `skills/storybook-chromatic-builder/SKILL.md`.
15
15
  - `token-builder` — Build a two-tier (primitive + semantic) design token system as Figma variables — color ramps, spacing, type scale, radius, shadows — with light/dark or brand modes. → read `skills/token-builder/SKILL.md`.
16
16
  - `token-crosswalk-builder` — Build the brownfield token crosswalk — a persistent three-way map between each new token, the old Figma variable, and the old code identifier(s) — as crosswalk.json, then install the vetted validator/reverse-index scripts into the monorepo and wire the tokens:validate CI gate. → read `skills/token-crosswalk-builder/SKILL.md`.
@@ -20,6 +20,7 @@ ThroughLine builds a design system end to end. Read the matching skill file for
20
20
  ## ThroughLine commands
21
21
 
22
22
  - `design-system-status` — Show a plain-language summary of the current design system state — what's set up, what's not, and sensible next steps — read from design-system.json. → read `commands/design-system-status.md`.
23
+ - `document-component` — Author, refresh, or reconcile the usage documentation for one existing component — draft its canonical doc record from four sources, project it to Figma, the doc card, and code, and resolve any drift via a reviewable per-item choice. → read `commands/document-component.md`.
23
24
  - `new-component` — Build a single new component end to end — in Figma, then sync any new tokens, then build its code component and stories — with a confirmation between each stage. → read `commands/new-component.md`.
24
25
  - `start` — Start building your design system — the deterministic entry point. → read `commands/start.md`.
25
26
  - `sync-figma-tokens` — Re-run the Figma-to-code token sync — extract current Figma variables, rebuild code outputs via Style Dictionary, and open a PR with the changes for review. → read `commands/sync-figma-tokens.md`.
@@ -0,0 +1,26 @@
1
+ Document a single existing component end to end, using the settings already in
2
+ `design-system.json` (`project.uiFramework`, `figma.mechanism`, `sync.platforms`)
3
+ rather than re-asking configuration. Scale explanation to `user.codingLevel`.
4
+
5
+ Ask which component to document (e.g. "Button"), then:
6
+
7
+ 1. **Author/refresh the record.** Run the doc-authoring pipeline from
8
+ the `component-builder` skill's *Author the documentation record* step —
9
+ ingest any existing docs first (brownfield), then infer → enrich (from
10
+ `.throughline/references/component-doc-archetypes.md`) → specialize →
11
+ interview. The user approves the drafted record; `imported`/`user` blocks are
12
+ never overwritten.
13
+ 2. **Project it.** Write `design-system/docs/components/<Name>.doc.json`, set the
14
+ Figma component `description`, enrich the doc card, and (if the repo/code side
15
+ exists) render MDX/JSDoc and run `docs:digest` per the
16
+ `storybook-chromatic-builder` render step.
17
+ 3. **Reconcile drift.** Run `docs:check`. For each drifted surface, offer a per-item
18
+ choice — **re-render** (canonical wins) or **pull-back** (fold the surface edit
19
+ into the record) — and land the result as a reviewable change. On a brownfield
20
+ component's first pass, adopt existing content (`provenance: imported`) rather
21
+ than overwriting it.
22
+
23
+ See `.throughline/references/component-doc-schema.md` for the record schema,
24
+ fingerprint contract, and projection mapping. If a component was never built in
25
+ Figma, point the user at `component-builder` first.
26
+
@@ -88,8 +88,23 @@ of the primitive→semantic token seam:
88
88
  slot the atoms.
89
89
 
90
90
  This guarantees a composite's typed slot points at a real, already-built target.
91
- Build bottom-up; checkpoint after each component (sequential — this is Figma
92
- authoring, no subagents).
91
+ Build bottom-up in dependency order.
92
+
93
+ **Execution model — sequential subagents with model routing.** If your host
94
+ supports subagent dispatch, plan the whole set once with one **architect**
95
+ dispatch (deep tier) — it reads existing Figma state and emits a
96
+ transcription-grade spec in stable identifiers — then build **each component**
97
+ with one **figma-executor** dispatch (fast→balanced), strictly sequentially:
98
+ preflight `figma_get_status` and never run two Figma-touching subagents at once
99
+ (the single bridge is concurrency-1). Each executor builds into a `WIP:` frame
100
+ and finalizes by build-verify-then-replace (see
101
+ `.throughline/references/figma-scripting.md`); gate each finished
102
+ component with a **reviewer** visual pass. Route per
103
+ `.throughline/references/agent-routing.md`, and only dispatch a
104
+ component once its slice of the spec is complete enough to transcribe. **Keep the
105
+ human checkpoint between components** — subagents run continuously within a
106
+ component, but you pause for the human between them. If your host has no subagent
107
+ dispatch, build and verify each component inline, sequentially, as before.
93
108
 
94
109
  ## Step 3 — Build each component, bound to tokens/styles
95
110
 
@@ -212,6 +227,66 @@ Two rules for every slot:
212
227
  Record each component's slots, variant matrix, and token bindings in the
213
228
  component spec (for Code Connect when available, else the repo component spec).
214
229
 
230
+ ## Step 4.5 — Author the documentation record (and project it)
231
+
232
+ Every component gets a canonical documentation record — the source of truth for
233
+ its usage docs — written to the working folder next to `design-system.json`
234
+ (**folder-resident from day one**, exactly like the manifest; no repo required).
235
+ Read `.throughline/references/component-doc-schema.md` for the exact JSON
236
+ schema, the fingerprint algorithm, and the projection contract.
237
+
238
+ **Run the generation pipeline (each layer only fills what it legitimately knows;
239
+ stamp `provenance` per block):**
240
+
241
+ 0. **Ingest existing docs — brownfield only, runs first.** If docs already exist
242
+ for this component (code JSDoc/MDX/README, or a populated Figma component
243
+ `description`), read them and seed the record marked `provenance: imported`.
244
+ **Never silently overwrite existing human-written docs** — this is the
245
+ read-before-you-assert rule. Skip on greenfield.
246
+ 1. **Infer from the built artifact.** From the component you just built — its
247
+ variants, states, slots, and bound tokens — author `description`, `variants`,
248
+ `states`, and `tokensUsed` (`tokensUsed` comes from the real variable bindings,
249
+ not a guess). Provenance `ai-inferred`.
250
+ 2. **Enrich from the archetype knowledge base.** Match the component to the nearest
251
+ archetype in `.throughline/references/component-doc-archetypes.md` and
252
+ seed `dos`, `donts`, `accessibility`, `whenToUse`, `whenNotToUse`. Provenance
253
+ `best-practice` (or `w3c-apg` for the accessibility block).
254
+ 3. **Specialize to `project.uiFramework`.** Align variant-meaning wording and the
255
+ accessibility idiom to the target framework (the same field you read for variant
256
+ vocabulary). Provenance `framework`.
257
+ 4. **Interview for the non-inferable.** Ask the user for brand/product-specific
258
+ do's & don'ts and intent. Provenance `user`. **Show the whole drafted record and
259
+ get explicit approval before writing anything** — layers 1–4 only fill blocks the
260
+ ingest step did not, and an `imported`/`user` block is never overwritten.
261
+
262
+ **Write the record and project it:**
263
+
264
+ - Write `design-system/docs/components/<Name>.doc.json` (JSON; required fields
265
+ `name`, `summary`, `description`).
266
+ - **Figma component description.** Set the component's native `description` field
267
+ (via `figma_set_description`) to a compact markdown rendering — summary,
268
+ when-to-use/not, do's/don'ts, and the a11y summary — and append a fingerprint
269
+ marker line `<!-- tl:doc <fp> -->` (this is the surface Dev Mode and Code Connect
270
+ read).
271
+ - **Doc card body.** Extend the existing doc card (name/short-desc/status/date, per
272
+ `.throughline/references/figma-component-standards.md`) with a usage body:
273
+ when-to-use, do's/don'ts, an a11y line, and a variant/state legend — all
274
+ token-bound (no hardcoded hex/px). Add a metadata text node named
275
+ `Doc Fingerprint` holding `<fp>`.
276
+ - Compute `<fp>` as the canonical fingerprint defined in the schema reference
277
+ (sha256 of the projected record without `provenance`, first 16 hex chars).
278
+
279
+ **Update the manifest (fields this skill owns):** set
280
+ `components.meta[<Name>].doc` to `{ path, fingerprint: <fp>, surfaces: {
281
+ figmaDescription: { src: <fp>, render: <hash of the description text> }, docCard: {
282
+ src: <fp>, render: <hash of the card body content> } } }`. The code surfaces
283
+ (`storybookMdx`) are added later by `storybook-chromatic-builder`.
284
+
285
+ Run the standard doc-card visual-validation + post-build audit
286
+ (`.throughline/references/figma-component-standards.md`) after enriching
287
+ the card. `docs:check` runs at the code stage; at folder stage the record + Figma
288
+ surfaces are the fallback.
289
+
215
290
  ## Step 5 — Naming as contract
216
291
 
217
292
  Name components deterministically so Figma↔code mapping is automatic: `Button` ↔
@@ -269,4 +344,7 @@ Offer next steps: build the code counterparts and stories
269
344
  internal architecture) **detaches every instance** that referenced its variants (the
270
345
  Card's footer buttons, etc.). Record which components consume which, warn before an
271
346
  architectural rebuild, and re-instance the affected consumers afterward.
347
+ - Never overwrite an existing component `description` or imported doc content
348
+ without reading it first and marking it `provenance: imported` — brownfield docs
349
+ are seeds, not blank slates.
272
350
 
@@ -56,6 +56,23 @@ counts:
56
56
  repo with no Tailwind simply scores `0` there. Detect what the repo actually uses (is
57
57
  there a `tailwind.config`? SCSS? CSS-in-JS?) and explain the counts in those terms.
58
58
 
59
+ ## Step 1.5 — Size the documentation surface
60
+
61
+ Inventory existing documentation the same way the code surface is sized — from
62
+ **verified reads, never assumptions**. Per component (or per code component when no
63
+ Figma component exists yet), record whether usage docs already exist and where:
64
+
65
+ - **Code:** JSDoc/TSDoc on the component, an `.mdx` doc page, a per-component
66
+ README.
67
+ - **Figma:** a populated component `description` field.
68
+
69
+ Write the totals to `audit.docSurface` in the manifest, e.g. `{ "documented": 12,
70
+ "undocumented": 34, "sources": { "codeJsdoc": 8, "mdx": 4, "figmaDescription": 6,
71
+ "readme": 3 } }`. This right-sizes the documentation retrofit (how much exists to
72
+ adopt vs. author from scratch) so `retrofit-planner`'s `docs` phase can be planned
73
+ against real numbers. See `.throughline/references/component-doc-schema.md`
74
+ for what a full record contains.
75
+
59
76
  ## Step 2 — Inventory the Figma file (verified per-class reads)
60
77
 
61
78
  Variables, text styles, and effect/paint styles are **different surfaces** — read each
@@ -103,6 +120,9 @@ Set `tokens.intakeMode: "retrofit"` (this skill establishes the brownfield path
103
120
  owns this transition). Append `design-system-audit` to `completedSkills`.
104
121
 
105
122
  Then recommend the next step:
123
+ - Report the documentation debt from `audit.docSurface` (documented vs.
124
+ undocumented) and note that the retrofit's `docs` phase will adopt existing docs
125
+ before authoring the gaps.
106
126
  - If the user wants the guided, gated end-to-end retrofit → **`retrofit-planner`**
107
127
  (the orchestrator; recommended for multi-session retrofits).
108
128
  - If they only want the crosswalk backbone next → **`token-crosswalk-builder`** (it
@@ -169,8 +169,16 @@ Execute the library's mechanism:
169
169
  install/run and subset selection.
170
170
  - **Custom SVGs:** batch-import and componentize them.
171
171
 
172
- This is a Figma-authoring step — sequential, with the user in the loop; no
173
- subagents. When scripting the SVG-to-component pass, follow
172
+ **Execution model sequential Figma-lane subagent with model routing.** If your
173
+ host supports subagent dispatch, run the bring-in + componentize pass as a
174
+ **`figma-executor`** dispatch (balanced tier): preflight `figma_get_status`,
175
+ never run two Figma-touching subagents at once (the single bridge is
176
+ concurrency-1), build into a `WIP:` frame and finalize by build-verify-then-
177
+ replace with the read-back audit in Step 3. The subset + naming contract were
178
+ already settled with the user in Step 1, so no separate architect dispatch is
179
+ needed here. Route per `.throughline/references/agent-routing.md`. If
180
+ your host has no subagent dispatch, script the SVG-to-component pass inline,
181
+ sequentially, with the user in the loop. Either way, follow
174
182
  `.throughline/references/figma-scripting.md`.
175
183
 
176
184
  ## Step 3 — Normalize: page, naming, sizing, variants
@@ -106,6 +106,20 @@ in it" — they already have a working local repo.
106
106
  On success, set `workspace.stage` and `repo.stage` to `github` and record
107
107
  `repo.remote`. Append `repository-builder` to `completedSkills`.
108
108
 
109
+ ### Adopt the documentation store
110
+
111
+ The folder-resident documentation store at `design-system/docs/` (canonical
112
+ `*.doc.json` records plus the generated `index.json` + `llms.txt`) already exists
113
+ from the Figma phase. Bring it under version control as-is — **do not relocate it**
114
+ (the path is stable across folder→repo, and every manifest `doc.path` points at it).
115
+ Ensure it is committed (not git-ignored).
116
+
117
+ Wire the documentation drift gate into the repo's verification so it runs in CI
118
+ alongside `tokens:validate`: add a `docs:check` step (the `docs-check.mjs` script is
119
+ installed by `storybook-chromatic-builder`; if code hasn't been set up yet, note
120
+ that the gate comes online with the Storybook step). `docs:check` exits non-zero on
121
+ drift; Figma surfaces report `edit-unverified` and are checked in a Figma session.
122
+
109
123
  ## Secrets: the part most people have never done
110
124
 
111
125
  This is where users with low coding experience get stuck — many have never made
@@ -1,6 +1,7 @@
1
1
  # Retrofit planner (orchestrator)
2
2
 
3
- Sequences a brownfield retrofit through the safe 7-phase order, gating each phase on a
3
+ Sequences a brownfield retrofit through the safe seven-phase order (with `docs` inserted
4
+ as a gated Phase 6.5), gating each phase on a
4
5
  human confirmation. Like `component-pipeline`, this skill holds **zero domain logic of
5
6
  its own** — it is a sequencer that invokes the real skills and the phase work, and only
6
7
  updates the manifest fields it owns (`retrofit.*`, `completedSkills`). All the
@@ -102,6 +103,25 @@ triad as you go — `check-types`, `build-storybook` + Chromatic, **and run the
102
103
  + spot-check 5–7 routes (the build alone is blind to story-unreachable SCSS). **Gate:**
103
104
  confirm the triad passes before continuing.
104
105
 
106
+ ### Phase 6.5 — `docs` (adopt existing documentation, then fill gaps)
107
+
108
+ Set `retrofit.phase = "docs"`. Bring the documentation layer onto the system's
109
+ components **adopt-first**, so no existing human-written doc is lost:
110
+
111
+ 1. **Adopt.** For each component, run the doc-authoring ingest (Step 4.5 of
112
+ `component-builder`): read existing code JSDoc/MDX/README and Figma
113
+ `description`, seed the canonical `.doc.json` marked `provenance: imported`, and
114
+ stamp fingerprints. This first pass **claims** existing content — it is not a
115
+ re-render and must not overwrite it.
116
+ 2. **Fill gaps.** Run the remaining generation layers (infer → enrich → specialize
117
+ → interview) only for blocks the adoption did not populate; the user approves.
118
+ 3. **Project + gate.** Render the code surfaces (Step 5.5 of
119
+ `storybook-chromatic-builder`), run `docs:digest`, and run `docs:check` — it
120
+ should pass (surfaces just rendered) with Figma surfaces `edit-unverified`.
121
+
122
+ Confirm with the user before writing, consistent with every other phase. On a large
123
+ system, size the batch from `audit.docSurface` and adopt in reviewable chunks.
124
+
105
125
  ### Phase 7 — `cleanup`
106
126
 
107
127
  Remove the old token outputs **only after** the repo-wide token-removal guard returns
@@ -27,6 +27,16 @@ system). Wire it to consume `packages/tokens` output so stories render with the
27
27
  real design tokens (import the generated CSS/theme). Checkpoint: confirm
28
28
  Storybook runs and shows the token-themed canvas.
29
29
 
30
+ Install the documentation scripts alongside the token scripts (copy from the
31
+ plugin's `scripts/` — `build-docs-digest.mjs`, `docs-check.mjs`, and
32
+ `lib/doc-record.mjs` — into the repo and register npm scripts):
33
+
34
+ - `"docs:digest": "node scripts/build-docs-digest.mjs"`
35
+ - `"docs:check": "node scripts/docs-check.mjs"`
36
+
37
+ These are the documentation analog of `tokens:validate`; see
38
+ `.throughline/scripts/README.md`.
39
+
30
40
  **pnpm build-script allowlist (first-run gotcha).** On pnpm workspaces, the
31
41
  `@storybook/react-vite` install pulls `esbuild`, whose postinstall is blocked by
32
42
  pnpm's default `onlyBuiltDependencies` policy — Storybook then fails to start with a
@@ -67,13 +77,19 @@ Match the deterministic naming so `Button` (Figma) ↔ `Button` (code).
67
77
 
68
78
  ## Step 3 — Generate stories (subagent-driven, parallel)
69
79
 
70
- Story generation is independent and verifiable per component, so use the
71
- **subagent-driven model** (code-gen skills parallelize; this is the opposite of
72
- the sequential Figma-authoring skills): dispatch one subagent per component to
73
- write its stories a story per meaningful variant, controls wired to props,
74
- slot props demonstrated. Each subagent verifies its work (the story builds and
75
- renders). Two-stage review (does it match the component spec; is it quality
76
- code) before combining.
80
+ Story generation is independent and verifiable per component, so it
81
+ parallelizes one worker per component, unlike the concurrency-1 Figma lane.
82
+
83
+ **Execution modelparallel subagents with model routing.** If your host
84
+ supports subagent dispatch, dispatch **one `code-executor` per component** (fast
85
+ tier) to write its stories a story per meaningful variant, controls wired to
86
+ props, slot props demonstrated — each verifying its own work (the story builds
87
+ and renders); then a **`reviewer`** (balanced) two-stage pass (does it match the
88
+ component spec; is it quality code) before combining. Route per
89
+ `.throughline/references/agent-routing.md`, and only dispatch a
90
+ component once its story spec is complete enough to transcribe. If your host has
91
+ no subagent dispatch, generate and verify each component's stories inline
92
+ instead.
77
93
 
78
94
  **Controls must actually drive the component (args-through render).** A `render`
79
95
  that ignores its args silently breaks the Controls panel — the toggle writes to
@@ -164,6 +180,32 @@ mode shows the real code. It's plan-gated (Figma Organization/Enterprise).
164
180
  run after the user publishes. This does **not** block the code side: implement
165
181
  each slot prop from the recorded slot contract regardless of the Figma dropdown.
166
182
 
183
+ ## Step 5.5 — Render documentation to code
184
+
185
+ For each component that has a canonical record
186
+ (`design-system/docs/components/<Name>.doc.json`), render the code-side surfaces
187
+ from it (read `.throughline/references/component-doc-schema.md` for the
188
+ projection contract):
189
+
190
+ - **Storybook autodocs (MDX).** Generate `<Name>.mdx` next to the component (e.g.
191
+ `packages/ui/src/<Name>/<Name>.mdx`) rendering summary, description,
192
+ when-to-use/not, do's/don'ts, accessibility, and a variant/state table. Put the
193
+ record's fingerprint in MDX frontmatter as `docFingerprint: <fp>`.
194
+ - **JSDoc.** Add a doc comment to the code component from `summary` + `description`
195
+ and per-prop descriptions from `variants`/`states` meanings, so `argTypes`
196
+ descriptions surface in the Storybook controls table.
197
+ - **AI digest.** Run `docs:digest` to (re)generate `design-system/docs/index.json`
198
+ + `design-system/docs/llms.txt` from all records.
199
+
200
+ **Update the manifest:** add the `storybookMdx` surface to
201
+ `components.meta[<Name>].doc.surfaces` as `{ src: <fp>, render: <hash of the MDX
202
+ file>, file: "<repo-relative MDX path>" }`.
203
+
204
+ **Wire the gate.** Ensure `docs:check` is part of the repo's verification (a CI
205
+ step and/or a Turbo task). It compares every surface against its record and exits
206
+ non-zero on drift; Figma surfaces report `edit-unverified` (checked live in a Figma
207
+ session). Run `docs:check` once here and confirm it passes before handing off.
208
+
167
209
  ## Step 6 — Finalize component status (Figma write-back)
168
210
 
169
211
  A component built and storied here is now **done** — but its Figma doc card was
@@ -187,6 +229,9 @@ the `figma_execute` scripting gotchas — `getNodeByIdAsync` and an explicit
187
229
 
188
230
  - Set `components.meta[name].status` = `"stable"` and refresh
189
231
  `components.meta[name].updatedAt` to today.
232
+ - When promoting status (e.g. draft → stable), also set `status` + `updatedAt` in
233
+ the component's `.doc.json`, recompute its fingerprint, re-run `docs:digest`, and
234
+ re-render the affected surfaces so `docs:check` stays green.
190
235
  - If Figma is connected (per `figma.mechanism`), open the component's doc card and
191
236
  update the `Status Label` text to `stable`, re-bind the `Status` chip fill to
192
237
  the **success** semantic color variable (mode-aware, not a hardcoded hex), and