New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Plannotator Visual Explainer

by backnotprop in backnotprop/plannotator

Builds self-contained HTML explainers for plans, pull requests and technical concepts in Plannotator's theme, then opens them in its annotation view.

Apache-2.0Auto-check passedAgent Workflows

Install Plannotator Visual Explainer

skills CLI
$ npx skills add backnotprop/plannotator --skill plannotator-visual-explainer -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install backnotprop/plannotator plannotator-visual-explainer --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/backnotprop/plannotator.git skills-src && mkdir -p .claude/skills && cp -r skills-src/apps/skills/extra/plannotator-visual-explainer .claude/skills/plannotator-visual-explainer && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
plannotator-visual-explainer
GitHub stars
9.2k
Token cost
~1.7k tokens
SKILL.md length
785 words
Files
7 (incl. references)
Skills in repo
13
Repo updated
First seen
Licence
Apache-2.0

At a glance

Builds self-contained HTML explainers for plans, pull requests and technical concepts in Plannotator's theme, then opens them in its annotation view.

  • Works in 2 steps: references/design-system.md —… → references/svg-patterns.md — inline SVG…
  • Presenting an implementation plan visually for approval
  • SKILL.md covers Route by content type, Delivery, Plan path and PR path, plus 2 more sections
  • Runs TypeScript scripts from its folder; calls npx

What it does

The skill routes each request by content type. Implementation plans, design docs and proposals follow a prescribed structure built from `references/design-system.md` and `references/svg-patterns.md`: a header with the original brief, a strip of three to five stat cards, and a milestone timeline that shows phases and dependencies without time estimates. Pull request explainers and diff walkthroughs follow a second prescribed path using the design system and `references/pr-components.md`.

Anything else, such as architecture diagrams, data tables, slide decks and project recaps, is handed to the `nicobailon/visual-explainer` skill with Plannotator theme tokens. Delivery always goes through `plannotator annotate` on the finished file, with `--gate` for plans you must approve or deny, and never through `open` or `xdg-open`. Any Mermaid diagram must render cleanly with Mermaid 12 in both light and dark palettes, and zoomable diagram shells must keep their captions legible at maximum zoom.

When your agent uses it

  • Presenting an implementation plan visually for approval
  • Explaining a pull request or diff as a walkthrough page
  • Turning an architecture description into a diagram page
  • Producing a slide-style page about a technical topic

Example prompts

  • “Turn this migration plan into a visual explainer I can approve in Plannotator.”
  • “Make a PR explainer page for the changes on my current branch.”
  • “Draw the service architecture described in docs/architecture.md as a diagram page.”

Requirements

  • The `plannotator` command line tool
  • Mermaid 12 when diagrams use Mermaid

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. references/design-system.md — Plannotator theme tokens, typography, component patterns
  2. references/svg-patterns.md — inline SVG building blocks for architecture diagrams, flowcharts, data flow

What it can do on your machine

Read from SKILL.md and the folder at commit 47486cd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (TypeScript), which the agent can run.

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Plannotator Visual Explainer loads about 1.7k tokens when it runs, and up to ~15k if it reads all its reference files. Until then it costs about 94 tokens; SKILL.md has 785 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~94
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~15k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from backnotprop/plannotator at commit 47486cd, republished under its Apache-2.0 licence (© backnotprop). 785 words, ~1,702 tokens.

Download SKILL.mdSave it as .claude/skills/plannotator-visual-explainer/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
plannotator-visual-explainer
description
Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts. Plans and PR explainers follow Plannotator's prescriptive approach; all other visual content delegates to nicobailon/visual-explainer.
disable-model-invocation
true

Plannotator Visual Explainer

Three paths depending on content type. Each has its own references and structure.

Route by content type

Implementation plan, design doc, or proposal → Follow the Plan path. Read references/design-system.md and references/svg-patterns.md. Prescriptive structure.

PR explainer, diff review, or code change walkthrough → Follow the PR path. Read references/design-system.md and references/pr-components.md. Prescriptive structure.

Everything else (architecture diagrams, data tables, slide decks, project recaps, general visual explanations) → Follow the Visual explainer path. Delegates to nicobailon/visual-explainer with Plannotator theme tokens.

