/arn-spark-clickable-prototype

name: arn-spark-clickable-prototype
description: >-
  This skill should be used when the user says "clickable prototype", "arn
  clickable prototype", "interactive prototype", "test interactions", "validate
  UX", "user journeys", "test navigation", "make it clickable", "prototype
  interactions", "test the prototype", "build the screens", "create the UI",
  "screen mockups", or wants to generate a clickable interactive prototype with
  linked screens and validate it through iterative build-review cycles with
  Playwright-based interaction testing, per-criterion scoring, an independent
  judge verdict, and versioned output.
version: 1.0.0

Arness Clickable Prototype

Generate a clickable interactive prototype with all main application screens linked together and validate it through iterative build-review cycles, aided by the `arn-spark-prototype-builder` agent for screen creation, the `arn-spark-ui-interactor` agent for Playwright-based interaction testing, `arn-spark-product-strategist` and `arn-spark-ux-specialist` for expert review, and the `arn-spark-ux-judge` agent for an independent final verdict. This is a conversational skill that runs in normal conversation (NOT plan mode).

The primary artifacts are **versioned clickable prototype applications**, **journey screenshots** documenting user flows, **review reports** with per-criterion scores, and a **final report** documenting the complete validation history. All output is versioned so the user can compare evolution across cycles.

This skill covers interactive behavior validation: do the screens link correctly, do interactions work, can users complete journeys? For visual-only validation of component rendering, use `/arn-spark-static-prototype` first.

Prerequisites

The following artifacts inform the prototype. Check in order:

Determine the prototypes output directory: 1. Read the project's `CLAUDE.md` and check for a `## Arness` section 2. If found, extract the configured Prototypes directory path — this is the source of truth 3. If no `## Arness` section exists or Arness Spark fields are missing, inform the user: "Arness Spark is not configured for this project yet. Run `/arn-brainstorming` to get started — it will set everything up automatically." Do not proceed without it. 4. If the directory does not exist, create it

> All references to `prototypes/` in this skill refer to the configured prototypes directory determined above.

**Product concept (strongly recommended):** 1. Read the project's `CLAUDE.md` for a `## Arness` section. If found, check the configured Vision directory for `product-concept.md` 2. If no `## Arness` section found, check `.arness/vision/product-concept.md` at the project root

**Style brief (recommended):** 1. Check the configured Vision directory for `style-brief.md` 2. If no `## Arness` section found, check `.arness/vision/style-brief.md` at the project root

**Architecture vision (for framework context):** 1. Check the configured Vision directory for `architecture-vision.md` 2. If no `## Arness` section found, check `.arness/vision/architecture-vision.md` at the project root

**Static prototype results (optional):** 1. Check for `[prototypes-dir]/static/final-report.md` -- if a static prototype was validated, the visual direction is confirmed

**Visual grounding assets (recommended):** 1. Read the `## Arness` section for the Visual grounding directory path 2. Check for assets in `[visual-grounding]/references/`, `[visual-grounding]/designs/`, `[visual-grounding]/brand/` 3. Also check the style brief's Visual Grounding section for asset paths and categories

If found: visual grounding assets will be provided to expert reviewers and the judge alongside journey screenshots for comparison. The focus is on screen-level layout comparison and overall flow feel, not component-level fidelity (that was validated in the static prototype).

**Fresh design assets (optional):** 1. Read the `## Arness` section for `Figma` and `Canva` fields 2. If either is `yes` AND the visual grounding directory already has assets in `designs/` or `brand/`: Ask (using `AskUserQuestion`):

> **Design assets exist from a previous step. Would you like to pull fresh versions from [Figma/Canva] before starting validation?** > 1. **Yes** — Pull fresh design assets > 2. **No** — Use existing assets on disk

• If yes: ask the user to specify which assets to fetch (Figma file URL, page, or frame names / Canva design URL). Use the corresponding MCP to fetch and save to `[visual-grounding]/designs/` or `[visual-grounding]/brand/`. Show a summary of what was downloaded or replaced.
• If no: proceed with existing assets on disk.

3. If either is `yes` but NO existing design assets found in `designs/` or `brand/`: Ask (using `AskUserQuestion`):

> **No design mockups found yet. Would you like to pull design assets from [Figma/Canva]?** > 1. **Yes** — Pull design assets now > 2. **No** — Proceed without design mockups

• If yes: same flow as above.
• If no: proceed without design mockups.

4. If neither flag is `yes` or flags are missing: skip silently.

**Use cases (recommended):** 1. Read the configured Use cases directory from the `## Arness` section (default: `.arness/use-cases`) 2. Check for `[use-cases-dir]/README.md` 3. If found, scan for `[use-cases-dir]/UC-*.md` files

**If use cases are found:** Read the README index and all use case files. Use them alongside the product concept for richer screen and journey derivation (see Step 1b).

**If no use cases are found:** Derive screens and journeys from the product concept alone. Note: "No use cases found. Screen derivation will use the product concept directly. Run `/arn-spark-use-cases` first for richer screen derivation from structured behavioral specs."

**If a product concept is found:** Use it to derive the screen list and user journeys.

**If no product concept is found:** Ask the user to describe the screens and journeys: "No product con