Pack · #103 trending skills repo · ↗ +236 stars this week
Effective Html
plannotator/effective-html
Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.
- Stars
- 4.0k
- This week
- +236
- Forks
- 279
- Open issues
- 5
- Skills inside
- 8
Get started
Install the skills
npx skills add plannotator/effective-htmlInstalls into Claude Code, Codex, Cursor, OpenCode and the other agents it finds on your machine.
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-htmlRun inside Claude Code, then pick what to install from /plugin.
git clone --depth 1 https://github.com/plannotator/effective-html.git /tmp/effective-html
cp -r /tmp/effective-html ~/.claude/skills/effective-htmlClaude Code reads ~/.claude/skills/ (or .claude/skills/ in a project). Other agents read the same SKILL.md format from their own skills folder.
Inside this repo
8 skills
skills/big-pics-little-wordsdesign-artifactDesign principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output mustskills/design-artifacthtml-diagramDirect-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do noskills/html-diagramhtml-planDirect-invocation specialist for clear, self-contained HTML plans that preserve source material while improving hierarchy, sequence, ownership, dependencies, and reviewability. Use when the user explicitly invokes html-plan or the broad html skill routes a plan request here. Do not activate independskills/html-planhtml-prototypeDirect-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request heskills/html-prototypehtml-wireframeDirect-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here. Dskills/html-wireframehtmlCreate or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad request. This is the collection's only implicit skills/htmlone-pager- 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.skills/one-pagerDocumentation
README
Effective HTML
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://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0
Render and annotate local HTML with Plannotator.
Skill references
The repo includes eight optional skills for pragmatic visual artifacts.
| Skill | Use it for |
|---|---|
html |
Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist |
big-pics-little-words |
Explain the current subject in HTML with large visuals and minimal text while preserving key details; copied from bro |
one-pager |
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 |
design-artifact |
Subject-specific creative direction for any HTML artifact without imposing a reusable house style |
html-wireframe |
Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure |
html-prototype |
Working prototypes with realistic states, interaction, keyboard support, and responsive behavior |
html-plan |
Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments |
html-diagram |
Architecture, sequence, process, state, hierarchy, timeline, and system diagrams |
Practical guide: HTML Wireframes and Prototypes for Coding Agents.
Install
Install the collection when you want these references available to your agent as reusable workflows:
npx skills add plannotator/effective-html
List or install individual skills:
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
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
Codex plugin
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-artifactprovides 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.
Create a shareable link for an HTML file with tot.