skills.rest
NVIDIA-NeMo
NVIDIA-NeMoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

visual-dev

Automate visual regression testing and UI implementation with Playwright MCP browser automation.

58|16|Updated May 14, 2026
Search Tags:#automation#frontend#playwright#ui-testing#design-matching#visual-development
One-click install
npx skills add https://github.com/NVIDIA-NeMo/nemo-platform --skill visual-dev-nvidia-nemo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-dev
Source: https://github.com/NVIDIA-NeMo/nemo-platform/tree/main/web/.agents/skills/visual-dev
Command: npx skills add https://github.com/NVIDIA-NeMo/nemo-platform --skill visual-dev-nvidia-nemo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the challenge of achieving pixel-perfect UI implementation by bridging the gap between design mockups and actual code through automated visual verification.

Core Features & Use Cases

  • Screenshot-Driven Analysis: Automatically captures and compares current UI states against design specifications.
  • Iterative Implementation: Facilitates a rapid feedback loop of code changes, browser navigation, and visual testing.
  • Use Case: When building a new component, use this skill to compare your implementation against a Figma mockup to ensure spacing, typography, and interactive states match the design system exactly.

Quick Start

Use the visual-dev skill to compare the current state of the login page against the provided design mockup and identify any visual discrepancies.

Frequently Asked Questions about visual-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual regression testing to match my frontend code to a design mockup?▼

Automated visual regression testing captures browser screenshots and compares current UI states against design specifications to identify visual discrepancies. This skill uses Playwright to automate screen captures and DOM analysis for iterative design-to-code matching.

What is the best way to verify responsive layout implementation across multiple viewport sizes?▼

Verifying responsive layouts requires browser automation to capture screens across multiple viewport sizes. This skill uses Playwright integration to perform screen captures and DOM analysis, ensuring component styling and spacing adapt correctly to different dimensions.

Do I need Playwright MCP integration to perform screenshot-driven UI development?▼

Yes, Playwright MCP integration is required to perform the browser automation, screen captures, and DOM analysis necessary for screenshot-driven visual UI development and iterative code-to-mockup matching.

Can I compare a Figma mockup against my actual UI implementation automatically?▼

Yes, you can compare your implementation against design mockups automatically. The skill facilitates a rapid feedback loop of code changes, browser navigation, and visual testing to ensure spacing, typography, and interactive states match the design system exactly.

How does DOM analysis help with pixel-perfect UI implementation?▼

DOM analysis helps achieve pixel-perfect UI implementation by evaluating the underlying HTML structure alongside screen captures. This combination identifies structural and styling discrepancies between the rendered frontend and the target design mockup.

When should I use browser automation for component styling verification?▼

Use browser automation for component styling verification when building new components and needing a rapid feedback loop. It iteratively captures visual states to ensure interactive elements and layouts match design system specifications without manual screenshot comparisons.

Related Skills

Explore More Software Engineering Skills→
aktsmmaktsmm
24

browser-max-automation

Automate browser interactions and UI testing via Playwright MCP.

Community
Intermediate
ybbms777ybbms777
1

figma-design-sync

Compare Figma designs with live web implementations and fix visual mismatches.

Community
Advanced
FernanSuozaFernanSuoza

web-frontend-development

Implement accessible frontend UI components with design-system tokens and automated tests.

Community
Advanced
winstonkoh87winstonkoh87
558

visual-verify-ui

Capture multi-viewport screenshots and compare DOM states for visual regression testing.

Community
Intermediate