HTML Plan

by plannotator

HTML Plan is a Writing skill for Claude Code, published by plannotator in effective-html.

1.7K stars130 forkson plannotator/effective-htmlAdded 2026/08/19+2% in starsRepository updated 2026/08/03

View source on GitHub Download repo ZIP

agent-skillsclaude-codecodexhtml-artifactshtml-prototypehtml-wireframeprototypingskills

Install in seconds

Install HTML Plan

Copy HTML Plan into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/plannotator/effective-html/tree/main/skills/html-plan ~/.claude/skills/html-plan

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/plannotator/effective-html.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/html-plan/SKILL.md in plannotator/effective-html
Installs to: ~/.claude/skills/html-plan
Collection: One of 6 skills cataloged from this repository
Category: Writing — 1012 skills

What HTML Plan does

HTML Plan creates a single self-contained HTML file from source material, preserving scope, order, commitments, and terminology while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use it when a plan request is explicitly invoked or routed from the html skill.

HTML Plan is cataloged under Writing on DirSkills. HTML Plan comes from a repository tagged agent-skills, claude-code, codex, html-artifacts and html-prototype.

Documentation

README

Excerpt

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:

This is the opening of the README. Read the full README on GitHub.

Frequently asked about HTML Plan

What else does plannotator publish alongside HTML Plan?
HTML Plan is one of 6 skills that DirSkills catalogs from plannotator/effective-html, the repository it ships in. Its siblings there include Design Artifact, HTML Artifacts and HTML Diagram. Each one is a separate skill with its own page in this directory, installs the same way HTML Plan does, and is maintained by plannotator in that same repository. The rest of the collection is listed on the plannotator/effective-html page.
How does HTML Plan compare to other Writing skills?
HTML Plan ranks #309 by stars among the 1012 Writing skills in this catalog. The most-starred ones next to it are Article Writing, Social Media Content Calendar and Knowledge Comic Creator. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of HTML Plan against them. Open each page to compare what they document and how they install.