/arn-spark-clickable-prototype-teams

name: arn-spark-clickable-prototype-teams
description: >-
  This skill should be used when the user says "clickable prototype teams",
  "arn clickable prototype teams", "team clickable prototype", "debate clickable prototype",
  "collaborative interaction review", "clickable prototype with debate",
  "team-based interaction review", "interaction debate", "review interactions as a team",
  "interactive prototype teams", "team prototype review",
  or wants to create a clickable interactive prototype with linked screens and
  validate it through iterative expert debate cycles where product strategist
  and UX specialist discuss their scores and findings before producing a
  combined review, with Playwright-based interaction testing, per-criterion scoring,
  an independent judge verdict, and versioned output.
  Supports Agent Teams for parallel debate or sequential simulation as fallback.
  For standard lower-of-two-scores interaction review, use /arn-spark-clickable-prototype instead.
version: 1.0.0

Arness Clickable Prototype Teams

Generate a clickable interactive prototype with all main application screens linked together and validate it through iterative build-review cycles with expert debate, 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` (greenfield agents in this plugin) for debate-based 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).

This is an alternative to `/arn-spark-clickable-prototype` (independent sequential review with mechanical lower-of-two scoring). Use this when the project has enough interaction complexity that expert debate adds value -- nuanced navigation decisions, multiple user journeys with trade-offs, screens where strategist and UX perspectives genuinely differ on flow quality. For simpler projects or lower token budgets, use `/arn-spark-clickable-prototype` instead.

The primary artifacts are **versioned clickable prototype applications**, **journey screenshots** documenting user flows, **debate review reports** with per-criterion scores and debate findings, and a **final report** documenting the complete validation and debate 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` or `/arn-spark-static-prototype-teams` 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