By plannotator
Generate self-contained HTML documents for system architecture diagrams, structured plans, and themed reports with dark mode support.
Create a self-contained HTML file for visualizing architecture and understanding the stack with a high-quality SVG diagram. Use when the user wants a full-screen diagram, wants the output to be light on prose, or wants an HTML artifact that is mostly there to make the architecture click fast.
Create a self-contained HTML plan that is pragmatic, simple, and visually organized. Use when the user wants a plan page in the effective HTML style, wants the writing kept close to what they gave you, or wants the grammar cleaned up without turning it into a whole bigger thing.
Create a self-contained HTML file for whatever the user is describing, in the effective HTML style. Use when the user wants an HTML artifact that isn't specifically a diagram or a plan — a report, explainer, comparison, deck, prototype, or anything else best delivered as one HTML file.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
Note: The diagram was made by Fable 5, I will create more fable 5 artifacts and add them to the skill folder for smaller models to distill.
example demo
Focused skills for generating self-contained HTML deliverables with a strong visual bias:
html: an HTML file for whatever you're describing, in the effective HTML stylehtml-diagram: architecture, stack, and systems understanding rendered as full-screen HTML diagrams with high-quality SVGhtml-plan: HTML plan pages in the effective HTML styleRender and annotate your HTML with Plannotator (optional): https://github.com/backnotprop/plannotator
Create instant share links for your HTML files (optional): https://github.com/plannotator/tot
HTML from video: https://tot.page/0CW7xV96XMxnalrzwRl4eQ
npx skills add plannotator/effective-html
List available skills first:
npx skills add plannotator/effective-html --list
Install a specific skill:
npx skills add plannotator/effective-html --skill html-diagram
npx skills add plannotator/effective-html --skill html-plan
This repo is also a plugin marketplace. Add it and install:
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html
html - Create an HTML file for whatever the user is describing, matching the effective HTML references.html-diagram - Build full-screen HTML architecture and stack diagrams with SVG-first presentation and minimal prose.html-plan - HTML plan pages in the effective HTML style.Skills live under skills/<skill-name>/SKILL.md. Each skill also bundles a copy of the html-effectiveness example corpus under references/html-effectiveness/ so the examples stay local to the skill.
Credit: this repo bundles and uses the html-effectiveness examples by Thariq Shihipar: https://thariqs.github.io/html-effectiveness
No description provided.
npx claudepluginhub plannotator/effective-html --plugin plannotator-effective-htmlGenerate beautiful HTML pages for diagrams, diff reviews, plan reviews, slides, and data tables
Sixteen HTML-output skills that help Claude Code reach for self-contained HTML artifacts (specs, diagrams, dashboards, prototypes, decks, mind maps, design tokens, comparison matrices, and more) instead of long-form markdown when HTML is the better surface.
Generate reviewable HTML documents, serve previews, collect comments, and feed review outcomes back into agent workflows.
Structured documents for AI agents — 45 production-ready components with a coherent visual system. Decisions, architecture flows, collapsible references, metrics, and charts rendered as self-contained HTML.
Create beautiful HTML presentations from markdown specs using a Poimandres-themed template
Visual report generation suite: wiki analysis, diff review, plan review, project recap, and fact-checking — self-contained HTML reports with interactive diagrams, responsive navigation, and curated design system