# Effective HTML

> Seven skills for self-contained HTML artifacts: wireframes, prototypes, plans, diagrams and explainers with a look that fits the subject.

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.

- Type: Skill
- Made by: plannotator
- Category: Design
- Formats: Skills, Claude plugins
- Version: latest
- Website: https://www.effectivehtml.com/
- Source: https://github.com/plannotator/effective-html
- Page: https://pluginboard.ai/skills/effective-html

## Works with

- ChatGPT
- Claude
- Gemini
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT: Download the effective-html folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans.

View the skills on GitHub: https://github.com/plannotator/effective-html

### Claude

In Claude (web or desktop): Download each skill’s folder and zip it, then upload them one at a time in Customize → Skills.

View the skills on GitHub: https://github.com/plannotator/effective-html

### Gemini

In Gemini: Download the effective-html folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it).

View the skills on GitHub: https://github.com/plannotator/effective-html

### GitHub Copilot

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

### Cursor

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

### Claude Code

In Claude Code, as a plugin:

```text
/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html
```

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

### Codex

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

### Antigravity

In Antigravity: Copy the effective-html folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI).

View the skills on GitHub: https://github.com/plannotator/effective-html

### Gemini CLI

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

### Replit

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

### OpenClaw

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

### OpenCode

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

### Hermes Agent

Copy all 7 skills, in your terminal:

```shell
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
```

View the skills on GitHub: https://github.com/plannotator/effective-html

---
From Pluginboard (https://pluginboard.ai).