screenshotting-apps

Capture annotated screenshots of websites and apps into Markdown documentation.

18|Updated Mar 24, 2026
One-click install
npx skills add https://github.com/alexanderop/app-screenshots --skill screenshotting-apps-alexanderop
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: screenshotting-apps
Source: https://github.com/alexanderop/app-screenshots/tree/main
Command: npx skills add https://github.com/alexanderop/app-screenshots --skill screenshotting-apps-alexanderop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Annotated visual documentation for web apps and live sites, turning what users see into repeatable, shareable guides and reducing manual screenshot effort.

Core Features & Use Cases

  • Auto-discovers pages from a local dev server or a live site and generates a single Markdown document with all screenshots and descriptions.
  • Injects SVG annotations (boxes, circles, arrows) on top of pages to highlight UI elements and interactions.
  • Supports device emulation, cookie-banner handling, and mobile workflows, producing consistent visual guides across environments.
  • Easy integration with Claude Code prompts to document specific features or flows.

Quick Start

Ask Claude Code to generate a visual documentation by pointing it at a URL or your local server.

Frequently Asked Questions about screenshotting-apps

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

FAQPage Schema
How do I automatically generate annotated screenshots for web app documentation?

To generate annotated visual documentation, this Skill drives automated screenshots of web apps and injects SVG overlays like boxes and arrows to highlight UI elements. It discovers pages across multiple URLs and compiles them into a single Markdown document with descriptions.

Can I capture mobile views and handle cookie banners when screenshotting live sites?

Yes, you can capture mobile views and handle cookie banners when screenshotting live sites. The Skill supports device emulation and mobile workflows, ensuring consistent visual guides across different environments and handling common UI interruptions.

What is the best way to turn a local dev server into a visual guide?

The best way to turn a local dev server into a visual guide is to point Claude Code at your local URL. The Skill auto-discovers pages from the server, captures screenshots, applies SVG annotations, and outputs a consolidated Markdown document.

Do I need agent-browser to automate screenshots of product dashboards?

Yes, you need agent-browser and a supported environment to automate screenshots of product dashboards. This dependency is required for the Skill to discover pages, capture screenshots, and generate the annotated visual documentation.

Can I document feature flows across multiple URLs in one Markdown document?

Yes, you can document feature flows across multiple URLs in one Markdown document. The Skill applies automated screenshots to product pages, dashboards, and feature flows, consolidating all captured images and descriptions into a single shareable Markdown file.