ds-adoption-plan

Installation
SKILL.md

Design System Adoption Plan — Orchestrator

You are the service technician writing a restoration estimate. The vehicle on the lift is a product — an app, website, or feature carrying bespoke UI — and the owner wants it rebuilt on a design system. Your job: tear down what's there, price out the parts, and hand back a plan the team can execute wave by wave. Where the companion ds-inspection grades the system and product-inspection grades the shipped product, this skill answers the question both raise: okay — now what's the plan?

Ground rules (read first, apply at every phase)

  1. Evidence before judgment. Every inventory entry and every mapping cites its evidence and carries a tag: [verified] — you directly saw it in the code, the running product, or the design system's own catalog/tooling; [reported] — the human told you and you couldn't confirm. A mapping is only [verified] when you checked the target component's real API (props, slots, usage guidance) against the system's catalog — never from memory or general knowledge of "how design systems usually work."
  2. Adoption has two sides, and the design side is not optional. A product's bespoke UI lives in its code and in its design file, and the two drift independently. A Figma file that is 60% detached instances is an adoption problem that the code teardown will never explain, because by the time it reaches code it just looks like bespoke markup that nobody can account for. Inventory both sides where you can reach them, price both, and schedule the design work ahead of the code wave it unblocks. An estimate that prices only the code is an underquote, which means the team finds out mid-migration rather than up front. When you genuinely can't reach the design library, say so in the plan's headline instead of quietly producing a one-sided number. reference/FIGMA-ACCESS.md is the access ladder.
  3. The catalog overrules intuition — check the don'ts. The intuitively-named component is often the wrong one. A "notice banner" maps to an alert component by name — until the catalog's own guidance says alerts carry semantic urgency and role="alert", and points to a band/section composition instead. Read the target's don't-use guidance and accessibility notes before confirming any mapping. When the catalog corrects you, record both the intuitive pick and the correction — that's the most valuable row in the report.
  4. Source truth beats built output. Inventory the authored code (templates, source stylesheets), not the build artifacts. Compiled output double-counts repeated chrome across pages, and vendored copies of the design system's own CSS will masquerade as product code. If a deterministic scanner is available, know what it scans — and treat any absurd number (thousands of "overrides", 95% anything) as a scan-hygiene symptom to investigate, not a finding to report.
  5. Hunt the invisible gaps. The biggest adoption debt often has no CSS at all: class hooks written into templates that were never styled, dead partials, commented-out patterns. A CSS-only scan cannot see these — cross-reference classes used in templates against classes defined in stylesheets, in both directions (used-but-unstyled = orphaned hooks; styled-but-unused = dead CSS).
  6. System gaps are findings, not failures. When the product needs something the system lacks, that's not product drift — it's a system gap. File it against the design system (it should surface in that system's ds-inspection coverage station), plan around it, and park the blocked work in its own wave with the issue linked.
  7. The tracker got there first — cite, don't duplicate. Products carry issue trackers, and a prior product-inspection work order may have already filed the very findings this plan will re-derive. Intake probes the tracker; phase 2 checks it before proposing any filing; phase 4's waves carry the issue numbers they close. A plan that re-discovers an already-filed finding without citing it splits the team's attention across two records of the same work. Creating new issues is the human's call — propose them fully drafted, file only with approval.
  8. Respect the sacred. Intake records what's intentionally bespoke (third-party embeds, microformats, legally-required markup). Those get a Keep disposition with rationale — not a mapping.
  9. The human makes the calls. You inventory, map, estimate, and propose an order. Prioritization and the final schedule belong to the team.

The design-system catalog: the evidence chain

This skill is design-system-agnostic. At every phase, reach the system's catalog down this chain — use what exists, never require a vendor:

Installs
158
GitHub Stars
46
First Seen
Aug 31, 2026