Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

visual-testing

Estrelas4

Forks0

Atualizado16 de maio de 2026 às 13:13

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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

ironbee-ai

ironbee-ai/ironbee-devtools-skills

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Analistas de garantia de qualidade de software e testadoresInformática e Matemática·SOC 15-1253

SKILL.md

readonly

Mais deste repositório

mesmo repositório

ironbee-android-devtools-cli

ironbee-ai/ironbee-devtools-skills

CLI for driving an Android emulator (AVD) over adb. Use when the user needs to connect to an emulator (attach to a running one or boot/manage an AVD), tap/swipe/type on the UI, read the UI/accessibility tree, take screenshots or screen recordings, capture logcat, capture HTTP(S) requests in-process (Frida OkHttp hook — no proxy/CA, pinning bypassed), mock/intercept HTTP responses, pin a W3C trace id across app API calls, measure app performance, wait for network idle, or compare a screen against a Figma design. Emulator-only (no physical devices, no on-device tracepoints); network capture/mocking needs a rootable emulator image. Requires daemon; connect a device before other commands. Also covers the creds-gated Jira and Linear issue-tracker domains: fetch/search issues, download attachments, attach evidence, comment, transition/set state, and report verification results back to the tracker.

2026-07-164

ironbee-backend-devtools-cli

ironbee-ai/ironbee-devtools-skills

CLI for backend service verification — drive HTTP/1.1+HTTP/2, gRPC, GraphQL, and WebSocket endpoints; capture logs from file, Docker, and Kubernetes sources; and verify state against Postgres, MySQL, or SQLite databases with snapshot/diff and change-feed primitives. Use when the user needs to call backend APIs over any of those protocols, assert on log lines or database rows, replay captured curl/HAR requests, manage session-scoped cookies/default headers, or correlate flows with W3C trace ids. Also covers the creds-gated Jira and Linear issue-tracker domains: fetch/search issues, download attachments, attach evidence, comment, transition/set state, and report verification results back to the tracker.

2026-07-164

ironbee-browser-devtools-cli

ironbee-ai/ironbee-devtools-skills

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, manage reusable scenarios, or perform non-blocking debugging with tracepoints, logpoints, and exception monitoring. Also covers the creds-gated Jira and Linear issue-tracker domains: fetch/search issues, download attachments, attach evidence, comment, transition/set state, and report verification results back to the tracker.

2026-07-164

ironbee-node-devtools-cli

ironbee-ai/ironbee-devtools-skills

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, inspect console logs, capture the process's outbound HTTP requests (egress) with W3C trace-context injection, or run reusable scenarios. Requires daemon; connect before other debug commands. Also covers the creds-gated Jira and Linear issue-tracker domains: fetch/search issues, download attachments, attach evidence, comment, transition/set state, and report verification results back to the tracker.

2026-07-164

ironbee-python-devtools-cli

ironbee-ai/ironbee-devtools-skills

CLI for debugging running Python processes with non-blocking inspection via debugpy (Debug Adapter Protocol). Use when the user needs to attach to a Python process (already-listening debugpy, PID injection, process name, or Docker), set tracepoints/logpoints/exceptionpoints, capture call stacks and local variables, dump all thread stacks (deadlock/GIL diagnosis), read stdout/stderr logs, capture the process's outbound HTTP requests (egress) with W3C trace-context injection, or run reusable scenarios. Requires daemon and `debugpy` installed in the target's Python environment; connect before other debug commands. Also covers the creds-gated Jira and Linear issue-tracker domains: fetch/search issues, download attachments, attach evidence, comment, transition/set state, and report verification results back to the tracker.

2026-07-164

ironbee-terminal-devtools-cli

ironbee-ai/ironbee-devtools-skills

CLI for driving interactive terminal programs (shells, REPLs, full-screen TUIs) over a pseudo-terminal (PTY). Use when the user needs to spawn a CLI/REPL/TUI attached to a TTY, type commands and keystrokes (tmux key syntax), wait for expected output before sending more input, capture raw scrollback or the rendered screen grid, send process signals, resize the terminal, or run a one-shot command and read its output + exit code. The platform spawns the process itself (it does not attach to a pre-existing external process). For server APIs use the backend CLI; for Node.js process debugging use the node CLI. Also covers the creds-gated Jira and Linear issue-tracker domains: fetch/search issues, download attachments, attach evidence, comment, transition/set state, and report verification results back to the tracker.

2026-07-164

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(ironbee-browser-devtools-cli:*)

Visual Testing Skill

Perform visual testing, UI verification, and design comparison using screenshots, responsive testing, and Figma integration.

When to Use

This skill activates when:

User wants to verify UI appearance
User asks to compare page with design or Figma
User needs responsive design testing
User wants to check for visual regressions
User mentions UI bugs or styling issues
User asks about design parity
User wants to validate implementation against design

Capabilities

Screenshot Capture

ironbee-browser-devtools-cli content take-screenshot --name "homepage"
ironbee-browser-devtools-cli content take-screenshot --name "element" --selector ".hero"
ironbee-browser-devtools-cli content take-screenshot --name "fullpage" --full-page
ironbee-browser-devtools-cli content take-screenshot --name "photo" --type jpeg --quality 80
ironbee-browser-devtools-cli content save-as-pdf --name "page" --format A4

Annotated Screenshot (ref labels)

Overlay numbered labels [1],[2] on interactive elements. Call a11y take-aria-snapshot first.

ironbee-browser-devtools-cli a11y take-aria-snapshot
ironbee-browser-devtools-cli content take-screenshot --annotate --name "annotated"
ironbee-browser-devtools-cli content take-screenshot --annotate --annotate-content --name "with-headings"

Responsive Testing

ironbee-browser-devtools-cli interaction resize-viewport --width 375 --height 667   # Mobile
ironbee-browser-devtools-cli interaction resize-viewport --width 768 --height 1024  # Tablet
ironbee-browser-devtools-cli interaction resize-viewport --width 1920 --height 1080 # Desktop

Figma Design Comparison

ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123xyz" \
  --figma-node-id "12:34"

ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123xyz" \
  --figma-node-id "12:34" \
  --selector ".hero-section"

ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123xyz" \
  --figma-node-id "12:34" \
  --mssim-mode semantic

DOM Inspection

ironbee-browser-devtools-cli content get-as-html
ironbee-browser-devtools-cli content get-as-html --selector ".component"
ironbee-browser-devtools-cli content get-as-text --selector ".content"

Viewport Presets

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`

Prerequisites for Figma Comparison

Figma API Access:

Set FIGMA_ACCESS_TOKEN environment variable
Get token from Figma account settings

Optional (for enhanced comparison):

AWS credentials for image/text embeddings
Cloud inference profile configuration

Visual Testing Workflow

SESSION="--session-id visual-test"

# 1. Navigate
ironbee-browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
ironbee-browser-devtools-cli $SESSION sync wait-for-network-idle

# 2. Capture desktop
ironbee-browser-devtools-cli $SESSION content take-screenshot --name "desktop"

# 3. Test mobile viewport
ironbee-browser-devtools-cli $SESSION interaction resize-viewport --width 375 --height 667
ironbee-browser-devtools-cli $SESSION content take-screenshot --name "mobile"

# 4. Test tablet viewport
ironbee-browser-devtools-cli $SESSION interaction resize-viewport --width 768 --height 1024
ironbee-browser-devtools-cli $SESSION content take-screenshot --name "tablet"

# 5. Cleanup
ironbee-browser-devtools-cli session delete visual-test

Figma Comparison Workflow

1. Get Figma Reference

Find the Figma file key and node ID:

File key: From URL figma.com/file/{FILE_KEY}/...
Node ID: Select frame → Copy link → Extract node-id parameter

2. Compare with Live Page

ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123xyz" \
  --figma-node-id "12:34" \
  --selector ".hero-section"

3. Analyze Results

Score 0.9-1.0: Excellent match
Score 0.7-0.9: Minor differences
Score 0.5-0.7: Significant differences
Score < 0.5: Major mismatch

4. Investigate Differences

If score is low:

# Take screenshot of the area
ironbee-browser-devtools-cli content take-screenshot --name "mismatch" --selector ".hero-section"

# Check HTML structure
ironbee-browser-devtools-cli content get-as-html --selector ".hero-section"

Comparison Modes

Semantic Mode (Default)

More tolerant of text/data differences
Focuses on layout and structure
Good for comparing sample vs real data

ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --mssim-mode semantic

Raw Mode

Stricter pixel comparison
Expects near-identical output
Good for static content

ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --mssim-mode raw

Common Scenarios

Full Page Comparison

ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --full-page

Component Comparison

ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "5:10" \
  --selector ".card-component"

Responsive Testing with Figma

# Resize viewport first
ironbee-browser-devtools-cli interaction resize-viewport --width 375 --height 667

# Then compare with mobile design
ironbee-browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "20:30"

Common Visual Checks

Element visibility at breakpoints
Text overflow and truncation
Image aspect ratios
Color and typography consistency
Spacing and alignment
Interactive state styling

Best Practices

Use semantic mode for real data vs sample data
Compare components not just full pages
Test multiple viewports for responsive designs
Document Figma references for CI/CD
Set baseline scores for regression testing
Review notes in response for signal details
Take screenshots at key states (initial, hover, active)