skillpacks 0.1.1 → 0.1.2

package/packs/product-design/claude/consolidate-variations/archive/v0.11/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: consolidate-variations
+description: Compare multiple built UI variations, interview the user on what works and what doesn't, cherry-pick best elements, resolve conflicts, and produce a final consolidated implementation-ready UI specification
+type: planning
+version: v0.11
+argument-hint: "[optional: topic, page, or path to variation specs]"
+visual_tier: prototype
+---
+
+# Consolidate Variations
+
+Invoke as `/consolidate-variations`.
+
+Use this skill after the user has built and evaluated multiple UI layout variations (typically generated via `/ux-variations --layout-mode`, built via `/exec`, and evaluated via `/uat --variant-evaluation` (check `.agents/project.json.enabled_packs` for `product-testing` — if `product-testing` is not enabled, recommend `/pack install product-testing` inside Claude Code, or `npx skillpacks install product-testing` from the project shell, first)). This skill compares the variations, interviews the user on what works and what doesn't in each one, cherry-picks the best elements, resolves conflicts where preferred choices are incompatible, and produces a single consolidated implementation-ready UI specification.
+
+Users with manually built variations (not from the `/ux-variations` pipeline) can also use this skill directly, but consolidation should not happen before the user has reviewed the variants and captured evidence.
+
+## 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, and design artifacts when present.
+   - Locate the variation spec: `specs/ui-layout-variations-[topic].md` or `specs/ux-variations-[topic].md`.
+   - Locate the content requirements: `specs/ui-requirements-[topic].md` or equivalent content contract.
+   - Locate variant evaluation evidence: `research/uat-variant-evaluation-[topic].md`, `research/uat-plan.md` result logs, screenshots, notes, recordings, or explicit user-provided review notes.
+   - Locate built implementations: scan route files, component directories, and any variation-specific directories or branches.
+   - If the variation spec or implementations cannot be found, ask the user to point to them.
+
+2. **Evidence gate**
+   - If no evaluation evidence exists and the user has not explicitly said they already reviewed the variants and is ready to converge, stop and recommend `/uat --variant-evaluation` (check `.agents/project.json.enabled_packs` for `product-testing` — if `product-testing` is not enabled, recommend `/pack install product-testing` inside Claude Code, or `npx skillpacks install product-testing` from the project shell, first).
+   - Do not infer a winner from specs alone. Built variants need hands-on review or explicit user readiness before consolidation.
+   - If some variants are unreviewed, ask whether to exclude them, evaluate them first via `/uat --variant-evaluation` (check `.agents/project.json.enabled_packs` for `product-testing` — if `product-testing` is not enabled, recommend `/pack install product-testing` inside Claude Code, or `npx skillpacks install product-testing` from the project shell, first), or include them as spec-only references.
+
+3. **Present variation inventory**
+   - List each variation with a one-line summary of its approach.
+   - Note build status for each: built and reviewed, built but unreviewed, partially built, spec-only.
+   - Note evidence status for each: result log present, user notes present, no evidence.
+   - Use AskUserQuestion to confirm which variations the user has reviewed and wants to evaluate. Skip unreviewed or unbuilt variations unless the user wants to include them from spec alone.
+
+4. **Interview per variation**
+   - For each reviewed variation, ask using AskUserQuestion (1–3 questions per turn):
+     - What works well in this variation? Name specific elements, regions, or interactions.
+     - What doesn't work? What feels wrong, cluttered, sparse, or confusing?
+     - Any specific component, region, or interaction you want to keep in the final design?
+     - Anything to explicitly reject — never use this approach?
+   - Record responses as structured annotations per variation:
+     - **Keep**: elements the user wants in the final design (with source variation)
+     - **Reject**: elements the user never wants (with source variation)
+     - **Neutral**: elements the user has no strong opinion on
+
+5. **Cross-variation synthesis**
+   - Present a **Consolidation Matrix** showing each design dimension and which variation's approach the user preferred:
+
+   | Design Element | Variation A | Variation B | Variation C | Winner |
+   |---|---|---|---|---|
+   | Container pattern | card grid | data table | list+detail | ? |
+   | Detail view | modal | sidebar | full-page | ? |
+   | Navigation | top-nav | side-nav | tabs | ? |
+   | ... | ... | ... | ... | ... |
+
+   - Fill in winners based on the interview. Mark conflicts where preferred choices from different dimensions are incompatible (e.g., user wants sidebar detail from Variation B but also wants the full-width card grid from Variation A — these compete for horizontal space).
+   - For each conflict:
+     - Present the tension clearly
+     - Offer 2–3 resolution options with tradeoffs
+     - State a recommendation
+     - Use AskUserQuestion to resolve
+   - Continue until every row in the matrix has a winner and all conflicts are resolved.
+
+6. **Build consolidated prototype**
+   - Merge the best elements from variation prototypes into a single runnable artifact at `prototypes/{topic}/consolidated/`.
+   - The consolidated prototype must reflect:
+     - Layout skeleton (regions, proportions, scroll behavior)
+     - Primary content pattern (how items are displayed)
+     - Detail view pattern (how full item details are accessed)
+     - Navigation pattern and placement
+     - Action placement (create, edit, delete, bulk, contextual)
+     - Density and spacing approach
+     - Responsive behavior at mobile, tablet, and desktop breakpoints
+     - States rendering (empty, loading, error, partial, offline)
+   - Use AskUserQuestion to confirm the consolidated design before building the prototype.
+
+7. **Coverage checkpoint**
+   - Verify every content requirement from `specs/ui-requirements-[topic].md` has a UI home in the consolidated spec.
+   - Verify every user action has a placement (button, menu item, keyboard shortcut, or gesture).
+   - Verify all states (empty, loading, error, partial, full, offline, permission-denied) are accounted for.
+   - Flag any gaps and resolve via AskUserQuestion before writing.
+
+## Deliverables
+
+- Write the consolidated prototype to `prototypes/{topic}/consolidated/`.
+- Write the consolidation interview log to `consolidate-variations-[topic]-interview.md`.
+
+### 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/consolidate-variations-{topic}.html`.
+
+## Constraints
+
+- Do not proceed without evaluation evidence unless the user explicitly says they have reviewed the variants and is ready to converge.
+- Do not pick winners without user input. Present the matrix and let the user decide.
+- Do not ignore conflicts. If two preferred choices are spatially or functionally incompatible, surface the tension and resolve it explicitly.
+- The consolidated spec must be at least as detailed as a `/ui-interview` output — implementation-ready, not a summary.
+- Do not lose content requirements. Every data field, action, and state from the requirements spec must appear in the final design.
+- Do not bias toward the first or last variation reviewed. Present them neutrally and let the user's feedback drive the outcome.
+- When recommending a skill from another pack, verify the pack is installed via `.agents/project.json` `enabled_packs`. If not installed, recommend `/pack install <pack-name>` inside Claude Code, or `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/claude/consolidate-variations/archive/v0.12/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: consolidate-variations
+description: Compare multiple built UI variations, interview the user on what works and what doesn't, cherry-pick best elements, resolve conflicts, and produce a final consolidated implementation-ready UI specification
+type: planning
+version: v0.12
+argument-hint: "[optional: topic, page, or path to variation specs]"
+visual_tier: prototype
+---
+
+# Consolidate Variations
+
+Invoke as `/consolidate-variations`.
+
+Use this skill after the user has built and evaluated multiple UI layout variations (typically generated via `/ux-variations --layout-mode`, built via `/exec`, and evaluated via `/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)). This skill compares the variations, interviews the user on what works and what doesn't in each one, cherry-picks the best elements, resolves conflicts where preferred choices are incompatible, and produces a single consolidated implementation-ready UI specification.
+
+Users with manually built variations (not from the `/ux-variations` pipeline) can also use this skill directly, but consolidation should not happen before the user has reviewed the variants and captured evidence.
+
+## 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, and design artifacts when present.
+   - Locate the variation spec: `specs/ui-layout-variations-[topic].md` or `specs/ux-variations-[topic].md`.
+   - Locate the content requirements: `specs/ui-requirements-[topic].md` or equivalent content contract.
+   - Locate variant evaluation evidence: `research/uat-variant-evaluation-[topic].md`, `research/uat-plan.md` result logs, screenshots, notes, recordings, or explicit user-provided review notes.
+   - Locate built implementations: scan route files, component directories, and any variation-specific directories or branches.
+   - If the variation spec or implementations cannot be found, ask the user to point to them.
+
+2. **Evidence gate**
+   - If no evaluation evidence exists and the user has not explicitly said they already reviewed the variants and is ready to converge, stop and recommend `/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).
+   - Do not infer a winner from specs alone. Built variants need hands-on review or explicit user readiness before consolidation.
+   - If some variants are unreviewed, ask whether to exclude them, evaluate them first via `/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), or include them as spec-only references.
+
+3. **Present variation inventory**
+   - List each variation with a one-line summary of its approach.
+   - Note build status for each: built and reviewed, built but unreviewed, partially built, spec-only.
+   - Note evidence status for each: result log present, user notes present, no evidence.
+   - Use AskUserQuestion to confirm which variations the user has reviewed and wants to evaluate. Skip unreviewed or unbuilt variations unless the user wants to include them from spec alone.
+
+4. **Interview per variation**
+   - For each reviewed variation, ask using AskUserQuestion (1–3 questions per turn):
+     - What works well in this variation? Name specific elements, regions, or interactions.
+     - What doesn't work? What feels wrong, cluttered, sparse, or confusing?
+     - Any specific component, region, or interaction you want to keep in the final design?
+     - Anything to explicitly reject — never use this approach?
+   - Record responses as structured annotations per variation:
+     - **Keep**: elements the user wants in the final design (with source variation)
+     - **Reject**: elements the user never wants (with source variation)
+     - **Neutral**: elements the user has no strong opinion on
+
+5. **Cross-variation synthesis**
+   - Present a **Consolidation Matrix** showing each design dimension and which variation's approach the user preferred:
+
+   | Design Element | Variation A | Variation B | Variation C | Winner |
+   |---|---|---|---|---|
+   | Container pattern | card grid | data table | list+detail | ? |
+   | Detail view | modal | sidebar | full-page | ? |
+   | Navigation | top-nav | side-nav | tabs | ? |
+   | ... | ... | ... | ... | ... |
+
+   - Fill in winners based on the interview. Mark conflicts where preferred choices from different dimensions are incompatible (e.g., user wants sidebar detail from Variation B but also wants the full-width card grid from Variation A — these compete for horizontal space).
+   - For each conflict:
+     - Present the tension clearly
+     - Offer 2–3 resolution options with tradeoffs
+     - State a recommendation
+     - Use AskUserQuestion to resolve
+   - Continue until every row in the matrix has a winner and all conflicts are resolved.
+
+6. **Build consolidated prototype**
+   - Merge the best elements from variation prototypes into a single runnable artifact at `prototypes/{topic}/consolidated/`.
+   - The consolidated prototype must reflect:
+     - Layout skeleton (regions, proportions, scroll behavior)
+     - Primary content pattern (how items are displayed)
+     - Detail view pattern (how full item details are accessed)
+     - Navigation pattern and placement
+     - Action placement (create, edit, delete, bulk, contextual)
+     - Density and spacing approach
+     - Responsive behavior at mobile, tablet, and desktop breakpoints
+     - States rendering (empty, loading, error, partial, offline)
+   - Use AskUserQuestion to confirm the consolidated design before building the prototype.
+
+7. **Coverage checkpoint**
+   - Verify every content requirement from `specs/ui-requirements-[topic].md` has a UI home in the consolidated spec.
+   - Verify every user action has a placement (button, menu item, keyboard shortcut, or gesture).
+   - Verify all states (empty, loading, error, partial, full, offline, permission-denied) are accounted for.
+   - Flag any gaps and resolve via AskUserQuestion before writing.
+
+## Deliverables
+
+- Write the consolidated prototype to `prototypes/{topic}/consolidated/`.
+- Write the consolidation interview log to `consolidate-variations-[topic]-interview.md`.
+
+### 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/consolidate-variations-{topic}.html`.
+
+## Constraints
+
+- Do not proceed without evaluation evidence unless the user explicitly says they have reviewed the variants and is ready to converge.
+- Do not pick winners without user input. Present the matrix and let the user decide.
+- Do not ignore conflicts. If two preferred choices are spatially or functionally incompatible, surface the tension and resolve it explicitly.
+- The consolidated spec must be at least as detailed as a `/ui-interview` output — implementation-ready, not a summary.
+- Do not lose content requirements. Every data field, action, and state from the requirements spec must appear in the final design.
+- Do not bias toward the first or last variation reviewed. Present them neutrally and let the user's feedback drive the outcome.
+- 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/claude/design-system/ALIGNMENT-PAGE.md

