# html-skills

Заменяет текстовые ответы Claude Code на интерактивные HTML-страницы: от архитектурных схем до интерактивных чек-листов с отправкой правок обратно в чат.

- плагин · `type=plugin` · Claude Code · ★ 66
- Автор: f-labs-io
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/f-labs-io/agent-html-skills/tree/HEAD/plugins/html-skills
- Обновлён: 2026-10-05
- HTML: https://affpapa.org/nevibecode/plugins/html-skills

## Что делает

Плагин добавляет в Claude Code 17 специализированных скиллов, генерирующих HTML вместо привычного Markdown. В каталоге есть шаблоны под разные задачи: ERD-диаграммы, матрицы сравнения решений, карты мыслей, интерактивные слайды и витрины дизайн-токенов. Стили и скрипты зашиваются прямо в итоговый файл.

Семь скиллов из набора поддерживают обратную связь — пользователь меняет параметры ползунками, правит текст в браузере или отмечает чекбоксы тестирования, а результат возвращается агенту. Для этого плагин поднимает локальный HTTP-сервер на Node.js через внутренний скилл `html-skills-listen`. Если среда изолирована или запускается в облаке, плагин переключается на буфер обмена: данные для Claude придётся вставить вручную.

## Установка

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

**Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add anthropics/claude-plugins-community
```
В чате агента (не в терминале):
```text
/plugin install html-skills@claude-community
```

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

## Примеры запросов агенту
- Сделай ERD-схему для текущих моделей базы данных
- Собери прототип карточки товара и добавь ползунки для настройки отступов
- Подготовь чек-лист ручного тестирования авторизации и открой его в браузере

## Похожие
- [html-diagram](https://affpapa.org/nevibecode/skills/html-diagram.md) — скилл · 4100 установок
- [answer-me-with-html](https://affpapa.org/nevibecode/skills/answer-me-with-html.md) — скилл · 5400 установок
- [html-prototype](https://affpapa.org/nevibecode/skills/html-prototype.md) — скилл · 1800 установок
- [huashu-design-html-native](https://affpapa.org/nevibecode/skills/huashu-design-html-native.md) — скилл · 426 установок
- [stitch::extract-static-html](https://affpapa.org/nevibecode/skills/stitchextract-static-html.md) — скилл · 10000 установок
- [html-ppt-retro-quarterly-review](https://affpapa.org/nevibecode/skills/html-ppt-retro-quarterly-review.md) — скилл · 2800 установок

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

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