From jaan-to
Verifies UI component rendering via Storybook snapshots and Playwright browser automation including screenshots and accessibility trees. Use for visual checks.
npx claudepluginhub parhumm/jaan-to --plugin jaan-toThis skill is limited to using the following tools:
> Visual verification of UI components via Storybook accessibility snapshots and Playwright MCP.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Visual verification of UI components via Storybook accessibility snapshots and Playwright MCP.
$JAAN_CONTEXT_DIR/tech.md - Tech stack context (optional)$JAAN_CONTEXT_DIR/design.md - Design system guidelines (optional, #visual-standards and #storybook sections)$JAAN_TEMPLATES_DIR/jaan-to-frontend-visual-verify.template.md - Output template$JAAN_LEARN_DIR/jaan-to-frontend-visual-verify.learn.md - Past lessons (loaded in Pre-Execution)${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.md - Shared reference (visual scoring rubric, network policy, MCP degradation)${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md - Language resolution protocolArguments: $ARGUMENTS
Accepts any of:
http://localhost:6006/?path=/story/{component} (localhost only by default)If no input provided, ask: "What component should I verify? (Storybook URL, component path, or design output path)"
MANDATORY — Read and execute ALL steps in: ${CLAUDE_PLUGIN_ROOT}/docs/extending/pre-execution-protocol.md
Skill name: frontend-visual-verify
Execute: Step 0 (Init Guard) → A (Load Lessons) → B (Resolve Template) → C (Offer Template Seeding)
Also read context files if available:
$JAAN_CONTEXT_DIR/design.md — Visual standards, accessibility targetsRead and apply language protocol: ${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md
Override field for this skill: language_frontend-visual-verify
Language exception: Generated code output remains in the project's programming language.
ultrathink
Use extended reasoning for:
Check Playwright MCP availability:
mcp__playwright__browser_snapshot (any lightweight call)output_mode = visual-modeoutput_mode = static-modeReference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "MCP Graceful Degradation Patterns" — Playwright MCP section.
Display mode to user:
visual-mode: "Playwright MCP detected — full visual verification available."static-mode: "Playwright MCP not available — static code analysis only. Visual score will be N/A."URL validation (CRITICAL — localhost-only default):
Reference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "Playwright Network Policy" for URL validation rules.
localhost:*, 127.0.0.1:*)If MCP tool mcp__storybook-mcp__get-story-urls available:
http://localhost:6006/?path=/story/{component-id}--{story-name}Present target summary:
VERIFICATION TARGET
───────────────────
Component: {name}
URL: {storybook_url or preview_path}
Mode: {visual-mode / static-mode}
Reference: {design description or N/A}
Regardless of mode, read the component source for code-level analysis:
Grep: "cva(" {component_path}Build verification checklist:
VERIFICATION CHECKLIST
──────────────────────
Rendering:
[ ] Component renders without errors
[ ] All props/variants render correctly
[ ] Loading/error/empty states work
Accessibility:
[ ] ARIA attributes present and correct
[ ] Keyboard navigation functional
[ ] Color contrast meets WCAG AA (4.5:1 text, 3:1 UI)
[ ] Focus indicators visible
Visual:
[ ] Layout matches design intent
[ ] Typography hierarchy correct
[ ] Spacing consistent with design system
[ ] Responsive at key breakpoints
[ ] Dark mode (if applicable)
useQuery, useMutation, fetch) or references API endpoints, add an info-level note: "Component has API dependencies — verify MSW handlers are configured for Storybook stories. See /jaan-to:frontend-story-generate --contract."Present verification plan to user.
Use AskUserQuestion:
Do NOT proceed to Phase 2 without explicit approval.
mcp__playwright__browser_navigate to Storybook URLmcp__playwright__browser_snapshot — Get accessibility tree (primary, fast, deterministic)mcp__playwright__browser_take_screenshot — Capture visual stateNo visual score in static-mode. Report header: "Static analysis only — visual verification requires Playwright MCP."
Reference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "Visual Scoring Rubric" for score definitions.
Evaluate against rubric criteria:
Read template: $JAAN_TEMPLATES_DIR/jaan-to-frontend-visual-verify.template.md
Fill sections:
Show verification summary with score and key findings.
Use AskUserQuestion:
source "${CLAUDE_PLUGIN_ROOT}/scripts/lib/id-generator.sh"
SUBDOMAIN_DIR="$JAAN_OUTPUTS_DIR/frontend/visual-verify"
mkdir -p "$SUBDOMAIN_DIR"
NEXT_ID=$(generate_next_id "$SUBDOMAIN_DIR")
slug="{component-name-slug}"
OUTPUT_FOLDER="${SUBDOMAIN_DIR}/${NEXT_ID}-${slug}"
Write files:
mkdir -p "$OUTPUT_FOLDER"{id}-{slug}.md — Verification report{id}-{slug}-screenshots/ — Captured screenshots (visual-mode only){id}-{slug}-readme.md — Summary with pass/fail and next actionssource "${CLAUDE_PLUGIN_ROOT}/scripts/lib/index-updater.sh"
add_to_index \
"$SUBDOMAIN_DIR/README.md" \
"$NEXT_ID" \
"${NEXT_ID}-${slug}" \
"{ComponentName} Verification" \
"{mode}: score {score}/10 — {pass_count}/{total_count} checks passed"
Verification complete!
Results: {score}/10 — {pass_count}/{total_count} checks passed
Next Steps:
- Run
/jaan-to:frontend-component-fixto fix identified issues- Run
/jaan-to:frontend-story-generateto add missing story states- Run
/jaan-to:qa-test-casesto generate test cases from findings- Re-run
/jaan-to:frontend-visual-verifyafter fixes to confirm
Use AskUserQuestion:
If "Learn from this": Run /jaan-to:learn-add frontend-visual-verify "{feedback}"