retrofit-planner
Skill80 starsChanged 33 days agoMITView on GitHub
Orchestrate a full brownfield design-system retrofit end to end — audit, refine, rebind, sync, baseline, code, docs, cleanup — 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.
In this repository11 other files it gives its agents.
- component-builderSkill
- component-pipelineSkill
- design-system-auditSkill
- figma-environment-setupSkill
- icon-system-builderSkill
- repository-builderSkill
- storybook-chromatic-builderSkill
- token-builderSkill
- token-crosswalk-builderSkill
- token-sheet-builderSkill
- token-sync-layerSkill
The file
We split this skill into the rules it gives an agent
12 rules. About 0 are common, 7 are distinctive, and 5 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈7
Distinctive · estimate
This author's own choices. Worth a look.
5
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 22
Use this for a complete retrofit, especially across multiple sessions.
- Very specific: line 28
Read user.codingLevel (${CLAUDE_PLUGIN_ROOT}/references/coding-level.md).
- Very specific: line 35
Read the manifest. This orchestrator assumes a brownfield situation (tokens.intakeMode: "retrofit", or workspace.origin is an existing …
- Very specific: line 51
Before running phases that shell out (sync, baseline, code, cleanup), detect what the repo actually uses — read its package.json scripts …
- Distinctive: line 121
Fill gaps: Run the remaining generation layers (infer → enrich → specialize → interview) only for blocks the adoption did not populate.
- Distinctive: line 132
Remove the old token outputs only after the repo-wide token-removal guard returns
- Very specific: line 137
When cleanup is verified, set retrofit.phase: "done" and retrofit.completedAt, and append retrofit-planner to completedSkills.
- Distinctive: line 149
Never reimplement what the sub-skills do — only sequence them and drive the no-dedicated-skill phases (rebind, code, cleanup).
- Distinctive: line 152
Never skip a confirmation between phases — the gates keep the live app intact and make the retrofit resumable.
- Distinctive: line 154
Never delete-and-recreate variables (guardrail 3), baseline after the code retrofit (phase 5 before 6), or remove old outputs before the …
- Very specific: line 157
Never write another skill's manifest fields — own only retrofit.* and completedSkills.
- Distinctive: line 159
Never assert the case-study toolchain — detect the repo's real commands or degrade gracefully.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Retrofit planner (orchestrator)
Sequences a brownfield retrofit through the safe seven-phase order (with docs inserted
as a gated Phase 6.5), gating each phase on a
human confirmation. Like component-pipeline, this skill holds zero domain logic of
its own — it is a sequencer that invokes the real skills and the phase work, and only
updates the manifest fields it owns (retrofit.*, completedSkills). All the
actual work lives in the skills it calls, so this orchestrator doesn't rot when they
improve.
Before anything, read ${CLAUDE_PLUGIN_ROOT}/references/brownfield-retrofit.md —
the read discipline, the 7 guardrails, the safe sequence, and the verification triad
are the rules this skill enforces as gates.
When to use vs. the individual skills
Use this for a complete retrofit, especially across multiple sessions. For a single isolated step (just the audit, just the crosswalk), run that skill directly. This is the "converge my mature system onto tokens, end to end, without breaking the live app" flow.
Calibrate
Read user.codingLevel (${CLAUDE_PLUGIN_ROOT}/references/coding-level.md). A retrofit
touches Figma, tokens, code, CI, and a live app — for new users explain each phase and
why its ordering matters the first time; for comfortable users be terse. The phases and
gates are identical across levels.
Prerequisites
Read the manifest. This orchestrator assumes a brownfield situation
(tokens.intakeMode: "retrofit", or workspace.origin is an existing repo/monorepo). If
the audit hasn't run yet (audit.ranAt is null), start at the audit phase below. If
none of the brownfield markers are set, this is probably greenfield — point the user to
the normal build skills instead.
Decision-journal offer (default-on)
At the start of a retrofit, offer to scaffold a decision journal at docs/design-system/
with specs/ plans/ spikes/ findings/ decisions/ handoffs/. Recommend yes —
retrofits are multi-session and the journal is the human decision trail (complementary to
the manifest's machine state) — but allow the user to decline. Record the choice in
retrofit.journalScaffolded. This is the only artifact this skill creates directly.
Detect the stack, don't assume it (§11)
Before running phases that shell out (sync, baseline, code, cleanup), detect what the
repo actually uses — read its package.json scripts for the real type-check, build,
visual-test, and token commands. The case study used Chromatic + build-storybook +
tokens:sync/tokens:validate; a real repo may differ. Map each phase onto the repo's
actual commands, or degrade gracefully and say what's missing — never assert a command
that doesn't exist.
The safe sequence (confirm between EVERY phase)
Set retrofit.phase to the current phase as you enter it, so a later session can resume
exactly here. Confirm the goal first, then walk the phases. Each gate is a hard stop:
do not advance without explicit confirmation — the gates are what keep the live app
intact and make the retrofit resumable.
Phase 1 — audit (invoke design-system-audit)
Invoke design-system-audit: size the code surface, inventory the Figma file with
verified per-class reads, compute percentSemantic. Gate: show the audit results and
the right-sizing read ("~90% semantic → renames + cleanup, not a rewrite"). Confirm before
continuing. Capture the rollback baseline (Figma version checkpoint / token export) now if
figma-environment-setup didn't already. On first entry, set retrofit.startedAt to the
current ISO timestamp if it is unset.
Phase 2 — refine (invoke token-builder brownfield branch)
Invoke token-builder's refine-in-place branch: rename/realign variables in place,
preserving IDs, with a binding-survival audit before and after each rename (guardrail 3).
Gate: show the before/after binding counts are equal (no bindings severed) and the
refined variable names. Confirm before continuing. Never delete-and-recreate.
Phase 3 — rebind
Reconcile components onto the refined variables, preserving their Figma IDs. There is no
dedicated skill for this — drive it directly here: verify components still reference the
(renamed, same-id) variables, and fix any that drifted. Gate: confirm components still
render bound. This is also the natural point to build the crosswalk if not yet done —
offer token-crosswalk-builder (it reads the audit section to seed rows and wires
tokens:validate).
Phase 4 — sync (invoke token-sync-layer brownfield branch)
Invoke token-sync-layer with the brownfield transforms (channel alpha, opacity
0–100→0–1, float32 rounding at the export boundary, /opacity→color-mix). It lands a
reviewable PR per its own rules. Gate: confirm the sync PR before continuing.
Phase 5 — baseline (invoke storybook-chromatic-builder)
Capture a Chromatic baseline before any code retrofit, so intended drift-fixes are distinguishable from regressions. Gate: confirm the baseline is green and captured. This ordering is not optional — baseline after the code change throws away the signal.
Phase 6 — code (dual output)
Retrofit the codebase with dual output: new and old tokens coexist during the
transition, so nothing breaks mid-migration. Use the crosswalk reverse index
(tokens:reverse-index) to semi-automate the SCSS/Tailwind swaps. Run the verification
triad as you go — check-types, build-storybook + Chromatic, and run the actual app
- spot-check 5–7 routes (the build alone is blind to story-unreachable SCSS). Gate: confirm the triad passes before continuing.
Phase 6.5 — docs (adopt existing documentation, then fill gaps)
Set retrofit.phase = "docs". Bring the documentation layer onto the system's
components adopt-first, so no existing human-written doc is lost:
- Adopt. For each component, run the doc-authoring ingest (Step 4.5 of
component-builder): read existing code JSDoc/MDX/README and Figmadescription, seed the canonical.doc.jsonmarkedprovenance: imported, and stamp fingerprints. This first pass claims existing content — it is not a re-render and must not overwrite it. - Fill gaps. Run the remaining generation layers (infer → enrich → specialize → interview) only for blocks the adoption did not populate; the user approves.
- Project + gate. Render the code surfaces (Step 5.5 of
storybook-chromatic-builder), rundocs:digest, and rundocs:check— it should pass (surfaces just rendered) with Figma surfacesedit-unverified.
Confirm with the user before writing, consistent with every other phase. On a large
system, size the batch from audit.docSurface and adopt in reviewable chunks.
Phase 7 — cleanup
Remove the old token outputs only after the repo-wide token-removal guard returns
zero references (guard-token-removal.mjs) — deleted Tailwind utilities are silent
no-ops that tsc/build won't catch (guardrail 4). Gate: show the guard reporting zero
references, then confirm removal. Re-run the verification triad after removal.
When cleanup is verified, set retrofit.phase: "done" and retrofit.completedAt, and
append retrofit-planner to completedSkills.
Resumability
Because each phase is gated and retrofit.phase is written on entry, a stop at any point
leaves a clean resume point. figma-environment-setup reads retrofit.phase on the next
/start and routes back here at the right phase. Never silently restart from the top —
resume where the manifest says.
What this skill must NOT do
- Never reimplement what the sub-skills do — only sequence them and drive the no-dedicated-skill phases (rebind, code, cleanup). If you're writing token/sync logic here, stop and invoke the real skill.
- Never skip a confirmation between phases — the gates keep the live app intact and make the retrofit resumable.
- Never delete-and-recreate variables (guardrail 3), baseline after the code retrofit (phase 5 before 6), or remove old outputs before the zero-reference grep passes (guardrail 4).
- Never write another skill's manifest fields — own only
retrofit.*andcompletedSkills. The audit ownsaudit.*; the crosswalk ownstokenCrosswalk. - Never assert the case-study toolchain — detect the repo's real commands or degrade gracefully.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

