Seven skills for self-contained HTML artifacts: wireframes, prototypes, plans, diagrams and explainers with a look that fits the subject.
Pack · 7 skillsby plannotator
4 images
About
Effective HTML is a pack of seven Agent Skills from Plannotator for making useful, self-contained HTML files with your coding agent, from rough wireframes to working interactive prototypes. Each artifact is one HTML file with its CSS and JavaScript inline, so it opens straight in a browser with no build step. What you can do with it - Sketch two or three low-fidelity wireframe directions for a screen in one file, with a small switcher to compare them - Build a polished mockup or a working prototype of one flow, with realistic states, keyboard support and a responsive layout - Turn a plan, roadmap or rollout into a clear HTML page that keeps every commitment from your source material - Draw architecture, sequence, state, process and timeline diagrams - Explain a subject with big visuals and few words, or make a report, explainer, landing page or small tool How it works - The broad html skill takes general requests and hands wireframes, prototypes, plans and diagrams to the matching specialist skill; the specialists run only when you call them by name or the html skill routes to them. - design-artifact picks a palette, type pairing and layout for the subject at hand instead of a reusable house style, and steers away from generic AI-made looks. - When your agent has browser tools, it opens the file at wide and narrow widths, tries the controls, checks the console and fixes clipping, overflow and illegible text. How to install it - npx skills add plannotator/effective-html, or add a single skill with --skill html-wireframe (or any other skill name). - In Claude Code: /plugin marketplace add plannotator/effective-html, then /plugin install plannotator-effective-html@effective-html. - In Codex: codex plugin marketplace add plannotator/effective-html, then codex plugin add plannotator-effective-html@effective-html. Good to know - The files don't need a network connection unless you allow external libraries. - The maker also offers the repo as a reference you can point your agent at without installing anything, plus a guide at effectivehtml.com. - big-pics-little-words is copied from the maker's own bro repository. - It's MIT-licensed.
Once it’s added
“Wireframe three layout directions for our release-readiness dashboard.”
“Prototype the checkout flow as one HTML file with real states.”
“Turn this rollout doc into an HTML plan that keeps every commitment.”
“Draw our auth service as a sequence diagram in HTML.”
“Explain how our caching works with big pictures and few words.”
Before you add it
Reads only
Your brief, conversation and project files · Your product's existing structure and wording
Makes changes · your agent can ask first
One self-contained HTML file per artifact, in your workspace
Pack · 7 skills, each with its own page
From people who use it
Step by step
Nothing new reaches your agent until a person has looked at it.
No reviews yet. Used Effective HTML? Say how it went.
Write a reviewRuns on your machine.
Runs on your machine.
Runs on your machine.
Runs on your machine.
npx -y degit plannotator/effective-html/skills/big-pics-little-words ~/.copilot/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact ~/.copilot/skills/design-artifact npx -y degit plannotator/effective-html/skills/html ~/.copilot/skills/html npx -y degit plannotator/effective-html/skills/html-diagram ~/.copilot/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan ~/.copilot/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype ~/.copilot/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe ~/.copilot/skills/html-wireframe
Runs on your machine.
npx -y degit plannotator/effective-html/skills/big-pics-little-words ~/.cursor/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact ~/.cursor/skills/design-artifact npx -y degit plannotator/effective-html/skills/html ~/.cursor/skills/html npx -y degit plannotator/effective-html/skills/html-diagram ~/.cursor/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan ~/.cursor/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype ~/.cursor/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe ~/.cursor/skills/html-wireframe
Runs on your machine.
/plugin marketplace add plannotator/effective-html /plugin install plannotator-effective-html@effective-html
npx -y degit plannotator/effective-html/skills/big-pics-little-words ~/.claude/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact ~/.claude/skills/design-artifact npx -y degit plannotator/effective-html/skills/html ~/.claude/skills/html npx -y degit plannotator/effective-html/skills/html-diagram ~/.claude/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan ~/.claude/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype ~/.claude/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe ~/.claude/skills/html-wireframe
Runs on your machine.
npx -y degit plannotator/effective-html/skills/big-pics-little-words ~/.agents/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact ~/.agents/skills/design-artifact npx -y degit plannotator/effective-html/skills/html ~/.agents/skills/html npx -y degit plannotator/effective-html/skills/html-diagram ~/.agents/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan ~/.agents/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype ~/.agents/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe ~/.agents/skills/html-wireframe
Runs on your machine.
Runs on your machine.
npx -y degit plannotator/effective-html/skills/big-pics-little-words ~/.gemini/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact ~/.gemini/skills/design-artifact npx -y degit plannotator/effective-html/skills/html ~/.gemini/skills/html npx -y degit plannotator/effective-html/skills/html-diagram ~/.gemini/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan ~/.gemini/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype ~/.gemini/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe ~/.gemini/skills/html-wireframe
Runs on your machine.
npx -y degit plannotator/effective-html/skills/big-pics-little-words .agents/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact .agents/skills/design-artifact npx -y degit plannotator/effective-html/skills/html .agents/skills/html npx -y degit plannotator/effective-html/skills/html-diagram .agents/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan .agents/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype .agents/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe .agents/skills/html-wireframe
Runs on your machine.
npx -y degit plannotator/effective-html/skills/big-pics-little-words ~/.openclaw/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact ~/.openclaw/skills/design-artifact npx -y degit plannotator/effective-html/skills/html ~/.openclaw/skills/html npx -y degit plannotator/effective-html/skills/html-diagram ~/.openclaw/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan ~/.openclaw/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype ~/.openclaw/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe ~/.openclaw/skills/html-wireframe
Runs on your machine.
npx -y degit plannotator/effective-html/skills/big-pics-little-words ~/.config/opencode/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact ~/.config/opencode/skills/design-artifact npx -y degit plannotator/effective-html/skills/html ~/.config/opencode/skills/html npx -y degit plannotator/effective-html/skills/html-diagram ~/.config/opencode/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan ~/.config/opencode/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype ~/.config/opencode/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe ~/.config/opencode/skills/html-wireframe
Runs on your machine.
npx -y degit plannotator/effective-html/skills/big-pics-little-words ~/.hermes/skills/big-pics-little-words npx -y degit plannotator/effective-html/skills/design-artifact ~/.hermes/skills/design-artifact npx -y degit plannotator/effective-html/skills/html ~/.hermes/skills/html npx -y degit plannotator/effective-html/skills/html-diagram ~/.hermes/skills/html-diagram npx -y degit plannotator/effective-html/skills/html-plan ~/.hermes/skills/html-plan npx -y degit plannotator/effective-html/skills/html-prototype ~/.hermes/skills/html-prototype npx -y degit plannotator/effective-html/skills/html-wireframe ~/.hermes/skills/html-wireframe
Scanned and passed · checked 47 min ago
Skills people install alongside Effective HTML.
Scanned on every change, and again when our rules improve.
GeminiSupported
GitHub CopilotSupportedTell us and a person on the trust team will look at it. Or email [email protected].
Nobody has shared how they use Effective HTML yet.
Security scan
Passed
Safe to install in every agent it supports. Runs in your agent, as instructions.
Skills people install alongside Effective HTML.
Has your agent explain a technical idea as an interactive isometric figure of a real machine, built from many small shaded parts.
A community skill that turns a description, code, Terraform, SQL or API schemas into editable draw.io diagrams, and keeps them in sync.
Turns your agent into a disciplined logo designer, from the brief to tested SVG concepts, lockups, icons and brand guidelines.
Turns one approved character still into a game-ready sprite set: every action animated, keyed, looped and exported for your engine.
