25 готовых к production навыков для инженерных процессов: они проводят AI-агентов через этапы спецификации, планирования, разработки, тестирования, ревью и выпуска.
plannotator/effective-html
Навыки для агентов, которые помогают создавать автономные HTML-макеты, интерактивные прототипы, планы и диаграммы.
- Звёзды
- 3,685
- Форки
- 249
- Открытые issues
- 2
- Последний коммит
- 3 дня назад
Что это?
Effective HTML — это набор дополнительных навыков для агентов, позволяющих создавать HTML-артефакты вместо длинных текстовых описаний. В него входят низкодетализированные макеты для проверки компоновки, иерархии и навигации; рабочие прототипы с реалистичными состояниями, поддержкой клавиатуры и адаптивным поведением; планы и дорожные карты, сохраняющие исходные обязательства; а также диаграммы архитектуры, последовательностей, состояний и временных шкал.
Навыки разделены по назначению. Универсальный навык html направляет запросы к специализированным навыкам, а design-artifact задаёт творческое направление с учётом предметной области, не навязывая единого стиля. Каждый навык можно использовать отдельно. Установка выполняется командой npx skills add; также доступны записи плагинов для Claude Code и Codex.
Предполагается, что каждый созданный навыками артефакт будет автономным, адаптивным, доступным и проверенным в браузере. Проект распространяется по лицензии MIT и дополняет инструмент Plannotator для просмотра и аннотирования локальных HTML-файлов.
Ключевые возможности
- 01Предоставляет универсальный навык html, который направляет запросы к специализированным навыкам.
- 02Создаёт низкодетализированные макеты для проверки иерархии контента и навигации.
- 03Создаёт рабочие прототипы с интерактивностью, поддержкой клавиатуры и адаптивным поведением.
- 04Создаёт планы и дорожные карты, сохраняющие исходные обязательства.
- 05Создаёт HTML-диаграммы архитектуры, последовательностей, состояний и временных шкал.
Сценарии использования
- Изучение вариантов компоновки вместе с ревьюерами до реализации интерфейса.
- Преобразование запроса на новую функцию в кликабельный прототип для получения отзывов заинтересованных сторон.
- Документирование архитектуры системы или потока запросов в виде HTML-диаграммы, которой удобно делиться.
- Подготовка плана внедрения, которому агенты смогут следовать.
Темы
Частые вопросы
- Что такое effective-html?
- Навыки для агентов, которые помогают создавать автономные HTML-макеты, интерактивные прототипы, планы и диаграммы. Effective HTML — это набор дополнительных навыков для агентов, позволяющих создавать HTML-артефакты вместо длинных текстовых описаний. В него входят низкодетализированные макеты для проверки компоновки, иерархии и навигации; рабочие прототипы с реалистичными состояниями, поддержкой клавиатуры и адаптивным поведением; планы и дорожные карты, сохраняющие исходные обязательства; а также диаграммы архитектуры, последовательностей, состояний и временных шкал.
- effective-html можно использовать бесплатно? Какая у него лицензия?
- effective-html распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- effective-html всё ещё поддерживается?
- Активно поддерживается. Последний коммит в effective-html — 15 окт. 2026 г..
- Для чего можно использовать effective-html?
- Изучение вариантов компоновки вместе с ревьюерами до реализации интерфейса. Преобразование запроса на новую функцию в кликабельный прототип для получения отзывов заинтересованных сторон. Документирование архитектуры системы или потока запросов в виде HTML-диаграммы, которой удобно делиться. Подготовка плана внедрения, которому агенты смогут следовать.
- Где скачать effective-html?
- Исходный код и инструкции по установке — на GitHub: https://github.com/plannotator/effective-html
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Agent Skills помогают агентам для программирования создавать выразительные интерфейсы с продуманной арт-дирекцией, настоящими фотографиями и визуальной проверкой в браузере, а не типовые AI-лендинги.
Браузер для AI-агентов: они выполняют автоматизацию в изолированных Spaces, пока вы работаете со своими вкладками и аккаунтами.
MCP-сервер для реверс-инжиниринга нативных бинарников, приложений JavaScript/Electron, сборок .NET, сайтов и других целей с подтверждающими данными для каждого вывода.
Навык для AI-агентов, который превращает идеи, планы и кодовые базы в интерактивные HTML-диаграммы и работает с Claude Code, Codex, Cursor и OpenCode.
Коллекция переиспользуемых навыков для AI-ассистентов по программированию, таких как Claude Code и Codex: согласование требований, проектирование, TDD и дисциплинированные инженерные процессы.