skills.rest
angadhn
angadhnCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

see-ui

Captures headless Chrome screenshots across mobile and desktop viewports to identify layout and responsive issues.

19|Updated Mar 30, 2026
Search Tags:#testing#ui#debugging#chrome#headless#visual
One-click install
npx skills add https://github.com/angadhn/botference --skill see-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: see-ui
Source: https://github.com/angadhn/botference/tree/main/.claude/skills/see-ui
Command: npx skills add https://github.com/angadhn/botference --skill see-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the issue of invisible layout and design failures that automated code tests miss, such as squashed charts or misaligned elements that appear technically correct but look broken to human users.

Core Features & Use Cases

  • Headless Visual Capture: Renders web UIs using a headless Chrome engine to generate screenshots for mobile and desktop viewports.
  • Visual Debugging: Allows for immediate verification of UI changes and responsive design behavior without manual browser interaction.
  • Use Case: After modifying a dashboard's CSS, use this skill to capture screenshots across different viewports to ensure charts and labels remain legible and correctly positioned.

Quick Start

Use the see-ui skill to capture screenshots of the local development server running on port 3000.

Frequently Asked Questions about see-ui

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

FAQPage Schema
How do I automate visual regression testing for responsive web layouts?▼

Automate visual regression testing by capturing headless Chrome screenshots of web interfaces across multiple viewport dimensions. This renders DOM elements and client-side charts to identify layout, design, and responsive rendering issues during development cycles.

Why do code tests miss squashed charts and misaligned UI elements?▼

Code tests miss squashed charts and misaligned UI elements because they check technical correctness rather than visual layout. Headless visual capture renders the DOM to generate screenshots, revealing design failures that appear broken to human users.

Can I capture screenshots across mobile and desktop viewports using headless Chrome?▼

Yes, you can capture screenshots across mobile and desktop viewports using a headless Chrome environment. The engine renders web UIs to generate screenshots, allowing immediate verification of responsive design behavior without manual browser interaction.

What is the best way to visually debug CSS changes on a local development server?▼

Visually debug CSS changes by capturing headless screenshots of your local development server. This allows immediate verification of UI modifications, ensuring charts and labels remain legible and correctly positioned across different viewports.

Do I need a headless Chrome environment to verify client-side charts?▼

Yes, a headless Chrome environment is required to verify client-side charts. The visual testing process relies on headless Chrome to render DOM elements and charts for accurate visual verification and screenshot generation.

Related Skills

Explore More Software Engineering Skills→
johnlindquistjohnlindquist
16

chrome-devtools

Automate browser control and debugging via the Chrome DevTools Protocol.

Community
Advanced
dsifrydsifry
379

visual-review

Capture web page and UI screenshots with Playwright for visual inspection.

Community
Intermediate
MadAppGangMadAppGang
7

debug-ui

Capture screenshots and inspect DOM state to diagnose UI layout issues.

Official
Intermediate
bdbchbdbch
2

browser-test

Execute manual browser tests in Chrome with navigation, form interactions, and state verification.

Community
Intermediate