html-plan
Direct-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies…
Skill by plannotator
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/plannotator-html-plan
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/html-plan
What's inside
- Skill 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.
- License
- MIT
- Instructions
- 42 lines in SKILL.md · view on GitHub
Files (2)
- SKILL.md
- openai.yaml · agents/
SKILL.md (first lines)
# 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.
From plannotator/effective-html, MIT.
More from plannotator/effective-html
- 0.828score
big-pics-little-words
plannotator
Explain the current subject in HTML with large visuals and minimal text while preserving key details.
SkillAFreshness: A★ 3.7KClaude Code +9 - 0.800score
html
plannotator
Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.
SkillBFreshness: B★ 3.7KClaude Code +9 - 0.794score
html-diagram
plannotator
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state…
SkillBFreshness: B★ 3.7KClaude Code +9 - 0.794score
html-prototype
plannotator
Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product…
SkillBFreshness: B★ 3.7KClaude Code +9 - 0.794score
html-wireframe
plannotator
Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive…
SkillBFreshness: B★ 3.7KClaude Code +9 - 0.794score
design-artifact
plannotator
Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools.
SkillBFreshness: B★ 3.7KClaude Code +9
Signals
- Stars
- 3,747
- Forks
- 254
- Open issues
- 1
- Last commit (this folder)
- Aug 2, 2026 (2 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/plannotator/effective-html
- Website
- plannotator.ai
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from plannotator
- 0.828score
big-pics-little-words
plannotator
Explain the current subject in HTML with large visuals and minimal text while preserving key details.
SkillAFreshness: A★ 3.7KClaude Code +9 - 0.800score
html
plannotator
Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject.
SkillBFreshness: B★ 3.7KClaude Code +9 - 0.794score
html-prototype
plannotator
Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product…
SkillBFreshness: B★ 3.7KClaude Code +9 - 0.794score
html-wireframe
plannotator
Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive…
SkillBFreshness: B★ 3.7KClaude Code +9 - 0.794score
design-artifact
plannotator
Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools.
SkillBFreshness: B★ 3.7KClaude Code +9 - 0.794score
html-diagram
plannotator
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state…
SkillBFreshness: B★ 3.7KClaude Code +9
Cite this page
html-plan skill. Agent Mart. https://agentmart.dev/skills/plannotator-html-plan (last updated 2026-10-24)