# App Docs

Generate complete user documentation for a web app with screenshots.

- Repository: https://github.com/jezweb/claude-skills (1094 stars)
- Category: Writing
- License: MIT
- Last updated: 2026-10-09
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jezweb/claude-skills --skill app-docs -g -a claude-code -y`
Codex: `npx skills add jezweb/claude-skills --skill app-docs -g -a codex -y`
Cursor: `npx skills add jezweb/claude-skills --skill app-docs -g -a cursor -y`
Gemini CLI: `npx skills add jezweb/claude-skills --skill app-docs -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jezweb/claude-skills`

## Description

Generate complete user documentation for a web app with screenshots. Browses the app via browser automation, screenshots every screen, and produces a structured user guide with step-by-step instructions, annotated screenshots, workflow diagrams, and reference tables. Supports quick (key screens), standard (all pages), thorough (every state and flow), and exhaustive (publishable documentation suite). Triggers: 'document the app', 'user guide', 'app documentation', 'screenshot docs', 'generate user docs', 'help docs', 'how-to guide', 'write the docs'.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# App Documentation Generator

Browse a running web app, screenshot every screen, and produce documentation good enough to publish. Not a screenshot dump, a structured guide that teaches someone how to use the app.

## Browser Tool Detection

Same as ux-audit, Chrome MCP, Playwright MCP, or playwright-cli.

## URL Resolution

Same as ux-audit, prefer deployed/live URL over localhost.

## Depth Levels

| Depth | Screenshots | What it produces | Duration |
|-------|------------|-----------------|----------|
| **quick** | ~10 | Single-page quick-start guide. Key screens, happy path only. | 10-15 min |
| **standard** | ~30 | Full user guide. All pages, primary workflows, reference tables. | 30-60 min |
| **thorough** | ~80+ | Comprehensive guide. All states, mobile views, every CRUD flow, troubleshooting. | 1-3 hours |
| **exhaustive** | ~150+ | Publishable documentation suite. Everything in thorough plus: getting started tutorial, feature-by-feature deep dives, admin guide, keyboard shortcut reference, FAQ, and HTML version. | 3-6 hours |

Default: **standard**

## Workflow

### 1. Get App Details

Ask the user:
- **App URL** (required, or auto-detect from wrangler.jsonc / running dev server)
- **App name** (for the guide title)
- **Auth**, Chrome MCP uses their session; Playwright needs credentials
- **Depth**, quick, standard, thorough, or exhaustive
- **Audience**, who reads this? (end users, admins, new team members, clients)

### 2. Discover All Routes

Navigate the app and build a complete page inventory:
- Read the sidebar/navigation menu
- Click through all top-level items and sub-items
- Note sub-pages, tabs within pages, and nested navigation
- Check for settings, profile, admin areas, help pages
- Record the URL and purpose of each page
- Note which pages have interactive elements (forms, buttons, filters)

Create a task list to track documentation progress.

### 3. Document Each Page

For each page in the inventory:

The rest: https://github.com/jezweb/claude-skills/blob/HEAD/plugins/dev-tools/skills/app-docs/SKILL.md