Ciying AI Directory
AI DirectorySkills
中文
Ciying AI Directory

Plannotator Visual Explainer for Claude Code: Review an Implementation Plan

Plannotator Visual Explainer turns a technical plan or pull request walkthrough into annotated, self-contained HTML using the publisher's review interface.

中文

Setup for Claude Code

Claude Code with the pinned skill's references, the Plannotator CLI, and a browser. The plan exercise can use a static HTML flow without a separate diagram renderer.

  1. Copy apps/skills/extra/plannotator-visual-explainer into .claude/skills/plannotator-visual-explainer/ with its references.
  2. Install the Plannotator CLI using the publisher's open-source setup instructions and confirm the command is available.
  3. Open Claude Code in the scratch project and invoke /plannotator-visual-explainer with the requirements for an implementation plan.

Example task

Ask for an annotated plan to add a Hold button to a local library catalog. Supply three states (available, held, released), one touch point (the book detail panel), and one decision about the timeout. Ask for a reviewable HTML plan.

Expected result

Plannotator opens the generated HTML through its annotation interface. It includes the scoped change, a readable state flow, and a clear timeout decision for the reviewer.

Upstream documentation

Original SKILL.md on GitHub · MIT license · Source reviewed

Frequently asked question

Is the companion visual-explainer always required?

The built-in plan and pull-request paths have their own reference files. Other visuals delegate to a separately installed visual-explainer skill.