How to install html-diagram
npx skills add https://github.com/plannotator/effective-html --skill html-diagramFull instructions (SKILL.md)
Source of truth, from plannotator/effective-html.
name: html-diagram description: 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. disable-model-invocation: true
HTML Diagram
Review 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.
Related skills
More from plannotator/effective-html and the wider catalog.
html-plan
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.
html
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.
honcho-integration
Integrate Honcho memory and social cognition into existing Python or TypeScript codebases. Use when adding Honcho SDK, setting up peers, configuring sessions, implementing the dialectic chat endpoint for AI agents, or wiring Honcho into bot frameworks (nanobot, openclaw, picoclaw, etc).
notebooklm
Query your Google NotebookLM notebooks from Claude Code for source-grounded, citation-backed answers with reduced hallucinations.
game-design-theory
Master game design theory: MDA framework, player psychology, balance, and progression systems.
java-maven
Master Apache Maven - POM configuration, plugins, lifecycle, dependency management