Delivery

Always deliver via Plannotator's annotation UI. Do NOT use open or xdg-open.

For any deliverable that uses Mermaid, render every diagram with Mermaid 12 in both the light and dark palettes before opening the annotation UI. Rendering is a hard gate: an exception, empty SVG, or error output such as aria-roledescription="error" or Syntax error in text means the explainer is not deliverable. Fix the diagram or theme configuration and rerun both palettes until every SVG passes.

For zoomable diagram shells, additionally zoom to the maximum and pan to all extremes in both palettes before delivering: the figure caption must stay fully legible throughout (see references/diagram-shell.md).

Plans/proposals (user should approve/deny):

bash
plannotator annotate <file> --gate

Everything else (informational):

bash
plannotator annotate <file>

Plan path

For implementation plans, design docs, feature specs, migration guides, and proposals.

Before generating, read:

  1. references/design-system.md — Plannotator theme tokens, typography, component patterns
  2. references/svg-patterns.md — inline SVG building blocks for architecture diagrams, flowcharts, data flow

Document structure (in order, pick what fits):

  1. Header — eyebrow label (mono, uppercase), title (serif, large), prompt box (the original brief)
  2. Summary strip — 3-5 stat cards showing key numbers at a glance (components, endpoints, tables, etc.)
  3. Milestones / timeline — vertical timeline showing phases without time estimates. Phases show sequence and dependencies, not duration.
  4. Architecture / data flow — inline SVG diagram. Use for 3+ interacting components. Highlighted boxes for new components, dashed arrows for async paths.
  5. Mockups — build UI mockups in HTML/CSS directly, not as descriptions
  6. Key code — dark-theme code blocks with syntax highlighting. Only architecturally significant interfaces/schemas — not every function.
  7. Risks & mitigations — table with severity badges (HIGH/MED/LOW)
  8. Open questions — callout cards with decision owner ("Decide with: backend team")

Not every plan needs every section. Skip what doesn't serve the content. Never include time estimates, boilerplate sections, or exhaustive file lists.

Adapt to the task: Backend → lead with data flow. Frontend → lead with mockups. Refactoring → lead with before/after diagrams. Infrastructure → lead with architecture.

Quality bar: The plan answers "what, why, and how" within 30 seconds of reading. Whitespace is a feature — one idea per viewport.

Show full SKILL.md (368 more words)Show less

PR path

For PR walkthroughs, diff reviews, code change explainers, and reviewer guides.

Before generating, read:

  1. references/design-system.md — Plannotator theme tokens, typography, component patterns
  2. references/pr-components.md — diff rendering, review comment bubbles, risk chips, file cards, before/after panels

Document structure (in order, pick what fits):

  1. Header — PR title, meta strip (file count, +/- lines, branch, author)
  2. TL;DR — bordered card with primary accent left border. 2-3 sentences. Readers who see nothing else should get the gist.
  3. Why — motivation and before/after comparison (two-column grid)
  4. File tour — collapsible cards per file. Each has: file path + badge (NEW/MOD/DEL) + line stats, a "why" paragraph, and important diff hunks. High-risk files expanded, safe files collapsed.
  5. Risk map — visual chips showing which files need careful review vs. which are mechanical. Three tiers: attention (destructive), medium (warning), safe (success).
  6. Where to focus — numbered callout cards. Each names a file/function and describes the concern.
  7. Test plan — checkbox-style verification checklist
  8. Rollout (if applicable) — phased deployment with feature flags

Use Pierre diffs via CDN for syntax-highlighted inline diffs — see references/pr-components.md for the pattern.

Visual explainer path

For architecture diagrams, data tables, slide decks, project recaps, comparisons, and any other visual explanation.

Before generating:

  1. Ensure visual-explainer is installed:
    • Check: ~/.claude/skills/visual-explainer/SKILL.md or ~/.agents/skills/visual-explainer/SKILL.md
    • If not found: npx skills add nicobailon/visual-explainer -g --yes
  2. Read visual-explainer's SKILL.md (workflow, diagram types, anti-slop rules)
  3. Read the relevant visual-explainer references and templates for your content type
  4. Read references/theme-override.md — Plannotator tokens replacing Nico's palettes
  5. For zoomable Mermaid diagrams with controls and a caption: read references/diagram-shell.md and copy its shell — do not hand-roll viewport, canvas, or caption markup

