html
This skill generates a self-contained HTML file tailored to user requests, applying established design principles for alignment, visual density, and tone. Use it when creating reports, explainers, comparisons, interactive prototypes, or other content best delivered as a single HTML document rather than diagrams or structured plans. The output includes built-in dark mode support with CSS variables, a theme toggle, and localStorage persistence.
git clone --depth 1 https://github.com/plannotator/effective-html /tmp/html && cp -r /tmp/html/skills/html ~/.claude/skills/htmlSKILL.md
# HTML Review the files throughout `references/html-effectiveness/`. Create an HTML file for whatever the user is describing. Use the references as best you can to match alignment — style, density, and tone. 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`).
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.