effective-html
Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.
Install with your AI
Paste into Claude Code, Cursor, or any agent — it reads the repo and wires the tool into your project.
Install and set up effective-html (claude-plugin project) into my current project. Found on https://claudeers.com/effective-html Repo: https://github.com/plannotator/effective-html Homepage/docs: https://plannotator.ai Detected install method: claude-plugin → /plugin install effective-html@plannotator/effective-html Category: uncategorized. Platforms: cli, web. Read the repo's README for exact setup and env vars, then install it and wire it into my project. Claudeers Health Verdict: active; community-verified: false. Confirm the source before running anything.
/plugin marketplace add plannotator/effective-html /plugin install effective-html@plannotator/effective-html
git clone https://github.com/plannotator/effective-html
// compatibility
| Platforms | cli, web |
|---|---|
| Operating systems | — |
| AI compatibility | claude |
| License | MIT |
| Pricing | open-source |
| Language | HTML |
Effective HTML
Focused agent skills for creating useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes.
Fat artifacts + fat context
Modern models can do a lot. Give them plenty of useful references and use artifacts to show what you mean. HTML can visualize almost anything, often more clearly than a wall of text. Your prompt can simply point to the artifacts, repositories, and folders that carry the context.
[!NOTE] You can use this repo without installing anything. Treat it as a reference first and an installable skill collection second. See the Effective HTML guide.
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
Render and annotate local HTML with Plannotator.
Skill references
The repo includes six optional skills for pragmatic visual artifacts.
| Skill | Use it for |
|---|---|
html | Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist |
design-artifact | Subject-specific creative direction for any HTML artifact without imposing a reusable house style |
html-wireframe | Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure |
html-prototype | Working prototypes with realistic states, interaction, keyboard support, and responsive behavior |
html-plan | Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments |
html-diagram | Architecture, sequence, process, state, hierarchy, timeline, and system diagrams |
Practical guide: HTML Wireframes and Prototypes for Coding Agents.
Install
Install the collection when you want these references available to your agent as reusable workflows:
npx skills add plannotator/effective-html
List or install individual skills:
npx skills add plannotator/effective-html --list
npx skills add plannotator/effective-html --skill design-artifact
npx skills add plannotator/effective-html --skill html-wireframe
npx skills add plannotator/effective-html --skill html-prototype
Claude Code plugin
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
Codex plugin
codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html
How the skills work
The skills separate creative freedom from reliability:
- Visual direction comes from the conversation, project, audience, and subject.
design-artifactprovides a reusable design process without prescribing a reusable look.- Wireframes stay intentionally unfinished so reviewers focus on structure.
- Prototypes implement one credible flow and its relevant states.
- Plans preserve source commitments.
- Diagrams choose a visual model and rendering method that fit the relationship being explained.
- Every artifact is responsive, accessible, self-contained, and verified in a browser.
Detailed guidance lives only where it is needed. The broad html skill routes the work, design-artifact supplies optional creative direction, and specialist skills own fidelity and behavior. Each skill remains independently usable.
This project was inspired by Thariq Shihipar's The unreasonable effectiveness of HTML.
Create a shareable link for an HTML file with tot.
// faq
What is effective-html?
Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.. It is open-source on GitHub.
Is effective-html free to use?
effective-html is open-source under the MIT license, so it is free to use.
What category does effective-html belong to?
effective-html is listed under uncategorized in the Claudeers registry of Claude-compatible tools.
// embed badge
[](https://claudeers.com/effective-html)
// retro hit counter
[](https://claudeers.com/effective-html)
// reviews
// guestbook
// related in Uncategorized / Others
🔓Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.
🔓The agent engineering platform.
🔓FULL Augment Code, Claude Code, Cluely, CodeBuddy, Comet, Cursor, Devin AI, Junie, Kiro, Leap.new, Lovable, Manus, NotionAI, Orchids.app, Perplexity, Poke, Q…
🔓100+ AI Agent & RAG apps you can actually run — clone, customize, ship.