메뉴
Visual Regression Testing — screenshot comparison before and after changes. Use when user wants to check for visual regressions, compare UI changes, or verify CSS/layout changes didn't break anything.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Build a regression + eval harness for AI-written code and AI features. Generates characterization tests that lock current behavior before a refactor, scaffolds a Promptfoo eval suite for chatbots/RAG/classifiers, and wires it into the ship-gate. Use when the user wants evals, regression tests for AI code, to stop AI features drifting, or to test an LLM feature.
Run security audit — dependency vulnerabilities, secret scanning, OWASP pattern detection, HTTP headers. Use when user wants to harden their project.
Accessibility audit + auto-fix (WCAG 2.2 A/AA). Scans built/static HTML for screen-reader, keyboard, and structure failures, fixes the deterministic ones, and escalates to a rendered scan for contrast and focus. Use when the user wants to check or improve accessibility, fix WCAG issues, or pass an a11y review.
Turn the /ship scorecard into a blocking, config-as-code quality gate. Sets per-category score thresholds, hard-fails on leaked secrets or critical findings, and wires the gate into a pre-push hook and CI so nothing below the bar merges. Use when the user wants a merge gate, CI quality gate, pre-push check, or to enforce ship-readiness.
Post-deploy canary monitoring — checks site health, detects regressions, monitors for errors after deployment. Use after deploying to verify production is healthy.
Code review with principal-engineer-level depth. Reviews for correctness, performance, security, maintainability, and architecture. Use when completing tasks, reviewing PRs, or before merging.
| name | visual-diff |
| description | Visual Regression Testing — screenshot comparison before and after changes. Use when user wants to check for visual regressions, compare UI changes, or verify CSS/layout changes didn't break anything. |
Automated screenshot comparison using Playwright. Catch visual bugs before they ship.
Ask the user:
If the user already described what changed, skip asking.
If comparing against the current state (before making changes):
Use the Playwright MCP to capture screenshots:
Navigate to the URL:
browser_navigate to go to the target URLTake full-page screenshot:
browser_take_screenshot to capture the current stateCapture key viewports:
browser_resize then browser_take_screenshotbrowser_resize then browser_take_screenshotbrowser_resize then browser_take_screenshotSave screenshots with descriptive names noting they are "before" state.
Let the user make their changes, or make them yourself if that's the task.
Repeat the same screenshot process for the same URLs and viewports.
Compare before and after screenshots:
Use browser_snapshot to get the accessibility tree and compare DOM structure between before/after.
Present findings in a clear format:
No Visual Regressions Found:
Regressions Detected: For each regression:
For specific component changes, also test:
browser_hover)browser_click)browser_fill_form)When the user doesn't specify pages, test these by default:
Trust screenshots, not assumptions. CSS changes cascade unpredictably. A "small tweak" in one component can break layouts across the entire app. Always verify visually.