How to install html-plan
npx skills add https://github.com/plannotator/effective-html --skill html-planFull instructions (SKILL.md)
Source of truth, from plannotator/effective-html.
name: html-plan description: 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. disable-model-invocation: true
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).
Related skills
More from plannotator/effective-html and the wider catalog.
html-diagram
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.
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.