Skip to content
Get Friday PicksSubmit

html-plan: Claude's plans as one page you can click through

A Claude Code plugin from the Claude Code team that writes the implementation plan as a single interactive HTML page: open it level by level, see mockups, state diagrams and code, answer the numbered decisions in place, then paste one reply back to Claude.

In short: A Claude Code plugin from the Claude Code team that writes the implementation plan as a single interactive HTML page: open it level by level, see mockups, state diagrams and code, answer the numbered decisions in place, then paste one reply back to Claude. It is a free skill for people who use Claude Code and want help with coding agent skills.

Checked on · Added

Works with

Agent / toolAccess / costLink
Claude CodePaid Claude plan or APIclaude.com/claude-code
GitHub repoOpen source · ★ 4.8kanthropics/claude-plugins-community/tree/main/html-plan
html-plan: Claude's plans as one page you can click through

Image: from the GitHub README, shown with credit.

Reference videos (1)

Real videos made with this skill, credited to their creators. Hover to preview.

html-plan: an implementation plan you answer in place thumbnailAPP DEMO0:39

html-plan: an implementation plan you answer in place

A walk through a plan written by html-plan for a scheduled-send feature: each claim opens into code sketches, the numbered decisions are picked on the page, and Respond gathers the answers for Claude.

html-plan@lucas_flatwhite♥ 315

Try it in 60 seconds

claude plugin marketplace add anthropics/claude-plugins-community
claude plugin install html-plan@claude-community

Install command copied from the project README. Check the README for the latest version.

What it does

A Claude Code plugin from the Claude Code team that writes the implementation plan as a single interactive HTML page: open it level by level, see mockups, state diagrams and code, answer the numbered decisions in place, then paste one reply back to Claude.

html-plan, by Thariq Shihipar of the Claude Code team, makes Claude write its implementation plan as a single HTML page instead of a long Markdown file. You open the plan one level at a time, pick options, edit a schema…

Short excerpt from the README of anthropics/claude-plugins-community/tree/main/html-plan. Read the full README on GitHub.

Inside the repo

html-plan

A prompt to try

/html-plan add a 'send later' option to the message composer, with a way to edit or cancel scheduled messages

Written by us so you can reuse it. Replace each [bracket] with your details.

Step by step

  1. In Claude Code, run claude plugin marketplace add anthropics/claude-plugins-community.
  2. Then run claude plugin install html-plan@claude-community.
  3. Type /html-plan and what you want to build, for example /html-plan add send-later to the composer.
  4. Open the HTML page it writes, expand the parts you care about, pick options or comment on any line, press Respond and paste the answer back into Claude.

Watch out for

It lives in Anthropic's community plugin marketplace (a read-only mirror), so the GitHub button opens the html-plan folder inside that big repo. Claude Code only for now. A good plan page still needs your judgement: read the decisions before you let Claude build.

Common questions

What does html-plan do?

A Claude Code plugin from the Claude Code team that writes the implementation plan as a single interactive HTML page: open it level by level, see mockups, state diagrams and code, answer the numbered decisions in place, then paste one reply back to Claude.

Which AI agents can use html-plan?

It works with Claude Code. The code is on GitHub at anthropics/claude-plugins-community/tree/main/html-plan.

Is html-plan free?

Free & open source (MIT). Needs Node to pack the page into one file, plus the Claude plan you already pay for.

How do I install html-plan?

Run the install command from the README: “claude plugin marketplace add anthropics/claude-plugins-community”. Check the README on GitHub for the latest version, then follow the steps on this page.

Is html-plan safe to install?

We read 6 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine.

Sources & credit

All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.

Related skills and use cases in Coding Agent Skills

See all Coding Agent Skills entries →

Related

CleanYourTV: your agent removes the ads from your TV thumbnailSKILL

CleanYourTV: your agent removes the ads from your TV

Your coding agent connects to an Android or Google TV over Wi-Fi, switches off the ad and tracking apps, and puts in a clean, Apple TV-style home screen. Nothing is uninstalled.

Claude Code logoCodex logoGemini logoClaude Code +2★ 14.8k
ECC: a full work system for your coding agent thumbnailSKILL

ECC: a full work system for your coding agent

One install gives your agent a plan, test, build, review and remember routine, with 71 helper agents, about 300 skills, memory between sessions and a built-in scanner for risky agent settings.

Claude Code logoCodex logoCursor logoClaude Code +3★ 285.3k
Superpowers: plan, test and debug before coding thumbnailSKILL

Superpowers: plan, test and debug before coding

A skills framework that makes agents brainstorm, plan, test and debug systematically.

Claude Code logoCodex logoClaude Code +1★ 299.2k
Matt Pocock's engineering skills thumbnailSKILL

Matt Pocock's engineering skills

Real engineering skills from a well-known TypeScript educator's own .agents folder.

Claude Code logoCodex logoClaude Code +1★ 291.4k
Ponytail: make your agent write less code thumbnailSKILL

Ponytail: make your agent write less code

A skill that pushes coding agents to act like a lazy senior: fewer lines, more tests, lower cost — without skipping the hard checks.

Claude Code logoCodex logoCursor logoClaude Code +2★ 164.8k
Agency Agents: a full AI agency roster thumbnailSKILL

Agency Agents: a full AI agency roster

Specialist agent personas for engineering, design, marketing, sales and support you can drop into Claude Code, Codex or Cursor.

Claude Code logoCodex logoCursor logoClaude Code +2★ 160.4k

Free newsletter

Friday Picks

New AI tools you can use right away, in plain words. Every Friday.

Free. No spam. Unsubscribe anytime.