# html-wireframe

> Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content,…

Direct-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. Do not activate independently from a general request. Do not use for polished mockups or production-like interaction; use html-prototype for those.

- Type: Skill
- Made by: plannotator
- Category: Design
- Formats: Skills
- Version: cac4842
- Source: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe
- Page: https://pluginboard.ai/skills/html-wireframe

## 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 html-wireframe folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans.

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### Claude

In Claude (web or desktop): Download the html-wireframe folder and zip the folder itself, then upload it in Customize → Skills.

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### Gemini

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

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### GitHub Copilot

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe ~/.copilot/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### Cursor

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe ~/.cursor/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### Claude Code

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe ~/.claude/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

Or all of Effective HTML, in Claude Code:

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

### Codex

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe ~/.agents/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### Antigravity

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

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### Gemini CLI

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe ~/.gemini/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### Replit

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe .agents/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### OpenClaw

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe ~/.openclaw/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### OpenCode

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe ~/.config/opencode/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

### Hermes Agent

Run in your terminal:

```shell
npx -y degit plannotator/effective-html/skills/html-wireframe ~/.hermes/skills/html-wireframe
```

View the folder on GitHub: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-wireframe

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