@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.
- package/README.md +2 -2
- package/adapters/codex/AGENTS.md +2 -1
- package/adapters/codex/prompts/component-builder.md +80 -2
- package/adapters/codex/prompts/design-system-audit.md +20 -0
- package/adapters/codex/prompts/document-component.md +26 -0
- package/adapters/codex/prompts/icon-system-builder.md +10 -2
- package/adapters/codex/prompts/repository-builder.md +14 -0
- package/adapters/codex/prompts/retrofit-planner.md +21 -1
- package/adapters/codex/prompts/storybook-chromatic-builder.md +52 -7
- package/adapters/codex/prompts/token-builder.md +16 -0
- package/adapters/codex/prompts/token-sheet-builder.md +15 -1
- package/adapters/codex/prompts/token-sync-layer.md +14 -7
- package/adapters/cursor/.cursor/commands/document-component.md +26 -0
- package/adapters/cursor/.cursor/rules/component-builder.mdc +80 -2
- package/adapters/cursor/.cursor/rules/design-system-audit.mdc +20 -0
- package/adapters/cursor/.cursor/rules/icon-system-builder.mdc +10 -2
- package/adapters/cursor/.cursor/rules/repository-builder.mdc +14 -0
- package/adapters/cursor/.cursor/rules/retrofit-planner.mdc +22 -2
- package/adapters/cursor/.cursor/rules/storybook-chromatic-builder.mdc +52 -7
- package/adapters/cursor/.cursor/rules/token-builder.mdc +16 -0
- package/adapters/cursor/.cursor/rules/token-sheet-builder.mdc +15 -1
- package/adapters/cursor/.cursor/rules/token-sync-layer.mdc +14 -7
- package/adapters/generic/AGENTS.md +2 -1
- package/adapters/generic/commands/document-component.md +26 -0
- package/adapters/generic/skills/component-builder/SKILL.md +80 -2
- package/adapters/generic/skills/design-system-audit/SKILL.md +20 -0
- package/adapters/generic/skills/icon-system-builder/SKILL.md +10 -2
- package/adapters/generic/skills/repository-builder/SKILL.md +14 -0
- package/adapters/generic/skills/retrofit-planner/SKILL.md +21 -1
- package/adapters/generic/skills/storybook-chromatic-builder/SKILL.md +52 -7
- package/adapters/generic/skills/token-builder/SKILL.md +16 -0
- package/adapters/generic/skills/token-sheet-builder/SKILL.md +15 -1
- package/adapters/generic/skills/token-sync-layer/SKILL.md +14 -7
- package/package.json +1 -1
- package/references/agent-routing.md +70 -0
- package/references/component-doc-archetypes.md +86 -0
- package/references/component-doc-schema.md +136 -0
- package/references/figma-component-standards.md +24 -0
- package/references/figma-scripting.md +62 -0
- package/references/manifest-schema.md +27 -5
- package/references/sync-adapters.md +5 -0
- package/scripts/README.md +11 -0
- package/scripts/build-docs-digest.mjs +74 -0
- package/scripts/docs-check.mjs +103 -0
- 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
|
-
|
|
177
|
-
|
|
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
|
+
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
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
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 model — parallel 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
|
|
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
|
|
147
|
-
platform is
|
|
148
|
-
|
|
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
|
|
151
|
-
before combining.
|
|
152
|
-
|
|
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
|
-
|
|
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
|
|
92
|
-
|
|
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
|
-
|
|
173
|
-
|
|
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
|
|
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
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
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 model — parallel 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
|