html-diagram
The html-diagram skill generates a self-contained HTML file featuring a full-screen, high-quality SVG visualization of system architecture and technical stacks. Use it when you need a visual representation that prioritizes clarity through diagrams over text, want interactive elements like clickable nodes or animated request flows, or need the output delivered as a single HTML artifact that immediately communicates complex architectural relationships. The skill includes built-in dark mode support with theme persistence.
git clone --depth 1 https://github.com/plannotator/effective-html /tmp/html-diagram && cp -r /tmp/html-diagram/skills/html-diagram ~/.claude/skills/html-diagramSKILL.md
# 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.
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.