App Docs
Generate complete user documentation for a web app with screenshots.
Install
npx skills add jezweb/claude-skills --skill app-docs -g -a claude-code -y- Repository
- jezweb/claude-skills1.1k
- Category
- Writing
- Updated
- 26d ago
- License
- MIT
- Context cost
- Mediumabout 2,414 tokens
- Runs scripts
- No, instructions only
What it does
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'.
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:
