skillpacks 0.1.1 → 0.1.2

package/packs/product-design/codex/prototype/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: prototype
-description: Build tangible, runnable prototypes from UX variation and UI specs — static HTML/CSS for UI projects, runnable scripts for CLI, endpoint stubs for API, or minimal configs for infra
+description: Build tangible, runnable prototypes from design-phase UX variation and UI branch packets — static HTML/CSS for UI projects, runnable scripts for CLI, endpoint stubs for API, or minimal configs for infra
 type: execution
-version: v0.12
+version: v0.14
 argument-hint: "[optional: topic, --variant N]"
 visual_tier: prototype
 ---
@@ -17,16 +17,16 @@ Build tangible, runnable prototypes before production spec work begins. Create t
 
 Before proceeding, verify the following files exist:
 
-- At least one `specs/ux-variations-*.md` file.
-- At least one `specs/ui-*.md` file (e.g., `specs/ui-[topic].md`, `specs/ui-layout-variations-[topic].md`, or `specs/ui-requirements-[topic].md`).
+- At least one `design/ux-variations-*.md` file or product-path-scoped equivalent.
+- At least one `design/ui-*.md` file or product-path-scoped equivalent (e.g., `design/ui-[topic].md`, `design/ui-layout-variations-[topic].md`, or `design/ui-requirements-[topic].md`).
 
-Also read `specs/user-flow-*.md` when present as an upstream screen-ordering and task-sequencing signal. It is preferred evidence, not a hard prerequisite for this gate.
+Also read `design/user-flow-*.md` and `design/**/flow-tree-*.yaml` when present as upstream screen-ordering, task-sequencing, branch-state, and approval-state signals. They are preferred evidence, not hard prerequisites for this gate.
 
 If either is missing, halt with a clear message:
 
 > Prototyping requires UX variation planning and UI specification. Missing prerequisites:
-> - `specs/ux-variations-*.md` — run `$ux-variations` to create variation concepts.
-> - `specs/ui-*.md` — run `$ui-interview` to define the interface specification.
+> - `design/ux-variations-*.md` — run `$ux-variations` to create variation concepts.
+> - `design/ui-*.md` — run `$ui-interview` to define the interface specification.
 
 Do not proceed past this gate until both prerequisites exist.
 
@@ -44,7 +44,7 @@ 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 research under `research/{slug}/`, read pre-prototype design artifacts under `design/{slug}/`, write prototype output under `prototypes/{topic}/`, and treat top-level `research/*.md` and `design/*.md` files as flat-mode documents or cross-path summaries.
 
 ### 1. Resolve context
 
