arn-spark-static-prototype-teams

Arness Static Prototype Teams

Create a static component showcase and validate it through iterative build-review cycles with expert debate, aided by the arn-spark-prototype-builder agent (in showcase mode) for rendering, the arn-spark-style-capture agent for screenshots, 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-static-prototype (independent sequential review with mechanical lower-of-two scoring). Use this when the project has enough visual complexity that expert debate adds value -- nuanced style decisions, multiple visual grounding assets, components where strategist and UX perspectives genuinely differ. For simpler projects or lower token budgets, use /arn-spark-static-prototype instead.

The primary artifacts are versioned showcase pages with component renders, 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 visual fidelity validation: do the components look correct according to the style brief? It does not cover interactive behavior -- that is /arn-spark-clickable-prototype's job.

Prerequisites

The following artifacts inform the validation. 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.

Style brief (strongly recommended):

1. Read the project's CLAUDE.md for a ## Arness section. If found, 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

Product concept (recommended):

1. 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

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

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 showcase screenshots for comparison.

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 style exploration. 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.
• 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.
• If neither flag is yes or flags are missing: skip silently.

If a style brief is found: Use it for visual validation criteria.

If no style brief is found: Inform the user: "No style brief found. I can create a component showcase with default styling, but visual validation is more meaningful with a style brief. Consider running /arn-spark-style-explore first." Proceed if the user wants to continue -- criteria will focus on component quality and layout rather than style fidelity.

Project scaffold: The project must be scaffolded with the UI framework and component library installed. Check the project's dependency configuration. If not scaffolded, inform the user: "The project needs to be scaffolded before building a component showcase. Run /arn-spark-scaffold first."

Agent Teams (strongly recommended): This skill works best with Agent Teams enabled for parallel expert debate. Agent Teams availability is verified in Step 1 before any work begins. If not enabled, the skill falls back to sequential debate mode (or suggests /arn-spark-static-prototype for the non-debate alternative).

Workflow

Step 1: Check Agent Teams Availability

This is the FIRST step -- before any prototype work begins.

Run via Bash: echo $CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS

Display the result clearly to the user. This is critical because Agent Teams sometimes does not activate even when the user expects it.

If the variable is "1":

"Agent Teams: ENABLED (environment variable CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS = 1)

This skill will use Agent Teams for parallel expert debate. Both experts will score in parallel (Phase 1) and cross-review each other's findings in parallel (Phase 2).

Confirm to proceed, or type 'skip' to use /arn-spark-static-prototype instead (non-debate review, lower token cost)."

Wait for user confirmation before proceeding.

If the variable is NOT "1" (empty, unset, or any other value):

"Agent Teams: NOT ENABLED (environment variable CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS = [actual value or 'unset'])

This skill works without Agent Teams using sequential debate (I will pass feedback between experts manually), but parallel debate is faster and produces identical results.

To enable Agent Teams:

• Add to ~/.claude/settings.json under "env":

``json "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1" ``

• Or set the environment variable before running Claude Code:

``bash CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1 claude ``

• Then restart this Claude Code session (the variable must be set before the session starts).

Ask (using AskUserQuestion):

"What would you like to do?"

Options:

1. Continue with sequential debate — Same debate quality, slower execution (3 sequential expert invocations per debate round instead of 2 parallel)
2. Use /arn-spark-static-prototype instead — Non-debate review (mechanical lower-of-two scoring, lower token cost)
3. Enable Agent Teams and restart — Set the env var, restart Claude Code, then re-run this skill"

Wait for user response.

Record the execution mode: "agent_teams" if the value is "1", otherwise "sequential".

Step 2: Detect Resume or Fresh Start

Check for existing versioned output:

1. Look for prototypes/static/v*/ directories at the project root
2. If versions exist, find the highest version number

If existing versions found:

Ask (using AskUserQuestion):

**"I found existing static