بنقرة واحدة
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.