# html-prototype

Скилл собирает один самодостаточный HTML-файл: статичный макет или рабочий прототип с состояниями, клавиатурой и адаптивом. Нужен, чтобы проверить решение по интерфейсу до кода.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1800 установок · ★ 3763
- Автор: plannotator
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-prototype/SKILL.md
- Обновлён: 2026-10-15
- HTML: https://affpapa.org/nevibecode/skills/html-prototype

## Что делает

Скилл делает HTML-артефакт в одном из двух режимов. Макет — почти статичная страница: спорят о визуальной иерархии, сетке, типографике, цвете. Прототип даёт рабочий поток с переходами, вводом, сменой состояния и откликом. Поведение не добавляют только ради того, чтобы макет выглядел солиднее.

Внутри один файл `.html` со встроенными CSS и JavaScript, без сборки, входа в аккаунт и живого API. Данные правдоподобные, но выдуманные. Состояния выписывают до вёрстки и берут только те, что сценарий реально проходит: загрузка, пустой список, ошибка, успех, недоступное действие, мобильная ширина.

Клавиатура, видимый фокус, `Escape` в диалогах, `prefers-reduced-motion`, контраст текста на каждом фоне входят в требования. Скилл требует явного вызова: на общую просьбу сделать макет он сам не включится, его подводит прямой вызов или широкий скилл `html`. Если визуальное направление открыто, автор советует совместить его с `design-artifact`; по состояниям и интерактиву главным остаётся этот скилл. На выходе абсолютный путь к файлу, режим, сценарий, список состояний и то, что намеренно не сделано.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add plannotator/effective-html --skill html-prototype -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/html-prototype/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/html-prototype/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add plannotator/effective-html --skill html-prototype -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/html-prototype/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add plannotator/effective-html --skill html-prototype -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/html-prototype/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install plannotator/effective-html html-prototype
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/html-prototype/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add plannotator/effective-html --skill html-prototype -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/plannotator/effective-html --path skills/html-prototype
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/html-prototype/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add plannotator/effective-html --skill html-prototype -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/plannotator/effective-html/tree/HEAD/skills/html-prototype/SKILL.md

## Когда брать
- показать иерархию экрана до того, как написан код
- собрать рабочий поток с валидацией формы и откликом на отправку
- проверить пустой список и восстановление после ошибки
- отдать один HTML-файл без сборки и запуска сервера
- сравнить макет и прототип на одном и том же контенте

## Примеры запросов агенту
- \`html-prototype`, режим макета: экран согласования заявки, тёмная тема из наших токенов
- \`html-prototype`, прототип: форма добавления платежа с валидацией, загрузкой и ошибкой отправки
- \`html-prototype`: тот же экран, что в прошлом макете, но с работающими вкладками и пустым состоянием списка

## Похожие
- [sketch](https://affpapa.org/nevibecode/skills/hermes-agent-adapted-from-gsd-sketch.md) — скилл · 403 установки
- [prototype](https://affpapa.org/nevibecode/skills/adobe-prototype.md) — скилл · 524 установки
- [web-prototype](https://affpapa.org/nevibecode/skills/web-prototype.md) — скилл · 300 установок
- [huashu-design-html-native](https://affpapa.org/nevibecode/skills/huashu-design-html-native.md) — скилл · 426 установок
- [claude-design](https://affpapa.org/nevibecode/skills/badtechbandit-claude-design.md) — скилл · 645 установок
- [image-to-ui](https://affpapa.org/nevibecode/skills/image-to-ui.md) — скилл · 63500 установок

Из того же набора: [plannotator/effective-html](https://affpapa.org/nevibecode/by/plannotator/effective-html.md) — 6 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md