Skip to content
appsgit

HTML Prototype

HTML Prototype is an agent skill (a SKILL.md file) from plannotator/effective-html. Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. It works with Claude Code and Codex and has 3,763 GitHub stars across a repository of 3 listed skills.

github.com/plannotator/effective-html/skills/html-prototype (opens in a new tab)

Data as of from the GitHub API; description from the skill's SKILL.md. Report an error

View on GitHub (opens in a new tab)

Add this skill

Claude

This repository is a Claude Code plugin marketplace. In Claude Code:

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

In the Claude apps, zip the html-prototype folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

ChatGPT / Codex

Codex reads skills from .agents/skills/ in a repo or ~/.agents/skills/ for every project:

git clone --depth 1 https://github.com/plannotator/effective-html.git
cp -r effective-html/skills/html-prototype .agents/skills/html-prototype   # repo; ~/.agents/skills for all projects

Standalone skills also load in the ChatGPT desktop app.

Cursor

Cursor loads skills from .cursor/skills/ (or ~/.cursor/skills/) and also reads .claude/skills/:

git clone --depth 1 https://github.com/plannotator/effective-html.git
cp -r effective-html/skills/html-prototype .cursor/skills/html-prototype   # project; ~/.cursor/skills for all projects

Source (checked Oct 7, 2026): code.claude.com/docs/en/skills (opens in a new tab), code.claude.com/docs/en/plugin-marketplaces (opens in a new tab), support.claude.com/en/articles/12512180-using-skills-in-claude (opens in a new tab), learn.chatgpt.com/docs/build-skills (opens in a new tab), cursor.com/docs/context/skills (opens in a new tab)

What this skill does

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. Build a credible model of a product decision.

When it triggers

  • Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request here.

More skills in plannotator/effective-html

3 skills are listed from this repository.

Similar skills

More design & frontend skills

All Design & frontend

FAQ

HTML Prototype FAQ

Still curious? Email info@appsgit.com.

How do I install the HTML Prototype skill?

In Claude Code, run /plugin marketplace add plannotator/effective-html and then /plugin install plannotator-effective-html@effective-html. For Codex or Cursor, copy the html-prototype folder into .agents/skills/ or .cursor/skills/.

Is the HTML Prototype skill free?

Yes. The repository is open source under the MIT license.

Is HTML Prototype maintained?

The repository's most recent commit was on Oct 15, 2026. appsgit only lists skills from repositories with a commit in the last six months.