# HTML Prototype

Direct-invocation specialist for polished, responsive, self-contained HTML mockups and...

- Repository: https://github.com/plannotator/effective-html (3813 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add plannotator/effective-html --skill html-prototype -g -a claude-code -y`
Codex: `npx skills add plannotator/effective-html --skill html-prototype -g -a codex -y`
Cursor: `npx skills add plannotator/effective-html --skill html-prototype -g -a cursor -y`
Gemini CLI: `npx skills add plannotator/effective-html --skill html-prototype -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add plannotator/effective-html`

## Description

Direct-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 here. Do not activate independently from a general request. Treat a mockup as a noninteractive fidelity mode within this skill, not as a separate skill.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# HTML Prototype

Build a credible model of a product decision. Match the artifact to the user's context instead of applying a recurring house style. The goal is not to make every possible screen. The goal is to make the important visual or behavioral question testable.

## Choose the fidelity mode

Use one of two modes:

- **Mockup:** Create a polished, responsive, mostly static artifact when the open question is visual hierarchy, layout, typography, color, or product fit.
- **Prototype:** Create a working flow when the open question is navigation, input, state change, feedback, recovery, or transition.

Do not create a separate `html-mockup` skill. Do not add behavior merely to make a mockup seem more complete. If a user asks for both modes, preserve the same content and structure so changes in fidelity remain easy to compare.

## Derive the direction from context

Inspect the conversation, supplied references, and project before designing. Look for design-system documentation, tokens, existing components, product screenshots, and nearby artifacts.

Authority runs in this order:

1. The user's explicit visual and functional instructions.
2. The project's established design language and interaction conventions.
3. The product, audience, content, and scenario.
4. Your own design judgment.

Before coding, settle:

- the user and critical job;
- the bounded scenario under review;
- mockup or prototype mode;
- the source of the visual direction;
- the relevant state model;
- the point where the real product would take over.

When no design system exists, create a specific direction from the subject and use case. Do not default to a gradient, a dark dashboard, interchangeable cards, or decorative metrics. A prototype for a field tool, an editorial workflow, and a financial approval should not feel like the same product.

The rest: https://github.com/plannotator/effective-html/blob/HEAD/skills/html-prototype/SKILL.md