html-plan

$npx mdskill add plannotator/effective-html/html-plan

Create a self-contained HTML plan page in a pragmatic, simple style.

  • Transforms user-provided text into a clean, organized HTML plan.
  • Depends on reference files in references/html-effectiveness/ for styling.
  • Keeps writing close to user input while cleaning up grammar.
  • Outputs a single HTML file with dark mode and theme toggle.

SKILL.md

.github/skills/html-planView on GitHub ↗
---
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`).

More from plannotator/effective-html

SkillDescription
htmlCreate 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.
html-diagramCreate 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.