Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From plannotator-effective-html
Generates self-contained HTML files for reports, explainers, prototypes, and other artifacts. Includes dark mode with CSS variables and theme toggle.
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).
3plugins reuse this skill
First indexed Jun 13, 2026
npx claudepluginhub delton-thompson/effective-htmlGenerates self-contained HTML files for reports, explainers, prototypes, and other artifacts. Includes dark mode with CSS variables and theme toggle.
Guides intentional palette, typography, and layout design for self-contained HTML artifacts (landing pages, static docs, dashboards, demos, mockups) while avoiding template/AI-style design. Active when user requests standalone HTML creation or UX comparison; not for in-app component or backend work.
Build single-file HTML+JS+CSS utility tools (converters, viewers, debuggers) without build step. Self-contained, static-hostable, vanilla JS.