القائمة
Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Generate or edit images using the OpenAI Image API (gpt-image-2). Use when the user asks to generate, create, draw, render, illustrate, mock up, or edit an image, icon, logo, mockup, illustration, OG image, blog hero, marketing asset, or similar visual. Also use when the user supplies a reference image and asks to modify, restyle, or remix it. Triggers on: "generate an image", "create an image", "make a picture of", "edit this image", "restyle this", "make a mockup of", "draw a", "render a", "illustration of".
When the same multi-step workflow repeats in Cursor (user corrections or agent redos), capture it as a new SKILL.md under .cursor/skills/ so future sessions load it automatically.
After navigating and interacting in Cursor's built-in browser, use browser_network_requests to audit every fetch/XHR for failures, slowness, duplicate calls, and suspicious payloads. Use for API-heavy pages and after backend or client networking changes.
When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel. Use for multi-job CI failures where jobs are independent.
Run four parallel read-only subagents that each review the same diff from a different lens — security, performance, correctness, and readability — then merge findings into one report. Use before merging large or risky PRs.
Execute a user flow step-by-step in Cursor's built-in browser while documenting each action, then emit a Playwright test that replays the same flow using stable selectors derived from the accessibility tree.
| name | comparing-branches-visually |
| description | Check out two branches in separate worktrees, start both dev servers on different ports, screenshot the same pages, and produce a visual diff. |
| user-invocable | true |
Create a visual before/after comparison of UI changes between two branches.
Use best-of-n-runner subagents or git worktrees to run both branches simultaneously:
# Create a worktree for the base branch
git worktree add /tmp/branch-compare-base main
# The current working directory has the feature branch
Start the base branch server on a different port:
# In the base worktree
cd /tmp/branch-compare-base && PORT=3001 npm run dev
# Current branch is already on the default port (3000)
Determine which pages are affected by the changes:
git diff main --name-only | grep -E '\.(tsx?|jsx?|vue|svelte|css)'
Map changed files to their routes (e.g. app/dashboard/page.tsx → /dashboard).
For each affected page:
browser_navigate to http://localhost:3001/<page> (base branch)browser_take_screenshot → save as "before"browser_navigate to http://localhost:3000/<page> (feature branch)browser_take_screenshot → save as "after"Present the comparison:
Visual Diff: feature/redesign-header vs main
/dashboard:
Before: [screenshot from main]
After: [screenshot from feature branch]
Changes: Header height reduced, nav links repositioned, new avatar dropdown
/settings:
Before: [screenshot]
After: [screenshot]
Changes: No visual differences detected
# Stop the base branch server
# Remove the worktree
git worktree remove /tmp/branch-compare-base
screenshotting-changelog for PR descriptions