Effective HTML
Six agent skills plus 32 worked HTML artifacts for wireframes, prototypes, and plans
A guide, catalog, and agent skill collection from Plannotator for producing self-contained HTML artifacts during product work — wireframes, clickable prototypes, diagrams, decks, plans, and reports — instead of walls of markdown. The catalog holds 32 complete, single-file HTML artifacts you can open, resize, and read the source of, from an annotated pull request to a feature-flag editor to product studies of Linear, Notion, and Vercel. The companion repo ships six installable skills (html, design-artifact, html-wireframe, html-prototype, html-plan, html-diagram) as a Claude Code plugin or via npx skills. The docs explain when HTML beats prose and how to choose fidelity.
npx skills add plannotator/effective-htmlReach for this the moment a user asks you to 'plan', 'compare options', or 'show me what it would look like' — the correct output is a single self-contained HTML file, and this repo gives you both the skill that shapes it and a worked example to imitate. Install the whole collection with npx skills add plannotator/effective-html, or add the Claude Code plugin marketplace and install plannotator-effective-html; if you only need one, --skill html-wireframe and --skill html-prototype carry the most weight. Match the artifact to the fidelity the decision needs: a wireframe when structure is still open, a prototype only when interaction is the actual question — the catalog's paired wireframe/mockup examples show the difference concretely. Note the catalog's numbered artifacts are hosted on a separate GitHub Pages origin (thariqs.github.io) from the site itself.
Why it is here. It is the clearest statement of an emerging practice — agents communicating through HTML artifacts rather than markdown walls — and it backs the argument with 32 complete, readable files instead of assertions.
- Interactive sequence diagram · Follow a request through system architecture; the featured artifact of the catalog.
- Three code approaches · Compare three implementation options side by side before committing.
- Visual design directions · Render layout and tone alternatives so a design direction can be chosen visually.
- Annotated pull request · Render a diff with margin notes and severity markers for review.
- Module map · Draw packages as a readable system with hot paths visible.
- Living design system · A one-page reference for colors, type, spacing, and primitives.
- Component variants · Lay out sizes, states, and intents of a component together.
- Animation sandbox · Isolate a transition with duration and easing controls.
- Clickable flow · Connect screens to test interactions and transitions.
- Arrow-key slide deck · Browser-native presentation with keyboard navigation.
- SVG figure sheet · Collect crisp editable vector figures for articles.
- Weekly status · Structure shipped work, slips, and risks with charts.
- Incident timeline · Join timeline, evidence, and impact into a post-mortem.
- Annotated flowchart · Draw a process with timing, work, and failure paths.
- How a feature works · Combine summary, code samples, and open questions into one explainer.
- Interactive concept explainer · Teach a difficult idea with a manipulable model.
- Implementation plan · Combine milestones, data flow, mockups, code, and risks in one plan.
- PR writeup for reviewers · Explain motivation and before/after behavior of a change.
- Ticket triage board · Reorder tickets across buckets and export the resulting judgment.
- Feature flag editor · Edit configuration with dependencies and warnings surfaced.
- Prompt tuner · Edit prompt templates while sample inputs render alongside.
- Effective HTML comparison wireframe · Three catalog organization directions compared at low fidelity.
- Effective HTML catalog mockup · The catalog visual system with responsive controls, at high fidelity.
- Plannotator review wireframe · Test the balance of a review workspace before styling it.
- Plannotator review mockup · A product-specific review surface at full fidelity.
- Product change review wireframe · Side-by-side current versus proposed change layout.
- Product change review mockup · A vivid review artifact intended to drive a decision.
- Release readiness wireframe · Explore hierarchy and structure for a release readiness view.
- Release readiness prototype · A working blocked-to-ready flow, interactive.
- Linear issue workspace · Study of a dense issue-tracker workspace interface.
- Notion project space · Study of a connected project-document surface.
- Vercel deployment ledger · Study of a chronological deployment ledger dashboard.
- six installable agent skills
- 32 single-file HTML artifacts with source
- Claude Code plugin marketplace entry
- wireframe vs mockup fidelity pairs
- product studies of Linear, Notion, Vercel
- companion effective-svg repo
Verified 2026-08-15. HTTP 200. https://www.effectivehtml.com/, https://www.effectivehtml.com/catalog (raw HTML link extraction), https://www.effectivehtml.com/docs, GitHub API repos/plannotator/effective-html (README, skills/ and .claude-plugin/ contents), GitHub API repos/ThariqS/html-effectiveness
