Guidewright

Agent Skills for end-user product docs — capture annotated step-by-step screenshots, then review docs for clarity

Documentation • Discord • Blog

---

Guidewright is a maker of guides. An Agent Skills plugin with two skills that drive a live web app to produce and maintain user-facing documentation — not by reading your code, but by walking the product the way a user does:

• /guidewright-capture — Drives your app's UI with Chrome DevTools or Playwright MCP, captures a screenshot for each step with an accurate red box around the exact element to click, and authors or refreshes the how-to page.
• /guidewright-review — Reviews a documentation page by walking the path it describes in the live product, then returns prioritized, expert feedback on clarity, intuitiveness, and accuracy.

Works with any tool that supports the Agent Skills standard: Claude Code, GitHub Copilot, Cursor, OpenCode, OpenAI Codex CLI, Gemini CLI, and others.

---

The Two Skills

Skill	What it does
guidewright-capture	Drives the UI via Chrome DevTools or Playwright MCP and screenshots each step with a red box rendered into the live page from the target element's own bounding rect — so it lands dead-on and scales with the screenshot, no painting rectangles onto PNGs. Authors/refreshes the how-to. Red-box mechanism: references/overlay.md.
guidewright-review	Walks the documented path in the live product and returns a prioritized review (Blocker / Major / Minor) with paste-ready fixes. The live walk catches stale screenshots, renamed buttons, missing steps, and dead ends a read-only review never sees. Rubric: references/lenses.md.

They're a pair: capture makes the walkthrough, review holds it to a standard — a rubric distilled from Diátaxis, Every Page Is Page One, minimalist instruction, NN/g reading research, and the Google + Microsoft style guides. Both are product-agnostic: point them at any app and any docs site (Docusaurus assumed by default; adapt the paths to your setup).

Requirements

• An AI coding agent that supports Agent Skills (Claude Code, etc.)
• A browser-driving MCP — Chrome DevTools MCP or Playwright MCP; the skills drive the browser through either one

Install

npx skills add TurboDocx/guidewright

Or a single skill:

npx skills add TurboDocx/guidewright --skill guidewright-capture
npx skills add TurboDocx/guidewright --skill guidewright-review

Use

• Document a feature: "document how to create a template" → guidewright-capture walks the flow and writes the annotated page.
• Review a doc: "review this guide for clarity" → guidewright-review walks the path and returns prioritized fixes.

Layout

skills/
├── guidewright-capture/   SKILL.md + references/overlay.md   (the red-box mechanism)
└── guidewright-review/    SKILL.md + references/lenses.md    (the review rubric)

License

MIT