effective-html README

The project's README from github.com/plannotator/effective-html. As one markdown file: README.md.

Effective HTML by Plannotator — HTML wireframes, mockups, prototypes, charts, and diagrams

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

Star Plannotator on GitHub

Render and annotate local HTML with Plannotator.

Skill references

The repo includes eight 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
big-pics-little-words Explain the current subject in HTML with large visuals and minimal text while preserving key details; copied from bro
one-pager Make a one-pager: one HTML page that shares an idea with teammates early, or recaps work for them, with big pictures and little words; copied from bro
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 big-pics-little-words
npx skills add plannotator/effective-html --skill one-pager
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:

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.

Share HTML with tot

Create a shareable link for an HTML file with tot.

effective-html (plannotator/effective-html)

Searching Database…

4K ·GitHub
Effective-html
What is this?A set of agent skills that teach Claude Code or Codex to build useful, self-contained HTML artifacts: low-fidelity wireframes, working interactive prototypes, plans, and diagrams.
Is it a framework, a library, or just prompts?Neither a framework nor a library. It is eight optional skills, which are reusable workflow instructions for a coding agent, installed as plugins. You can also read the repo as a plain reference.
How do I get it running?Install the collection as a Claude Code or Codex plugin, or list and install individual skills. The exact commands are in the README install section. You don't need to install anything to read it as a reference.
Which coding agents does it work with?Claude Code and Codex, each through its own plugin.
Will the output be production-ready UI?Not as-is. Wireframes are intentionally unfinished, and prototypes implement one credible flow with its relevant states rather than a full product.
Can I use the skills without an agent, just as a reference?Yes. The README says you can read the repo as a reference first and install the skills only if you want them as reusable workflows.
Why did the author build it?It was inspired by Thariq Shihipar's essay 'The unreasonable effectiveness of HTML'. The core idea is 'fat artifacts + fat context': give the model plenty of references and use HTML to show what you mean.
Which skill makes plans and diagrams?html-plan builds roadmaps, rollouts and implementation sequences that keep source commitments. html-diagram draws architecture, sequence, state, timeline and other system diagrams.
Is there a skill for quick visual explainers?Yes. big-pics-little-words explains a subject with big visuals and little text, and one-pager makes a single HTML page to share an idea early or recap work.
Does every artifact get checked in a browser?The README says every artifact is responsive, accessible, self-contained and verified in a browser, so the skills are meant to check their own output before handing it over.
What are similar projects?evondevKit, huashu-design, oil-ui, baoyu-design, SwiftUI-Agent-Skill, diagram-design, unslop, archify
Which topics is it in?prototyping, diagrams, responsive, ui-design, codex-skill, accessibility, coding-agents, claude-skills, design, skills, documentation, html
Creator
plannotator
Size
19.7 MB
Stars
4K
Updated
CommitOct 31
Age
4mo
Commits · 90 Days