skills.rest
cinjoff
cinjoffCOMMUNITY
Explore all skills by this author →
Website𝕏@c1njoffGitHub

verify-ui

Capture browser screenshots and critique UI design across viewports.

1|2|Updated Mar 6, 2026
Search Tags:#accessibility#screenshots#frontend#visual testing#ui verification#design critique
One-click install
npx skills add https://github.com/cinjoff/fhhs-skills --skill verify-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: verify-ui
Source: https://github.com/cinjoff/fhhs-skills/tree/main/.claude/skills/verify-ui
Command: npx skills add https://github.com/cinjoff/fhhs-skills --skill verify-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the visual verification of frontend development work, ensuring that the user interface matches design specifications and is free of visual bugs.

Core Features & Use Cases

  • Automated UI Checks: Captures screenshots across multiple device viewports (desktop, tablet, mobile).
  • Design Critique: Evaluates UI against design principles and project design documents.
  • Console Error Detection: Checks for runtime errors, warnings, and network issues in the browser console.
  • Use Case: After a developer completes a new feature, use this skill to automatically generate screenshots and perform a design review, flagging any discrepancies or bugs before they reach users.

Quick Start

Run a visual check on the current UI by typing 'verify the design'.

Frequently Asked Questions about verify-ui

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

FAQPage Schema
How do I automate visual testing and capture frontend screenshots for UI verification?▼

Automated UI verification captures browser screenshots across desktop, tablet, and mobile viewports, then critiques visual hierarchy, typography, color, and spacing to detect design discrepancies.

Can I check for browser console runtime errors and network issues during a design critique?▼

Yes, UI verification checks the browser console for runtime errors, warnings, and network issues while capturing screenshots, ensuring visual and functional frontend stability.

How do I perform a design critique on a responsive frontend across multiple device viewports?▼

A design critique evaluates responsiveness by capturing screenshots across multiple device viewports, analyzing UI elements for accessibility, spacing, and hierarchy against project design documents.

Do I need agent-browser to run automated visual testing for frontend user interfaces?▼

Yes, automated visual testing requires the agent-browser CLI to capture screenshots and execute design critiques, functioning as the core dependency for browser interaction.

What is the best way to verify accessibility and visual hierarchy in frontend development?▼

The best way to verify accessibility and visual hierarchy is through automated UI verification, which analyzes captured screenshots against design principles to flag discrepancies before release.

Why does my UI verification not catch visual bugs or design discrepancies effectively?▼

UI verification may miss visual bugs if project design documents are not referenced properly, as the design critique relies on comparing captured screenshots against specified design principles and accessibility standards.

Related Skills

Explore More Design & Creative Skills→
Yaron9Yaron9
18

agent-browser

Automate headless browser tasks via CLI for web automation and testing.

Community
Advanced
majesticlabs-devmajesticlabs-dev
47

python-debugger

Diagnose Python errors by analyzing tracebacks and reproducing issues.

Official
Advanced
jonathanmalkinjonathanmalkin
61

test-prod

Automate end-to-end smoke testing of web application user flows on staging and production.

Community
Intermediate
alvarettoalvaretto
1

Comparación Visual Inteligente

Compare generated images against originals and report visual differences.

Community
Advanced