@@ -54,10 +54,10 @@ When product path `{slug}` is active, read and write research under `research/{s
   - `research/icp.md` — ideal customer profile; informs copy density, terminology, and information hierarchy.
   - `research/competitive-analysis.md` — differentiation points the prototype should highlight.
   - `research/journey-map.md` — screen flow ordering, entry points, and task sequencing.
-- Read variation specs: `specs/ux-variations-[topic].md` for each relevant topic.
-- Read user-flow specs: `specs/user-flow-[topic].md` for screen ordering, entry points, branches, decision points, required states, failure/recovery paths, handoffs, and low-fidelity wireframe notes when present.
-- Read per-variation UI specs: `specs/ui-[topic].md`, `specs/ui-layout-variations-[topic].md`, and `specs/ui-requirements-[topic].md` when present.
-- If an argument is provided, use it as the topic filter. Otherwise, identify the topic from available specs.
+- Read variation plans: `design/ux-variations-[topic].md` or product-path-scoped equivalents for each relevant topic.
+- Read user-flow maps: `design/user-flow-[topic].md` and `design/**/flow-tree-*.yaml` for screen ordering, entry points, branches, decision points, required states, failure/recovery paths, handoffs, branch approval state, and low-fidelity wireframe notes when present.
+- Read per-variation UI branch packets: `design/ui-[topic].md`, `design/ui-layout-variations-[topic].md`, and `design/ui-requirements-[topic].md` when present.
+- If an argument is provided, use it as the topic filter. Otherwise, identify the topic from available design artifacts.
 
 ### 2. Research integration
 
@@ -65,7 +65,7 @@ Before building, extract actionable signals from research:
 
 - **ICP** (`research/icp.md`): Determine copy density (expert vs. novice), terminology choices, information hierarchy, and default density (compact vs. spacious). The prototype should feel like it was built for the target user, not a generic audience.
 - **Journey map** (`research/journey-map.md`): Derive screen flow ordering. The prototype's navigation and page sequence should follow the user's natural task progression, not an arbitrary menu order.
-- **User-flow map** (`specs/user-flow-[topic].md`): Derive concrete screen order, route inventory, branches, required states, failure/recovery behavior, and low-fidelity wireframe structure. The prototype should preserve the approved task sequence unless a variation spec explicitly changes it.
+- **User-flow map** (`design/user-flow-[topic].md` and `design/**/flow-tree-*.yaml`): Derive concrete screen order, route inventory, branches, required states, failure/recovery behavior, low-fidelity wireframe structure, and branch approval state. The prototype should preserve the approved task sequence unless a variation plan explicitly changes it.
 - **Competitive analysis** (`research/competitive-analysis.md`): Identify differentiation points the prototype must highlight. If the product's thesis is "faster than X" or "simpler than Y," the prototype should make that advantage viscerally obvious.
 - **Idea brief** (`research/idea-brief.md`): Surface assumptions the prototype is designed to test. Each prototype variation should help validate or invalidate at least one idea-brief assumption.
 
@@ -123,10 +123,10 @@ For CLI, API, and Infra modes, build exactly one core workflow demo with fixture
 
 ### 5. Build each variation
 
-For each variation defined in `specs/ux-variations-[topic].md`:
+For each variation defined in `design/ux-variations-[topic].md`:
 
 1. Read the variation's thesis, target user, layout/flow model, and prototype scope from the spec.
-2. Read the corresponding UI spec details from `specs/ui-[topic].md` or `specs/ui-layout-variations-[topic].md`.
+2. Read the corresponding UI branch details from `design/ui-[topic].md` or `design/ui-layout-variations-[topic].md`.
 3. Build the prototype artifact in `prototypes/{topic}/variation-{N}/`.
 4. Name the directory using the variation number from the spec (1-indexed).
 5. Ensure the prototype is immediately usable: open the HTML file, run the script, curl the endpoint, or read the config.
@@ -171,7 +171,7 @@ prototypes/{topic}/
 
 After prototypes are built, recommend:
 
-> Recommended next command: `$uat --variant-evaluation` (check `.agents/project.json.enabled_packs` for `product-testing` — if `product-testing` is not enabled, recommend `$pack install product-testing` inside Codex, or `npx skillpacks install product-testing` from the project shell, first)
+> Recommended next command: `$uat --variant-evaluation` (check `.agents/project.json.enabled_packs` for `product-testing` — if `product-testing` is not enabled, recommend `npx skillpacks install product-testing` from the project shell, first)
 
 The user should interact with each prototype variation hands-on before consolidating. UAT variant evaluation provides a structured comparison framework to capture evidence for each variation's strengths, friction points, and rejection signals.
 

package/packs/product-design/codex/prototype/archive/v0.12/SKILL.md

@@ -0,0 +1,195 @@
+---
+name: prototype
+description: Build tangible, runnable prototypes from UX variation and UI specs — static HTML/CSS for UI projects, runnable scripts for CLI, endpoint stubs for API, or minimal configs for infra
+type: execution
+version: v0.12
+argument-hint: "[optional: topic, --variant N]"
+visual_tier: prototype
+---
+
+# Prototype
+
+Invoke as `$prototype`.
+
+Build tangible, runnable prototypes before production spec work begins. Create the first concrete artifact users can interact with, grounded in research and UX variation planning. Prototypes are cheap, disposable, and designed for evaluation — not production readiness. The goal is to give humans something to click, run, or curl so they can form opinions before committing to a direction.
+
+## Gate
+
+Before proceeding, verify the following files exist:
+
+- At least one `specs/ux-variations-*.md` file.
+- At least one `specs/ui-*.md` file (e.g., `specs/ui-[topic].md`, `specs/ui-layout-variations-[topic].md`, or `specs/ui-requirements-[topic].md`).
+
+Also read `specs/user-flow-*.md` when present as an upstream screen-ordering and task-sequencing signal. It is preferred evidence, not a hard prerequisite for this gate.
+
+If either is missing, halt with a clear message:
+
+> Prototyping requires UX variation planning and UI specification. Missing prerequisites:
+> - `specs/ux-variations-*.md` — run `$ux-variations` to create variation concepts.
+> - `specs/ui-*.md` — run `$ui-interview` to define the interface specification.
+
+Do not proceed past this gate until both prerequisites exist.
+
+## 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. Extract `project_type` for dispatch decisions.
+- Read research documents when present:
+  - `research/idea-brief.md` — assumptions to test, core value proposition, and hypothesis framing.
+  - `research/icp.md` — ideal customer profile; informs copy density, terminology, and information hierarchy.
+  - `research/competitive-analysis.md` — differentiation points the prototype should highlight.
+  - `research/journey-map.md` — screen flow ordering, entry points, and task sequencing.
+- Read variation specs: `specs/ux-variations-[topic].md` for each relevant topic.
+- Read user-flow specs: `specs/user-flow-[topic].md` for screen ordering, entry points, branches, decision points, required states, failure/recovery paths, handoffs, and low-fidelity wireframe notes when present.
+- Read per-variation UI specs: `specs/ui-[topic].md`, `specs/ui-layout-variations-[topic].md`, and `specs/ui-requirements-[topic].md` when present.
+- If an argument is provided, use it as the topic filter. Otherwise, identify the topic from available specs.
+
+### 2. Research integration
+
+Before building, extract actionable signals from research:
+
+- **ICP** (`research/icp.md`): Determine copy density (expert vs. novice), terminology choices, information hierarchy, and default density (compact vs. spacious). The prototype should feel like it was built for the target user, not a generic audience.
+- **Journey map** (`research/journey-map.md`): Derive screen flow ordering. The prototype's navigation and page sequence should follow the user's natural task progression, not an arbitrary menu order.
+- **User-flow map** (`specs/user-flow-[topic].md`): Derive concrete screen order, route inventory, branches, required states, failure/recovery behavior, and low-fidelity wireframe structure. The prototype should preserve the approved task sequence unless a variation spec explicitly changes it.
+- **Competitive analysis** (`research/competitive-analysis.md`): Identify differentiation points the prototype must highlight. If the product's thesis is "faster than X" or "simpler than Y," the prototype should make that advantage viscerally obvious.
+- **Idea brief** (`research/idea-brief.md`): Surface assumptions the prototype is designed to test. Each prototype variation should help validate or invalidate at least one idea-brief assumption.
+
+Document which research signals influenced which prototype decisions in a brief `## Research Integration` section at the top of the hub page.
+
+### 3. Project type dispatch
+
+Determine the project type from `.agents/project.json` `project_type` field. If the field is absent, infer from repository signals (package.json scripts, Dockerfile presence, CLI entry points, route files, etc.). Dispatch to one of the following modes:
+
+#### UI mode (business-app, or default when no project_type)
+
+Build static HTML/CSS prototypes for each variation:
+
+- One self-contained HTML file per variation at `prototypes/{topic}/variation-{N}/index.html`.
+- Inline CSS and minimal inline JS (no build tools, no bundler, no framework dependencies).
+- Fake but realistic data — use plausible names, dates, amounts, and content that matches the ICP.
+- Clickable navigation between pages/views within the variation. Use anchor links, hash routing, or multiple HTML files as appropriate.
+- Responsive layout when the UI spec defines responsive behavior.
+- Visual states: show default, empty, loading (static representation), and error states where the spec defines them.
+- Do not use CDN-hosted frameworks or libraries. The prototype must work offline from a file:// URL.
+- Include a brief `<!-- Variation N: [Name] — [Thesis] -->` comment at the top of each HTML file.
+
+#### CLI mode (devtool with CLI focus)
+
+Build runnable script prototypes for each variation:
+
+- One executable script per variation at `prototypes/{topic}/variation-{N}/demo.sh` (or `.py`, `.js`, etc., matching the project's primary language).
+- Include fixture data files alongside the script.
+- Demonstrate one core workflow end-to-end: the user runs a single command (or short sequence) and sees realistic output.
+- Include inline comments explaining which variation thesis this demonstrates.
+- Scripts must be runnable with standard tooling (bash, node, python) without additional dependencies.
+
+#### API mode (devtool with API focus)
+
+Build endpoint stub prototypes for each variation:
+
+- One lightweight server or mock per variation at `prototypes/{topic}/variation-{N}/server.{ext}`.
+- Fixture JSON responses for each endpoint.
+- A `curl-examples.sh` file with annotated curl commands demonstrating the core workflow.
+- Include a brief README in each variation directory explaining the API design thesis.
+- Endpoints return fixture data; no database or persistence required.
+
+#### Infra mode
+
+Build minimal configuration prototypes for each variation:
+
+- One `docker-compose.yml` or equivalent config per variation at `prototypes/{topic}/variation-{N}/`.
+- Include `.env.example`, config files, and documentation sufficient to understand the infrastructure concept.
+- Do not require running services; use placeholder images or mock services where possible.
+- Include a brief README explaining the infrastructure thesis and what a user would observe if they ran it.
+
+### 4. Scope rule (non-UI modes)
+
+For CLI, API, and Infra modes, build exactly one core workflow demo with fixture data per variation. Do not attempt full API coverage, complete CLI help systems, or production-ready infrastructure. The prototype exists to make the variation thesis tangible, not to implement the product.
+
+### 5. Build each variation
+
+For each variation defined in `specs/ux-variations-[topic].md`:
+
+1. Read the variation's thesis, target user, layout/flow model, and prototype scope from the spec.
+2. Read the corresponding UI spec details from `specs/ui-[topic].md` or `specs/ui-layout-variations-[topic].md`.
+3. Build the prototype artifact in `prototypes/{topic}/variation-{N}/`.
+4. Name the directory using the variation number from the spec (1-indexed).
+5. Ensure the prototype is immediately usable: open the HTML file, run the script, curl the endpoint, or read the config.
+
+### 6. Build the hub page
+
+Create a hub page at `prototypes/{topic}/index.html` that:
+
+- Lists every variation with its name, thesis, and a direct link to the variation's entry point.
+- Includes the research integration summary (which research signals drove which decisions).
+- Provides brief instructions for evaluating each variation.
+- For UI mode: links open the variation's `index.html` in the same browser.
+- For CLI/API/Infra modes: the hub page is a simple HTML document with copy-pasteable commands to run each variation.
+- After writing or updating the hub page, attempt to open `prototypes/{topic}/index.html` in the browser and report whether the browser open succeeded or was blocked. A blocked browser open does not make the prototype fail when the files were written correctly.
+
+### 7. `--variant N` flag
+
+When the user provides `--variant N` (or says "rebuild variation N", "only variation N", etc.):
+
+- Build or rebuild only variation N, preserving all other existing variations and the hub page.
+- Update the hub page to reflect any changes to the rebuilt variation.
+- Do not delete or modify other variation directories.
+
+## Output
+
+The skill produces the following file structure:
+
+```
+prototypes/{topic}/
+  index.html                    # Hub page listing all variations
+  variation-1/
+    index.html (or demo.sh, server.js, docker-compose.yml)
+    [supporting files: fixtures, styles, curl-examples, README]
+  variation-2/
+    index.html (or demo.sh, server.js, docker-compose.yml)
+    [supporting files]
+  variation-N/
+    ...
+```
+
+## Next Step
+
+After prototypes are built, recommend:
+
+> Recommended next command: `$uat --variant-evaluation` (check `.agents/project.json.enabled_packs` for `product-testing` — if `product-testing` is not enabled, recommend `$pack install product-testing` inside Codex, or `npx skillpacks install product-testing` from the project shell, first)
+
+The user should interact with each prototype variation hands-on before consolidating. UAT variant evaluation provides a structured comparison framework to capture evidence for each variation's strengths, friction points, and rejection signals.
+
+## Constraints
+
+- Do not introduce build tools, bundlers, package managers, or framework dependencies into prototypes. Prototypes must be immediately usable without installation steps.
+- Do not connect to real databases, APIs, or external services. All data must be fixture/fake data.
+- Do not build production-quality code. Prototypes are disposable artifacts for evaluation, not starting points for implementation.
+- Do not skip variations. Build all variations defined in the spec unless `--variant N` is provided.
+- Do not choose a winning variation or recommend consolidation. That is the user's decision after UAT evaluation.
+- Do not modify specs, research documents, or task files. Only create files in the `prototypes/` directory.
+
+## 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/prototype-{topic}.html`.
+
+Prototype files may be created before the alignment page because the review needs runnable artifacts. After building or updating prototype files, build and attempt to open `alignment/prototype-{topic}.html` before downstream routing, UAT handoff, consolidation, spec updates, research updates, or task/roadmap changes.
+
+## Default Shipping Contract
+
+Follow the shared shipping contract convention in CLAUDE.md.

package/packs/product-design/codex/prototype/archive/v0.13/SKILL.md

@@ -0,0 +1,195 @@
+---
+name: prototype
+description: Build tangible, runnable prototypes from UX variation and UI specs — static HTML/CSS for UI projects, runnable scripts for CLI, endpoint stubs for API, or minimal configs for infra
+type: execution
+version: v0.13
+argument-hint: "[optional: topic, --variant N]"
+visual_tier: prototype
+---
+
+# Prototype
+
+Invoke as `$prototype`.
+
+Build tangible, runnable prototypes before production spec work begins. Create the first concrete artifact users can interact with, grounded in research and UX variation planning. Prototypes are cheap, disposable, and designed for evaluation — not production readiness. The goal is to give humans something to click, run, or curl so they can form opinions before committing to a direction.
+
+## Gate
+
+Before proceeding, verify the following files exist:
+
+- At least one `specs/ux-variations-*.md` file.
+- At least one `specs/ui-*.md` file (e.g., `specs/ui-[topic].md`, `specs/ui-layout-variations-[topic].md`, or `specs/ui-requirements-[topic].md`).
+
+Also read `specs/user-flow-*.md` when present as an upstream screen-ordering and task-sequencing signal. It is preferred evidence, not a hard prerequisite for this gate.
+
+If either is missing, halt with a clear message:
+
+> Prototyping requires UX variation planning and UI specification. Missing prerequisites:
+> - `specs/ux-variations-*.md` — run `$ux-variations` to create variation concepts.
+> - `specs/ui-*.md` — run `$ui-interview` to define the interface specification.
+
+Do not proceed past this gate until both prerequisites exist.
+
+## 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. Extract `project_type` for dispatch decisions.
+- Read research documents when present:
+  - `research/idea-brief.md` — assumptions to test, core value proposition, and hypothesis framing.
+  - `research/icp.md` — ideal customer profile; informs copy density, terminology, and information hierarchy.
+  - `research/competitive-analysis.md` — differentiation points the prototype should highlight.
+  - `research/journey-map.md` — screen flow ordering, entry points, and task sequencing.
+- Read variation specs: `specs/ux-variations-[topic].md` for each relevant topic.
+- Read user-flow specs: `specs/user-flow-[topic].md` for screen ordering, entry points, branches, decision points, required states, failure/recovery paths, handoffs, and low-fidelity wireframe notes when present.
+- Read per-variation UI specs: `specs/ui-[topic].md`, `specs/ui-layout-variations-[topic].md`, and `specs/ui-requirements-[topic].md` when present.
+- If an argument is provided, use it as the topic filter. Otherwise, identify the topic from available specs.
+
+### 2. Research integration
+
+Before building, extract actionable signals from research:
+
+- **ICP** (`research/icp.md`): Determine copy density (expert vs. novice), terminology choices, information hierarchy, and default density (compact vs. spacious). The prototype should feel like it was built for the target user, not a generic audience.
+- **Journey map** (`research/journey-map.md`): Derive screen flow ordering. The prototype's navigation and page sequence should follow the user's natural task progression, not an arbitrary menu order.
+- **User-flow map** (`specs/user-flow-[topic].md`): Derive concrete screen order, route inventory, branches, required states, failure/recovery behavior, and low-fidelity wireframe structure. The prototype should preserve the approved task sequence unless a variation spec explicitly changes it.
+- **Competitive analysis** (`research/competitive-analysis.md`): Identify differentiation points the prototype must highlight. If the product's thesis is "faster than X" or "simpler than Y," the prototype should make that advantage viscerally obvious.
+- **Idea brief** (`research/idea-brief.md`): Surface assumptions the prototype is designed to test. Each prototype variation should help validate or invalidate at least one idea-brief assumption.
+
+Document which research signals influenced which prototype decisions in a brief `## Research Integration` section at the top of the hub page.
+
+### 3. Project type dispatch
+
+Determine the project type from `.agents/project.json` `project_type` field. If the field is absent, infer from repository signals (package.json scripts, Dockerfile presence, CLI entry points, route files, etc.). Dispatch to one of the following modes:
+
+#### UI mode (business-app, or default when no project_type)
+
+Build static HTML/CSS prototypes for each variation:
+
+- One self-contained HTML file per variation at `prototypes/{topic}/variation-{N}/index.html`.
+- Inline CSS and minimal inline JS (no build tools, no bundler, no framework dependencies).
+- Fake but realistic data — use plausible names, dates, amounts, and content that matches the ICP.
+- Clickable navigation between pages/views within the variation. Use anchor links, hash routing, or multiple HTML files as appropriate.
+- Responsive layout when the UI spec defines responsive behavior.
+- Visual states: show default, empty, loading (static representation), and error states where the spec defines them.
+- Do not use CDN-hosted frameworks or libraries. The prototype must work offline from a file:// URL.
+- Include a brief `<!-- Variation N: [Name] — [Thesis] -->` comment at the top of each HTML file.
+
+#### CLI mode (devtool with CLI focus)
+
+Build runnable script prototypes for each variation:
+
+- One executable script per variation at `prototypes/{topic}/variation-{N}/demo.sh` (or `.py`, `.js`, etc., matching the project's primary language).
+- Include fixture data files alongside the script.
+- Demonstrate one core workflow end-to-end: the user runs a single command (or short sequence) and sees realistic output.
+- Include inline comments explaining which variation thesis this demonstrates.
+- Scripts must be runnable with standard tooling (bash, node, python) without additional dependencies.
+
+#### API mode (devtool with API focus)
+
+Build endpoint stub prototypes for each variation:
+
+- One lightweight server or mock per variation at `prototypes/{topic}/variation-{N}/server.{ext}`.
+- Fixture JSON responses for each endpoint.
+- A `curl-examples.sh` file with annotated curl commands demonstrating the core workflow.
+- Include a brief README in each variation directory explaining the API design thesis.
+- Endpoints return fixture data; no database or persistence required.
+
+#### Infra mode
+
+Build minimal configuration prototypes for each variation:
+
+- One `docker-compose.yml` or equivalent config per variation at `prototypes/{topic}/variation-{N}/`.
+- Include `.env.example`, config files, and documentation sufficient to understand the infrastructure concept.
+- Do not require running services; use placeholder images or mock services where possible.
+- Include a brief README explaining the infrastructure thesis and what a user would observe if they ran it.
+
+### 4. Scope rule (non-UI modes)
+
+For CLI, API, and Infra modes, build exactly one core workflow demo with fixture data per variation. Do not attempt full API coverage, complete CLI help systems, or production-ready infrastructure. The prototype exists to make the variation thesis tangible, not to implement the product.
+
+### 5. Build each variation
+
+For each variation defined in `specs/ux-variations-[topic].md`:
+
+1. Read the variation's thesis, target user, layout/flow model, and prototype scope from the spec.
+2. Read the corresponding UI spec details from `specs/ui-[topic].md` or `specs/ui-layout-variations-[topic].md`.
+3. Build the prototype artifact in `prototypes/{topic}/variation-{N}/`.
+4. Name the directory using the variation number from the spec (1-indexed).
+5. Ensure the prototype is immediately usable: open the HTML file, run the script, curl the endpoint, or read the config.
+
+### 6. Build the hub page
+
+Create a hub page at `prototypes/{topic}/index.html` that:
+
+- Lists every variation with its name, thesis, and a direct link to the variation's entry point.
+- Includes the research integration summary (which research signals drove which decisions).
+- Provides brief instructions for evaluating each variation.
+- For UI mode: links open the variation's `index.html` in the same browser.
+- For CLI/API/Infra modes: the hub page is a simple HTML document with copy-pasteable commands to run each variation.
+- After writing or updating the hub page, attempt to open `prototypes/{topic}/index.html` in the browser and report whether the browser open succeeded or was blocked. A blocked browser open does not make the prototype fail when the files were written correctly.
+
+### 7. `--variant N` flag
+
+When the user provides `--variant N` (or says "rebuild variation N", "only variation N", etc.):
+
+- Build or rebuild only variation N, preserving all other existing variations and the hub page.
+- Update the hub page to reflect any changes to the rebuilt variation.
+- Do not delete or modify other variation directories.
+
+## Output
+
+The skill produces the following file structure:
+
+```
+prototypes/{topic}/
+  index.html                    # Hub page listing all variations
+  variation-1/
+    index.html (or demo.sh, server.js, docker-compose.yml)
+    [supporting files: fixtures, styles, curl-examples, README]
+  variation-2/
+    index.html (or demo.sh, server.js, docker-compose.yml)
+    [supporting files]
+  variation-N/
+    ...
+```
+
+## Next Step
+
+After prototypes are built, recommend:
+
+> Recommended next command: `$uat --variant-evaluation` (check `.agents/project.json.enabled_packs` for `product-testing` — if `product-testing` is not enabled, recommend `npx skillpacks install product-testing` from the project shell, first)
+
+The user should interact with each prototype variation hands-on before consolidating. UAT variant evaluation provides a structured comparison framework to capture evidence for each variation's strengths, friction points, and rejection signals.
+
+## Constraints
+
+- Do not introduce build tools, bundlers, package managers, or framework dependencies into prototypes. Prototypes must be immediately usable without installation steps.
+- Do not connect to real databases, APIs, or external services. All data must be fixture/fake data.
+- Do not build production-quality code. Prototypes are disposable artifacts for evaluation, not starting points for implementation.
+- Do not skip variations. Build all variations defined in the spec unless `--variant N` is provided.
+- Do not choose a winning variation or recommend consolidation. That is the user's decision after UAT evaluation.
+- Do not modify specs, research documents, or task files. Only create files in the `prototypes/` directory.
+
+## 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/prototype-{topic}.html`.
+
+Prototype files may be created before the alignment page because the review needs runnable artifacts. After building or updating prototype files, build and attempt to open `alignment/prototype-{topic}.html` before downstream routing, UAT handoff, consolidation, spec updates, research updates, or task/roadmap changes.
+
+## Default Shipping Contract
+
+Follow the shared shipping contract convention in CLAUDE.md.

package/packs/product-design/codex/spec-interview/ALIGNMENT-PAGE.md

@@ -9,6 +9,8 @@ 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.
 
+**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.
@@ -57,7 +59,9 @@ 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 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-spec-interview-research.md`; product-path mode uses `research/{slug}/_working/preliminary-spec-interview-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. 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.
+**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-spec-interview-research.md`; product-path mode uses `research/{slug}/_working/preliminary-spec-interview-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.
 
 **Spec-specific gates.** Render surfaced assumptions, scope/non-goals, candidate decisions, acceptance coverage, output-location/change-scope decisions, and post-approval route as gates before writing or replacing specs. 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.
 

package/packs/product-design/codex/spec-interview/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## v0.14 - 2026-06-13
+
+- Updated post-prototype spec interviews to consume `design/user-flow-*`, `design/ux-variations-*`, `design/ui-*`, and scoped flow-tree manifests as upstream design evidence.
+- Clarified that `spec-interview` keeps finalized production implementation specs in `specs/` and does not write pre-prototype design artifacts.
+
+## v0.13 - 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.12 - 2026-06-11
 
 - Added npm-aware install-route wording for pack and customer-lifecycle recommendations while preserving Codex `$pack install ...` routes.

package/packs/product-design/codex/spec-interview/SKILL.md

@@ -2,14 +2,14 @@
 name: spec-interview
 description: Post-prototype production deep dive — walks through consolidated prototype screen by screen to extract production specifications
 type: planning
-version: v0.12
+version: v0.14
 argument-hint: "[--ideas]"
-interview_depth: full
+context_intake: deep
 ---
 
 ## 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>` inside Codex, or `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.
+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.
 
 ## Prototype Gate
 
@@ -48,9 +48,9 @@ When product path `{slug}` is active, read and write research under `research/{s
      - `business-app` → use business research artifacts such as `research/icp.md`.
      - `game` → use game artifacts such as `research/game-audience.md`, `research/game-fantasy.md`, and `research/game-core-loop.md`.
      - `devtool` → use devtool artifacts such as `research/devtool-user-map.md`, `research/devtool-dx-journey.md`, and `research/devtool-integration-map.md`.
-   - If project type is missing or mismatched, recommend `$pack recommend`, `$pack install <pack>` inside Codex, or `npx skillpacks install <pack>` from the project shell before doing domain-specific planning.
-   - For business-app projects, check if `research/idea-brief.md`, `research/icp.md`, and `research/journey-map.md` exist. Read them as source evidence — ground implementation decisions against the concept constraints, ICP, user journey, customer journey, technical sophistication, customer provisioning model, path to aha, conversion path, retention loop, and champion dynamics. If lifecycle evidence is missing and the `customer-lifecycle` pack is not enabled, recommend `$pack install customer-lifecycle` inside Codex, or `npx skillpacks install customer-lifecycle` from the project shell, before `$journey-map`. Flag conflicts (e.g., "Journey map says the buyer needs a demo before sign-up — does this self-serve-only onboarding fit?"). Do not re-interview on concept, ICP, or journey topics already covered.
-   - Read `specs/user-flow-*.md` when present as upstream evidence for screen order, route inventory, branch decisions, state coverage, failure/recovery paths, handoffs, and low-fidelity wireframe intent.
+   - If project type is missing or mismatched, recommend `$pack recommend`, `npx skillpacks install <pack>` from the project shell before doing domain-specific planning.
+   - For business-app projects, check if `research/idea-brief.md`, `research/icp.md`, and `research/journey-map.md` exist. Read them as source evidence — ground implementation decisions against the concept constraints, ICP, user journey, customer journey, technical sophistication, customer provisioning model, path to aha, conversion path, retention loop, and champion dynamics. If lifecycle evidence is missing and the `customer-lifecycle` pack is not enabled, recommend `npx skillpacks install customer-lifecycle` from the project shell, before `$journey-map`. Flag conflicts (e.g., "Journey map says the buyer needs a demo before sign-up — does this self-serve-only onboarding fit?"). Do not re-interview on concept, ICP, or journey topics already covered.
+   - Read `design/user-flow-*.md`, `design/ux-variations-*.md`, `design/ui-*.md`, and `design/**/flow-tree-*.yaml` when present as upstream pre-prototype design evidence for screen order, route inventory, branch decisions, state coverage, failure/recovery paths, handoffs, selected UX variation branches, UI approval state, and low-fidelity wireframe intent.
 
 2. **Surface a prototype-grounded assumptions checkpoint before probing:**
    - After reading the consolidated prototype and research context but **before** asking deep probing questions, present a concise **Assumptions Checkpoint** grounded in what the prototype reveals.
@@ -100,6 +100,7 @@ When product path `{slug}` is active, read and write research under `research/{s
 ## Deliverables
 
 - Write the completed specification to `specs/[topic].md` (create the `specs/` directory if needed), where `topic` is a short kebab-case summary
+- Keep `specs/` as the canonical output directory for finalized post-prototype implementation specifications. Do not write pre-prototype flow maps, UX variation plans, UI branch packets, or flow-tree manifests from this skill; those remain design-phase artifacts under `design/`.
 - The spec must use these canonical section headings (unnumbered):
   - `## Overview`
   - `## Goals`