Stats
Actions
Tags
From plannotator-effective-html
Creates a self-contained HTML plan page in a pragmatic, visually organized style. Use when user wants a plan page, clean grammar, or writing kept close to the original.
How this skill is triggered — by the user, by Claude, or both
Slash command
/plannotator-effective-html:html-planThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Review the files throughout `references/html-effectiveness/`.
agents/openai.yamlreferences/html-effectiveness/01-exploration-code-approaches.htmlreferences/html-effectiveness/02-exploration-visual-designs.htmlreferences/html-effectiveness/03-code-review-pr.htmlreferences/html-effectiveness/04-code-understanding.htmlreferences/html-effectiveness/05-design-system.htmlreferences/html-effectiveness/06-component-variants.htmlreferences/html-effectiveness/07-prototype-animation.htmlreferences/html-effectiveness/08-prototype-interaction.htmlreferences/html-effectiveness/09-slide-deck.htmlreferences/html-effectiveness/10-svg-illustrations.htmlreferences/html-effectiveness/11-status-report.htmlreferences/html-effectiveness/12-incident-report.htmlreferences/html-effectiveness/13-flowchart-diagram.htmlreferences/html-effectiveness/14-research-feature-explainer.htmlreferences/html-effectiveness/15-research-concept-explainer.htmlreferences/html-effectiveness/16-implementation-plan.htmlreferences/html-effectiveness/17-pr-writeup.htmlreferences/html-effectiveness/18-editor-triage-board.htmlreferences/html-effectiveness/19-editor-feature-flags.htmlReview 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).
npx claudepluginhub plannotator/effective-html --plugin plannotator-effective-htmlCreate rich HTML documents for project specs, implementation plans, design exploration, RFCs, and brainstorming. Use whenever the user asks for a spec, plan, RFC, design doc, brainstorm, or wants to explore approaches/options/alternatives — even when they don't explicitly say "HTML". Strongly prefer HTML over markdown for any planning artifact longer than a screen, especially when the artifact will be shared with reviewers or fed back to the agent for implementation.
Generates a self-contained HTML file with dark mode support, CSS variables, and a theme toggle. Use for reports, explainers, comparisons, decks, or prototypes.
Creates a temporary HTML preview of a Plan Mode proposal just before presenting <proposed_plan>, showing phases, dependencies, and validation points via a session-scoped URL.