From jaan-to
Diagnoses and fixes UI bugs in frontend components by generating patch artifacts routed through dev-output-integrate. Use when addressing rendering, styling, or interaction issues.
npx claudepluginhub parhumm/jaan-to --plugin jaan-toThis skill is limited to using the following tools:
> Diagnose and fix UI bugs by generating patch artifacts routed through dev-output-integrate.
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.
Diagnose and fix UI bugs by generating patch artifacts routed through dev-output-integrate.
Safety model: This skill generates patched component files to $JAAN_OUTPUTS_DIR only. It does NOT edit project source directly. Patches are applied via /jaan-to:dev-output-integrate.
$JAAN_CONTEXT_DIR/tech.md - Tech stack context (optional)$JAAN_CONTEXT_DIR/design.md - Design system guidelines (optional)$JAAN_TEMPLATES_DIR/jaan-to-frontend-component-fix.template.md - Output template$JAAN_LEARN_DIR/jaan-to-frontend-component-fix.learn.md - Past lessons (loaded in Pre-Execution)${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.md - Shared reference (MCP degradation, visual scoring, network policy)${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md - Language resolution protocolArguments: $ARGUMENTS
Accepts any of:
| Argument | Effect |
|---|---|
[bug-description] | What's wrong (required unless empty) |
--component path | Component file to fix |
--screenshot path | Screenshot showing the bug |
If no input provided, ask: "What UI issue should I fix? (describe the bug, optionally add --component path)"
MANDATORY — Read and execute ALL steps in: ${CLAUDE_PLUGIN_ROOT}/docs/extending/pre-execution-protocol.md
Skill name: frontend-component-fix
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 for fix validationRead and apply language protocol: ${CLAUDE_PLUGIN_ROOT}/docs/extending/language-protocol.md
Override field for this skill: language_frontend-component-fix
Language exception: Generated code output remains in the project's programming language.
ultrathink
Use extended reasoning for:
Extract from arguments:
If verification report provided:
If Playwright MCP available AND Storybook running:
Reference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "Playwright Network Policy" for URL validation.
mcp__playwright__browser_navigate to component storymcp__playwright__browser_snapshot — Accessibility tree before fixmcp__playwright__browser_take_screenshot — Visual before stateIf MCP unavailable: skip, note "Before screenshot not available without Playwright MCP"
Analyze the bug:
ROOT CAUSE ANALYSIS
───────────────────
Bug: {description}
Component: {name} at {path}
Symptoms: {what the user sees}
Root Cause: {technical explanation}
Fix Scope: {which files need patching}
Impact: {what else might be affected}
Confidence: {high/medium/low}
specs/openapi.yaml, $JAAN_OUTPUTS_DIR/backend/api-contract/). Flag if the component's expected data shape diverges from the spec — this may indicate a contract update is needed rather than a component fix.If confidence is low, ask clarifying questions before proceeding.
Outline the minimal patch needed:
FIX PLAN
────────
Component(s) to Patch:
1. {file_path} — {what changes}
2. {file_path} — {what changes (if multi-file)}
Changes:
- {specific change 1}
- {specific change 2}
Preserved:
- Component API (props interface unchanged)
- Existing tests compatibility
- Design system consistency
Present diagnosis and fix plan to user.
Use AskUserQuestion:
Do NOT proceed to Phase 2 without explicit approval.
For each file that needs fixing:
Output-only rule: All patched files go to $JAAN_OUTPUTS_DIR. Never edit project source.
Read template: $JAAN_TEMPLATES_DIR/jaan-to-frontend-component-fix.template.md
Fill sections:
Show fix summary with diff preview.
source "${CLAUDE_PLUGIN_ROOT}/scripts/lib/id-generator.sh"
SUBDOMAIN_DIR="$JAAN_OUTPUTS_DIR/frontend/component-fix"
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 — Fix report with before/after diff{id}-{slug}-patch-{component}.tsx — Patched component file(s){id}-{slug}-readme.md — Integration readme with Source → Destination tableReference: See
${CLAUDE_PLUGIN_ROOT}/docs/extending/frontend-ui-workflow-reference.mdsection "dev-output-integrate Readme Format" for the required format.
source "${CLAUDE_PLUGIN_ROOT}/scripts/lib/index-updater.sh"
add_to_index \
"$SUBDOMAIN_DIR/README.md" \
"$NEXT_ID" \
"${NEXT_ID}-${slug}" \
"{ComponentName} Fix" \
"Fix for {bug_summary}"
After writing patch artifacts, offer a streamlined next-actions flow:
Use AskUserQuestion:
If "Integrate + Verify":
/jaan-to:dev-output-integrate "{OUTPUT_FOLDER}"/jaan-to:frontend-visual-verify "{component_path}"If "Integrate only":
/jaan-to:dev-output-integrate "{OUTPUT_FOLDER}"/jaan-to:frontend-visual-verify afterwardIf "Save patches only":
Use AskUserQuestion:
If "Learn from this": Run /jaan-to:learn-add frontend-component-fix "{feedback}"