From arn-spark
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.
npx claudepluginhub appsvortex/arness --plugin arn-sparkThis skill uses the workspace's default tool permissions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Convenes a four-voice council (Architect, Skeptic, Pragmatist, Critic) for ambiguous decisions, tradeoffs, and go/no-go calls needing structured disagreement and multiple perspectives.
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.
The following artifacts inform the prototype. Check in order:
Determine the prototypes output directory:
CLAUDE.md and check for a ## Arness section## 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.All references to
prototypes/in this skill refer to the configured prototypes directory determined above.
Product concept (strongly recommended):
CLAUDE.md for a ## Arness section. If found, check the configured Vision directory for product-concept.md## Arness section found, check .arness/vision/product-concept.md at the project rootStyle brief (recommended):
style-brief.md## Arness section found, check .arness/vision/style-brief.md at the project rootArchitecture vision (for framework context):
architecture-vision.md## Arness section found, check .arness/vision/architecture-vision.md at the project rootStatic prototype results (optional):
[prototypes-dir]/static/final-report.md -- if a static prototype was validated, the visual direction is confirmedVisual grounding assets (recommended):
## Arness section for the Visual grounding directory path[visual-grounding]/references/, [visual-grounding]/designs/, [visual-grounding]/brand/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):
Read the ## Arness section for Figma and Canva fields
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?
- Yes — Pull fresh design assets
- No — Use existing assets on disk
[visual-grounding]/designs/ or [visual-grounding]/brand/. Show a summary of what was downloaded or replaced.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]?
- Yes — Pull design assets now
- No — Proceed without design mockups
If neither flag is yes or flags are missing: skip silently.
Use cases (recommended):
## Arness section (default: .arness/use-cases)[use-cases-dir]/README.md[use-cases-dir]/UC-*.md filesIf 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 concept found. Describe the main screens of your application and the key user flows, and I will create the prototype from your description."
If a style brief is found: Apply the visual style to all screens.
If no style brief is found: Use sensible defaults for the installed component library. Note: "No style brief found. The prototype will use default styling. Run /arn-spark-style-explore first for a custom visual direction."
Project scaffold: The project must be scaffolded with the UI framework and component library installed. If not, inform the user: "The project needs to be scaffolded before building a prototype. Run /arn-spark-scaffold first."
Check for existing versioned output:
prototypes/clickable/v*/ directories at the project rootIf existing versions found:
Ask (using AskUserQuestion):
"I found existing clickable prototype versions up to v[N]. Which would you prefer?"
Options:
If continuing: read prototypes/clickable/v[N]/review-report.md to understand the current state and what was flagged. Ask the user for the new cycle budget and any focus refinements.
If no existing versions: Proceed to Step 1b.
Load the product concept and extract screens and journeys:
Screens: Extract from the core experience:
Screen organization: Group screens by functional area (e.g., setup flow, main experience, settings). The builder will create:
This structure supports both human reviewers (who can explore freely or follow a guided path) and automated testing tools (which can discover screens from the hub and follow linear navigation).
If use cases are available, also derive screens from them:
User journeys: Derive from use cases (preferred) or product concept user flows:
Read
${CLAUDE_PLUGIN_ROOT}/skills/arn-spark-clickable-prototype/references/journey-template.md
Propose the screen list and journeys:
"Based on your product concept, here are the screens and user journeys:
Screens (grouped by area):
| Area | # | Screen | Description | Links To |
|---|---|---|---|---|
| [area] | 1 | [Name] | [description] | Screens 2, 3 |
| ... | ... | ... | ... | ... |
Navigation flow:
[Hub] --> [Area 1: Screen 1] --> [Screen 2] --> [Screen 3]
|
+--> [Area 2: Screen 4] --> [Screen 5]
User Journeys:
| # | Journey | Steps | Goal |
|---|---|---|---|
| 1 | [Name] | [count] | [what the user accomplishes] |
| ... | ... | ... | ... |
Adjust screens, navigation, or journeys before I proceed."
Wait for user confirmation or adjustments.
Present defaults and ask the user to confirm or adjust:
"Let me set up the validation parameters:
Scoring:
Criteria: Based on your screens and journeys, here are the proposed criteria:
| # | Criterion | Description |
|---|---|---|
| 1 | [criterion] | [description] |
| ... | ... | ... |
Adjust any parameter or criterion, or confirm to proceed."
To propose criteria:
Read
${CLAUDE_PLUGIN_ROOT}/skills/arn-spark-clickable-prototype/references/clickable-prototype-criteria.md
When the user confirms, write the agreed criteria to prototypes/criteria.md (create prototypes/ directory if needed). If the file already exists from a static prototype run:
Ask (using AskUserQuestion):
Criteria file already exists from the static prototype. What would you like to do?
- Reuse — Use existing criteria as-is
- Merge — Combine existing with clickable-specific criteria
- Replace — Define new criteria from scratch
Create the task structure for the validation run. For max_cycles=N:
Example for max_cycles=3 (starting from v1):
Task 1: Build v1
Task 2: Validate v1
Task 3: Build v2
Task 4: Validate v2
Task 5: Build v3
Task 6: Validate v3
Task 7: Judge review
Task 8: User review
If resuming from v[N], number versions sequentially from v[N+1].
Present the task list to the user and proceed.
For each cycle:
Invoke the arn-spark-prototype-builder agent with:
prototypes/clickable/v[N]/app/Mark the Build task as in_progress before invoking, completed after.
Start the prototype so it can be interacted with:
Then invoke the arn-spark-ui-interactor agent with:
prototypes/clickable/v[N]/journeys/If Playwright is unavailable, inform the user and ask them to manually walk through the journeys and provide screenshots. Note the limitation in the review report.
After the interactor completes, stop the prototype (kill the background process).
Invoke arn-spark-product-strategist and arn-spark-ux-specialist in parallel. Both agents receive the same inputs:
After both agents complete:
For each criterion, use the LOWER of the two expert scores as the combined score. If only one expert is available (e.g., arn-spark-ux-specialist is not accessible), use that single expert's scores as the combined scores and note the limitation in the review report.
Read
${CLAUDE_PLUGIN_ROOT}/skills/arn-spark-clickable-prototype/references/review-report-template.md
prototypes/clickable/v[N]/review-report.mdprototypes/clickable/v[N]/version-notes.mdIf ALL criteria pass: Mark the Validate task as completed. Skip remaining cycles and proceed to Step 5 (Judge Review).
If ANY criterion fails:
Start the prototype for the judge's interactive review using the same procedure as Step 4b:
If the prototype fails to start, fall back to invoking the judge in static mode using the journey screenshots from the latest Step 4b cycle. Note the limitation in the final report.
Once the prototype is running, invoke the arn-spark-ux-judge agent with:
interactive -- the judge navigates the prototype firsthand rather than reviewing static screenshotsprototypes/criteria.mdThe judge will navigate the prototype via Playwright, experience transitions, test interactions, capture its own screenshots as evidence, and score each criterion based on firsthand experience. After the judge completes, stop the prototype.
Write the judge's report to prototypes/clickable/v[N]/judge-report.md.
If Judge returns PASS: Proceed to Step 5b.
If Judge returns FAIL and cycle budget remains:
AskUserQuestion):The judge flagged [N] criteria below threshold. You have [M] cycles remaining. Run more fix cycles?
- Yes — Run [M] more fix cycles
- No — Proceed with current results
If Judge returns FAIL and no budget remains: Proceed to Step 5b with the judge's report.
Generate structured visual assets so the user can review all screens and journey flows at a glance without running the dev server.
Read the showcase capture guide:
Read
${CLAUDE_PLUGIN_ROOT}/skills/arn-spark-clickable-prototype/references/showcase-capture-guide.md
Read the screen manifest from prototypes/clickable/v[N]/screen-manifest.json (written by the prototype builder). If the manifest does not exist, note the limitation and capture the hub page only.
Start the prototype dev server using the same procedure as Step 4b.
Generate a Playwright capture script following the capture guide:
prototypes/clickable/v[N]/showcase/screens/Write the script to prototypes/clickable/v[N]/showcase/capture-script.js so the user can re-run it.
Run the capture script via Bash.
Stop the prototype dev server.
Organize the journey gallery: read existing journey screenshots from prototypes/clickable/v[N]/journeys/ (captured during Step 4b). These are referenced in the showcase index, not copied.
Write prototypes/clickable/v[N]/showcase/showcase-index.md — a self-contained markdown document with:
If Playwright is unavailable, skip screen capture but still organize the journey gallery from existing screenshots. Inform the user: "Playwright is not available for screen capture. Journey screenshots from interaction testing are included. The full prototype can be viewed by running the dev server."
Present the complete validation history:
"Clickable prototype validation complete.
Latest version: v[N] Judge verdict: [PASS / FAIL]
Version history:
| Version | Criteria Passing | Criteria Failing | Journeys OK | Notable Changes |
|---|---|---|---|---|
| v1 | [X]/[M] | [Y] | [J1]/[J2] | Initial build |
| v2 | [X]/[M] | [Y] | [J1]/[J2] | [summary of fixes] |
| ... | ... | ... | ... | ... |
Final scores (v[N]):
| # | Criterion | Expert Score | Judge Score | Status |
|---|---|---|---|---|
| 1 | [name] | [score] | [score] | PASS/FAIL |
| ... | ... | ... | ... | ... |
The prototype is at prototypes/clickable/v[N]/app/.
[If showcase images were generated:] Visual showcase is at prototypes/clickable/v[N]/showcase/showcase-index.md — open this file to see all screens and journey flows at a glance without running the dev server.
Ask (using AskUserQuestion):
Are you satisfied with this result?
- Yes, finalize — Write the final report
- Run additional cycles — Return to Step 2 with new parameters"
If the user chooses Run additional cycles, return to Step 2 with new parameters.
Write prototypes/clickable/final-report.md with:
prototypes/clickable/v[N]/judge-report.md)prototypes/clickable/v[N]/showcase/showcase-index.md) if generated"Clickable prototype validation complete. Results saved to prototypes/clickable/.
Recommended next steps:
/arn-spark-prototype-lock to freeze a snapshot of the validated prototype before development modifies shared source files/arn-spark-dev-setup to configure the development environment/arn-spark-visual-strategy to set up visual regression testing against the prototype/arn-spark-feature-extract to create a prioritized feature backlog from the product concept and prototypeThe prototype serves as a visual reference during feature development. Locking it first ensures the reference is preserved even as production code evolves."
| Situation | Action |
|---|---|
| Build prototype screens (Step 4a) | Invoke arn-spark-prototype-builder with screen list, style, framework, output path, and previous review feedback |
| Test user journeys (Step 4b) | Start the prototype, invoke arn-spark-ui-interactor with access point, journeys, and output path. Stop the prototype after. |
| Expert review (Step 4c) | Invoke arn-spark-product-strategist and arn-spark-ux-specialist in parallel with journey screenshots, criteria, scoring parameters, and visual grounding assets (with category context). After both complete, take the LOWER score per criterion. |
| Judge review (Step 5) | Start the prototype, invoke arn-spark-ux-judge in interactive mode with prototype URL, criteria, scoring parameters, journey definitions, review reports, and visual grounding assets for comparison. Stop the prototype after. If prototype fails to start, fall back to static mode with journey screenshots. |
| Generate visual showcase (Step 5b) | Read the showcase capture guide, start the prototype, generate and run a Playwright capture script per the screen manifest, organize journey screenshots, write showcase-index.md. Skip screen capture if Playwright unavailable. |
| User wants targeted screen updates | Invoke arn-spark-prototype-builder with specific screen changes only |
| User wants to re-test a specific journey | Invoke arn-spark-ui-interactor with just that journey |
| User asks about visual-only validation | Suggest /arn-spark-static-prototype for component showcase validation |
| User asks about style changes | Defer to /arn-spark-style-explore for style brief updates |
| User asks about features | Defer: "Feature work starts after /arn-spark-feature-extract. If Arness Code is installed, continue with /arn-code-feature-spec for detailed specifications." |
| Builder fails | Retry up to 3 times. If still failing, present the error for manual investigation. |
| Interactor reports Playwright unavailable | Fall back to manual journey testing. User walks through and provides screenshots. |
| Expert returns unhelpful scores | Re-invoke with more specific prompt referencing exact criteria and journey screenshots. |
/arn-spark-style-explore can be run for custom styling./arn-spark-scaffold first.static mode using journey screenshots from the latest interaction testing cycle. Note the limitation in the final report.arn-spark-product-strategist as the sole expert reviewer. Use its scores directly as the combined scores. Note the limitation in the review report.screen-manifest.json. Capture the hub page only. Note: "Screen manifest not found. Only hub capture produced. Re-build the prototype to generate per-screen captures."