app-docs

Name: app-docs
Author: jezweb

832installs96forks

How to install app-docs?

jezweb/claude-skills/app-docs

$npx -y skills add jezweb/claude-skills --skill app-docs

Installs into the current project.

Summary

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 qui

Files · 1

View on GitHub

SKILL.md

1	# App Documentation Generator
2
3	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.
4
5	## Browser Tool Detection
6
7	Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli.
8
9	## URL Resolution
10
11	Same as ux-audit — prefer deployed/live URL over localhost.
12
13	## Depth Levels
14
15	\| Depth \| Screenshots \| What it produces \| Duration \|
16	\|-------\|------------\|-----------------\|----------\|
17	\| quick \| ~10 \| Single-page quick-start guide. Key screens, happy path only. \| 10-15 min \|
18	\| standard \| ~30 \| Full user guide. All pages, primary workflows, reference tables. \| 30-60 min \|
19	\| thorough \| ~80+ \| Comprehensive guide. All states, mobile views, every CRUD flow, troubleshooting. \| 1-3 hours \|
20	\| 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 \|
21
22	Default: standard
23
24	## Workflow
25
26	### 1. Get App Details
27
28	Ask the user:
29	- App URL (required — or auto-detect from wrangler.jsonc / running dev server)
30	- App name (for the guide title)
31	- Auth — Chrome MCP uses their session; Playwright needs credentials
32	- Depth — quick, standard, thorough, or exhaustive
33	- Audience — who reads this? (end users, admins, new team members, clients)
34
35	### 2. Discover All Routes
36
37	Navigate the app and build a complete page inventory:
38	- Read the sidebar/navigation menu
39	- Click through all top-level items and sub-items
40	- Note sub-pages, tabs within pages, and nested navigation
41	- Check for settings, profile, admin areas, help pages
42	- Record the URL and purpose of each page
43	- Note which pages have interactive elements (forms, buttons, filters)
44
45	Create a task list to track documentation progress.
46
47	### 3. Document Each Page
48
49	For each page in the inventory:
50
51	#### a. Navigate and Prepare
52	- Navigate to the page
53	- Wait for data to load (no skeleton/spinner in screenshot)
54	- Resize browser to 1280x720 for consistent screenshots
55	- Make sure the page has realistic data — not "Test Client" or empty tables
56
57	#### b. Screenshot the Default State
58	- Take a clean screenshot showing the page populated with data
59	- Save to `docs/screenshots/` with descriptive names
60
61	#### c. Write the Page Section
62
63	For each page, write:
64
65	```markdown
66	## [Page Name]
67
68	[One sentence: what this page is for and when you'd use it]
69
70	![Page name](screenshots/NN-page-name.png)
71
72	### What You'll See
73	[Describe the key elements: sidebar shows X, main area shows Y, toolbar has Z]
74
75	### What You Can Do
76	[List the actions available, each as a brief description]
77
78	### How To: [Primary Action]
79	1. [Step with screenshot reference]
80	2. [Step]
81	3. [Step — screenshot the result]
82
83	> Tip: [Helpful shortcut or non-obvious feature]
84	```
85
86	#### d. Document Key Workflows
87
88	For interactive pages, document step-by-step with screenshots at each significant step:
89
90	```markdown
91	### How To: Add a New Client
92
93	1. Click the "Add Client" button in the top right
94	![Add button location](screenshots/12-clients-add-button.png)
95
96	2. Fill in the required fields — Name and Email are required, everything else is optional
97	![New client form](screenshots/13-clients-new-form.png)
98
99	3. Click "Save" — you'll be taken to the new client's detail page
100	![Client saved confirmation](screenshots/14-clients-saved.png)
101
102	> Tip: You can also press Cmd+N from anywhere to create a new client.
103	```
104
105	#### e. Depth-Specific Extras
106
107	\| Extra \| quick \| standard \| thorough \| exhaustive \|
108	\|-------\|-------\|----------\|----------\|-----------\|
109	\| Empty states \| Skip \| Note \| Screenshot + document \| Screenshot + suggest improvements \|
110	\| Error states \| Skip \| Note \| Trigger + screenshot \| Every validation error documented \|
111	\| Dark mode \| Skip \| Skip \| Screenshot key pages \| Screenshot every page \|
112	\| Mobile (375px) \| Skip \| Skip \| Screenshot key pages \| Screenshot every page \|
113	\| All CRUD \| Skip \| Primary only \| Every operation \| Every operation + edge cases \|
114	\| Settings/config \| Skip \| List options \| Document each \| Document each with examples \|
115	\| Keyboard shortcuts \| Skip \| List if visible \| Full reference table \| Dedicated section \|
116	\| Search/filters \| Skip \| Mention \| Document each filter \| Document every combinatio

