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)
- 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." - 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. - 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.
- 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).
- 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-inspectioncoverage station), plan around it, and park the blocked work in its own wave with the issue linked. - The tracker got there first — cite, don't duplicate. Products carry issue trackers, and a prior
product-inspectionwork 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. - 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.
- 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: