App Docs
Install this when your app runs in a browser and you want an agent to screenshot every screen and write a structured user guide—not a raw image dump.
Overview
App-docs is an agent skill for the Build phase that browses your running web app, captures screens at chosen depth, and writes structured user documentation with annotated screenshots and workflows.
Install
npx skills add https://github.com/jezweb/claude-skills --skill app-docsWhat is this skill?
- Four depth levels: quick (~10 screenshots), standard (~30), thorough (~80+), exhaustive (~150+)
- Browser-driven capture with Chrome MCP, Playwright MCP, or playwright-cli detection
- Produces step-by-step instructions, annotated screenshots, workflow diagrams, and reference tables
- Prefers deployed or live URLs over localhost when resolving the app entry point
- Explicit triggers include 'document the app', 'user guide', and 'generate user docs'
- 4 depth levels: quick, standard, thorough, exhaustive
- Documented screenshot targets: ~10, ~30, ~80+, and ~150+ captures by depth
- Stated duration bands from 10–15 minutes (quick) up to exhaustive publishable suites
Adoption & trust: 633 installs on skills.sh; 841 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your web app works but you have no up-to-date user guide, and manually screenshotting every screen and flow does not scale for a solo builder.
Who is it for?
Founders documenting a live or staging SaaS, dashboard, or internal tool who already have browser MCP or Playwright CLI available in Claude Code.
Skip if: Backend-only APIs with no UI, apps that cannot be opened in a browser session, or teams that only need API OpenAPI specs without visual walkthroughs.
When should I use this skill?
Triggers include 'document the app', 'user guide', 'app documentation', 'screenshot docs', 'generate user docs', 'help docs', 'how-to guide', and 'write the docs'.
What do I get? / Deliverables
You get a depth-appropriate user guide—quick-start through exhaustive doc suite—grounded in real UI captures from your deployed or local app.
- Structured user guide with step-by-step instructions
- Annotated screenshots and optional workflow diagrams
- Reference tables; exhaustive depth targets a publishable documentation suite
Recommended Skills
Journey fit
End-user documentation is produced once the product exists enough to click through; Prism shelves that work under Build even though the output may later support Launch and Grow. Docs is the canonical subphase because the deliverable is user-facing guides, reference tables, and workflow diagrams rather than code review or distribution campaigns.
How it compares
Use instead of ad-hoc screenshot folders plus ChatGPT blurbs—it is a generator workflow with fixed depth tiers and narrative structure.
Common Questions / FAQ
Who is app-docs for?
Solo and indie builders on Claude Code who ship web apps and need customer-ready or team-ready user guides built from real in-browser navigation.
When should I use app-docs?
Use it in Build under docs when features are testable in the browser; optionally refresh before Launch distribution when help center copy must match the current UI.
Is app-docs safe to install?
It requires browser automation against your app URL—review the Security Audits panel on this page and only point it at environments you trust with credentials and data exposure policies.
SKILL.md
READMESKILL.md - App 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: #### a. Navigate and Prepare - Navigate to the page - Wait for data to load (no skeleton/spinner in screenshot) - Resize browser to 1280x720 for consistent screenshots - Make sure the page has realistic data — not "Test Client" or empty tables #### b. Screenshot the Default State - Take a clean screenshot showing the page populated with data - Save to `docs/screenshots/` with descriptive names #### c. Write the Page Section For each page, write: ```markdown ## [Page Name] [One sentence: what this page is for and when you'd use it]  ### What You'll See [Describe the key elements: sidebar shows X, main area shows Y, toolbar has Z] ### What You Can Do [List the actions available, each as a brief description] ### How To: [Primary Action] 1. [Step with screenshot reference] 2. [Step] 3. [Step — screenshot the result] > **Tip:** [Helpful shortcut or non-obvious feature] ``` #### d. Document Key Workflows For interactive pages, document step-by-step with screenshots at each significant step: ```markdown ### How To: Add a New Client 1. Click the **"Add Client"** button in the top right  2. Fill in the required fields — Name and Email are required, everything else is optional  3. Click **"Save"** — you'll be taken t