@@ -57,7 +57,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-design-system-research.md`; product-path mode uses `research/{slug}/_working/preliminary-design-system-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-design-system-research.md`; product-path mode uses `research/{slug}/_working/preliminary-design-system-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.
 
 **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.
 

package/packs/product-design/claude/design-system/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 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 cross-pack recommendations while preserving Claude `/pack install ...` routes.

package/packs/product-design/claude/design-system/SKILL.md

@@ -2,7 +2,7 @@
 name: design-system
 description: Extract or scan design tokens from a consolidated UI spec or existing codebase and produce a DESIGN.md file following the Google Labs Stitch format — machine-readable YAML frontmatter with prose rationale sections
 type: planning
-version: v0.2
+version: v0.3
 argument-hint: "[spec path | --scan | --update]"
 visual_tier: prototype
 ---
@@ -144,7 +144,7 @@ Also use this skill retroactively on an existing codebase (`--scan`) to generate
 - Do not include tokens for features that don't exist yet — scope to the current spec or codebase.
 - Keep the YAML frontmatter machine-readable. No comments in YAML. Put rationale in prose sections.
 - Token cross-references use curly braces: `{colors.primary}`, `{spacing.md}`, `{rounded.lg}`.
-- When recommending a skill from another pack, verify the pack is installed via `.agents/project.json` `enabled_packs`. If not installed, recommend `/pack install <pack-name>` inside Claude Code, or `npx skillpacks install <pack-name>` from the project shell, before the target skill.
+- 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.
 - When updating an existing DESIGN.md, preserve token names and values that haven't changed. Only modify tokens that the new spec explicitly changes.
 
 ## Alignment Page

package/packs/product-design/claude/design-system/archive/v0.2/SKILL.md

@@ -0,0 +1,156 @@
+---
+name: design-system
+description: Extract or scan design tokens from a consolidated UI spec or existing codebase and produce a DESIGN.md file following the Google Labs Stitch format — machine-readable YAML frontmatter with prose rationale sections
+type: planning
+version: v0.2
+argument-hint: "[spec path | --scan | --update]"
+visual_tier: prototype
+---
+
+# Design System
+
+Invoke as `/design-system`.
+
+Use this skill after `/consolidate-variations` to lock design decisions into machine-readable tokens before implementation begins. It bridges the gap between prose UI specs and code — without it, agents interpret "dark surface with primary accent" differently each session, causing UI consistency drift.
+
+Also use this skill retroactively on an existing codebase (`--scan`) to generate a DESIGN.md from tokens already in use.
+
+## Modes
+
+- **Default**: reads `specs/ui-final-*.md` or `prototypes/*/consolidated/` (or a user-provided spec path) and extracts tokens.
+- **`--scan`**: scans the codebase for CSS custom properties, Tailwind config, theme files, and component patterns to reverse-engineer a DESIGN.md.
+- **`--update`**: reads an existing `DESIGN.md` alongside new spec changes and produces an updated version.
+
+## Process
+
+1. **Resolve context**
+   - Read `.agents/project.json`, `README.md`, `AGENTS.md`, `CLAUDE.md` when present.
+   - Locate the input source:
+     - Default: find `specs/ui-final-*.md` or accept a path argument.
+     - `--scan`: find `tailwind.config.*`, `globals.css`, CSS custom property files, theme files, component directories, and any existing design token files.
+     - `--update`: read the existing `DESIGN.md` and the changed spec or codebase files.
+   - If no input can be found, ask the user to point to the source.
+
+2. **Extract raw tokens**
+   - From spec: pull every concrete visual decision — colors (hex, HSL, OKLCH), font families, font sizes, weights, line heights, spacing values, border radii, shadows, elevation layers, and component-level styling.
+   - From codebase (`--scan`): parse Tailwind config extends, CSS custom properties, repeated Tailwind classes, theme provider values, and component prop defaults. Deduplicate and group by semantic role.
+   - Normalize all colors to hex. Record OKLCH or HSL originals as comments when present.
+   - Identify semantic roles: primary, secondary, accent, surface, background, on-primary, on-surface, error, warning, success, info, border, muted.
+
+3. **Interview to confirm tokens**
+   - Present the extracted token inventory grouped by category (Colors, Typography, Spacing, Shapes, Elevation, Components).
+   - For each category, use AskUserQuestion (1–3 questions per turn):
+     - Are these the correct values? Flag any that look like defaults vs intentional choices.
+     - Are there missing semantic roles? (e.g., no error color found, no hover state defined)
+     - For typography: confirm the scale — is this intentional or inherited from a framework default?
+     - For spacing: confirm the scale — 4px base? 8px base? Irregular?
+   - Record user confirmations and adjustments.
+
+4. **Validate accessibility**
+   - Check WCAG 2.1 AA contrast ratios for all foreground/background color pairings:
+     - Normal text: minimum 4.5:1
+     - Large text (≥18px bold or ≥24px): minimum 3:1
+     - UI components and graphical objects: minimum 3:1
+   - Report failures with the specific pairing, current ratio, and minimum required.
+   - Use AskUserQuestion to resolve failures: adjust the color, accept the risk, or mark as decorative-only.
+
+5. **Draft DESIGN.md**
+   - Follow the Google Labs Stitch format. The file has two parts:
+
+   **Part 1 — YAML frontmatter** with machine-readable tokens:
+   ```yaml
+   ---
+   version: "1.0"
+   name: "Project Design System"
+   colors:
+     primary: "#1A1C1E"
+     on-primary: "#FFFFFF"
+     secondary: "#4A6741"
+     surface: "#FAFAFA"
+     background: "#FFFFFF"
+     error: "#BA1A1A"
+     border: "#E0E0E0"
+   typography:
+     h1:
+       fontFamily: "Inter"
+       fontSize: "2.25rem"
+       fontWeight: 700
+       lineHeight: 1.2
+     body:
+       fontFamily: "Inter"
+       fontSize: "1rem"
+       fontWeight: 400
+       lineHeight: 1.5
+   spacing:
+     xs: "4px"
+     sm: "8px"
+     md: "16px"
+     lg: "24px"
+     xl: "32px"
+   rounded:
+     sm: "4px"
+     md: "8px"
+     lg: "16px"
+     full: "9999px"
+   elevation:
+     sm: "0 1px 2px rgba(0,0,0,0.05)"
+     md: "0 4px 6px rgba(0,0,0,0.1)"
+     lg: "0 10px 15px rgba(0,0,0,0.1)"
+   components:
+     button:
+       backgroundColor: "{colors.primary}"
+       textColor: "{colors.on-primary}"
+       rounded: "{rounded.md}"
+       paddingX: "{spacing.lg}"
+       paddingY: "{spacing.sm}"
+     card:
+       backgroundColor: "{colors.surface}"
+       border: "1px solid {colors.border}"
+       rounded: "{rounded.lg}"
+       padding: "{spacing.lg}"
+       shadow: "{elevation.sm}"
+   ---
+   ```
+
+   **Part 2 — Prose sections** (all optional, must appear in this order if present):
+
+   Each prose section must be written as a Markdown heading, not a bold paragraph label. Use `## Overview`, `## Colors`, `## Typography`, and the other section names below exactly when present.
+
+   1. `## Overview` — brand identity, visual tone, and design philosophy.
+   2. `## Colors` — palette rationale, dark mode strategy, semantic color usage.
+   3. `## Typography` — type scale rationale, heading hierarchy, body text rules.
+   4. `## Layout & Spacing` — grid strategy, spacing scale rationale, container max-widths, content density.
+   5. `## Elevation & Depth` — shadow usage, layering rules, z-index strategy.
+   6. `## Shapes` — corner radius philosophy, form language.
+   7. `## Components` — styling guidance for UI atoms including state variants (hover, active, disabled, focus). Reference tokens using `{token.path}` syntax.
+   8. `## Do's and Don'ts` — concrete guardrails. Include at least: colors to never use, spacing anti-patterns, component misuse patterns observed in prior implementations.
+
+   - Use `{colors.primary}` cross-reference syntax in component definitions and prose.
+   - Present the draft to the user via AskUserQuestion before writing.
+
+6. **Write deliverables**
+   - Write `DESIGN.md` to the project root.
+   - If `--update`: archive the previous version to `docs/history/archive/YYYY-MM-DD/HHMMSS/DESIGN.md` first.
+
+## Deliverables
+
+- `DESIGN.md` in the project root — the single source of truth for visual identity, consumed by both Claude Code and Codex.
+- Interview log written to `design-system-interview.md` in the project root.
+
+## Constraints
+
+- Do not invent token values. Every value must come from the spec, codebase scan, or explicit user confirmation.
+- Do not skip the accessibility check. Report all contrast failures even if the user is likely to accept them.
+- Do not include tokens for features that don't exist yet — scope to the current spec or codebase.
+- Keep the YAML frontmatter machine-readable. No comments in YAML. Put rationale in prose sections.
+- Token cross-references use curly braces: `{colors.primary}`, `{spacing.md}`, `{rounded.lg}`.
+- When recommending a skill from another pack, verify the pack is installed via `.agents/project.json` `enabled_packs`. If not installed, recommend `/pack install <pack-name>` inside Claude Code, or `npx skillpacks install <pack-name>` from the project shell, before the target skill.
+- When updating an existing DESIGN.md, preserve token names and values that haven't changed. Only modify tokens that the new spec explicitly changes.
+
+## 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/design-system-{topic}.html`.
+
+## Default Shipping Contract
+
+Follow the shared shipping contract convention in CLAUDE.md.

