skillpacks 0.1.0 → 0.1.2

package/packs/product-design/codex/ui-interview/archive/v0.19/SKILL.md

@@ -0,0 +1,224 @@
+---
+name: ui-interview
+description: Interview page by page to define a complete UI specification, including layout, hierarchy, controls, links, spacing, sizing, responsive behavior, visual states, and implementation-ready interface details — supports a requirements-only mode that establishes data, actions, and states without locking layout or component decisions
+type: planning
+version: v0.19
+argument-hint: "[optional: app, page, flow, feature, or draft UI]"
+context_intake: deep
+visual_tier: prototype
+---
+
+# UI Interview
+
+Invoke as `$ui-interview`.
+
+Use this skill when the user needs to turn a UX variation branch, rough product idea, feature, page, wireframe, screenshot, or existing app surface into a detailed implementation-ready UI specification. In the default product-design tree, this skill evaluates one proposed `$ux-variations` branch for one specific user flow, designs a proposed UI, renders an HTML visual mockup for alignment, and then records whether that branch is approved, rejected, or needs another mockup iteration before routing to the next UX variation or user flow.
+
+Use `$user-flow-map` before this skill when the product or feature has no credible screen/route inventory, task sequence, branch coverage, or state map. Prefer `specs/user-flow-*.md` as source material when it exists; it is the upstream wireframe-tree contract. Use `$ux-variations [specific-user-flow]` before this skill when a flow exists but no UX variation branch has been proposed yet.
+
+Use `$ux-variations` after this skill only when the current UI mockup exposes a missing or rejected variation axis that needs branch exploration before another UI proposal.
+
+When invoked with `--requirements-only` (or when the user says "just requirements", "requirements only", or "content requirements"), this skill stops after establishing what the page needs — data, actions, states, and constraints — without committing to any layout, component, or spatial decisions. This is an explicit bounded mode, not the default route from `$user-flow-map`; use it when the user asks for a content contract or when a layout-mode variation run genuinely requires fixed page requirements.
+
+Default branch-review handoff guard: upstream `$user-flow-map` approval and `$ux-variations` output may provide source evidence, but they do not count as `ui-interview` approval. `ui-interview` must still investigate cross-flow and cross-variation coordination, design a proposed UI, render the visual mockup in HTML, ask the user for alignment or feedback, and record an explicit approve/reject/retry branch decision.
+
+## Process
+
+### 0. Product-Path Scope Resolution
+
+Resolve research scope by product path before using code or app structure as a hint:
+
+1. If `$ARGUMENTS` names a non-archived `research/{slug}/` directory or a product-path ID whose `scope_path` points there, use that path. Treat `{slug}` as the product/app name, not the ICP, audience, or segment label.
+2. If `$ARGUMENTS` names only `research/_archive/{slug}/` or a manifest entry with `status: archived` or legacy `status: abandoned`, stop and warn that the path is archived; do not write or update scoped outputs there.
+3. Read `research/.progress.yaml` when present. Normalize legacy `active_path` to `active_paths` on read and write back `active_paths` on manifest updates. Treat legacy `abandoned` as `archived`; exclude `archived`, `abandoned`, `deferred`, `revisit_candidate`, `promoted`, and any `scope_path` under `research/_archive/` from active target selection.
+4. If active product paths exist in the manifest, use those paths. If multiple active paths exist, ask which one to target unless this skill explicitly supports cross-path output.
+5. If no active manifest target exists, list non-archived product directories under `research/`, excluding `research/_archive/` and dot directories. Auto-select only when exactly one exists; ask when multiple exist.
+6. If no product directories exist, use flat `research/` single-product mode.
+7. Detect monorepo/app/package structure only as a secondary hint. Suggest creating a missing `research/{slug}/` product path when code clearly exposes an app, but do not require code or monorepo detection before using `research/{slug}/`.
+
+When product path `{slug}` is active, read and write research under `research/{slug}/`, specs under `specs/{slug}/`, and treat top-level `research/*.md` files as flat-mode documents or cross-path summaries.
+
+1. **Resolve context**
+   - Read `.agents/project.json` if it exists.
+   - Read `README.md`, `AGENTS.md`, `CLAUDE.md`, relevant `docs/`, `specs/`, `research/`, route files, component directories, screenshots, and design artifacts when present.
+   - Prefer `specs/user-flow-*.md` (or product-path-scoped equivalents) for screen sequence, route inventory, branches, decisions, states, failure paths, and low-fidelity wireframe notes before inferring UI requirements.
+   - Prefer `specs/ux-variations-*.md` (or product-path-scoped equivalents) for the selected UX variation branch, sibling variations, unresolved branch decisions, proposed progression paths, and branch-routing expectations.
+   - If the request is for an existing UI, inspect the current implementation before interviewing.
+   - If multiple apps or surfaces are plausible, ask the user which app, flow, or page to cover first.
+   - If the interface has no credible screen/flow structure from a user-flow spec, existing routes, screenshot, wireframe, or explicit user prompt, stop and recommend `$user-flow-map [topic]` before UI requirements or layout decisions.
+   - If the interface has a credible flow but no specific UX variation branch or proposal to judge, stop and recommend `$ux-variations [specific-user-flow]`.
+
+2. **Treat inputs as draft material**
+   - Do not assume the current UI, prompt, screenshot, or mockup is final.
+   - Product specs, ICP documents, and journey maps are reference material, not locked constraints. The user may override any product decision during the interview. When a user's interview answer contradicts an existing spec, adopt the interview answer and note the divergence.
+   - Preserve explicit constraints, but challenge unclear defaults before they become implementation decisions.
+   - Distinguish product behavior decisions from UI presentation decisions.
+
+3. **Surface assumptions before probing**
+   - Present a UI Assumptions Manifest before deep questioning.
+   - Tag each assumption with:
+     - `[from spec]` - explicitly stated in a spec, prompt, or issue
+     - `[from codebase]` - derived from existing routes, components, styles, or assets
+     - `[from research]` - derived from ICP, audience, journey, feedback, or product research
+     - `[from artifact]` - derived from screenshot, mockup, image, Figma export, or wireframe
+     - `[inferred]` - filled in by judgment
+   - Cover at least:
+     - Product and user context
+     - Parent user flow and selected UX variation branch
+     - Other user flows touched by this branch
+     - Sibling UX variations or existing UI proposals this branch must coordinate with
+     - Pages, routes, and entry points
+     - Prototype-first boundary for new product or substantial feature work: what the user should be able to click through first, whether multiple route-based experiments should be built, what data can be fake, fixture-backed, or in-memory, and which infrastructure must be represented visually but not implemented yet.
+     - Primary tasks per page
+     - Navigation model
+     - Information hierarchy
+     - Layout grid and spatial density
+     - Component inventory
+     - Button and link semantics
+     - Form fields, validation, and error display
+     - Empty, loading, disabled, success, warning, and failure states
+     - Responsive breakpoints and mobile behavior
+     - Accessibility requirements
+     - Visual language, typography, color, iconography, and asset usage
+     - Implementation constraints from the existing stack or design system
+   - Ask the user to confirm, correct, or flag assumptions before continuing.
+   - Deliver every manifest/checklist/checkpoint the user must confirm inline as the final message text of its own turn; ask the confirmation question in the next turn (consistent with the one-question-per-turn cadence). Never emit it only as mid-turn text in a turn that ends with a tool or command call — harness rendering does not guarantee mid-turn text is shown. A confirmation question must never reference content the user has not been shown.
+
+4. **Branch review loop**
+   - In default mode, run this four-step loop for the selected UX variation branch:
+     1. Investigate the specific UX variation proposed for a specific user flow. Determine which other user flows it touches, which sibling UX variations it competes with or depends on, and which existing UI proposals, specs, prototypes, or implementation surfaces it must coordinate with.
+     2. Design a proposed UI for that branch and display a visual mockup in HTML. The mockup may be static or lightly interactive, but it must be concrete enough for the user to judge layout, hierarchy, controls, copy, state treatment, and branch viability.
+     3. Interview the user for alignment over the UI for this UX variation experiment. If the visual mockup is off-base, collect focused feedback, revise the proposal/mockup, and ask again instead of treating the first mockup as final.
+     4. Record whether this branch of the user flow is approved, rejected, or needs another iteration, then route to the next unresolved UX variation or user flow as needed.
+   - The branch decision is separate from implementation approval. Approval means the UI direction is a valid branch of the wireframe tree; implementation work still follows the project roadmap/shipping contract.
+
+5. **Interview page by page**
+   - Codex interview cadence is one primary decision question per turn by default. Use short follow-up bullets only when they clarify the same page or interface decision, not to batch unrelated questions.
+   - Move through the interface in this order unless the user asks otherwise:
+     - Global shell: header, sidebar, footer, navigation, account controls, notifications
+     - Page inventory: every route, modal, drawer, overlay, and important empty state
+     - Page purpose: user goal, task priority, and success condition
+     - Prototype calibration: first clickable journey, route-based experiment set, fixture/fake data boundaries, infrastructure-only states to mock rather than implement, and taste/feel questions the prototype must answer before database, auth, payment, analytics, deployment, admin, or multi-tenant work is planned.
+
+5b. **Requirements gate (requirements-only mode)**
+   - In requirements-only mode, stop here — do not proceed to layout anatomy, component inventory, or spatial decisions.
+   - Requirements-only mode has two required confirmation gates before any alignment page build: the UI Assumptions Manifest from step 3, then the Content Requirements Manifest in this step. Upstream approval, including approved `$user-flow-map` YAML or an approved flow alignment page, may populate assumptions and source evidence but cannot replace either confirmation.
+   - Evidence-synthesis exception: only skip live confirmation questions when the current visible user invocation explicitly asks to skip live interview questions, synthesize from existing evidence only, or avoid asking the user. In that case, label the output as an `evidence-synthesis review`, set Interview provenance to `evidence-synthesis-with-explicit-skip`, do not call it a completed interview, and route unresolved decisions to a resumed `$ui-interview` instead of implying interview completion.
+   - For each page, confirm:
+     - Data fields and entities with cardinality: one, many, nested, or polymorphic
+     - User actions: create, edit, delete, filter, sort, export, navigate, bulk-select, reorder
+     - States: empty, loading, error, partial, full, offline, permission-denied
+     - Constraints: real-time updates, offline support, accessibility requirements, performance budgets
+     - Content hierarchy: primary, secondary, tertiary information
+     - Relationships between data elements: parent-child, peer, reference, aggregate
+   - Present a **Content Requirements Manifest** summarizing all pages, then ask the user to confirm. Deliver the manifest per the inline visibility rule in step 3 (turn-final message text of its own turn; confirmation question in the next turn), never as mid-turn text only.
+   - This manifest confirmation is non-final: it only confirms the requirements draft is ready for the pre-approval lifecycle in step 9. Route all writes through that lifecycle — working packet at `research/_working/preliminary-ui-interview-research.md` (or `research/{slug}/_working/preliminary-ui-interview-research.md` when a product path is active), then a `review`-state `alignment/ui-interview-{topic}.html` page rendering the Content Requirements Manifest as the candidate/verdict gate, then final compiled YAML approval.
+   - Only after final compiled YAML approval, write `specs/ui-requirements-[topic].md` and `ui-requirements-[topic]-interview.md`, archive the working packet, and convert the page to `confirmed` per step 9.
+   - Only after the page is converted to `confirmed` and canonical files are written, recommend `$ux-variations --layout-mode` to explore multiple visual approaches for these requirements, or `$ui-interview` without the flag to proceed directly to a single deep UI specification, or check `.agents/project.json.enabled_packs` for `agent-work-admin` — if `agent-work-admin` is not enabled, recommend `npx skillpacks install agent-work-admin` from the project shell, first; if `agent-work-admin` is enabled, recommend `$roadmap` — if the interface is ready to sequence into work.
+   - If requirements-only work exposes missing screen order, branch decisions, or state coverage, recommend `$user-flow-map [topic]` instead of inventing layout variants.
+   - Stop. Do not continue to step 6 or beyond; the pre-approval lifecycle in step 9 and the requirements deliverables above are the only remaining work in this mode.
+
+6. **Full UI specification** (no `--content-only` flag):
+
+     - Layout anatomy: top-to-bottom and left-to-right regions, alignment, density, scroll behavior
+     - Component inventory: tables, lists, cards, forms, charts, media, editors, maps, canvases
+     - Controls: every button, icon button, segmented control, checkbox, radio, toggle, input, menu, tab, link, and destructive action
+     - Copy: headings, labels, helper text, validation text, confirmation text, empty-state text
+     - States: default, hover, focus, active, selected, disabled, loading, error, success, partial, offline
+     - Spatial details: element prominence, approximate sizes, gaps, padding, fixed or fluid dimensions, sticky regions, overlap rules, max widths
+     - Responsive behavior: desktop, tablet, mobile, wide desktop, touch target sizing, collapsed controls
+     - Accessibility: keyboard order, focus traps, labels, contrast, reduced motion, screen reader names. Include color-blind safe patterns, keyboard navigation, reduced motion support, and screen reader labels by default in every spec. Do not present accessibility features as optional checkboxes. Only ask about domain-specific accessibility when the product context warrants it.
+   - When a page includes repeated items, define one canonical item and its variations rather than asking about every row individually.
+
+7. **Research and recommend by default**
+   - Use project evidence and established UI conventions before asking the user to invent details.
+   - For material decisions, present options, a recommendation, rationale, tradeoffs, and mitigation.
+   - Recommend familiar controls over novel patterns unless the product has a strong reason to deviate.
+   - For frontend work, respect the existing design system, component library, and implementation patterns.
+   - Reference and inspiration questions are low-priority. Ask once early, accept any answer including "none" or "let's experiment," and move on. Do not block the interview on reference input.
+
+8. **Coverage checkpoint**
+   - Before concluding, present a concise checklist of pages, components, controls, states, responsive behavior, and unresolved risks.
+   - Deliver the checklist per the inline visibility rule in step 3 (turn-final message text of its own turn; confirmation question in the next turn), never as mid-turn text only.
+   - Ask whether anything is missing or should be revisited before building the alignment page.
+   - This confirmation is non-final: it only establishes that the draft is ready for the pre-approval lifecycle in step 9. It does not authorize canonical spec writes.
+
+9. **Build pre-approval alignment page**
+   - Before writing any canonical `specs/ui-[topic].md`, `specs/ui-requirements-[topic].md`, or interview log, write the full draft (spec or requirements content plus interview record) only to the working packet `research/_working/preliminary-ui-interview-research.md` (or `research/{slug}/_working/preliminary-ui-interview-research.md` when a product path is active).
+   - Build `alignment/ui-interview-{topic}.html` as a `review`-state page rendering the complete working-packet substance as structured HTML review UI: the manifest, branch investigation, HTML visual mockup, page-by-page decisions, coverage checkpoint, proposed canonical file destinations, and approval/rejection gates.
+   - Include **Interview provenance** in the page and working packet with exactly one of these values: `live-ui-interview` when this run completed the required manifest confirmations with the user; `evidence-synthesis-with-explicit-skip` when the current invocation explicitly asked to skip live questions or synthesize from evidence; `invalid-missing-ui-interview` when neither condition is true. `invalid-missing-ui-interview` pages must route unresolved decisions to a resumed `$ui-interview` and must not imply interview completion or readiness for canonical writes.
+   - At the top of the page, include a plain-language **Interview stage** explainer naming the invocation, whether the run is requirements-only, full UI mode, or branch-review mode, what user/agent interview work has already happened or was inferred from approved upstream evidence, and what the reviewer should do next. If requirements were synthesized primarily from approved specs or code evidence rather than live Q&A, say so directly and route missing answers through section feedback or a resumed interview instead of implying the interview is complete.
+   - Render the working packet as structured HTML, not as a raw Markdown preview: headings become sections, lists stay readable lists, and every Markdown table becomes an HTML `<table>` inside a `.table-wrap` container with a concise `data-tts-narrative`. A raw Markdown `<pre><code>` dump may appear only as a supplemental source view after the rendered packet, never as the primary review surface.
+   - Attempt to open the page in the browser and point the user at the repo-relative path.
+   - Treat every checkpoint confirmation in steps 3–8 as non-final; each only confirms the draft is ready for review. Only final compiled YAML from the alignment page authorizes canonical writes.
+   - When feedback-only YAML is provided, revise the working packet and the alignment page, then ask again; the work stays pre-approval.
+   - Before final compiled YAML approval, the next action is review or revision of the HTML alignment page. Do not include `Recommended next skill`, `Recommended next command`, or downstream routing language until after final compiled YAML approval has been provided and the approved canonical files have been written.
+
+## Deliverables
+
+Before writing anything in this section, verify the alignment page has final compiled YAML approval. Do not write canonical UI specs or interview logs until `alignment/ui-interview-{topic}.html` has been reviewed and the user has provided final compiled YAML approval; checkpoint confirmations are not final approval and do not authorize these writes.
+
+- Write the completed UI specification to `specs/ui-[topic].md`.
+- Write the interview log to `ui-[topic]-interview.md`.
+
+After the canonical files are written, archive the working packet to `docs/history/archive/YYYY-MM-DD/HHMMSS/<original-working-path>`, remove the active working packet, and convert the alignment page from `review` to `confirmed`.
+
+The UI specification must include:
+
+- Scope and source evidence
+- UI Assumptions Manifest with confirmations and corrections
+- Parent user flow, selected UX variation branch, touched sibling flows, and coordination dependencies
+- HTML visual mockup path or embedded review section for the proposed UI
+- Branch decision record: approved, rejected, or retry needed, with next branch/user-flow route
+- Page inventory and route map
+- Global shell and navigation rules
+- Detailed page-by-page anatomy
+- Component inventory and reuse guidance
+- Control inventory with labels, destinations, actions, disabled rules, and confirmation behavior
+- Link inventory with destinations and external/internal classification
+- Layout, spacing, sizing, and responsive rules
+- Visual style direction and asset requirements
+- Interaction states and accessibility requirements
+- Implementation notes tied to the existing stack
+- Open questions, risks, and explicit non-goals
+- For new product interfaces or substantial feature interfaces, a prototype-first section naming the first clickable journey, experiment route map when multiple alternatives should be tested, fake/fixture data, visually mocked infrastructure states, deferred production infrastructure, and the evidence required before implementation planning promotes any deferred infrastructure.
+
+The interview log must include:
+
+- The manifest as presented
+- Branch investigation notes and cross-flow/variation coordination findings
+- Visual mockup feedback, retry notes, and final branch decision
+- Every question asked
+- Options and recommendations presented
+- User responses and final decisions
+- Notable changes from the initial draft, current implementation, or artifact
+
+Only after the page is converted to `confirmed` and canonical files are written, route based on the branch decision: recommend `$ui-interview [next-specific-ux-variation]` for the next UX variation branch, `$ux-variations [next-specific-user-flow]` when the next user flow still needs progression variants, or check `.agents/project.json.enabled_packs` for `agent-work-admin` — if `agent-work-admin` is not enabled, recommend `npx skillpacks install agent-work-admin` from the project shell, first; if `agent-work-admin` is enabled, recommend `$roadmap` — if the approved branch is ready to sequence into implementation work.
+
+### Alignment Page
+
+When this skill produces durable deliverables (research, specs, plans, reports, prototypes, or any document output), build a full-depth HTML alignment page following `ALIGNMENT-PAGE.md` in this skill's directory. Output: `alignment/ui-interview-{topic}.html`.
+
+The page is built pre-approval in `review` state per step 9, before any canonical spec write, and converts to `confirmed` only after final compiled YAML approval and canonical writes.
+
+## Constraints
+
+- Do not skip small interface elements. Buttons, links, icons, menus, and empty states are part of the spec.
+- Do not collapse UI detail into generic phrases such as "standard dashboard layout" or "normal form behavior."
+- Do not create high-fidelity implementation plans until the page anatomy and control behavior are decision-complete.
+- Do not treat visual polish as separate from implementation. Size, spacing, hierarchy, and responsive behavior must be specified well enough for a developer to build.
+- Do not treat upstream `ux-variations` output as UI approval. The branch still needs an HTML visual mockup and explicit approve/reject/retry decision.
+- Do not route to broad implementation planning while unresolved UX variation branches or touched user flows still need review.
+- When recommending a skill from another pack, verify the pack is installed via `.agents/project.json` `enabled_packs`. If not installed, recommend `npx skillpacks install <pack-name>` from the project shell, before the target skill.
+
+## Archive-First Replacement Policy
+
+- Before replacing or substantively rewriting an existing canonical research/spec document (`research/**/*.md`, `specs/**/*.md`, or `docs/specifications/**/*.md`), copy the current file to `docs/history/archive/YYYY-MM-DD/HHMMSS/<original-relative-path>`.
+- Preserve the archived snapshot exactly as it existed before the change; do not edit the archived copy after creating it.
+- After the archive snapshot exists, write the updated document to the original canonical path.
+- Report both the archive path and the updated canonical path in the final output.
+- New files do not need archive snapshots. Append-only updates do not need archive snapshots unless an existing section is regenerated or rewritten.
+
+## Default Shipping Contract
+
+Follow the shared shipping contract convention in CLAUDE.md.

