ワンクリックで
visual-compare
Visually compare design options (colors, tokens, variants) in a live preview
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
メニュー
Visually compare design options (colors, tokens, variants) in a live preview
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
End-to-end validate a merged PR or feature against the dev environment — UI + DB assertions with screenshots
Work on a ready GitHub issue (implement, test, commit, PR)
Groom GitHub issues from needs-details to ready
Review AI-drafted issues for human approval
Verify whether a groomed issue is still accurate
| name | visual-compare |
| description | Visually compare design options (colors, tokens, variants) in a live preview |
| argument-hint | ["what to compare"] |
| allowed-tools | Task |
Two-phase workflow. The main thread handles user interaction.
Use the Task tool to spawn the comparison agent:
visual-compare-agent20$ARGUMENTS\n\nRemember: complete Step 3 (Sampler Check) before generating options.The agent will check the sampler registry (generating a new sampler if the target token isn't covered), then generate 4 options, write them to the preview page (data.json), and return a structured summary with the option labels and descriptions.
After the subprocess returns:
Resume the same agent using the Task tool's resume parameter:
User chose: <selected option label>. Apply the value to the target CSS file, clean up data.json, and return a final summary.Report the final summary back to the user.
When another agent invokes visual-compare-agent with autonomous: true, the entire flow collapses into a single Task invocation — no user interaction or resume needed.
Task tool call:
subagent_type: visual-compare-agent
max_turns: 20
prompt: |
Compare CSS variable options:
- variable: --destructive
- file: apps/web/app/globals.css
- mode: dark
- context: error states and destructive action buttons
- autonomous: true
Remember: complete Step 3 (Sampler Check) before generating options.
The agent generates options, picks the best fit, applies it, cleans up data.json, and returns a SAMPLER: / CHOSEN: / APPLIED: summary. See the agent definition for full details on selection criteria and return format.