App Docs

What Is App Docs?

App Docs is an advanced documentation generation skill designed for the Claude Code environment. It automates the production of comprehensive user documentation for web applications, combining browser automation with intelligent content structuring. Unlike simple screenshot utilities or basic auto-generated documentation, App Docs interacts with your running application, systematically navigates through its pages and workflows, captures annotated screenshots, and produces a publication-ready user guide. The result is a clear, structured, and visually rich manual that empowers users to understand and use your app effectively—whether they are beginners or experienced users.

Why Use App Docs?

Maintaining high-quality user documentation for web applications can be time-consuming and error-prone, especially as features evolve rapidly. Manual screenshotting, keeping step-by-step guides up to date, and ensuring documentation consistency across platforms often become an afterthought during fast-paced development cycles. App Docs addresses these challenges by:

• Automating Documentation: It programmatically browses your app, ensuring every screen and workflow is captured and documented according to your chosen thoroughness level.
• Reducing Human Error: By relying on browser automation, App Docs eliminates out-of-date screenshots and missed steps that can occur with manual processes.
• Accelerating Onboarding: Well-structured, up-to-date documentation helps new users and team members to get started quickly, reducing support requests and onboarding costs.
• Supporting Multiple Depth Levels: Whether you need a quick-start guide for a beta release or a complete, publishable manual for a production launch, App Docs adapts to your requirements.

How to Get Started

To utilize App Docs, you need access to the Claude Code environment and a compatible browser automation tool. Supported drivers include Chrome MCP, Playwright MCP, or the playwright-cli. The skill is installed via the Claude Skills framework and is compatible with Claude Code only.

Installation Steps:

1. Clone the Skill Repository:

   bash

   git clone https://github.com/jezweb/claude-skills.git
   cd claude-skills/plugins/dev-tools/skills/app-docs

2. Ensure Browser Automation Prerequisites:

   Install Playwright (if not already available):

   bash

   npm install -g playwright
   playwright install

   Or ensure your Claude Code environment is connected to Chrome MCP or Playwright MCP.

3. Activate the Skill in Claude Code:

   Use the Claude Code interface to enable the app-docs skill. Refer to your Claude Code documentation for specific steps.

Example Usage:

To generate documentation for a live app:

document the app at https://your-app-url.com with thorough depth

Alternatively, use triggers such as user guide, screenshot docs, or generate user docs to initiate documentation.

Key Features

• Automated Browsing and Screenshotting: App Docs navigates the live app, captures every relevant screen, and annotates screenshots for clarity.
• Structured Output: Produces step-by-step guides, workflow diagrams, and reference tables, not just a flat list of images.
• Multiple Depth Levels: Choose from quick (~10 screenshots), standard (~30), thorough (~80+), or exhaustive (~150+) documentation modes.
• Smart URL Resolution: Prefers live or deployed URLs over localhost, ensuring documentation targets the correct environment.
• Versatile Triggers: Initiate documentation with natural language commands such as "document the app" or "write the docs".
• Multi-State and Responsive Coverage: At higher depths, App Docs covers different app states (e.g., logged in/out), CRUD flows, and mobile views.

Example: Generating a Standard User Guide

generate user docs for https://demo-app.com with standard depth

App Docs will then:

• Launch browser automation
• Systematically explore all primary pages and workflows
• Capture annotated screenshots
• Output a structured user guide in Markdown or HTML

Best Practices

• Deploy a Stable Version: Always document a deployed, stable version of your app to prevent capturing incomplete or buggy states.
• Pre-configure Test Data: Set up typical user flows and test data in advance to ensure meaningful and representative screenshots.
• Review and Edit Output: While App Docs generates a robust baseline, manual review and minor edits can provide additional context or branding.
• Choose the Right Depth: Use "quick" for internal demos, "standard" for most public releases, and "exhaustive" only when you need an in-depth, publishable suite.
• Automate Regularly: Integrate App Docs into your CI/CD pipeline to keep documentation up to date with each major release.

Important Notes

• Compatibility: App Docs is designed exclusively for Claude Code and requires compatible browser automation tools. It does not work as a standalone CLI utility.
• Security: Ensure sensitive data is excluded or masked, as screenshots and documentation may inadvertently expose confidential information.
• Performance: Higher depth levels (thorough/exhaustive) can be time-consuming (up to several hours for large apps). Schedule these runs during off-peak hours.
• Customization: While the generated documentation is highly structured, further customization may be required for branding or regulatory compliance.
• Maintenance: As your app evolves, maintain test data and app states to ensure App Docs continues to produce accurate and relevant guides.

By automating the creation of high-quality, visually rich user documentation, App Docs streamlines a critical aspect of web app development, ensuring your users always have access to clear, up-to-date guides tailored to their needs.