https://github.com/plannotator/effective-html
Agent skill for elegant and simple html plans and architecture diagrams.
https://github.com/plannotator/effective-html
agent-skills skills
Last synced: about 7 hours ago
JSON representation
Agent skill for elegant and simple html plans and architecture diagrams.
- Host: GitHub
- URL: https://github.com/plannotator/effective-html
- Owner: plannotator
- License: mit
- Created: 2026-06-09T23:24:51.000Z (18 days ago)
- Default Branch: main
- Last Pushed: 2026-06-10T00:14:43.000Z (18 days ago)
- Last Synced: 2026-06-10T01:12:54.621Z (18 days ago)
- Topics: agent-skills, skills
- Language: HTML
- Homepage: https://plannotator.ai
- Size: 115 KB
- Stars: 10
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- claude-code-skills-zh - effective-html
- awesome-agent-skills - effective-html - Agent skill for clean HTML plans, architecture diagrams, and similar lightweight visual documents. (Diagram and Visual Skills)
- awesome-claude-code - **effective-html** - (866 ⭐) - Agent skill for elegant and simple html plans, architecture diagrams, or whatever else you can think of. (🧠 Agent Skills)
README
## HTML skills for pragmatic visual artifacts
https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
_**Note:** The diagram was made by `Fable 5`, I will create more fable 5 artifacts and add them to the skill folder for smaller models to distill._
[example demo](https://x.com/backnotprop/status/2065479594023829619?s=20)
Focused skills for generating self-contained HTML deliverables with a strong visual bias:
- `html`: an HTML file for whatever you're describing, in the effective HTML style
- `html-diagram`: architecture, stack, and systems understanding rendered as full-screen HTML diagrams with high-quality SVG
- `html-plan`: HTML plan pages in the effective HTML style
Render and annotate your HTML with Plannotator (optional): https://github.com/backnotprop/plannotator
## Install
```bash
npx skills add plannotator/effective-html
```
List available skills first:
```bash
npx skills add plannotator/effective-html --list
```
Install a specific skill:
```bash
npx skills add plannotator/effective-html --skill html-diagram
npx skills add plannotator/effective-html --skill html-plan
```
### As a Claude Code plugin
This repo is also a [plugin marketplace](https://code.claude.com/docs/en/plugin-marketplaces). Add it and install:
```
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
```
### As a Codex plugin
```bash
codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html
```
Create instant share links for your HTML files (optional): https://github.com/plannotator/tot
HTML from video: https://tot.page/0CW7xV96XMxnalrzwRl4eQ
## Skills
- `html` - Create an HTML file for whatever the user is describing, matching the effective HTML references.
- `html-diagram` - Build full-screen HTML architecture and stack diagrams with SVG-first presentation and minimal prose.
- `html-plan` - HTML plan pages in the effective HTML style.
## Repository Shape
Skills live under `skills//SKILL.md`. Each skill also bundles a copy of the `html-effectiveness` example corpus under `references/html-effectiveness/` so the examples stay local to the skill.
Credit: this repo bundles and uses the `html-effectiveness` examples by Thariq Shihipar: https://thariqs.github.io/html-effectiveness