package/packs/product-design/claude/feature-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-feature-interview-research.md`; product-path mode uses `research/{slug}/_working/preliminary-feature-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-feature-interview-research.md`; product-path mode uses `research/{slug}/_working/preliminary-feature-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.
 
 **Feature-specific gates.** Render the evidence brief, claim verdicts, assumptions, planning destination, prototype-first decision, priority hypothesis, and output-location/change-scope decisions as gates before writing or updating durable planning artifacts. 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/claude/feature-interview/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.7 - 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.6 - 2026-06-11
 
 - Added npm-aware install-route wording for pack availability and cross-pack recommendations while preserving Claude `/pack install ...` routes.

package/packs/product-design/claude/feature-interview/SKILL.md

@@ -2,20 +2,20 @@
 name: feature-interview
 description: Interview a feature idea with evidence-backed alignment, then decide whether to create/update docs, specs, roadmap, or tasks
 type: planning
-version: v0.6
+version: v0.7
 argument-hint: "[feature idea or tasks/ideas.md entry]"
-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 Claude Code, 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.
 
 # Feature Interview
 
 Use this skill when the user has a feature idea, brainstorm suggestion, research gap, bug-shaped improvement, or implementation direction that needs evidence-backed alignment before deciding whether to write or update research docs, journey docs, specs, roadmap entries, task queues, or route directly to another planning skill. This skill is also the primary entry point for post-ship feature work, where scope determines the re-entry depth into the pipeline.
 