package/packs/product-design/codex/user-flow-map/ALIGNMENT-PAGE.md

@@ -9,7 +9,9 @@ When this skill produces durable deliverables (research, specs, plans, reports,
 
 The tier is set per skill via `visual_tier` in SKILL.md frontmatter (or detected by the upgrade script). The bundled ALIGNMENT-PAGE.md receives tier-appropriate rendering guidance from the generator.
 
-**Alignment lifecycle.** Alignment pages have three lifecycle states. `review` is the draft/pre-approval page: it contains the complete deliverable preview, evidence, required inline gate questions, section feedback controls, feedback-only YAML, and final compile controls. `confirmed` is the post-approval page after the agent has consumed final compiled YAML, made any approved user-requested edits, and written or updated the approved canonical artifacts. A confirmed page is finished and current for the completed alignment cycle, but it remains amendable when later research changes or extends the conclusions. `amended` is a future revision of a confirmed page: archive the previous confirmed page first, mark what changed, preserve the prior approval record, and highlight the new evidence, decisions, or scope that changed the earlier conclusion.
+**Context intake.** This skill declares `context_intake: deep` (Deep interview). Gather repo/project context before asking, present an assumptions manifest when the contract requires it, ask focused questions, and confirm coverage before building review artifacts.
+
+**Alignment lifecycle.** Alignment pages have three lifecycle states. `review` is the draft/pre-approval page: it contains the complete deliverable preview, evidence, required inline gate questions, section feedback controls, local section-feedback YAML only after a section feedback choice is selected, and one bottom `Compile Responses` control. `confirmed` is the post-approval page after the agent has consumed final compiled response YAML, made any approved user-requested edits, and written or updated the approved canonical artifacts. A confirmed page is finished and current for the completed alignment cycle, but it remains amendable when later research changes or extends the conclusions. `amended` is a future revision of a confirmed page: archive the previous confirmed page first, mark what changed, preserve the prior approval record, and highlight the new evidence, decisions, or scope that changed the earlier conclusion.
 
 **Central alignment index.** When a research-producing skill writes or updates an HTML alignment page, also maintain the repository's central alignment index. Look for `alignment/index.html` at the repository root; if the target repo documents a different central alignment-index path, use that path and report it. If the index does not exist, create it as a self-contained HTML page that works from `file://`, links to every active `alignment/*.html` page except itself, and includes the newly written page. Every index entry must include the page's alignment date in a muted meta span after the link, formatted `YYYY-MM-DD`, for example `<a href="page.html">Title</a> <span class="meta">2026-06-09</span>`. The alignment date is the review or confirmed date written inside the page itself; new pages use today's date. If the index exists, update it instead of blindly appending: preserve valid existing entries, metadata, and entry dates; remove duplicate entries for the same page path; keep links repo-relative; and include the new or updated page. When updating an existing index, add a date only to entries that are missing one, deriving it from the page's internal alignment date, or from file history when the page has no internal date. If a `new` marker is used, combine it with the date as `<span class="meta">new · YYYY-MM-DD</span>`, and remove stale `new` markers from entries that are no longer the latest addition.
 
@@ -29,7 +31,7 @@ The tier is set per skill via `visual_tier` in SKILL.md frontmatter (or detected
 
 **Category and product-path grouping.** In product-line or product-path repositories, identify product from `research/.progress.yaml` `product_paths[]`, active `research/{slug}/` or `specs/{slug}/` scopes, page metadata, page title, or the alignment page path. Group index entries by category first, then by product/product path within each category, with the repo's existing secondary sort preserved when clear. In flat repositories, group by category, then preserve the existing index organization within each category or use a clear newest-first or title order when creating a new index.
 
-**Research quality contract.** For research-producing outputs, do not synthesize research findings, recommendations, candidate rankings, or working packets until the user approves the research scope from the `review` alignment page's final compiled YAML. Before scope approval, do only minimal discovery needed to propose the research scope, source plan, assumptions, output paths, and approval questions; label any observed files or source availability as scope evidence, not findings. After scope approval, perform the synthesized research and separate and label `claims` (what the report concludes), `evidence` (source, repo artifact or file path, quote or observation, date, and confidence), `inference` (why that evidence supports the claim), `assumptions` (what remains unproven), and `decision impact` (what the user should approve, reject, or correct). Do not collapse evidence and inference into unsupported summary prose.
+**Research quality contract.** For research-producing outputs, do not synthesize research findings, recommendations, candidate rankings, or working packets until the user approves the research scope from the `review` alignment page's final compiled response YAML. Before scope approval, do only minimal discovery needed to propose the research scope, source plan, assumptions, output paths, and approval questions; label any observed files or source availability as scope evidence, not findings. After scope approval, perform the synthesized research and separate and label `claims` (what the report concludes), `evidence` (source, repo artifact or file path, quote or observation, date, and confidence), `inference` (why that evidence supports the claim), `assumptions` (what remains unproven), and `decision impact` (what the user should approve, reject, or correct). Do not collapse evidence and inference into unsupported summary prose.
 
 **Embed prohibition.** Do not use `<object>`, `<iframe>`, `<embed>`, or "open working packet" / "view full document" links as the primary rendering of any proposed deliverable, evidence matrix, interview log, or manifest entry. The alignment page HTML must contain the rendered content directly. Embedded or linked external documents are permitted only as supplemental references alongside the fully rendered content already present in the page. **Exception:** Self-contained inline `<canvas>` and `<svg>` elements are permitted for charts and diagrams within the same HTML file.
 
@@ -57,32 +59,34 @@ The tier is set per skill via `visual_tier` in SKILL.md frontmatter (or detected
 
 **Report-only research gates.** For report-only or pre-approval research skills, the first `review` alignment page must explicitly contain proposed research scope, source plan, assumptions/confidence, recommended output path, proposed file changes, and approval gates before synthesized research begins and before any working packet, canonical research, spec, or task file is created or updated.
 
-**Staged research workflow.** Heavy report-first research uses a scope-first three-stage approval workflow. Stage 1 is minimal scope discovery only: inspect enough repository, user, and source context to propose research scope, source plan, assumptions, output paths, and approval questions. Build the `review` alignment page before synthesized research. The page must render the proposed scope, available source categories, known context, assumptions/confidence, proposed working-packet and canonical output paths, and research-scope approval gates. Stop for final compiled YAML approval of the research scope. Do not synthesize findings, rank candidates, recommend a path, or create working packets, canonical research, spec, or task files in Stage 1. Stage 2 starts only after final compiled YAML approves the research scope with no unresolved `needs-clarification`, unresolved `down` feedback, or other unresolved negative feedback. Perform the synthesized research, run required source/code checks, and write only a non-canonical working packet. Flat mode uses `research/_working/preliminary-user-flow-map-research.md`; product-path mode uses `research/{slug}/_working/preliminary-user-flow-map-research.md`. Existing raw evidence or search-log outputs may remain as supporting evidence when the skill contract already requires them, but synthesized deliverables stay in the working packet. Update the same `review` alignment page so it renders the full preliminary packet, evidence matrix, assumptions/confidence register, source coverage gaps, proposed canonical file changes, and artifact approval gates. Feedback-only YAML revises the working packet and review page, then remains in Stage 2. Stage 3 consumes final compiled YAML for artifact approval only when it has no unresolved `needs-clarification`, unresolved `down` feedback, or other unresolved negative feedback. Apply approved edits first, archive the working packet to `docs/history/archive/YYYY-MM-DD/HHMMSS/<original-working-path>`, remove the active working packet, write the approved canonical artifacts to the unchanged output paths, and convert the page to `confirmed` with the approval record preserved.
+**Staged research workflow.** Heavy report-first research uses a scope-first three-stage approval workflow. Stage 1 is minimal scope discovery only: inspect enough repository, user, and source context to propose research scope, source plan, assumptions, output paths, and approval questions. Build the `review` alignment page before synthesized research. The page must render the proposed scope, available source categories, known context, assumptions/confidence, proposed working-packet and canonical output paths, research-scope approval gates, and a `Stage 2 Preview / Expected Review Format` section that shows the future Stage 2 review shape before research starts. Stop for final compiled response YAML approval of the research scope. Do not synthesize findings, rank candidates, recommend a path, or create working packets, canonical research, spec, or task files in Stage 1. Stage 2 starts only after final compiled response YAML approves the research scope with no unresolved `needs-clarification`, unresolved `down` feedback, or other unresolved negative feedback. Perform the synthesized research, run required source/code checks, and write only a non-canonical working packet. Flat mode uses `research/_working/preliminary-user-flow-map-research.md`; product-path mode uses `research/{slug}/_working/preliminary-user-flow-map-research.md`. Existing raw evidence or search-log outputs may remain as supporting evidence when the skill contract already requires them, but synthesized deliverables stay in the working packet. Update the same `review` alignment page so it renders the complete working-packet substance as structured HTML review UI: purpose-built sections, tables, matrices, gates, cards, and tier-appropriate charts or diagrams that preserve every packet section, finding, caveat, and decision detail without summary loss. Raw Markdown packet text may appear only as a supplemental source view after the rendered review UI; do not make a `Full Preliminary Packet` or `Full Working Packet` raw Markdown dump, giant `<pre><code>` block, link-only view, or source-only view the primary review surface. Include the evidence matrix, assumptions/confidence register, source coverage gaps, proposed canonical file changes, and artifact approval gates. Partial compiled responses revise the working packet and review page, then remain in Stage 2. Stage 3 consumes final compiled response YAML for artifact approval only when it has `approval_status: ready-for-agent-review` and no unresolved `needs-clarification`, unresolved `down` feedback, or other unresolved negative feedback. Apply approved edits first, archive the working packet to `docs/history/archive/YYYY-MM-DD/HHMMSS/<original-working-path>`, remove the active working packet, write the approved canonical artifacts to the unchanged output paths, and convert the page to `confirmed` with the approval record preserved.
+
+**Stage 2 review-page template.** Stage 1 scope-review pages must include a `Stage 2 Preview / Expected Review Format` section that previews the exact section sequence, table shapes, evidence treatment, visual density, and approval gates the user will see after research; make it specific enough for the user to flag preferred content formats, grouping, labels, visuals, and evidence density before the agent does heavy research. After scope approval and research, the Stage 2 review page must include these sections as structured HTML, not as raw Markdown dumps: `Research Scope Approved` status block with approved scope, source plan, output paths, and unresolved caveats; `Executive Findings` or a skill-specific top-findings section with confidence labels; `Evidence Matrix` mapping claim, evidence/source/path, inference, confidence, assumptions, and decision impact; `Working Packet Review` with the complete working-packet substance rendered as purpose-built HTML sections, lists, tables, matrices, cards, and tier-appropriate charts or diagrams; `Alternatives / Rejected or Lower-Confidence Findings`; `Source Coverage & Gaps`; `Assumptions / Confidence Register`; `Proposed Canonical Artifacts & File Changes`; a required `User Format Preferences` gate asking whether the layout, tables, grouping, visuals, labels, and evidence density match expectations; and a required `Final Artifact Approval` gate for Stage 3 readiness. Raw Markdown packet text, search logs, or source notes may appear only as supplemental source views after the rendered review UI and never replace the Stage 2 review sections.
 
-**User-flow-map gates.** Render surfaced flow assumptions, the proposed flow map, branch and decision coverage, state coverage, failure/recovery and handoff coverage, low-fidelity wireframe notes, output-location/change-scope decisions, and the downstream route to UI requirements as gates before writing final flow deliverables. Apply the shared artifact-destination/proposed-file-changes de-duplication rule: combine them into one visual gate when they ask only the same path-destination question, and render separate gates when destination approval differs from downstream mutation scope, timing, or allowed files.
+**User-flow-map gates.** Render surfaced flow assumptions, the proposed flow map, branch and decision coverage, state coverage, failure/recovery and handoff coverage, low-fidelity wireframe notes, output-location/change-scope decisions, and the downstream handoff choices to UI requirements as gates before writing final flow deliverables. The handoff gate must offer stop/clear-context and continue-now options, and must state that continuing immediately still requires the next skill's own interaction gates. Apply the shared artifact-destination/proposed-file-changes de-duplication rule: combine them into one visual gate when they ask only the same path-destination question, and render separate gates when destination approval differs from downstream mutation scope, timing, or allowed files.
 
 **Prototype tier rendering.** This skill's alignment page uses the `prototype` tier. In addition to charts and diagrams, functional interactive components (clickable flows, live CSS previews, drag interactions) are permitted. Prototypes are ephemeral previews, not production code. Each interactive component must include a reset button that restores initial state. Interactive components must be self-contained within the HTML file with no external dependencies. Include all visual tier requirements (chart snippets, table fallbacks, aria-labels, toggles) plus: state isolation (no localStorage/sessionStorage persistence), clear "this is a preview" labeling, and graceful degradation when JavaScript is disabled.
 
 **Required inline questions.** In `review` pages, each gate must contain at least one required inline question placed directly under the content it governs, inside a visually distinct question block. Each question must use radio-button inputs and include two standing options after the skill-generated choices: "Other / None of the above" backed by a multi-line text box for free-form input, and "Need clarification" backed by an optional notes box where the user can explain what is unclear. When any radio option other than "Other" or "Need clarification" is selected, show an optional "Additional notes" text box beneath it so the user can qualify their choice. Generate questions based on what genuinely needs user input -- do not add filler questions. Do not create a separate bottom "Decisions & Clarifications" section. Confirmed pages must not keep these as required input controls; render the answered decisions as read-only records.
 
-**Section feedback controls.** Every major section of the page (each deliverable section, evidence matrix, confidence register, gate, and any anchor-linked top-level heading) carries a lightweight section-feedback control near its heading: three mutually exclusive choices -- "emphasize" (add more weight to this section or to the point named in the notes), thumbs down (reject or flag a concern), and "clarification needed". Selecting any one reveals a multi-line section-feedback textarea placed directly under or beside that section's emphasize/down/clarify controls; deselecting hides the textarea and any local feedback YAML output for that section. This textarea is separate from required gate-question text inputs: even when the same section has gate questions with their own text boxes, selecting emphasize/down/clarify must still reveal the section-feedback textarea near the feedback controls. Use `--green` for active "emphasize", `--red` for the active thumbs-down, and `--orange` for active "clarification needed", with muted/inactive states otherwise. These controls are optional for final approval and do not replace required gate questions. They also power the separate feedback-only YAML path so the user can send emphasis requests, concerns, or clarification requests before answering every required gate question. When a section contains nested subsections (h3 or deeper), duplicate the section-feedback control at the bottom of the section, just before the closing `</section>` tag. The bottom copy mirrors the top copy — same `data-section`, same id with a `-bottom` suffix, same button set. Sections without nested subsections keep only the top control. Pair top and bottom controls by matching `data-section` attribute. When a feedback button is clicked on one copy, mirror the active state, `has-feedback` class, and `dataset.feedback` value to the paired copy. Textarea content should sync on compile — whichever textarea has content takes precedence (prefer the one the user last typed in). Both copies' local compile/copy buttons produce the same YAML. Use the top copy's `id` (without `-bottom`) as the canonical feedback id for YAML output.
+**Section feedback controls.** Every major section of the page (each deliverable section, evidence matrix, confidence register, gate, and any anchor-linked top-level heading) carries a lightweight section-feedback control near its heading: three mutually exclusive choices -- "emphasize" (add more weight to this section or to the point named in the notes), thumbs down (reject or flag a concern), and "clarification needed". The section feedback textarea, local compile/copy controls, and local read-only YAML output are hidden by default. Selecting any one feedback choice reveals a multi-line section-feedback textarea plus local "Compile Feedback YAML", "Copy YAML", and read-only YAML controls placed directly under or beside that section's emphasize/down/clarify controls; deselecting the active choice hides the textarea, local compile/copy controls, and local read-only YAML output again and omits that section from compiled responses. This textarea is separate from required gate-question text inputs: even when the same section has gate questions with their own text boxes, selecting emphasize/down/clarify must still reveal the section-feedback textarea near the feedback controls. Use `--green` for active "emphasize", `--red` for the active thumbs-down, and `--orange` for active "clarification needed", with muted/inactive states otherwise. These controls are optional for final approval and do not replace required gate questions. They also contribute `section_feedback` entries to the unified response payload so the user can send emphasis requests, concerns, or clarification requests before answering every required gate question. When a section contains nested subsections (h3 or deeper), duplicate the section-feedback control at the bottom of the section, just before the closing `</section>` tag. The bottom copy mirrors the top copy — same `data-section`, same id with a `-bottom` suffix, same button set. Sections without nested subsections keep only the top control. Pair top and bottom controls by matching `data-section` attribute. When a feedback button is clicked on one copy, mirror the active state, `has-feedback` class, and `dataset.feedback` value to the paired copy. Textarea content should sync on compile — whichever textarea has content takes precedence (prefer the one the user last typed in). Both copies' local compile/copy buttons produce the same YAML. Use the top copy's `id` (without `-bottom`) as the canonical feedback id for YAML output.
 
-**Feedback-only YAML contract.** Provide feedback-only YAML in two places: locally under each selected section-feedback textarea, and globally in the bottom compile section. When a section-feedback control is selected, show local "Compile Feedback YAML" and "Copy YAML" controls plus a read-only YAML textarea directly under that section's feedback textarea. The local feedback compile generates YAML with `alignment_page: alignment/user-flow-map-{topic}.html`, `feedback_status: revision-request`, `approval_status: not-approved`, `unanswered_required_questions`, and a `section_feedback` list containing the single selected section-feedback entry for that local control. The bottom "Compile Feedback YAML" control generates the same YAML shape but aggregates every selected section-feedback entry on the page. Enable both local and bottom feedback compile controls as soon as at least one section-feedback control is set, even if required inline gate questions are unanswered. Populate `alignment_page` from the known repo-relative output path used to write the HTML page, not from the page title, browser URL, window location, or any display label. Each feedback entry uses the shape `section`, `feedback` (`emphasize`, `down`, or `needs-clarification`), optional `notes` from that section's feedback textarea, and `requested_agent_action` (`add-weight-to-section`, `investigate-and-revise`, or `clarify-before-approval`). For `emphasize` feedback, the YAML must make clear that the agent should add more weight, prominence, evidence, detail, or recommendation emphasis to that section or to the specific point named in the notes; this is a revision request, not approval of the section as-is. For `down` and `needs-clarification` feedback, the YAML must make clear that the agent should evaluate the feedback, investigate further when needed, and contextually amend the HTML alignment page before asking again for final approval answers. Automatically attempt to copy feedback YAML to the clipboard, display local or bottom copy status, display it in the matching read-only textarea, and provide a "Copy YAML" button with the same retry and fallback behavior as final gate YAML. Do not render the bottom feedback compile controls as a sticky or fixed banner.
+**Section feedback YAML contract.** Provide local section-feedback YAML only under each selected section-feedback textarea. When a section-feedback control is selected, show local "Compile Feedback YAML" and "Copy YAML" controls plus a read-only YAML textarea directly under that section's feedback textarea; when the control is deselected, hide those local controls and output again. The local feedback compile generates YAML with `alignment_page: alignment/user-flow-map-{topic}.html`, `feedback_status: revision-request`, `approval_status: not-approved`, `unanswered_required_questions`, and a `section_feedback` list containing the single selected section-feedback entry for that local control. Enable local feedback compile controls as soon as that section-feedback control is set, even if required inline gate questions are unanswered. Populate `alignment_page` from the known repo-relative output path used to write the HTML page, not from the page title, browser URL, window location, or any display label. Each feedback entry uses the shape `section`, `feedback` (`emphasize`, `down`, or `needs-clarification`), optional `notes` from that section's feedback textarea, and `requested_agent_action` (`add-weight-to-section`, `investigate-and-revise`, or `clarify-before-approval`). For `emphasize` feedback, the YAML must make clear that the agent should add more weight, prominence, evidence, detail, or recommendation emphasis to that section or to the specific point named in the notes; this is a revision request, not approval of the section as-is. For `down` and `needs-clarification` feedback, the YAML must make clear that the agent should evaluate the feedback, investigate further when needed, and contextually amend the HTML alignment page before asking again for final approval responses. Automatically attempt to copy local feedback YAML to the clipboard, display local copy status, display it in the matching read-only textarea, and provide a "Copy YAML" button with the same retry and fallback behavior as response YAML.
 
-**Gate YAML contract.** In `review` pages, at the bottom of the page, include an ordinary in-flow compile section with a "Compile Feedback YAML" button for selected section feedback and a separate "Compile Answers" button for final approval answers. The bottom compile section must not be sticky, fixed, floating, or styled as a persistent banner. The "Compile Answers" button aggregates answers from all inline gate questions throughout the page, including free-text notes. The final approval button remains disabled until every required question has a selection, shows a count of remaining unanswered questions, and scrolls to the first unanswered question if clicked early. When every question is answered, generate a structured YAML block with `alignment_page: alignment/user-flow-map-{topic}.html`, `approval_status: ready-for-agent-review`, one item per gate answer using this stable shape: `section`, `gate_type`, `status` (`answered`, `other`, or `needs-clarification`), `answer`, optional `notes`, and optional `target_artifact` or `target_path` when the gate controls file output. Populate `alignment_page` from the known repo-relative output path used to write the HTML page, not from the page title, browser URL, window location, or any display label. The same final compiled output also includes any section-feedback controls that the user set, using the `section_feedback` shape from the feedback-only YAML contract. After successful compilation, automatically attempt to copy the YAML to the clipboard with the Clipboard API, display copy status, and display the YAML in a read-only textarea with an explicit "Copy YAML" button. The copy button must retry clipboard copy when supported and fall back to selecting the textarea contents when clipboard access is unavailable or blocked.
+**Response YAML contract.** In `review` pages, at the bottom of the page, include an ordinary in-flow compile section with a single "Compile Responses" button. The bottom compile section must not be sticky, fixed, floating, or styled as a persistent banner. "Compile Responses" aggregates all answered inline gate questions throughout the page, including free-text notes, plus every selected section-feedback entry. Enable it as soon as at least one gate question has an answer or at least one section-feedback control is selected; do not require every required gate question to be answered before compiling partial responses. If clicked with no answered gates and no selected section feedback, show a response status that asks the user to answer a gate question or select section feedback. The compiled YAML is a mixed response payload with `alignment_page: alignment/user-flow-map-{topic}.html`, `response_status` (`partial` or `complete`), `approval_status` (`not-approved` or `ready-for-agent-review`), `required_gate_status` (`incomplete` or `complete`), and `unanswered_required_questions`. It may include a `gate_answers` list where each answered gate item preserves the stable gate-answer shape: `section`, `gate_type`, `status` (`answered`, `other`, or `needs-clarification`), `answer`, optional `notes`, and optional `target_artifact` or `target_path` when the gate controls file output. It may also include a `section_feedback` list using the section-feedback shape from the section feedback YAML contract. Set `approval_status: ready-for-agent-review` only when every required gate is answered and there are no unresolved `down`, unresolved `needs-clarification`, or other unresolved negative feedback items; otherwise set `approval_status: not-approved` and keep the response in review. Populate `alignment_page` from the known repo-relative output path used to write the HTML page, not from the page title, browser URL, window location, or any display label. After successful compilation, automatically attempt to copy the YAML to the clipboard with the Clipboard API, display copy status, and display the YAML in a read-only textarea with an explicit "Copy YAML" button. The copy button must retry clipboard copy when supported and fall back to selecting the textarea contents when clipboard access is unavailable or blocked.
 
-**Confirmed page contract.** After final approval has been applied, convert the active alignment page from `review` to `confirmed`. Include a visible status block with `alignment_status: confirmed`, confirmation date, confirmed artifact paths, approval source summary, and explicit finished but amendable language: the page is current for the completed alignment cycle, and later research can amend it only by archiving the prior confirmed page and highlighting the amendment. Remove required gate-question controls, the final "Compile Answers" button, unanswered-question counters, disabled approval buttons, and approval-blocking language. Preserve the full research and approval record: answered decisions, user requests, evidence matrix, assumptions/confidence register, source gaps, proposed file changes, final compiled YAML or faithful approval summary, and what changed during confirmation. Keep research caveats visible; `confirmed` means approved/current, not immutable or permanently true.
+**Confirmed page contract.** After final approval has been applied, convert the active alignment page from `review` to `confirmed`. Include a visible status block with `alignment_status: confirmed`, confirmation date, confirmed artifact paths, approval source summary, and explicit finished but amendable language: the page is current for the completed alignment cycle, and later research can amend it only by archiving the prior confirmed page and highlighting the amendment. Remove required gate-question controls, section feedback input controls, local compile/copy controls, local read-only YAML outputs, the final "Compile Responses" button, response counters, disabled approval buttons, and approval-blocking language. Preserve the full research and approval record: answered decisions, user requests, evidence matrix, assumptions/confidence register, source gaps, proposed file changes, final compiled response YAML or faithful approval summary, and what changed during confirmation. Keep research caveats visible; `confirmed` means approved/current, not immutable or permanently true.
 
-**Pre-approval stop.** While an alignment page is in `review`, the next action is review of the HTML alignment page, not downstream routing. Ask the user to review the page and provide either local or bottom feedback-only YAML for emphasis requests, concerns, or clarification, or final compiled YAML answers when ready. Do not require the user to answer every gate before sending emphasis requests, negative feedback, or clarification needs. When feedback-only YAML is provided, treat it as a revision request: evaluate the feedback, investigate further when needed, archive and amend the HTML page contextually, highlight the changes, and ask again for review. Do not include `Recommended next skill`, `Recommended next command`, or downstream routing language until after final compiled YAML has been provided and the approved artifacts have been written or updated.
+**Pre-approval stop.** While an alignment page is in `review`, the next action is review of the HTML alignment page, not downstream routing. Ask the user to review the page and provide either local section-feedback YAML for one section or bottom compiled response YAML for gate answers and/or selected section feedback. Do not require the user to answer every gate before sending emphasis requests, negative feedback, clarification needs, or other partial responses. When compiled response YAML is partial or has `approval_status: not-approved`, treat it as a revision request: evaluate the feedback, investigate further when needed, archive and amend the HTML page contextually, highlight the changes, and ask again for review. Do not include `Recommended next skill`, `Recommended next command`, or downstream routing language until after final compiled response YAML with `approval_status: ready-for-agent-review` has been provided and the approved artifacts have been written or updated.
 
-**After approval handling.** When final compiled YAML is provided, inspect it before confirming the page. If it contains approvals plus user-requested edits, first update the page, research, and proposed canonical artifacts to satisfy the request; then write or update the approved canonical artifacts and confirm the page. If it contains `needs-clarification`, unresolved `down` feedback, or any unresolved negative feedback, revise the page and return it to `review` instead of marking it `confirmed`. Before replacing any existing alignment page, archive it to `docs/history/archive/YYYY-MM-DD/HHMMSS/alignment/user-flow-map-{topic}.html`. Future amendments to confirmed pages follow the same archive-first rule and must show what changed from the prior confirmed record.
+**After approval handling.** When final compiled response YAML with `approval_status: ready-for-agent-review` is provided, inspect it before confirming the page. If it contains approvals plus user-requested edits, first update the page, research, and proposed canonical artifacts to satisfy the request; then write or update the approved canonical artifacts and confirm the page. If it contains `needs-clarification`, unresolved `down` feedback, or any unresolved negative feedback, revise the page and return it to `review` instead of marking it `confirmed`. Before replacing any existing alignment page, archive it to `docs/history/archive/YYYY-MM-DD/HHMMSS/alignment/user-flow-map-{topic}.html`. Future amendments to confirmed pages follow the same archive-first rule and must show what changed from the prior confirmed record.
 
 **Diff highlighting on updates.** When the agent updates an existing alignment page after receiving feedback, compiled answers, confirmation edits, or later amendment evidence, the rendered HTML must visibly indicate what changed since the previous version. Highlight changed sections or blocks in-place with a `Changed`/`Updated` badge, distinct border or background, `<ins>`/`<del>` markup, or a side-by-side before/after comparison when that is clearer. A top-level change summary is useful but not sufficient by itself unless the changed content is also visibly marked where the reader reviews it. Remove or refresh stale change markers on later updates so the highlights describe the current revision only.
 
 **Archiving.** Before replacing an existing alignment page, archive it to `docs/history/archive/YYYY-MM-DD/HHMMSS/alignment/user-flow-map-{topic}.html`.
 
-**Brief Me (text-to-speech).** Every alignment page must include a `<script src="../scripts/alignment-tts-kokoro.js"></script>` tag before `</body>`. The script adds a "Brief Me" button that reads the page aloud section-by-section using Kokoro TTS (an 82M-parameter model running client-side via WebGPU/WASM from `kokoro-js`). The transport bar includes play/pause/stop/skip controls, a voice selector (persisted in localStorage), and speed selection. On first click the voice model downloads (~92MB quantized on WASM; ~326MB fp32 on WebGPU). Weights persist between visits via Cache API origin storage, and this works on `file://` origins in Chrome — including `file://wsl.localhost` UNC paths (verified 2026-06-09 with an instrumented probe in Windows Chrome: `caches` is available, entries survive reloads and browser restarts, and Chrome shares a single `file://` origin across all local pages, so one download serves every alignment page). Repeat visits pay model initialization only, not re-download. If `caches` is undefined (non-Chromium or locked-down browsers), the model re-downloads each visit; serving pages from a local HTTP origin (e.g. `node scripts/serve-alignment.mjs` in the repo root, then `http://localhost:8907/alignment/<page>.html`) guarantees caching there — note `http://localhost` is a separate origin from `file://`, so the first localhost visit downloads once even when the `file://` cache is already warm. After the first successful load on a machine, the script preloads the model during browser idle time on later page loads (gated by a `tts-kokoro-used` localStorage flag, so users who never click pay nothing). Text is prepared for speech before synthesis: block boundaries (headings, paragraphs, list items, table cells) get sentence punctuation so the model does not read them as run-ons, and speech-hostile symbols are normalized (`~92MB` reads as "approximately 92MB", `v0.3` as "version 0.3", em-dashes as comma pauses, `e.g.`/`i.e.`/`vs.` expanded). Synthesis is pipelined with small chunks: the first audio chunk is kept short (~250 chars) for fast time-to-first-audio, later chunks stay small (~300 chars, cut at sentence or clause boundaries) with up to two chunks synthesizing ahead during playback, and the next section's opening chunk is prefetched while the current section's last chunk plays, so chunk and section boundaries are gapless. If Kokoro fails to load (old browser, network error), it falls back to the Web Speech API automatically. It skips gate controls, compile UI, feedback textareas, and stat grids. Charts and tables use narrative summaries instead of raw data: containers with a `data-tts-narrative` attribute have the narrative read aloud; containers without the attribute are silently skipped. To inject TTS into existing pages, run `node scripts/inject-tts.mjs` (idempotent). Use `--force` to replace the existing TTS block with an updated version. Do not inline the TTS script; always use the `src` tag. Do not use `type="module"` — module scripts are blocked by CORS on `file://` URLs.
+**Brief Me (text-to-speech).** Every alignment page must include a `<script src="../scripts/alignment-tts-kokoro.js"></script>` tag before `</body>`. The script adds a "Brief Me" button that reads the page aloud section-by-section using Kokoro TTS (an 82M-parameter model running client-side via WebGPU/WASM from `kokoro-js`). The transport bar includes play/pause/stop/skip controls, a voice selector (persisted in localStorage), and speed selection. On first click the voice model downloads (~92MB quantized on WASM; ~326MB fp32 on WebGPU). Weights persist between visits via Cache API origin storage, and this works on `file://` origins in Chrome — including `file://wsl.localhost` UNC paths (verified 2026-06-09 with an instrumented probe in Windows Chrome: `caches` is available, entries survive reloads and browser restarts, and Chrome shares a single `file://` origin across all local pages, so one download serves every alignment page). Repeat visits pay model initialization only, not re-download. If `caches` is undefined (non-Chromium or locked-down browsers), the model re-downloads each visit; serving pages from a local HTTP origin (e.g. `node scripts/serve-alignment.mjs` in the repo root, then `http://localhost:8907/alignment/<page>.html`) guarantees caching there — note `http://localhost` is a separate origin from `file://`, so the first localhost visit downloads once even when the `file://` cache is already warm. After the first successful load on a machine, the script preloads the model during browser idle time on later page loads (gated by a `tts-kokoro-used` localStorage flag, so users who never click pay nothing). Text is prepared for speech before synthesis: block boundaries (headings, paragraphs, list items, table cells) get sentence punctuation so the model does not read them as run-ons, and speech-hostile symbols are normalized (`~92MB` reads as "approximately 92MB", `v0.3` as "version 0.3", em-dashes as comma pauses, `e.g.`/`i.e.`/`vs.` expanded). Synthesis is pipelined with small chunks: the first audio chunk is kept short (~250 chars) for fast time-to-first-audio, later chunks stay small (~300 chars, cut at sentence or clause boundaries) with up to two chunks synthesizing ahead during playback, and the next section's opening chunk is prefetched while the current section's last chunk plays, so chunk and section boundaries are gapless. If Kokoro fails to load (old browser, network error), it falls back to the Web Speech API automatically. It skips gate controls, compile UI, feedback textareas, and stat grids. Charts and tables use narrative summaries instead of raw data: containers with a `data-tts-narrative` attribute have the narrative read aloud; containers without the attribute are silently skipped. To inject TTS into existing pages, run `node scripts/inject-tts.mjs` (idempotent). Use `--force` to replace the existing TTS block with an updated version. Do not inline the TTS script; always use the `src` tag. Do not use `type="module"` — module scripts are blocked by CORS on `file://` URLs. Narration follows along visually: the blocks currently being read (paragraphs, list items, table rows, headings, chart narratives) receive a `.tts-active-chunk` highlight at ~1–2-sentence chunk granularity, and the page auto-scrolls to keep them centered (instantly rather than smoothly under `prefers-reduced-motion: reduce`), while the active section keeps a lightened outline frame. The Web Speech fallback stays section-level — outline plus section-start scroll, no per-chunk highlight.
 
 **TTS narrative contract.** Every `.chart-container` and `.table-wrap` element should carry a `data-tts-narrative` attribute with a 1-3 sentence human-readable summary of what the chart or table shows. Chart functions in `scripts/alignment-chart-snippets.js` auto-generate a baseline narrative from their data; author-provided `data-tts-narrative` attributes take precedence. When authoring alignment pages manually, add `data-tts-narrative` to chart containers and table wrappers so that Brief Me reads a meaningful summary instead of skipping the element.
 
-**Browser open.** After writing the resulting HTML page, run `node scripts/open-html-page.mjs alignment/user-flow-map-{topic}.html --browser auto` from the repository root, replacing the path with the actual page path when needed. Report the script status (`focused`, `opened`, `fallback-opened`, `blocked`, or `failed`) in the handoff. Continue when opening is `blocked` if the files were written and verified correctly; a blocked browser-open attempt does not make the skill fail.
+**Browser open.** After writing the resulting HTML page, attempt to open it from the repository root with this ordered fallback, replacing `alignment/user-flow-map-{topic}.html` with the actual page path when needed. First, if `scripts/open-html-page.mjs` exists, run `node scripts/open-html-page.mjs alignment/user-flow-map-{topic}.html --browser auto`. If the helper is missing or cannot open the page and the environment is WSL (`grep -qi microsoft /proc/version`) with `/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/powershell.exe` available, open a browser-friendly file URI through PowerShell: build `file://wsl.localhost/${WSL_DISTRO_NAME:-Ubuntu}/<absolute-linux-path>` from the HTML page's absolute path and run PowerShell `Start-Process '<file-uri>'`. Try `xdg-open <absolute-linux-path>` only after the helper path and WSL PowerShell bridge are unavailable or blocked. Report the final status (`focused`, `opened`, `fallback-opened`, `blocked`, or `failed`) in the handoff, and include the absolute path when the status is `blocked` or `failed`. Continue when opening is `blocked` if the files were written and verified correctly; a blocked browser-open attempt does not make the skill fail.

package/packs/product-design/codex/user-flow-map/CHANGELOG.md

@@ -1,5 +1,33 @@
 # user-flow-map changelog (codex)
 
+## v0.6 - 2026-06-13
+
+- Moved pre-prototype flow-map deliverables from `specs/` to `design/` and added scoped `design/**/flow-tree-*.yaml` initialization.
+- Added the `design/flow-tree.schema.json` manifest contract for user-flow, UX-variation, UI review, and branch-decision state.
+- Clarified that `research/.progress.yaml` remains product-path/product-line tracking, not UX branch state.
+
+## v0.5 - 2026-06-12
+
+- Reframed `user-flow-map` as the root of a wireframe tree whose named user flows fan out into `$ux-variations [specific-user-flow]`.
+- Replaced the default requirements-only UI handoff with a UX-variation handoff and clarified that flow-map approval does not approve UX branches, UI mockups, or implementation paths.
+
+## v0.4 - 2026-06-12
+
+- Replaced the single downstream command recommendation with an explicit stop/clear-context versus continue-now handoff choice for `$ui-interview --requirements-only`.
+- Clarified that continuing immediately still requires `ui-interview` to run its own UI Assumptions Manifest and Content Requirements Manifest gates.
+
+## v0.3 - 2026-06-12
+
+- Standardized active pack and skill install guidance on `npx skillpacks install <pack-or-skill>` instead of agent-native `/pack install` or `$pack install` recommendations.
+
+## v0.2 - 2026-06-11
+
+- Added npm-aware install-route wording for product-design pack availability while preserving Codex `$pack install ...` routes.
+
+## v0.1 - 2026-06-10
+
+- Flow Assumptions Checkpoint and Flow Coverage Checkpoint now render inline as the final message text of their own turn, with the confirmation question asked in the following turn, never only as mid-turn text before a tool or command call. Applies the Manifest Visibility Rule in docs/interview-convention.md.
+
 ## v0.0 - 2026-06-06
 
 - Initial product-design planning skill for mapping positioned product goals into screen flows, decisions, branches, states, failure/recovery paths, handoffs, and low-fidelity wireframe notes before UI requirements, layout variants, and prototypes.

package/packs/product-design/codex/user-flow-map/SKILL.md

@@ -2,23 +2,23 @@
 name: user-flow-map
 description: Turn a high-level product concept, positioned goal, or goal sequence into screen flow structure with entry points, decisions/actions/states, branches, failure paths, and low-fidelity wireframe guidance before UI/spec/prototype work
 type: planning
-version: v0.0
+version: v0.6
 argument-hint: "[optional: product, flow, feature, route, or goal]"
-interview_depth: full
+context_intake: deep
 visual_tier: prototype
 ---
 
 ## Pack Availability Guard
 
-Before telling the user to run a skill from another project-local pack, check `.agents/project.json.enabled_packs`. If the target pack is not enabled, recommend `$pack install <pack>` instead of the target skill. Global skills are always valid. Skills from this same pack are valid because the current skill is already running from that pack.
+Before telling the user to run a skill from another project-local pack, check `.agents/project.json.enabled_packs`. If the target pack is not enabled, recommend `npx skillpacks install <pack>` from the project shell, instead of the target skill. Global skills are always valid. Skills from this same pack are valid because the current skill is already running from that pack.
 
 # User Flow Map
 
 Invoke as `$user-flow-map`.
 
-Use this skill after positioning and before UI/layout/prototype work when a product, feature, or goal sequence needs concrete user-flow structure: entry points, screens/routes, actions, decisions, branches, states, failure paths, handoffs, and low-fidelity wireframe notes. This skill defines what screens and transitions exist before `$ui-interview --requirements-only` defines per-screen content requirements and before `$ux-variations --layout-mode` explores visual/layout alternatives.
+Use this skill after positioning and before UX/UI/prototype work when a product, feature, or goal sequence needs concrete user-flow structure: entry points, screens/routes, actions, decisions, branches, states, failure paths, handoffs, and low-fidelity wireframe notes. Treat the output as the root of a wireframe tree: each mapped user flow can fan out into `$ux-variations [flow]`, where the team explores alternate ways users can progress through that specific flow before any one variation is promoted into `$ui-interview`.
 
-This skill does not create polished UI, visual styling, production specs, or runnable prototypes. Keep layout and styling out of scope except for wireframe-level structural notes such as "summary panel beside task list" or "confirmation step before destructive action."
+This skill does not create polished UI, visual styling, production specs, or runnable prototypes. Keep layout and styling out of scope except for wireframe-level structural notes such as "summary panel beside task list" or "confirmation step before destructive action." Do not flatten the tree into a single UI requirements path; preserve named user flows as branch roots for downstream variation work.
 
 ## Process
 
@@ -34,7 +34,17 @@ Resolve research scope by product path before using code or app structure as a h
 6. If no product directories exist, use flat `research/` single-product mode.
 7. Detect monorepo/app/package structure only as a secondary hint. Suggest creating a missing `research/{slug}/` product path when code clearly exposes an app, but do not require code or monorepo detection before using `research/{slug}/`.
 
-When product path `{slug}` is active, read and write research under `research/{slug}/`, specs under `specs/{slug}/`, and treat top-level `research/*.md` files as flat-mode documents or cross-path summaries.
+When product path `{slug}` is active, read and write research under `research/{slug}/`, pre-prototype design artifacts under `design/{slug}/`, finalized post-prototype implementation specs under `specs/{slug}/`, and treat top-level `research/*.md` and `design/*.md` files as flat-mode documents or cross-path summaries.
+
+### 0b. Design Flow Tree Manifest
+
+Use `design/flow-tree.schema.json` as the machine-readable contract for the pre-prototype product-design tree.
+
+- Product-path mode writes one scoped manifest at `design/{slug}/flow-tree-{topic}.yaml`.
+- Flat mode writes one scoped manifest at `design/flow-tree-{topic}.yaml`.
+- Initialize the manifest when writing the flow map. Set `schema_version: v0.1`, `mode`, `topic`, `product_path` when scoped, `route: [user-flow-map, ux-variations, ui-interview, prototype, consolidate-variations, spec-interview]`, `source_artifacts`, and one `branches[]` entry per named user-flow branch.
+- Track user-flow, UX-variation, UI review, and approve/reject/retry decision state only in the design manifest. Do not write UX branch state to `research/.progress.yaml`; that file remains product-path/product-line tracking.
+- Reference all pre-prototype design artifacts from the manifest using repo-relative paths.
 
 ### 1. Resolve Context
 
@@ -42,14 +52,15 @@ Read available evidence before asking deep questions:
 
 - `.agents/project.json`, `AGENTS.md`, `CLAUDE.md`, `README.md`, and relevant task docs.
 - `research/idea-brief.md`, `research/icp.md`, `research/competitive-analysis.md`, `research/journey-map.md`, `research/positioning.md`, and product-path-scoped equivalents.
-- Existing `specs/`, including `specs/user-flow-*.md`, `specs/ui-requirements-*.md`, `specs/ui-*.md`, and `specs/ux-variations-*.md`.
+- Existing `design/`, including `design/user-flow-*.md`, `design/ui-requirements-*.md`, `design/ui-*.md`, `design/ux-variations-*.md`, product-path-scoped equivalents, and `design/**/flow-tree-*.yaml`.
+- Existing `specs/` only as finalized post-prototype implementation context.
 - Existing route files, component files, app shells, navigation config, screenshots, wireframes, mockups, and design artifacts when present.
 
-If `research/positioning.md` is missing for a business-product flow, recommend `$positioning` first. If `product-design` is not enabled, recommend `$pack install product-design`.
+If `research/positioning.md` is missing for a business-product flow, recommend `$positioning` first. If `product-design` is not enabled, recommend `npx skillpacks install product-design` from the project shell.
 
 ### 2. Flow Assumptions Checkpoint
 
-Before deep probing, present a concise **Flow Assumptions Checkpoint** and ask the user to confirm, correct, or flag it. Tag each assumption with `[from idea]`, `[from research]`, `[from positioning]`, `[from journey]`, `[from spec]`, `[from codebase]`, `[from artifact]`, or `[inferred]`.
+Before deep probing, present a concise **Flow Assumptions Checkpoint** inline as the final message text of its own turn — never only as mid-turn text in a turn that ends with a tool or command call — then ask the user to confirm, correct, or flag it in the next turn. Tag each assumption with `[from idea]`, `[from research]`, `[from positioning]`, `[from journey]`, `[from spec]`, `[from codebase]`, `[from artifact]`, or `[inferred]`.
 
 Cover:
 
@@ -85,7 +96,7 @@ Build the flow map at workflow level, not visual-design level:
 
 ### 4. Coverage Checkpoint
 
-Before writing deliverables, present a **Flow Coverage Checkpoint**:
+Before writing deliverables, present a **Flow Coverage Checkpoint** inline as the final message text of its own turn (never only as mid-turn text before a tool or command call):
 
 - Persona and goal covered.
 - Entry points covered.
@@ -99,14 +110,15 @@ Before writing deliverables, present a **Flow Coverage Checkpoint**:
 - Wireframe-level notes covered.
 - Layout/styling non-goals preserved.
 
-Ask whether any flow branch, state, or handoff is missing before writing.
+In the next turn, ask whether any flow branch, state, or handoff is missing before writing.
 
 ## Deliverables
 
 Write:
 
-- `specs/user-flow-[topic].md`
-- `user-flow-[topic]-interview.md`
+- `design/user-flow-[topic].md` in flat mode or `design/{slug}/user-flow-[topic].md` in product-path mode.
+- `design/user-flow-[topic]-interview.md` in flat mode or `design/{slug}/user-flow-[topic]-interview.md` in product-path mode.
+- `design/flow-tree-[topic].yaml` in flat mode or `design/{slug}/flow-tree-[topic].yaml` in product-path mode.
 
 The user-flow spec must include:
 
@@ -122,7 +134,8 @@ The user-flow spec must include:
 - Handoffs and external/manual dependencies.
 - Low-fidelity wireframe notes per screen.
 - Open questions, risks, and explicit non-goals.
-- Downstream handoff to `$ui-interview --requirements-only [topic]`.
+- Downstream handoff choices for `$ux-variations [specific-user-flow]`.
+- Flow-tree manifest branch IDs and artifact references.
 
 The interview log must include:
 
@@ -131,9 +144,12 @@ The interview log must include:
 - Questions asked, options presented, recommendations, and user responses.
 - Flow Coverage Checkpoint and remaining gaps.
 
-After approved files are written, recommend:
+After approved files are written, present this handoff choice instead of auto-running or auto-invoking the next skill:
+
+1. Stop here so the user can clear context and run `$ux-variations [specific-user-flow]` in a fresh session.
+2. Continue immediately in this session with `$ux-variations [specific-user-flow]` for the first unresolved user-flow branch.
 
-> Recommended next command: `$ui-interview --requirements-only [topic]`
+If the user chooses to continue immediately, the next skill must still execute its own required interaction gates. `user-flow-map` approval authorizes the wireframe-tree root and provides source evidence; it does not approve any UX variation branch, visual mockup, UI proposal, or implementation path, and it does not count as `ui-interview` interview completion.
 
 ## Alignment Page
 
@@ -141,7 +157,7 @@ When this skill produces durable deliverables (research, specs, plans, reports,
 
 ## Archive-First Replacement Policy
 
-- Before replacing or substantively rewriting an existing canonical research/spec document (`research/**/*.md`, `specs/**/*.md`, or `docs/specifications/**/*.md`), copy the current file to `docs/history/archive/YYYY-MM-DD/HHMMSS/<original-relative-path>`.
+- Before replacing or substantively rewriting an existing canonical research/design/spec document (`research/**/*.md`, `design/**/*.md`, `specs/**/*.md`, or `docs/specifications/**/*.md`), copy the current file to `docs/history/archive/YYYY-MM-DD/HHMMSS/<original-relative-path>`.
 - Preserve the archived snapshot exactly as it existed before the change; do not edit the archived copy after creating it.
 - After the archive snapshot exists, write the updated document to the original canonical path.
 - Report both the archive path and the updated canonical path in the final output.
@@ -149,10 +165,12 @@ When this skill produces durable deliverables (research, specs, plans, reports,
 
 ## Constraints
 
-- Keep this skill before UI layout and prototype work in the AFPS route.
+- Keep this skill before UX variation, UI layout, and prototype work in the AFPS route.
 - Do not produce high-fidelity mockups, component styling, color palettes, design systems, production architecture, database schemas, or implementation plans.
 - Do not collapse branches or states into generic "standard flow" language. Name each branch/state or mark it explicitly out of scope.
-- Do not route directly to `$ux-variations` from an approved flow map; route to `$ui-interview --requirements-only` first.
+- Do not route directly to `$ui-interview` from an approved flow map unless the user explicitly bypasses variation exploration for a named flow. The normal route is `$user-flow-map` -> `$ux-variations [specific-user-flow]` -> `$ui-interview [specific-ux-variation]`.
+- Do not write pre-prototype flow maps to `specs/`. `design/` is the canonical home for flow maps, UX variation plans, UI branch packets, branch decisions, mockup references, and flow-tree manifests.
+- Do not auto-run or auto-invoke downstream skills after approval. Present the stop/clear-context versus continue-now choice, and preserve the next skill's required gates either way.
 - When recommending a skill from another pack, verify pack availability through `.agents/project.json.enabled_packs`.
 
 ## Default Shipping Contract