Stats
Actions
Tags
From plannotator-effective-html
Generates a self-contained HTML file with a high-quality SVG system architecture diagram, optionally interactive with animated request paths. Use when visualizing architecture or stack relationships, not prose.
How this skill is triggered — by the user, by Claude, or both
Slash command
/plannotator-effective-html:html-diagramThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Review the SVG diagrams used throughout `references/html-effectiveness/`.
agents/openai.yamlreferences/architecture-example.htmlreferences/html-effectiveness/01-exploration-code-approaches.htmlreferences/html-effectiveness/02-exploration-visual-designs.htmlreferences/html-effectiveness/03-code-review-pr.htmlreferences/html-effectiveness/04-code-understanding.htmlreferences/html-effectiveness/05-design-system.htmlreferences/html-effectiveness/06-component-variants.htmlreferences/html-effectiveness/07-prototype-animation.htmlreferences/html-effectiveness/08-prototype-interaction.htmlreferences/html-effectiveness/09-slide-deck.htmlreferences/html-effectiveness/10-svg-illustrations.htmlreferences/html-effectiveness/11-status-report.htmlreferences/html-effectiveness/12-incident-report.htmlreferences/html-effectiveness/13-flowchart-diagram.htmlreferences/html-effectiveness/14-research-feature-explainer.htmlreferences/html-effectiveness/15-research-concept-explainer.htmlreferences/html-effectiveness/16-implementation-plan.htmlreferences/html-effectiveness/17-pr-writeup.htmlreferences/html-effectiveness/18-editor-triage-board.htmlReview the SVG diagrams used throughout references/html-effectiveness/.
There are a bunch in there, and some of them are focused on architecture and whatnot.
After reviewing them, create an HTML file that is strictly for visualizing the architecture and understanding the stack.
It should not be prose-heavy. It should simplify more into a full-screen diagram and whatnot.
Build a high-quality diagram in SVG. Take your time iterating on the diagram more than anything.
If it makes sense, make the diagram interactive and able to visualize and animate different sequences of system behavior.
Also review references/architecture-example.html — a finished example of this skill done well (full-screen SVG stage, clickable nodes, flow chips that light up and animate request paths).
Always include dark mode: hand-rolled CSS variables on :root / html.dark, a small theme toggle button, localStorage persistence, and an apply-before-paint script in <head> (default to prefers-color-scheme). Style the SVG through CSS classes using those variables — never hard-coded hex inside the SVG — so the diagram follows the theme.
npx claudepluginhub plannotator/effective-html --plugin plannotator-effective-htmlCreate SVG-based technical diagrams inside HTML — flowcharts, sequence diagrams, state machines, data-flow diagrams, dependency graphs, request/response timelines. Use whenever the user wants to visualize, illustrate, diagram, or sketch a technical concept, system, or process. Strongly prefer SVG over ASCII art, mermaid blocks, or markdown text for anything spatial or relational. Reach for this whenever an explanation involves arrows, boxes, layers, or sequencing — even when the user doesn't say "diagram".
Generates standalone HTML diagrams in flat engineering blueprint style using Tailwind v4 and D3 v7. Useful for architecture diagrams, system flows, technical spec sheets, and component maps.
Generates interactive HTML architecture diagrams with animated step-by-step flows, mode toggles, and side panel details. For service maps, CI/CD pipelines, data flows, and workshop diagrams.