Follow visual-explainer's structure, component classes (.ve-card, .kpi-card, .pipeline), and anti-slop rules. Overrides are the color/typography layer — Plannotator tokens instead of Nico's custom palettes — plus the zoomable diagram shell in references/diagram-shell.md when the deliverable has one.

Design philosophy (all paths)

  • Whitespace is a feature. Generous padding, large section gaps. If cramped, add space — don't shrink text.
  • One idea per viewport. Hero section, then diagram, then detail grid — not all crammed together.
  • Show, don't describe. A timeline shows sequencing. A diagram shows relationships. A code block shows the interface.
  • No time estimates. Timelines show phases and dependencies. Never attach hour/day estimates.

© backnotprop, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (references) in apps/skills/extra/plannotator-visual-explainer of backnotprop/plannotator.

  • SKILL.md
  • SKILL.test.ts
  • references/design-system.md
  • references/diagram-shell.md
  • references/pr-components.md
  • references/svg-patterns.md
  • references/theme-override.md

Open the folder on GitHubat commit 47486cd

Compare with similar skills

Plannotator Visual Explainer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Plannotator Visual Explainer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Plannotator Visual Explainer this skillbacknotprop/plannotator9.2k—~1.7kAutomated safety check: PassApache-2.0
PRP Companion PageWirasm/prp2.3k—~990Automated safety check: PassMIT
PRP Visual Companion PageWirasm/prp2.3k—~1kAutomated safety check: PassMIT
Plan Previewu-ichi/reviewable-html-workbench2981 repos~1.8kAutomated safety check: PassMIT
Cl Executeclosedloop-ai/claude-plugins122—~6.4kAutomated safety check: PassApache-2.0
Htmlvspecdisler/pi-agent-observability145—~4.7kAutomated safety check: NotesMIT

Similar skills

  • PRP Companion Page

    Wirasm/prp

    Writes a self-contained HTML page beside a PRP plan or review that shows the diagram, steps, risks or findings, with a stable id on every item.

    2.3k GitHub stars~990 tokensUpdated 6 days ago
    DevelopmentAuto-check passed

  • PRP Visual Companion Page

    Wirasm/prp

    Writes a self-contained HTML companion beside a PRP plan or review that shows the diagram, steps, risks, verdict and findings, each item with a stable id.

    2.3k GitHub stars~1k tokensUpdated 6 days ago
    Agent WorkflowsAuto-check passed

  • Plan Preview

    u-ichi/reviewable-html-workbench

    Plan Mode の <proposedplan を出す直前に、計画の段階・依存関係・検証観点を一時HTMLで視覚確認したい時に使う agent-internal skill。Use this agent-internal skill to create a temporary HTML preview for a plan just before presenting…

    298 GitHub starsUsed in 1 repo~1.8k tokens
    Agent WorkflowsAuto-check passed

  • Cl Execute

    closedloop-ai/claude-plugins

    Draft and upload ClosedLoop implementation plans with Mermaid scope flowcharts, then execute one ClosedLoop feature ticket or a parent-approved coherent multi-ticket feature end to end on Codex…

    122 GitHub stars~6.4k tokensUpdated today
    Agent WorkflowsAuto-check passed

  • Htmlvspec

    disler/pi-agent-observability

    Creates a visual engineering implementation plan as a single self-contained HTML page saved to specs/<name.html — the plan authored directly in styled HTML, with one AI-generated diagram image per…

    145 GitHub stars~4.7k tokensUpdated 4 mo ago
    Agent WorkflowsAuto-check: notes

  • Work Issue

    joesaby/astro-mermaid

    End-to-end workflow for resolving a GitHub issue in astro-mermaid — triages complexity, then runs brainstorm → TDD → implement → docs/spec → code review at the right depth.

    123 GitHub stars~891 tokensUpdated 2 mo ago
    DevelopmentAuto-check passed

More from backnotprop/plannotator