People who liked this also viewed

6 picks

Type

app-docs

832installs96forks

View on GitHub

How to install app-docs?

jezweb/claude-skills/app-docs

$npx -y skills add jezweb/claude-skills --skill app-docs

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# App Documentation Generator
2
3	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.
4
5	## Browser Tool Detection
6
7	Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli.
8
9	## URL Resolution
10
11	Same as ux-audit — prefer deployed/live URL over localhost.
12
13	## Depth Levels
14
15	\| Depth \| Screenshots \| What it produces \| Duration \|
16	\|-------\|------------\|-----------------\|----------\|
17	\| quick \| ~10 \| Single-page quick-start guide. Key screens, happy path only. \| 10-15 min \|
18	\| standard \| ~30 \| Full user guide. All pages, primary workflows, reference tables. \| 30-60 min \|
19	\| thorough \| ~80+ \| Comprehensive guide. All states, mobile views, every CRUD flow, troubleshooting. \| 1-3 hours \|
20	\| 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 \|
21
22	Default: standard
23
24	## Workflow
25
26	### 1. Get App Details
27
28	Ask the user:
29	- App URL (required — or auto-detect from wrangler.jsonc / running dev server)
30	- App name (for the guide title)
31	- Auth — Chrome MCP uses their session; Playwright needs credentials
32	- Depth — quick, standard, thorough, or exhaustive
33	- Audience — who reads this? (end users, admins, new team members, clients)
34
35	### 2. Discover All Routes
36
37	Navigate the app and build a complete page inventory:
38	- Read the sidebar/navigation menu
39	- Click through all top-level items and sub-items
40	- Note sub-pages, tabs within pages, and nested navigation
41	- Check for settings, profile, admin areas, help pages
42	- Record the URL and purpose of each page
43	- Note which pages have interactive elements (forms, buttons, filters)
44
45	Create a task list to track documentation progress.
46
47	### 3. Document Each Page
48
49	For each page in the inventory:
50
51	#### a. Navigate and Prepare
52	- Navigate to the page
53	- Wait for data to load (no skeleton/spinner in screenshot)
54	- Resize browser to 1280x720 for consistent screenshots
55	- Make sure the page has realistic data — not "Test Client" or empty tables
56
57	#### b. Screenshot the Default State
58	- Take a clean screenshot showing the page populated with data
59	- Save to `docs/screenshots/` with descriptive names
60
61	#### c. Write the Page Section
62
63	For each page, write:
64
65	```markdown
66	## [Page Name]
67
68	[One sentence: what this page is for and when you'd use it]
69
70	![Page name](screenshots/NN-page-name.png)
71
72	### What You'll See
73	[Describe the key elements: sidebar shows X, main area shows Y, toolbar has Z]
74
75	### What You Can Do
76	[List the actions available, each as a brief description]
77
78	### How To: [Primary Action]
79	1. [Step with screenshot reference]
80	2. [Step]
81	3. [Step — screenshot the result]
82
83	> Tip: [Helpful shortcut or non-obvious feature]
84	```
85
86	#### d. Document Key Workflows
87
88	For interactive pages, document step-by-step with screenshots at each significant step:
89
90	```markdown
91	### How To: Add a New Client
92
93	1. Click the "Add Client" button in the top right
94	![Add button location](screenshots/12-clients-add-button.png)
95
96	2. Fill in the required fields — Name and Email are required, everything else is optional
97	![New client form](screenshots/13-clients-new-form.png)
98
99	3. Click "Save" — you'll be taken to the new client's detail page
100	![Client saved confirmation](screenshots/14-clients-saved.png)
101
102	> Tip: You can also press Cmd+N from anywhere to create a new client.
103	```
104
105	#### e. Depth-Specific Extras
106
107	\| Extra \| quick \| standard \| thorough \| exhaustive \|
108	\|-------\|-------\|----------\|----------\|-----------\|
109	\| Empty states \| Skip \| Note \| Screenshot + document \| Screenshot + suggest improvements \|
110	\| Error states \| Skip \| Note \| Trigger + screenshot \| Every validation error documented \|
111	\| Dark mode \| Skip \| Skip \| Screenshot key pages \| Screenshot every page \|
112	\| Mobile (375px) \| Skip \| Skip \| Screenshot key pages \| Screenshot every page \|
113	\| All CRUD \| Skip \| Primary only \| Every operation \| Every operation + edge cases \|
114	\| Settings/config \| Skip \| List options \| Document each \| Document each with examples \|
115	\| Keyboard shortcuts \| Skip \| List if visible \| Full reference table \| Dedicated section \|
116	\| Search/filters \| Skip \| Mention \| Document each filter \| Document every combinatio

People who liked this also viewed

6 picks

Type