Html Plan

This generates a single self-contained HTML file styled in a clean, effective format with built-in dark mode support. It's for when you want a plan document that's viewable in a browser without framework overhead. The dark mode implementation is thoughtful: CSS variables, localStorage persistence, a toggle button, and a script that runs before paint to prevent flash. The skill pulls from reference examples to match a specific visual style that's pragmatic rather than fancy. Useful if you're tired of markdown or want something you can open anywhere without dependencies. It keeps your writing intact instead of over-processing it.

skills.sh installs: 4K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add plannotator/effective-html --skill html-plan --agent claude-code

Installs into .claude/skills of the current project.

Files

HTML Plan

Turn source material into a plan people can inspect and act on. Preserve the user's scope, ordering, commitments, and terminology unless they ask for broader synthesis.

Shape the document around the work

Read the conversation, project instructions, and supplied plan before designing. Match an existing design language when one is present. Otherwise derive a quiet, workmanlike direction from the audience and subject.

When design-artifact is available, read its fundamentals to make that direction intentional. Keep this skill's traceability and source-preservation rules authoritative; creative direction must not inflate the plan into a dashboard or campaign page.

Decide what the plan actually needs:

phases or sequence;
status and decision points;
owners and collaborators;
dependencies and risks;
acceptance checks;
unresolved questions.

Do not add a timeline, progress percentage, status badge, or dashboard summary unless the source supports it. Improve grammar and structure without inflating an implementation plan into a strategy document.