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
}See how effective-html compares with popular alternatives.
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 3,621 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
30 days in the Featured rail · terms & refunds
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
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.