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