PluginBench
Skill
Pass
Audit score 90

html-plan

plannotator/effective-html

Transform plans into clear, inspectable HTML documents that preserve source material and improve structure.

What is html-plan?

html-plan converts project plans, instructions, and commitments into self-contained HTML documents that maintain traceability while improving hierarchy, sequence, ownership, and dependencies. Use it when you need to turn raw planning material into a reviewable, actionable document that stakeholders can inspect and act on.

  • Preserves source commitments and terminology while improving grammar and structure
  • Organizes plans around phases, sequence, status points, owners, and dependencies
  • Generates responsive, accessible, self-contained HTML with semantic markup
  • Separates accepted decisions from assumptions and open questions
  • Uses tables for mappings and comparisons; flows only when order materially aids understanding
  • Keeps long prose readable instead of forcing content into cards or dashboards

How to install html-plan

npx skills add https://github.com/plannotator/effective-html --skill html-plan
Claude Code
Cursor
Windsurf
Cline

How to use html-plan

  1. 1.Invoke html-plan explicitly or route a plan request through the html skill
  2. 2.Provide the source material: conversation context, project instructions, or existing plan
  3. 3.Specify the audience and subject if not clear from context
  4. 4.Review the generated HTML file at both wide and narrow widths to verify structure and readability
  5. 5.Check that all source commitments remain recognizable and ownership/dependencies are legible

Use cases

Good for
  • Convert project instructions and scope into a structured plan document for team review
  • Transform raw notes and commitments into a hierarchical plan with clear ownership and dependencies
  • Create an inspectable HTML plan from conversation context that stakeholders can reference
  • Build a plan document that preserves exact source material while improving readability and structure
  • Generate a self-contained plan file that works offline and requires no external services
Who it's for
  • Project managers and team leads organizing work and dependencies
  • Technical leads documenting implementation plans and decision points
  • Anyone converting raw planning material into a reviewable, actionable document
  • Teams needing offline-accessible, self-contained plan documents

html-plan FAQ

When should I use html-plan instead of a general planning tool?

Use html-plan when you need to preserve exact source material and commitments while improving structure, or when you want a self-contained HTML file that works offline without external services.

Does html-plan add timelines or progress tracking?

No—html-plan only adds timelines, progress percentages, or status badges if the source material explicitly supports them. It focuses on traceability and structure, not dashboard features.

Can html-plan work with existing design languages?

Yes. html-plan reads existing design patterns in your project and matches them. If no design language is present, it derives a quiet, workmanlike direction from your audience and subject.

What happens to assumptions and open questions?

html-plan separates accepted decisions from assumptions and unresolved questions, making it clear what is committed versus what still needs resolution.

Is the output file self-contained?

Yes. html-plan generates a single responsive HTML file with inline CSS and JavaScript, no external dependencies, and keyboard-operable navigation and disclosure elements.

Full instructions (SKILL.md)

Source of truth, from plannotator/effective-html.


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 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.