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

Ready to run

npx skills add https://github.com/lucidlabs-hq/agent-kit --skill screenshot-lucidlabs-hq

💬 Prompt for ChatGPT / Claude Chat▼

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.