Add /adhd:install-design-system-docs-route skill

[hhff]

Summary

Adds /adhd:install-design-system-docs-route — a one-shot installer that drops a live, self-generating design-system documentation route into a Next.js consumer app. The route reads adhd.config.ts and globals.css at request time, renders a token catalog (colors / spacing / typography / radius / shadows), and provides per-component pages with URL-driven prop toggles.

Key design choices

• Pure one-shot install. No adhd.config.ts schema additions — install choices (route URL, route group, prod-exclusion) are encoded in the filesystem, not stored as durable state.
• Route group (design-system) + hyphen-prefix URL /-docs by default. Group organizes future internal routes filesystem-side; hyphen prefix telegraphs "internal" in the URL.
• Production exclusion via Next.js pageExtensions conditional. Files use .design-system.tsx extension when prod-excluded; next.config.ts patched to include the extension only when NODE_ENV !== 'production'. Files literally invisible to the production build.
• Ejection-friendly. Generated files contain zero references to "ADHD" — only the consumer's adhd.config.ts filename appears (which is unavoidable since the page reads it). Marker comment is generic: // design-system-docs-route — auto-generated installer artifact; safe to edit.
• Re-runnable. Marker-bearing files get wholesale Write-replaced with the latest templates on re-run; user can opt out of overwrites by deleting the marker.
• Triggered as optional final phase of /adhd:config for first-time setup. Available standalone for retroactive install.
• Per-layer-type Tailwind utility correctness. The templates know that an SVG path fill needs fill-* / text-* (with currentColor), not bg-*. Documented in Phase 3 / Phase 7 of the install SKILL.

What lives where

New library plugins/adhd/lib/install-design-system-docs-route/:

• token-parser.js — extract @theme tokens from globals.css
• prop-parser.js — extract a component's prop interface
• slug.js — component path → URL slug + collision disambiguation
• next-config-patcher.js — idempotent conditional pageExtensions patch
• robots-patcher.js — idempotent Disallow entry
• templates.js — page templates (layout, index, [component]/page, PropToggle) as string constants
• route-installer.js — write the 4 files at the target path; marker-comment detection for re-runs
• cli.js — orchestrator surface for the SKILL

New skill plugins/adhd/skills/install-design-system-docs-route/SKILL.md — 9-phase orchestrator.

Modified:

• plugins/adhd/skills/config/SKILL.md — new optional Phase 6 offering the install at the end of /adhd:config
• README.md — command table row + "Design system docs route" subsection
• .claude-plugin/marketplace.json — description includes the new command
• .github/workflows/ci.yml — new test step

Test plan

• 344/344 lib tests pass (~58 new across token-parser, prop-parser, slug, next-config-patcher, robots-patcher, templates, route-installer, cli)
• 7/7 SKILL frontmatters valid
• Example app builds clean (no regression to existing routes)
• Manual smoke test in example/: run /adhd:install-design-system-docs-route, pick defaults → npm run dev → visit /-docs → verify token catalog renders + click into a component → toggle props → npm run build → verify the route's chunks aren't in the production output → npm start → confirm 404 at /-docs

Notes from the implementation

Three spec/plan/test contradictions were caught and resolved during Task 7 (templates):

• The plan's verbatim INDEX_PAGE_TSX included /adhd:push-component in an empty-state message; replaced with a neutral "No components tracked yet." (spec criterion #13 forbids ADHD references in generated files).
• Test 11's /adhd/i regex would match the legitimate adhd.config.ts filename in the generated page bodies; test scoped to strip that filename before checking (spec invariant explicitly carves out adhd.config.ts as the one allowed reference).
• Test 9's ^["']use client["'] anchor failed because PROP_TOGGLE_TSX must start with the marker comment; test scoped to strip the marker first (Next.js permits leading comments before the client directive).

All three resolutions are documented inline in the test file.

🤖 Generated with Claude Code