effective-html

Name: effective-html
Author: plannotator

Pending

Agent skill for elegant and simple html plans, architecture diagrams, or whatever else you can think of.

1,113stars

79forks

HTML

Installation

# Add to your Claude Code skills
git clone https://github.com/plannotator/effective-html

Getting Started

Guides for using ai agents skills like effective-html.

Caveman: Cut Claude Token Use by 65%
How agent-side prompt compression works, when to use it, and when not to.
What is an AI Skills Marketplace?
Definitions, how marketplaces work, and how to choose between them in 2026.
Getting Started with AI Skills

README.md

Frequently Asked Questions

What is effective-html?

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,113 GitHub stars.

Is effective-html safe to use?

effective-html's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.

How do I install effective-html?

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).

What programming language is effective-html written in?

effective-html is primarily written in HTML. It is open-source under plannotator on GitHub, so you can review or fork the full source.

Are there alternatives to effective-html?

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.

Agentic AI for Beginners

Build your first AI agent from scratch - tool use, ReAct pattern, memory, deployment

41 minBeginner

Comments (0)

to leave a comment.

No comments yet. Be the first to share your thoughts!

Related Skills

superpowers

by obra

An agentic skills framework & software development methodology that works.

234,966

dockit claude-code-prompts

HTML skills for pragmatic visual artifacts

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 style
html-diagram: architecture, stack, and systems understanding rendered as full-screen HTML diagrams with high-quality SVG
html-plan: HTML plan pages in the effective HTML style

Install

npx 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

As a Claude Code plugin

This repo is also a plugin marketplace. Add it and install:

/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html

As a Codex plugin

codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html

Skills

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.

Repository Shape

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