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-planHow to use html-plan
- 1.Invoke html-plan explicitly or route a plan request through the html skill
- 2.Provide the source material: conversation context, project instructions, or existing plan
- 3.Specify the audience and subject if not clear from context
- 4.Review the generated HTML file at both wide and narrow widths to verify structure and readability
- 5.Check that all source commitments remain recognizable and ownership/dependencies are legible
Use cases
- 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
- 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
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.
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.
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.
html-plan separates accepted decisions from assumptions and unresolved questions, making it clear what is committed versus what still needs resolution.
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.
Related skills
More from plannotator/effective-html and the wider catalog.

html-prototype
Build polished, responsive HTML mockups and interactive prototypes grounded in your product context and design language.

html-wireframe
Low-fidelity HTML wireframes to test structure, hierarchy, and task flow before design.

design-artifact
Design principles and creative direction for polished HTML artifacts—pages, reports, landing pages, and tools that don't look AI-generated.

html
Create self-contained single-file HTML artifacts shaped by your brief, project, and subject.

honcho-integration
Integrate Honcho memory and social cognition into existing Python or TypeScript codebases. Use when adding Honcho SDK, setting up peers, configuring sessions, implementing the dialectic chat endpoint for AI agents, or wiring Honcho into bot frameworks (nanobot, openclaw, picoclaw, etc).

design-game
Audit and polish your game's visuals, UI, and player experience without changing gameplay.