App Screenshots — Documentation skill for Claude Code

app-screenshots

A Claude Code skill that generates annotated screenshot documentation for any web app or live website. Point it at your local dev server **or** any public URL (otto.de, github.com, etc.) and get a markdown file with screenshots showing every page, with red circles, arrows, and labels highlighting key UI elements.

What it does

1. Local apps: auto-detects and starts your dev server (pnpm dev, npm run dev, etc.) Live sites: navigates directly to the URL, handles cookie banners and popups
2. Discovers all pages from the site's navigation
3. Takes screenshots of each page with SVG annotations injected via agent-browser
4. Generates a single markdown doc with all screenshots and descriptions

Example prompts

"Screenshot the app"
"Document otto.de with screenshots"
"Give me a visual guide of the dashboard"
"Describe the search feature on amazon.de with screenshots"
"Screenshot my app's checkout flow"

Example output

# otto.de - Visual Guide

**URL:** https://www.otto.de
**Date:** 2026-03-24

---

## Homepage

The landing page features a hero banner with seasonal promotions.
Use the **Search** bar (top center) to find products.
The **Category navigation** (below header) provides access to all departments.

![Homepage](screenshots/01-homepage.png)

Screenshots include:

• Box annotations — dashed borders around sections (nav, content areas, product grids)
• Click annotations — circles with arrows pointing to buttons and interactive elements
• Auto-rotating colors — red, blue, green, amber, purple for multiple annotations

Prerequisites

Install [agent-browser](https://github.com/vercel-labs/agent-browser) globally:

npm install -g agent-browser
agent-browser install

Installation

With `npx skills` (recommended)

npx skills add alexanderop/app-screenshots

Manual

Clone into your project's `.claude/skills/` di