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
Create a self-contained HTML plan page in a pragmatic, simple, visually organized style with built-in dark mode support. Useful when users need an effective plan page without overcomplication.
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).
3plugins reuse this skill
First indexed Jun 13, 2026
npx claudepluginhub danielnguyenfinhub/effective-htmlCreate a self-contained HTML plan page in a pragmatic, simple, visually organized style with built-in dark mode support. Useful when users need an effective plan page without overcomplication.
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.
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.