메뉴
Visual testing, UI verification, and design comparison using screenshots and Figma integration. Use when the user wants to verify UI appearance, compare with Figma designs, test responsive layouts, check for visual regressions, or validate design implementation.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | visual-testing |
| description | Visual testing, UI verification, and design comparison using screenshots and Figma integration. Use when the user wants to verify UI appearance, compare with Figma designs, test responsive layouts, check for visual regressions, or validate design implementation. |
| allowed-tools | Bash(browser-devtools-cli:*) |
Perform visual testing, UI verification, and design comparison using screenshots, responsive testing, and Figma integration.
This skill activates when:
browser-devtools-cli content take-screenshot --name "homepage"
browser-devtools-cli content take-screenshot --name "element" --selector ".hero"
browser-devtools-cli content take-screenshot --name "fullpage" --full-page
browser-devtools-cli content take-screenshot --name "photo" --type jpeg --quality 80
browser-devtools-cli content save-as-pdf --name "page" --format A4
Overlay numbered labels [1],[2] on interactive elements. Call a11y take-aria-snapshot first.
browser-devtools-cli a11y take-aria-snapshot
browser-devtools-cli content take-screenshot --annotate --name "annotated"
browser-devtools-cli content take-screenshot --annotate --annotate-content --name "with-headings"
browser-devtools-cli interaction resize-viewport --width 375 --height 667 # Mobile
browser-devtools-cli interaction resize-viewport --width 768 --height 1024 # Tablet
browser-devtools-cli interaction resize-viewport --width 1920 --height 1080 # Desktop
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123xyz" \
--figma-node-id "12:34"
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123xyz" \
--figma-node-id "12:34" \
--selector ".hero-section"
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123xyz" \
--figma-node-id "12:34" \
--mssim-mode semantic
browser-devtools-cli content get-as-html
browser-devtools-cli content get-as-html --selector ".component"
browser-devtools-cli content get-as-text --selector ".content"
| Device | Width | Height | Command |
|---|---|---|---|
| Mobile S | 320px | 568px | --width 320 --height 568 |
| Mobile M | 375px | 667px | --width 375 --height 667 |
| Mobile L | 425px | 812px | --width 425 --height 812 |
| Tablet | 768px | 1024px | --width 768 --height 1024 |
| Laptop | 1366px | 768px | --width 1366 --height 768 |
| Desktop | 1920px | 1080px | --width 1920 --height 1080 |
Figma API Access:
FIGMA_ACCESS_TOKEN environment variableOptional (for enhanced comparison):
SESSION="--session-id visual-test"
# 1. Navigate
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle
# 2. Capture desktop
browser-devtools-cli $SESSION content take-screenshot --name "desktop"
# 3. Test mobile viewport
browser-devtools-cli $SESSION interaction resize-viewport --width 375 --height 667
browser-devtools-cli $SESSION content take-screenshot --name "mobile"
# 4. Test tablet viewport
browser-devtools-cli $SESSION interaction resize-viewport --width 768 --height 1024
browser-devtools-cli $SESSION content take-screenshot --name "tablet"
# 5. Cleanup
browser-devtools-cli session delete visual-test
Find the Figma file key and node ID:
figma.com/file/{FILE_KEY}/...browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123xyz" \
--figma-node-id "12:34" \
--selector ".hero-section"
If score is low:
# Take screenshot of the area
browser-devtools-cli content take-screenshot --name "mismatch" --selector ".hero-section"
# Check HTML structure
browser-devtools-cli content get-as-html --selector ".hero-section"
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "1:2" \
--mssim-mode semantic
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "1:2" \
--mssim-mode raw
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "1:2" \
--full-page
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "5:10" \
--selector ".card-component"
# Resize viewport first
browser-devtools-cli interaction resize-viewport --width 375 --height 667
# Then compare with mobile design
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "20:30"
Test API integrations by mocking responses, intercepting requests, and monitoring network traffic. Use when the user wants to mock backend APIs, simulate errors, test offline behavior, intercept requests, or add authentication headers.
Automates browser interactions using Playwright for web testing, debugging, and automation. Use when the user needs to navigate websites, take screenshots, fill forms, click elements, extract page content (HTML/text), audit accessibility (ARIA/AX tree), measure Web Vitals performance, monitor console logs and HTTP requests, mock API responses, execute JavaScript in browser, inspect React components, compare UI with Figma designs, or perform non-blocking debugging with tracepoints, logpoints, and exception monitoring.
Automated browser testing, interaction automation, and form testing. Use when the user needs to test web pages, automate browser interactions, fill forms, test validation, run multi-step wizards, or test login/signup flows.
Debug web and Node.js applications using console inspection, network analysis, and non-blocking code debugging. Use when the user reports bugs, wants to debug JavaScript (browser or backend), inspect network requests, troubleshoot page/API issues, trace function calls, or monitor exceptions.
CLI for debugging Node.js backend processes with non-blocking inspection. Use when the user needs to connect to Node.js processes (by PID, name, Docker, or port), set tracepoints/logpoints/exceptionpoints, capture call stacks and local variables, or inspect console logs. Requires daemon; connect before other debug commands.
Monitor and debug web and Node.js applications using OpenTelemetry, console logs, network requests, and distributed tracing. Use when the user asks about distributed tracing, correlating frontend/backend requests, OpenTelemetry, Jaeger, or monitoring application behavior.