effective-html: six skills that make agent-built HTML usable, readable, deliverable

npx skills add plannotator/effective-html

Ask an agent for a page and you usually get one of two disappointments: a dead single-file mock that has to be re-run for every tweak, or a self-confident pile of gradients that treats a wireframe, a prototype and a diagram as the same thing. effective-html by plannotator (MIT, about 3.7k stars as of 2026-10-15) splits the job into six optional skills — one per artifact type, from low-fidelity wireframes to working interactive prototypes — all producing self-contained HTML that opens straight in a browser.

The rules it imposes

The collection separates taste from reliability. Visual direction comes from the conversation, the project and the audience — design-artifact supplies a reusable design process without prescribing a house style. Structure is guarded by specialists: html routes broad requests; html-wireframe produces intentionally unfinished low-fi layouts so reviewers judge content, hierarchy, navigation and flows; html-prototype implements one credible flow with its real states, keyboard support and responsive behavior; html-plan writes plans and roadmaps that preserve commitments from the source; html-diagram picks the visual model — architecture, sequence, state, hierarchy, timeline — that fits the relationship being explained. And every artifact must be verified in a browser before it ships.

The concrete constraints:

• Self-contained output: every artifact is a single HTML file; the collection also works as a read-only reference without installing anything.
• Wireframes stay unfinished: low-fi artifacts forbid real visuals so review stays structural.
• Prototypes commit to one flow: a credible flow and its relevant states, not a click-everything demo shell.
• Verified in a browser: responsiveness and accessibility are exercised for real before delivery — the step most agent outputs skip.
• Router first: broad requests go through html and get dispatched, so a specialist skill does the work instead of a hammer seeing every problem as a nail.

Who it’s for

Front-end, product and writer folks who need agent deliverables that actually deliver: wireframe-review material, prototype acceptance, diagram and roadmap decks. Two copyable install paths: npx skills add plannotator/effective-html brings all six skills (or --skill html-wireframe for one), and Claude Code’s plugin marketplace can add the repo directly. One honest catch: teams with an established house style may clash with design-artifact’s no-preset-style stance — decide who owns the tokens before installing. The idea traces back to Thariq Shihipar’s essay “The unreasonable effectiveness of HTML”, and the repo’s sibling product Plannotator (9.4k stars) handles the next step: annotating rendered HTML and feeding edits back to the agent. The frontend-design skill we covered earlier gives an agent a reusable design taste across all its work; effective-html goes further by splitting the job by artifact type — the two stack well.