html

$npx mdskill add plannotator/effective-html/html

Generates a self-contained HTML file for reports, explainers, or prototypes.

  • Creates an HTML artifact when a diagram or plan is not the right format.
  • Uses hand-rolled CSS variables and a theme toggle for dark mode support.
  • Matches style, density, and tone from reference files in html-effectiveness.
  • Delivers a single HTML file with inline styles and localStorage persistence.

SKILL.md

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

More from plannotator/effective-html

SkillDescription
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.
html-planCreate 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.