plannotator/effective-html — explained in plain English
Analysis updated 2026-05-18
Add a skill to Claude Code or Codex that generates polished HTML architecture diagrams.
Turn a written plan or system description into a visually clean single-file HTML page.
Give a coding agent reference examples so its HTML output looks more professional.
Pair with the Plannotator tool to render and annotate the generated HTML.
| plannotator/effective-html | twbs/examples | anthropics/launch-your-agent | |
|---|---|---|---|
| Stars | 764 | 681 | 678 |
| Language | HTML | HTML | HTML |
| Last pushed | — | — | 2026-07-02 |
| Maintenance | — | — | Active |
| Setup difficulty | — | easy | moderate |
| Complexity | — | 1/5 | 3/5 |
| Audience | vibe coder | developer | pm founder |
Figures from each repo's GitHub metadata at analysis time.
This repository is a collection of skills for AI coding assistants that help them produce clean, self-contained HTML files. HTML is the language web pages are written in, and a self-contained file means everything needed to view it lives in that one file. The focus is on output that looks good visually, so the project is aimed at people who want diagrams, plans, and other documents rather than full websites. There are three skills in the set. The first, called html, makes a single HTML file for whatever you describe, following a particular clean style the author refers to as effective HTML. The second, html-diagram, builds full-screen diagrams that show how a system or technology stack fits together, using high-quality vector graphics and very little text. The third, html-plan, creates HTML pages laid out as plans, again in the same visual style. Installing the skills is done through a command line tool. You can list what is available first, then add all of them or just one specific skill. The repository also works as a plugin marketplace for two coding assistants, Claude Code and Codex, with short commands shown for registering the marketplace and installing the plugin in each. The README explains how the project is organized. Each skill lives in its own folder with an instruction file, and each one bundles a local copy of a set of example HTML documents so the references stay close to the skill that uses them. The author credits those examples, called html-effectiveness, to another person named Thariq Shihipar. The README is short and points to outside material, including a demo video and an optional companion tool called Plannotator for rendering and annotating the HTML you create. The author also mentions that one of the sample diagrams was generated by a model named Fable 5, and that more such examples will be added so smaller models can learn from them. This is a focused helper for generating visual documents, not a large application on its own.
A skill pack for AI coding agents that generates clean, self-contained HTML diagrams and plan pages.
Mainly HTML. The stack also includes HTML, SVG, Node.js.
Mainly vibe coder.
This repo across BitVibe Labs
Verify against the repo before relying on details.