html-plan
The html-plan skill generates a self-contained HTML document that organizes user-provided planning content into a clean, pragmatic layout with built-in dark mode support. Use this when you need a visually organized plan page that preserves your original wording while improving grammar and readability, without expanding or restructuring your input into something more elaborate.
git clone --depth 1 https://github.com/plannotator/effective-html /tmp/html-plan && cp -r /tmp/html-plan/skills/html-plan ~/.claude/skills/html-planSKILL.md
# HTML Plan Review the files throughout `references/html-effectiveness/`. After reviewing them, create an HTML file for the plan in a similar style. Keep it pragmatic and simple. 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 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.