html-plan

HTML Plan creates self-contained HTML plan pages in the pragmatic, visually organized style of the bundled effective-HTML example gallery. It solves the problem of turning rough plan text into a clean, single-file HTML page while keeping the writing close to what the user provided, cleaning up grammar without inflating the content into something larger than intended.

The skill instructs the agent to review a large gallery of standalone reference HTML examples under references/html-effectiveness (covering code review, design systems, slide decks, status and incident reports, flowcharts, explainers, and small interactive editors) and then produce a plan HTML file in a similar pragmatic, simple style. It mandates that every generated page include dark mode implemented with hand-rolled CSS variables on :root / html.dark, a small theme toggle button, localStorage persistence of the choice, and an apply-before-paint script in the head that defaults to prefers-color-scheme to avoid a flash. The reference material is static, dependency-free, self-contained HTML with no server-side components or build step, and its own security policy notes the main concerns are unsafe inline script behavior or misleading content.

It targets writers, planners, and developers who want a lightweight, shareable plan page rather than a heavyweight document. Typical use cases include drafting an implementation plan, cleaning up and formatting notes into an organized page, and producing a themed, single-file HTML deliverable that opens directly in a browser. Note the skill sets disable-model-invocation, so it is intended to be invoked explicitly.