Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

html-plan — Claude Code skill: what it does, how to install

Turns project notes and requirements into a self-contained HTML plan. Useful for organizing phases, dependencies, and owners without turning the doc into a dashboard.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add plannotator/effective-html --skill html-plan -a claude-code
Open on GitHub

What html-plan does

This skill converts unstructured discussion notes, tasks, and project constraints into an inspectable HTML document. It keeps original commitments and terms while clarifying work sequence and boundaries. Decisions, assumptions, and open questions are separated explicitly. Tables handle direct mappings, while long prose stays readable instead of being split into decorative cards.

The output is a single responsive HTML file with semantic markup. Essential CSS and JavaScript are strictly inline, avoiding third-party services. The skill requires checking the document across narrow and wide viewport widths, confirming that dependencies remain clear and content does not overflow. It then reports the absolute path to the generated file.

This specialist tool runs only on direct user invocation or routing from a general html skill. It refuses to invent progress bars, status badges, or timelines unless the source material actually defines them.

What it helps with

  • convert unstructured project notes into a clean HTML plan
  • map owners, dependencies, and verification checks into one document
  • isolate accepted decisions from working assumptions and open questions
  • generate a self-contained responsive plan without external assets

Example prompts for the agent

  • Use html-plan to turn our sprint discussion into an HTML plan
  • html-plan: organize the database migration steps and their dependencies
  • Convert this task outline into a single-file HTML document using html-plan

How to install html-plan

1Skills CLI (Vercel)

npx skills add plannotator/effective-html --skill html-plan -a claude-code

2Manually: put the files in place

~/.claude/skills/html-plan/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/html-plan/

From the same set3

The whole set →
html-diagram plannotator Generates standalone interactive HTML diagrams without external services or build steps. Helps visualize component topology, state transitions, timelines, and quantitative structures. Claude Code CX Codex Cursor +1 4,100installs html plannotator A skill that makes the agent build one self-contained HTML file with styles and scripts inlined: a report, landing page, deck or calculator. It also knows which sibling skill should take the job instead. Claude Code CX Codex Cursor +1 3,800installs

Similar

motion-figure rohitg00 Generates moving and interactive figures across three tiers: SMIL animations, slider-driven SVG widgets, and WebGL dither bands. Claude Code CX Codex Cursor +1 482installs tamagui tamagui Teaches coding agents Tamagui v3 flat style grammar and token conventions. It guides cross-platform UI generation for web and native. Claude Code CX Codex Cursor +1 593installs spartan spartan-ng Helps manage spartan/ui components in Angular projects, from adding and composing them to styling and debugging. It covers the Brain and Helm layers. Claude Code CX Codex Cursor +1 2,200installs frontend-dev-guidelines sickn33 Sets strict React and TypeScript conventions for feature structure, Suspense data fetching, MUI styling, and performance-focused reviews. Claude Code CX Codex Cursor +1 1,500installs interactive-portfolio sickn33 Builds developer and designer portfolios focused on converting visitors into job offers and client leads. Use it when planning or restructuring a personal showcase site. Claude Code CX Codex Cursor +1 1,500installs flutter-dev MiniMax-AI A Flutter development guide for widget patterns, Riverpod, Bloc, and GoRouter. Use it when building layouts, navigation, tests, or reviewing performance. Claude Code CX Codex Cursor +1 2,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about html-plan

How do I install html-plan in Claude Code?

Run npx skills add plannotator/effective-html --skill html-plan -a claude-code in your terminal.

What does the html-plan skill do?

It turns raw discussion notes and task requirements into a structured, self-contained HTML document with clear phases, owners, and risks.

Does the generated HTML require external libraries?

No. The skill packages all necessary styles and scripts inline inside a single file, avoiding calls to external services.

Source text

SKILL.md · MIT 
---
name: html-plan
description: Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-plan or the broad html skill routes a plan request here. Do not activate independently from a general request.
---

# 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`](../design-artifact/SKILL.md) 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.

## Preserve traceability

- Keep source commitments recognizable.
- Separate accepted decisions from assumptions and open questions.
- Show sequence and dependency only where they are real.
- Use tables for exact mappings, comparisons, or repeated fields.
- Use a flow or timeline only when it makes order materially easier to understand.
- Keep long prose readable instead of forcing every paragraph into a card.

## Build and verify

Deliver one responsive, accessible, self-contained HTML file. Use semantic headings, lists, tables, and landmarks. Keep essential CSS and JavaScript inline, avoid external services, and make any navigation or disclosure keyboard-operable.

Inspect the result at wide and narrow widths. Check that no commitment disappeared, that stages remain in the intended order, that ownership and dependencies are legible, and that long content does not overflow.

Return the absolute path and note any structural interpretation you introduced.

© plannotator · MIT · plannotator/effective-html

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor