manual

📖 manual — an auto-generated user manual, as a Claude Code skill

Turn your running app into a browsable end-user manual: this Claude Code skill drives Playwright MCP to take real screenshots, reads your source code to describe each screen, and writes a standalone HTML manual — no build step. Re-run it whenever features change, so the manual grows alongside the product.

Why this exists: keeping a user manual in sync with a fast-moving app is nobody's favourite job. This skill regenerates it from the actual UI + code on demand, so the docs stop lying.

_{A sample page rendered with the bundled theme (the taskflow example). With Playwright MCP connected, the app frame is a real screenshot of your app; without it, the skill falls back to clean CSS mockups like the one above.}

---

What it does

For each section you define, the skill:

1. Reads the page's source (components, buttons, forms, modals) — never guesses from route names.
2. Screenshots the real screen via Playwright (empty / populated / modal states).
3. Generates an annotated HTML page — screenshot + source-derived steps + info boxes.
4. Builds an index linking every audience and section.

Define multiple audiences (e.g. admin vs end-user, desktop vs mobile) and it produces a separate, appropriately-styled manual for each.

Requirements

• Claude Code for the one-command plugin install below. The skill itself is portable — any coding agent that can read files and drive Playwright MCP (e.g. Codex) can run it via the setup prompt; only the plugin/marketplace install is Claude Code-specific.
• Node.js 18+ (for Playwright MCP)
• Playwright MCP server — install once:

  claude mcp add playwright npx @playwright/mcp@latest
  

  Restart Claude Code, then confirm with claude mcp list or /mcp. (Without it, the skill falls back to a code-analysis-only mode that produces CSS mockups instead of real screenshots.)
• A locally runnable web app to document.

Install

Option A — as a plugin (recommended · Claude Code)

/plugin marketplace add yunjeongiya/claude-manual-skill
/plugin install manual@yunjeongiya-tools

The manual skill is then available in every project. Because it's a template, on its first run in a project it discovers your app's routes and audiences and confirms them with you before generating — it never asks you to edit the read-only plugin files.

Option B — let an agent set it up from the repo (any agent)

Clone the repo, open your coding agent in your project, and paste the prompt in AGENT-SETUP-PROMPT.md. It copies the files, inspects your codebase, fills in routes/audiences, and runs a test section. Works with any agent that supports MCP + file editing (Claude Code, Codex, …).

Option C — manual copy

1. Copy the skill and theme into your project:

   skills/manual/SKILL.md      →  <your-project>/.claude/skills/manual/SKILL.md
   shared/manual-style.css     →  <your-project>/docs/manuals/shared/manual-style.css
   shared/sidebar.js           →  <your-project>/docs/manuals/shared/sidebar.js
   

2. Open the copied SKILL.md and fill it in for your app: replace the <…> placeholders and complete the Section Definitions tables with your own routes (see the worked example below).
3. Run /manual <audience> (start with a single section: /manual <audience> <section>).
4. Open docs/manuals/dist/index.html in a browser. To share it, publish the self-contained dist/ folder — see Publish below.

Publish

The finished manual is a single self-contained docs/manuals/dist/ folder — deploy or zip just that one folder (assets and screenshots live inside it). The skill can do this for you (it asks first). Three easy options:

Option	Setup	Link	Updates in place?
Netlify Drop — drag dist/ to app.netlify.com/drop	none	new random URL each time	no (one-off)
Netlify CLI — npx netlify-cli deploy --dir docs/manuals/dist --prod	1× browser login	stable	yes
Cloudflare Pages — npx wrangler pages deploy docs/manuals/dist --project-name <name>	1× wrangler login (browser)	stable <name>.pages.dev	yes

One-off "show someone right now" → Netlify Drop. A link you keep updating → Netlify CLI or Cloudflare Pages. Neither CLI needs a manual API token for interactive use (wrangler login / netlify log in via the browser); tokens are only for headless/CI.

Worked example