by plannotator
Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.
# Add to your Claude Code skills
git clone https://github.com/plannotator/effective-htmlGuides for using ai agents skills like effective-html.
Last scanned: 6/22/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-06-22T09:48:28.041Z",
"npmAuditRan": true,
"pipAuditRan": true,
"promptInjectionRan": true
}effective-html is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by plannotator. Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams. It has 1,589 GitHub stars.
Yes. effective-html passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
Clone the repository with "git clone https://github.com/plannotator/effective-html" and add it to your Claude Code skills directory (see the Installation section above).
effective-html is primarily written in HTML. It is open-source under plannotator on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh effective-html against similar tools.
No comments yet. Be the first to share your thoughts!
Based on votes and bookmarks from developers who liked this skill
Focused agent skills for creating useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes.
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
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 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
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html
The skills separate creative freedom from reliability:
design-artifact provides a reusable design process without prescribing a reusable look.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.