# effective-html (plannotator/effective-html) > 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. - GitHub: https://github.com/plannotator/effective-html - GitHub.Locker page: https://github.locker/plannotator/effective-html - Stars: 4K - Language: HTML - License: MIT - Last push: 2026-10-31 ## Questions and answers Written by GitHub.Locker from the README and the repository; check the README below for details. **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. --- ## README (checked against GitHub 2026-11-07) Source: https://github.com/plannotator/effective-html/blob/main/README.md

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

# Effective HTML [简体中文](README.zh.md) 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://www.effectivehtml.com/). 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`](skills/html/SKILL.md) | Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist | | [`big-pics-little-words`](skills/big-pics-little-words/SKILL.md) | Explain the current subject in HTML with large visuals and minimal text while preserving key details; copied from [bro](https://github.com/backnotprop/bro/blob/main/skills/big-pics-little-words/SKILL.md) | | [`one-pager`](skills/one-pager/SKILL.md) | 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](https://github.com/backnotprop/bro/blob/main/skills/one-pager/SKILL.md) | | [`design-artifact`](skills/design-artifact/SKILL.md) | Subject-specific creative direction for any HTML artifact without imposing a reusable house style | | [`html-wireframe`](skills/html-wireframe/SKILL.md) | Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure | | [`html-prototype`](skills/html-prototype/SKILL.md) | Working prototypes with realistic states, interaction, keyboard support, and responsive behavior | | [`html-plan`](skills/html-plan/SKILL.md) | Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments | | [`html-diagram`](skills/html-diagram/SKILL.md) | Architecture, sequence, process, state, hierarchy, timeline, and system diagrams | Practical guide: [HTML Wireframes and Prototypes for Coding Agents](https://docs.plannotator.ai/learn/code-context/html-wireframes-and-prototypes-for-coding-agents). ## Install Install the collection when you want these references available to your agent as reusable workflows: ```bash npx skills add plannotator/effective-html ``` List or install individual skills: ```bash 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 ```text /plugin marketplace add plannotator/effective-html /plugin install plannotator-effective-html@effective-html ``` ### Codex plugin ```bash 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: - Visual direction comes from the conversation, project, audience, and subject. - `design-artifact` provides a reusable design process without prescribing a reusable look. - Wireframes stay intentionally unfinished so reviewers focus on structure. - Prototypes implement one credible flow and its relevant states. - Plans preserve source commitments. - Diagrams choose a visual model and rendering method that fit the relationship being explained. - Every artifact is responsive, accessible, self-contained, and verified in a browser. 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](https://thariqs.github.io/html-effectiveness).

Share HTML with tot

Create a shareable link for an HTML file with tot.