From arn-spark
This skill should be used when the user says "static prototype", "arn static prototype", "visual validation", "pixel perfect", "component showcase", "static screens", "build a static prototype", "create a component showcase", "visual review", "validate the visuals", "check the design", "validate components", "review the design visuals", or wants to create a static component showcase and validate it through iterative expert review cycles with 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.
Benchmarks web page Core Web Vitals/bundle sizes, API latency under load, build times; detects regressions via before/after PR comparisons.
Create a static component showcase and validate it through iterative build-review cycles, 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 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 showcase pages with component renders, 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 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.
The following artifacts inform the validation. 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.
Style brief (strongly recommended):
CLAUDE.md for a ## Arness section. If found, check the configured Vision directory for style-brief.md## Arness section found, check .arness/vision/style-brief.md at the project rootProduct concept (recommended):
product-concept.md## Arness section found, check .arness/vision/product-concept.md at the project rootArchitecture vision (for framework context):
architecture-vision.md## Arness section found, check .arness/vision/architecture-vision.md at the project rootVisual 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 showcase screenshots for comparison.
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 style exploration. 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.
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."
Check for existing versioned output:
prototypes/static/v*/ directories at the project rootIf existing versions found:
Ask (using AskUserQuestion):
"I found existing static prototype versions up to v[N]. Which would you prefer?"
Options:
If continuing: read prototypes/static/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 2.
Present defaults and ask the user to confirm or adjust:
"Let me set up the validation parameters:
Scoring:
Criteria: Based on your style brief and product concept, 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-static-prototype/references/static-prototype-criteria.md
When the user confirms, write the agreed criteria to prototypes/criteria.md (create prototypes/ directory if needed).
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/static/v[N]/Mark the Build task as in_progress before invoking, completed after.
Invoke the arn-spark-style-capture agent with:
prototypes/static/v[N]/screenshots/If Playwright is unavailable, ask the user to provide screenshots of the showcase manually, or attempt to serve the showcase and capture screenshots through an alternative method. Note the limitation in the review report.
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-static-prototype/references/review-report-template.md
prototypes/static/v[N]/review-report.mdprototypes/static/v[N]/version-notes.md (what changed from previous version, or "Initial version" for v1)If ALL criteria pass: Mark the Validate task as completed. Skip remaining cycles and proceed to Step 5 (Judge Review).
If ANY criterion fails:
Invoke the arn-spark-ux-judge agent with:
static -- the judge reviews screenshots and files (there is nothing interactive to navigate in a static showcase)prototypes/criteria.mdWrite the judge's report to prototypes/static/v[N]/judge-report.md.
If Judge returns PASS: Proceed to Step 6.
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.
After the judge review completes (whether PASS or FAIL with no budget), generate structured screenshot images so the user can review the final visual state without running a dev server. This is the user's primary visual deliverable.
Read the showcase capture guide:
Read
${CLAUDE_PLUGIN_ROOT}/skills/arn-spark-static-prototype/references/showcase-capture-guide.md
Read the section manifest from prototypes/static/v[N]/showcase-manifest.json (written by the prototype builder). If the manifest does not exist, note the limitation and capture a single full-page screenshot only.
Start the prototype dev server (same procedure as Step 4b).
Generate a Playwright capture script appropriate to the project's stack. The script captures:
showcase-full.png)01-typography.png, 04-buttons.png)Write the script to prototypes/static/v[N]/showcase/capture-script.js so the user can re-run it.
Run the capture script. If individual section captures fail, skip them and note the gaps.
Stop the prototype dev server.
Write prototypes/static/v[N]/showcase/showcase-index.md — a self-contained markdown document embedding all captured images with:
If Playwright is unavailable, skip this step entirely and inform the user: "Playwright is not available. The showcase can be viewed by running the dev server. Automated visual export was skipped."
Present the complete validation history:
"Static prototype validation complete.
Latest version: v[N] Judge verdict: [PASS / FAIL]
Version history:
| Version | Criteria Passing | Criteria Failing | Notable Changes |
|---|---|---|---|
| v1 | [X]/[M] | [Y] | Initial build |
| v2 | [X]/[M] | [Y] | [summary of fixes] |
| ... | ... | ... | ... |
Final scores (v[N]):
| # | Criterion | Expert Score | Judge Score | Status |
|---|---|---|---|---|
| 1 | [name] | [score] | [score] | PASS/FAIL |
| ... | ... | ... | ... | ... |
The showcase is at prototypes/static/v[N]/.
[If showcase images were generated:] Visual showcase images are at prototypes/static/v[N]/showcase/showcase-index.md — open this file to see all components 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 (the user can adjust criteria, threshold, or cycle count).
Write prototypes/static/final-report.md with:
prototypes/static/v[N]/judge-report.md)prototypes/static/v[N]/showcase/showcase-index.md) if generated"Static prototype validation complete. Results saved to prototypes/static/.
Recommended next steps:
/arn-spark-clickable-prototype to add interaction and validate user journeys/arn-spark-prototype-lock to freeze a snapshot before development modifies shared source files/arn-spark-feature-extract to create a prioritized feature backlogThe clickable prototype will build on the validated visual direction from this static prototype."
| Situation | Action |
|---|---|
| Build showcase (Step 4a) | Invoke arn-spark-prototype-builder in showcase mode with style brief, components, output path, and previous review feedback |
| Capture screenshots (Step 4b) | Invoke arn-spark-style-capture with the showcase URL and output path. If unavailable, ask the user for manual screenshots. |
| Expert review (Step 4c) | Invoke arn-spark-product-strategist and arn-spark-ux-specialist in parallel with screenshots, criteria, scoring parameters, and visual grounding assets (with category context). After both complete, take the LOWER score per criterion. |
| Judge review (Step 5) | Invoke arn-spark-ux-judge in static mode with latest screenshots, criteria, scoring parameters, review reports, and visual grounding assets for direct comparison |
| Generate visual showcase (Step 5b) | Read the showcase capture guide, start the prototype, generate and run a Playwright capture script per the section manifest, write showcase-index.md. Skip if Playwright unavailable. |
| User asks about interactive behavior | Defer: "Interactive behavior is validated in /arn-spark-clickable-prototype. This skill focuses on visual fidelity." |
| User asks to change the style | Defer to /arn-spark-style-explore for style brief updates, then re-run static prototype validation |
| 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. |
| Expert returns unhelpful scores | Re-invoke with more specific prompt referencing the exact criteria and screenshots. |
No style brief found: Proceed with component quality and layout criteria only. Note that visual fidelity criteria are deferred until a style brief exists.
Project not scaffolded: Cannot build showcase. Suggest /arn-spark-scaffold first.
Builder fails (3 times): Present the error. The user can investigate manually or adjust the approach.
Capture fails (Playwright unavailable): Fall back to asking the user for manual screenshots. Note the limitation. The visual showcase (Step 5b) is also skipped.
Showcase manifest missing: The builder did not write showcase-manifest.json. Capture a full-page screenshot only. Note: "Section manifest not found. Re-build the showcase to generate per-section captures."
Expert returns unhelpful scores (vague, all maximum, etc.): Re-invoke with a more specific prompt asking for scores on each criterion individually with evidence.
arn-spark-ux-specialist unavailable: Proceed with arn-spark-product-strategist as the sole expert reviewer. Use its scores directly as the combined scores. Note the limitation in the review report.
Judge unavailable: The user becomes the judge. Present all expert review reports and ask the user to make the pass/fail decision.
Resume from interrupted cycle: Detect the latest version directory. If it has a review-report.md, the cycle completed -- continue from the next cycle. If it has showcase files but no review-report.md, the build completed but review did not -- run review on the existing build.
Criteria file already exists:
Ask (using AskUserQuestion):
Existing criteria found at
prototypes/criteria.md. What would you like to do?
- Use existing — Keep the current criteria
- Define new — Create fresh criteria for this validation
Writing the document fails: Print the full content in the conversation so the user can copy it.