skills.rest
lucidlabs-hq
lucidlabs-hqOFFICIAL
Explore all skills by this author →
WebsiteGitHub

screenshot

Capture UI screenshots of web pages for visual verification.

2|1|Updated Jan 27, 2026
Search Tags:#frontend#qa#screenshot#web#visual-regression#ui-verification#agent-browser
One-click install
npx skills add https://github.com/lucidlabs-hq/agent-kit --skill screenshot-lucidlabs-hq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot
Source: https://github.com/lucidlabs-hq/agent-kit/tree/main/.claude/skills/screenshot
Command: npx skills add https://github.com/lucidlabs-hq/agent-kit --skill screenshot-lucidlabs-hq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the capture of visual UI verifications by producing consistent screenshots of web pages for QA validation and design review.

Core Features & Use Cases

  • Page navigation and element capture: open pages and record UI states for quick comparison.
  • Element interaction and verification: snapshot references and optional interactions to ensure expected behavior.
  • Gallery creation and sharing: store screenshots in a dedicated gallery (frontend/.dev-screenshots) and update an index.html for review.
  • Full-page and targeted screenshots: support both full-page captures and viewport-based shots with a --full option.

Quick Start

Open the frontend dev server and run agent-browser to snapshot and capture screenshots for your pages.

Frequently Asked Questions about screenshot

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

FAQPage Schema
How do I automate UI screenshots for web visual regression testing?▼

Automate UI screenshots by running agent-browser against a running frontend dev server to capture web page states for visual regression testing. Screenshots are stored in a defined directory for QA validation and design review.

How do I capture full-page screenshots during frontend development?▼

Capture full-page screenshots during frontend development using the --full option with agent-browser. This records the entire web page UI state, storing outputs in a dedicated gallery directory for quick comparison.

Do I need a running frontend server to capture web page screenshots?▼

Yes, capturing web page screenshots requires a running frontend server and agent-browser tooling. The server hosts the web pages, and agent-browser navigates and captures the UI states into a defined screenshots directory.

What is the best way to document UI states for QA verification?▼

The best way to document UI states for QA verification is to capture visual screenshots and generate a gallery. The tool stores captures in a frontend directory and updates an index.html for review and sharing.

Can I capture viewport-based screenshots instead of full-page captures?▼

Yes, you can capture viewport-based screenshots instead of full-page captures. By default, the tool targets the viewport, and you can use the --full option when you need full-page UI verification shots.

Related Skills

Explore More Software Engineering Skills→
fysoul17fysoul17
4

devlyn:browser-validate

Launch a dev server and validate UI features through real browser interactions.

Community
Advanced
gtpgg1013gtpgg1013

visual-verdict

Compare generated UI screenshots with reference images to produce a deterministic JSON verdict.

Community
Intermediate
rkumar261rkumar261
1

gstack

Drive a headless browser to navigate pages, interact with UI elements, and verify state.

Community
Advanced
HCMUTE-RTICHCMUTE-RTIC

ui-visual-validator

Validate UI modifications for design system compliance and accessibility via screenshot analysis.

Official
Advanced