All 13 skills in this repo

  • Plannotator Release Preparation

    backnotprop/plannotator

    Drafts Plannotator release notes with full contributor credit, bumps versions in dependency order, builds, and starts the tag-driven release pipeline, in four reviewed phases.

    9.2k GitHub stars~4.6k tokensUpdated today
    Auto-check passed

  • Plannotator Planning Analysis

    backnotprop/plannotator

    Mines a Plannotator archive of denied plans for feedback patterns and prompt improvements, then writes an HTML dashboard report, with a Claude Code fallback.

    9.2k GitHub stars~6.7k tokensUpdated today
    Auto-check passed

  • Renovate Actions PR Review

    backnotprop/plannotator

    Reviews Renovate pull requests that bump GitHub Actions by checking pinned SHAs against upstream tags, scanning changelogs and confirming workflows stay compatible.

    9.2k GitHub stars~640 tokensUpdated today
    Auto-check passed

  • Plannotator Goal Setup

    backnotprop/plannotator

    Guides the agent from a vague objective to a written goal package under goals/, using a confirmed restatement, a browser interview, a fact sheet and a codebase pass.

    9.2k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Dependency Update Audit

    backnotprop/plannotator

    Audits outdated npm and Bun packages for supply chain integrity before bumping them, deferring risky ones and logging every decision.

    9.2k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Plannotator Annotate

    backnotprop/plannotator

    Opens Plannotator's browser annotation view for a markdown, config, HTML, URL or folder target and acts on the feedback you leave, with an optional approval gate.

    9.2k GitHub starsUsed in 1 repo~427 tokens
    Auto-check passed

Works with

Categories

Questions about Plannotator Visual Explainer

What does Plannotator Visual Explainer do?

Builds self-contained HTML explainers for plans, pull requests and technical concepts in Plannotator's theme, then opens them in its annotation view. The skill routes each request by content type.md`: a header with the original brief, a strip of three to five stat cards, and a milestone timeline that shows phases and dependencies without time estimates.

When should I use Plannotator Visual Explainer?

Plannotator Visual Explainer fits situations like: presenting an implementation plan visually for approval; explaining a pull request or diff as a walkthrough page; turning an architecture description into a diagram page; producing a slide-style page about a technical topic.

How do I install Plannotator Visual Explainer in Claude Code?

Run `npx skills add backnotprop/plannotator --skill plannotator-visual-explainer -a claude-code`. Or copy the skill folder (apps/skills/extra/plannotator-visual-explainer in backnotprop/plannotator) into .claude/skills/plannotator-visual-explainer in your project. Claude Code loads it when a task matches its description.

How do I install Plannotator Visual Explainer in Codex?

Run `npx skills add backnotprop/plannotator --skill plannotator-visual-explainer -a codex`. Or copy the skill folder (apps/skills/extra/plannotator-visual-explainer in backnotprop/plannotator) into .agents/skills/plannotator-visual-explainer in your project. Codex loads it when a task matches its description.

Can I use Plannotator Visual Explainer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add backnotprop/plannotator --skill plannotator-visual-explainer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/plannotator-visual-explainer, .gemini/skills/plannotator-visual-explainer, .github/skills/plannotator-visual-explainer and .opencode/skills/plannotator-visual-explainer in your project.

What does Plannotator Visual Explainer need to run?

Going by SKILL.md and its folder, Plannotator Visual Explainer needs TypeScript for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: The `plannotator` command line tool; Mermaid 12 when diagrams use Mermaid.

Does Plannotator Visual Explainer access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Plannotator Visual Explainer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Plannotator Visual Explainer use?

Plannotator Visual Explainer is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Plannotator Visual Explainer use?

About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 14k tokens, read only when the agent opens those files.

What are the alternatives to Plannotator Visual Explainer?

Skills that share tags, products or a category with Plannotator Visual Explainer: PRP Companion Page (Wirasm/prp, 2.3k stars), PRP Visual Companion Page (Wirasm/prp, 2.3k stars), Plan Preview (u-ichi/reviewable-html-workbench, 298 stars) and Cl Execute (closedloop-ai/claude-plugins, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Plannotator Visual Explainer?

backnotprop (a GitHub user) maintains it in backnotprop/plannotator, which has 9,205 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 8, 2026.

Source: backnotprop/plannotator on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.