by plannotator
Agent skill for elegant and simple html plans, architecture diagrams, or whatever else you can think of.
# 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 skill for elegant and simple html plans, architecture diagrams, or whatever else you can think of. It has 1,321 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!
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
Note: The diagram was made by Fable 5, I will create more fable 5 artifacts and add them to the skill folder for smaller models to distill.
example demo
Focused skills for generating self-contained HTML deliverables with a strong visual bias:
html: an HTML file for whatever you're describing, in the effective HTML stylehtml-diagram: architecture, stack, and systems understanding rendered as full-screen HTML diagrams with high-quality SVGhtml-plan: HTML plan pages in the effective HTML stylenpx skills add plannotator/effective-html
List available skills first:
npx skills add plannotator/effective-html --list
Install a specific skill:
npx skills add plannotator/effective-html --skill html-diagram
npx skills add plannotator/effective-html --skill html-plan
This repo is also a plugin marketplace. Add it and install:
/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
html - Create an HTML file for whatever the user is describing, matching the effective HTML references.html-diagram - Build full-screen HTML architecture and stack diagrams with SVG-first presentation and minimal prose.html-plan - HTML plan pages in the effective HTML style.Skills live under skills/<skill-name>/SKILL.md. Each skill also bundles a copy of the html-effectiveness example corpus under references/html-effectiveness/ so the examples stay local to the skill.
Credit: this repo bundles and uses the html-effectiveness examples by Thariq Shihipar: https://thariqs.github.io/html-effectiveness