retrofit-planner

Orchestrates a seven-phase brownfield design-system retrofit with human confirmation gates between phases.

77|11|Updated Jun 2, 2026
One-click install
npx skills add https://github.com/jrpease/throughline --skill retrofit-planner-jrpease
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: retrofit-planner
Source: https://github.com/jrpease/throughline/tree/main/skills/retrofit-planner
Command: npx skills add https://github.com/jrpease/throughline --skill retrofit-planner-jrpease

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Migrating a mature codebase and populated Figma file onto design tokens is risky: renaming variables can sever bindings, code changes can break the live app, and multi-session work loses track of progress. This Skill sequences the entire retrofit through a safe, gated phase order so nothing breaks mid-migration. ## Core Features & Use Cases - Gated seven-phase orchestration: Sequences audit, refine, rebind, sync, baseline, code, docs, and cleanup phases, requiring explicit human confirmation before advancing to the next phase. - Resumable state tracking: Writes the current phase to a manifest so an interrupted retrofit resumes exactly where it stopped in a later session. - Safety guardrails: Enforces binding-survival audits before variable renames, Chromatic baselines before code changes, and a zero-reference check before removing old token outputs. - Use Case: A team with hundreds of hard-coded colors and a drifted Figma file runs this Skill to converge their system onto tokens end to end, pausing at each gate to review audit results, sync PRs, and visual regression baselines. ## Quick Start Ask the agent to run a complete brownfield retrofit of my existing design system onto tokens, walking me through each phase with confirmations.

Frequently Asked Questions about retrofit-planner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate an existing codebase to design tokens safely?▼

Run a phased retrofit: audit the system first, refine Figma variables in place preserving IDs, rebind components, sync tokens to code, capture a visual baseline, then retrofit code with dual output so old and new tokens coexist. Confirm each phase before advancing.

How to rename Figma variables without breaking component bindings?▼

Rename variables in place rather than deleting and recreating them, which preserves their IDs and existing bindings. Run a binding-survival audit before and after each rename to verify binding counts are equal.

Can I resume an interrupted design system retrofit?▼

Yes. The current phase is written to a manifest on entry, so a later session reads that state and resumes at the exact phase where work stopped. The environment setup step routes back to the right phase automatically.

When should I capture a visual regression baseline during a retrofit?▼

Capture the Chromatic baseline before any code retrofit begins, not after. Baselining after code changes throws away the signal needed to distinguish intended drift-fixes from actual regressions.

When is it safe to remove old token outputs?▼

Remove old outputs only after a repo-wide token-removal guard returns zero references. Deleted Tailwind utilities are silent no-ops that type-checking and builds will not catch, so the grep-based guard is mandatory.

When should I use individual retrofit skills instead of the orchestrator?▼

Use individual skills for a single isolated step, such as just the audit or just the crosswalk. Use the orchestrator for a complete end-to-end retrofit, especially one spanning multiple sessions.