-This is narrower than `/spec-interview`: it performs the same assumption surfacing and user interrogation needed for human/agent alignment, but it does not assume the output must be a full new implementation spec. It borrows `/investigate`'s evidence discipline for claims, codebase fit, and technical gotchas, but it does not fix bugs or implement the feature.
+This is narrower than `/spec-interview`: it performs the same assumption surfacing and deep interview needed for human/agent alignment, but it does not assume the output must be a full new implementation spec. It borrows `/investigate`'s evidence discipline for claims, codebase fit, and technical gotchas, but it does not fix bugs or implement the feature.
 
 Use `/feature-interview` especially after a production spec already exists and the user wants to add, adjust, or triage a smaller feature. In post-spec use, treat existing specs as the baseline contract: prefer a scoped add-on spec or a tightly bounded update to an existing spec over re-running `/spec-interview` for the whole product. Only route to `/spec-interview` when the existing spec is absent, obsolete, or too incomplete to support the new feature decision.
 
@@ -142,7 +142,7 @@ When this skill produces durable deliverables (research, specs, plans, reports,
 - Do not produce a full implementation spec unless the interview proves a new or rewritten spec is the right destination.
 - Do not route brainstorm ideas directly to `/spec-interview`; use `/feature-interview` for triage unless the user explicitly asks for a full spec.
 - Do not implement fixes or feature code from this skill. If the evidence pass uncovers a bug, route to `/investigate` (requires code-debug pack); if it uncovers buildable planned work, route through `/roadmap` (requires agent-work-admin pack), `/plan-phase` (requires agent-work-admin pack), or `/exec` (requires exec-loop pack).
-- When recommending a skill from another pack, verify the pack is installed via `.agents/project.json` `enabled_packs`. If not installed, recommend `/pack install <pack-name>` inside Claude Code, or `npx skillpacks install <pack-name>` from the project shell, before the target skill.
+- 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.
 
 ## Default Shipping Contract