Stats
Actions
Tags
From plannotator-effective-html
Generates a self-contained HTML file with dark mode support, CSS variables, and a theme toggle. Use for reports, explainers, comparisons, decks, or prototypes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/plannotator-effective-html:htmlThe 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/.
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).
npx claudepluginhub plannotator/effective-html --plugin plannotator-effective-htmlCreates 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.
Generates self-contained HTML investigation dossiers with dark theme, sticky navigation, timelines, network diagrams, evidence cards, tables, and collapsible sections for scannable reports.
Create 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.