Effective HTML — скилл
Набор из шести скиллов, которые собирают самодостаточные HTML-артефакты: вайрфреймы, прототипы, макеты, планы и диаграммы
- 4 124 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скиллы создают самодостаточные статические HTML-файлы и читают контекст проекта для визуального направления
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/effective-htmlОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скиллы создают самодостаточные статические HTML-файлы и читают контекст проекта для визуального направления
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Набор дает агенту шесть скиллов для создания одностраничных HTML-артефактов, которые открываются без сборки и работают из одного файла. Скилл html разбирает запрос и направляет его специалисту: html-wireframe для низкодетальной структуры и навигации, html-prototype для рабочих прототипов и макетов с состояниями, html-plan для планов и дорожных карт, html-diagram для схем и диаграмм. Скилл design-artifact задает визуальное направление под тему без единого шаблонного стиля. Каждый скилл можно использовать отдельно, а сам репозиторий работает и как справочник без установки.
Для кого. Для дизайнеров, продакт-менеджеров, инженеров и авторов, которым нужны наглядные HTML-артефакты для обсуждения и проверки идей.
Подходит, если
- Нужен вайрфрейм или прототип интерфейса как один HTML-файл
- Нужно показать план, дорожную карту или отчет в наглядном виде
- Нужна диаграмма архитектуры, процесса или состояний
- Нужен самодостаточный артефакт для ревью без сборки и внешних зависимостей
Не подходит, если
- Нужна реализация полноценного приложения, а не отдельный HTML-файл
- Готовый дизайн уже есть и его нужно только доработать в коде проекта
Пример запроса к агенту
Собери прототип экрана онбординга как один HTML-файл с рабочими состояниями и адаптивной версткойОграничения
Скиллы отвечают за один самодостаточный HTML-файл, а не за интеграцию в кодовую базу и не за продакшен-фронтенд. Проверка результата в браузере требует, чтобы у агента был доступ к браузерному инструменту. Визуальное направление берется из запроса и проекта, поэтому без внятного брифа результат менее предсказуем.
Как отключить. Удалите плагин plannotator-effective-html через /plugin или каталоги скиллов из ~/.claude/skills/ и каталога проекта.
Частые вопросы
Обязательно ставить весь набор?
Нет. Можно поставить отдельный скилл, например npx skills add plannotator/effective-html --skill html-wireframe, или пользоваться репозиторием как справочником без установки.
Чем вайрфрейм отличается от прототипа?
Вайрфрейм намеренно низкодетальный и проверяет структуру, иерархию и навигацию. Прототип реализует один правдоподобный сценарий с состояниями и взаимодействием.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
Скиллы19 скиллов: Claude Code строит HTML-страницу, вы работаете с ней в браузере, и ответ возвращается агенту без копирования
18 скиллов и 6 агентов для UX-стратегии: от исследования и потоков до доступности, этики и передачи в разработку
Пять скиллов одного автора: отчеты по arXiv, технические схемы, сайт отчетов, библиотека дизайн-систем и ограничители для агента
Личная коллекция скиллов cafe3310: ведение проекта по спецификации, обзор кода, отчеты, браузер, 3D и видео в одном репозитории
Коллекция из 26 скиллов для агентов: оценка идей, GEO-аудит, дизайн-системы, очистка текста от следов ИИ, проверки плагинов
Набор скиллов для поиска работы: разбор вакансии, резюме по шаблонам, подготовка к поведенческому интервью, сравнение офферов и переговоры
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Effective HTML (эта карточка) | нет | 4 124 | |
| Lavish Editor (lavish-axi) | нет | 4 556 | агент рисует план или сравнение как HTML-страницу |
| Design OS | да | 1 879 | рабочее место для Claude Code |
Коротко о README
README описывает коллекцию из шести опциональных скиллов для прагматичных визуальных артефактов и подчеркивает, что репозиторий можно использовать как справочник еще до установки. Скилл html выступает маршрутизатором и передает запрос специалисту по вайрфреймам, прототипам, планам или диаграммам, а design-artifact дает творческое направление без готового шаблонного стиля. Установка возможна через npx skills add, как плагин Claude Code или как плагин Codex. Каждый артефакт делается адаптивным, доступным, самодостаточным и проверяется в браузере. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: html description: Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad request. This is the collection's only implicit router. Route clear wireframe, prototype, mockup, plan, or diagram requests to the matching direct-invocation specialist when available. Do not use for ordinary application implementation when a standalone HTML file is not the deliverable. --- # HTML Build one self-contained HTML file that makes the subject clearer, easier to use, or easier to understand. The standard is consistent care, not a consistent look. Do not reproduce a house palette, typography stack, card system, or layout from prior runs. ## Route the request first Use the narrowest skill that owns the main review question: - Read and compose design-artifact with the chosen workflow when palette, type, composition, theming, or overall visual register remain open. - Read and follow html-wireframe when structure, information hierarchy, navigation, or task flow is still unsettled. - Read and follow html-prototype when the user needs a polished mockup or a working interactive flow. - Read and follow html-plan when the artifact is primarily a plan, roadmap, implementation sequence, or rollout document. - Read and follow html-diagram when relationships, sequence, topology, state, hierarchy, or system behavior are the main content.