Effective HTML
Набор из шести скиллов, которые собирают самодостаточные HTML-артефакты: вайрфреймы, прототипы, макеты, планы и диаграммы
Низкий риск
Низкий уровень ставим, когда запись в основном дает агенту инструкции и справочные материалы.
Почему такой уровень
- Скиллы создают самодостаточные статические HTML-файлы и читают контекст проекта для визуального направления
Установка
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/effective-htmlОпределит агенты на машине, проверит риск и зафиксирует версию.
Другие способы установки
Собрано автоматически, проверьте перед установкой.
Выполните в терминале в папке проекта
npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a claude-code -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Без сторонних утилит, из коммита 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .claude/skills
cp -R "$tmp/skills/html" .claude/skills/html
cp -R "$tmp/skills/design-artifact" .claude/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .claude/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .claude/skills/html-prototype
cp -R "$tmp/skills/html-plan" .claude/skills/html-plan
cp -R "$tmp/skills/html-diagram" .claude/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Выполните в терминале в папке проекта
npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a cursor -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Без сторонних утилит, из коммита 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Выполните в терминале в папке проекта
npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a github-copilot -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Без сторонних утилит, из коммита 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .github/skills
cp -R "$tmp/skills/html" .github/skills/html
cp -R "$tmp/skills/design-artifact" .github/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .github/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .github/skills/html-prototype
cp -R "$tmp/skills/html-plan" .github/skills/html-plan
cp -R "$tmp/skills/html-diagram" .github/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Выполните в терминале в папке проекта
npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a codex -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Без сторонних утилит, из коммита 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Выполните в терминале в папке проекта
npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a gemini-cli -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Без сторонних утилит, из коммита 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Выполните в терминале в папке проекта
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .devin/skills
cp -R "$tmp/skills/html" .devin/skills/html
cp -R "$tmp/skills/design-artifact" .devin/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .devin/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .devin/skills/html-prototype
cp -R "$tmp/skills/html-plan" .devin/skills/html-plan
cp -R "$tmp/skills/html-diagram" .devin/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Бывший Windsurf.
Выполните в терминале в папке проекта
npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a cline -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Без сторонних утилит, из коммита 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .cline/skills
cp -R "$tmp/skills/html" .cline/skills/html
cp -R "$tmp/skills/design-artifact" .cline/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .cline/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .cline/skills/html-prototype
cp -R "$tmp/skills/html-plan" .cline/skills/html-plan
cp -R "$tmp/skills/html-diagram" .cline/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Выполните в терминале в папке проекта
npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a roo -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Без сторонних утилит, из коммита 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .roo/skills
cp -R "$tmp/skills/html" .roo/skills/html
cp -R "$tmp/skills/design-artifact" .roo/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .roo/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .roo/skills/html-prototype
cp -R "$tmp/skills/html-plan" .roo/skills/html-plan
cp -R "$tmp/skills/html-diagram" .roo/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Форк Roo Code, папки .roo те же.
Выполните в терминале в папке проекта
npx skills add plannotator/effective-html --skill html design-artifact html-wireframe html-prototype html-plan html-diagram -a opencode -yУтилита skills ставит текущую версию из репозитория. Чтобы скилл работал во всех проектах, добавьте флаг -g.
Без сторонних утилит, из коммита 2ac1dfe
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Выполните в терминале в папке проекта
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Выполните в терминале в папке проекта
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/plannotator/effective-html.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/html/ /skills/design-artifact/ /skills/html-wireframe/ /skills/html-prototype/ /skills/html-plan/ /skills/html-diagram/
git -C "$tmp" checkout 2ac1dfecb0f2474e75260cb6d3c9b9d6d9b5062e
mkdir -p .agents/skills
cp -R "$tmp/skills/html" .agents/skills/html
cp -R "$tmp/skills/design-artifact" .agents/skills/design-artifact
cp -R "$tmp/skills/html-wireframe" .agents/skills/html-wireframe
cp -R "$tmp/skills/html-prototype" .agents/skills/html-prototype
cp -R "$tmp/skills/html-plan" .agents/skills/html-plan
cp -R "$tmp/skills/html-diagram" .agents/skills/html-diagramКоманды для macOS и Linux, на Windows выполните их в Git Bash.
Установи набор: npx skills add plannotator/effective-html. Либо как плагин Claude Code: /plugin marketplace add plannotator/effective-html, затем /plugin install plannotator-effective-html@effective-html.
Другие способы из описания автора
npx skills add plannotator/effective-htmlСтавит всю коллекцию. Отдельный скилл: добавьте --skill html-wireframe. Список скиллов: --list.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Набор дает агенту шесть скиллов для создания одностраничных HTML-артефактов, которые открываются без сборки и работают из одного файла. Скилл html разбирает запрос и направляет его специалисту: html-wireframe для низкодетальной структуры и навигации, html-prototype для рабочих прототипов и макетов с состояниями, html-plan для планов и дорожных карт, html-diagram для схем и диаграмм. Скилл design-artifact задает визуальное направление под тему без единого шаблонного стиля. Каждый скилл можно использовать отдельно, а сам репозиторий работает и как справочник без установки.
Для кого. Для дизайнеров, продакт-менеджеров, инженеров и авторов, которым нужны наглядные HTML-артефакты для обсуждения и проверки идей.
Подходит, если
- Нужен вайрфрейм или прототип интерфейса как один HTML-файл
- Нужно показать план, дорожную карту или отчет в наглядном виде
- Нужна диаграмма архитектуры, процесса или состояний
- Нужен самодостаточный артефакт для ревью без сборки и внешних зависимостей
Не подходит, если
- Нужна реализация полноценного приложения, а не отдельный HTML-файл
- Готовый дизайн уже есть и его нужно только доработать в коде проекта
Пример запроса к агенту
Собери прототип экрана онбординга как один HTML-файл с рабочими состояниями и адаптивной версткойОграничения
Скиллы отвечают за один самодостаточный HTML-файл, а не за интеграцию в кодовую базу и не за продакшен-фронтенд. Проверка результата в браузере требует, чтобы у агента был доступ к браузерному инструменту. Визуальное направление берется из запроса и проекта, поэтому без внятного брифа результат менее предсказуем.
Как отключить. Удалите плагин plannotator-effective-html через /plugin или каталоги скиллов из ~/.claude/skills/ и каталога проекта.
Проверка безопасности
- Скиллы создают самодостаточные статические HTML-файлы и читают контекст проекта для визуального направления
Коротко о README
README описывает коллекцию из шести опциональных скиллов для прагматичных визуальных артефактов и подчеркивает, что репозиторий можно использовать как справочник еще до установки. Скилл html выступает маршрутизатором и передает запрос специалисту по вайрфреймам, прототипам, планам или диаграммам, а design-artifact дает творческое направление без готового шаблонного стиля. Установка возможна через npx skills add, как плагин Claude Code или как плагин Codex. Каждый артефакт делается адаптивным, доступным, самодостаточным и проверяется в браузере. Лицензия MIT.
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.
Частые вопросы
Обязательно ставить весь набор?
Нет. Можно поставить отдельный скилл, например npx skills add plannotator/effective-html --skill html-wireframe, или пользоваться репозиторием как справочником без установки.
Чем вайрфрейм отличается от прототипа?
Вайрфрейм намеренно низкодетальный и проверяет структуру, иерархию и навигацию. Прототип реализует один правдоподобный сценарий с состояниями и взаимодействием.
Похожие
Самостоятельно размещаемая база знаний с блочными ссылками и встроенным MCP-сервером для подключения AI-агентов к заметкам
CLI для всех API Google Workspace с выводом в JSON и набором скиллов для агентов: Drive, Gmail, Calendar, Sheets и другие
Локальный поиск по заметкам, документации и расшифровкам встреч в Markdown: ключевые слова, смысловой поиск и ранжирование, есть MCP
Менеджер задач для AI-разработки: разбирает PRD на задачи с зависимостями и ведет агента по ним через MCP или CLI