PRD → interactive HTML

Produces ONE self-contained .html file (inline CSS + JS, no network, no deps) that visualizes a PRD. Reuse TEMPLATE.html as the component library — copy its <style> and <script> verbatim and assemble only the components each PRD needs.

Workflow

1. Resolve the PRD source (auto-detect):
   • A number / "issue 49" / a tracker URL → gh issue view <n> --json title,body --jq '.title, .body'.
   • A file path → read it.
   • Otherwise → use the current conversation context.
2. Parse the PRD into its template sections (Problem, Solution, User Stories, Implementation Decisions incl. rejected alternatives, Testing, Migration/phases, Out of Scope). Note which are present — never invent content the PRD lacks.
3. Map sections → components (see table). Skip components whose source section is absent.
4. Assemble the page: copy the :root/<style> and <script> from TEMPLATE.html unchanged, then emit the chosen component blocks in order, filling them from the PRD. Keep the section-number badges sequential.
5. Write to docs/<slug>.html, where <slug> is a kebab-case of the PRD title. Confirm docs/ exists first.
6. Report the path and footer-link the source (issue URL / file). Offer a Cursor canvas as an alternative if they want it beside the chat.

Section → component mapping