htmx

HTMX development guidelines for building dynamic web applications with minimal JavaScript using HTML attributes.

mindrally official Разработка

Что делает навык

Навык предоставляет экспертные знания по разработке динамических веб-приложений с использованием HTMX, позволяя создавать интерактивность через HTML-атрибуты с минимальным участием JavaScript. Он помогает писать поддерживаемый код, оптимизировать производительность и управлять DOM-манипуляциями без тяжелых зависимостей.

Когда применять

  • Создание динамических форм и кнопок, отправляющих запросы (GET, POST, PUT, PATCH, DELETE) без перезагрузки страницы.
  • Настройка загрузки и вставки контента в DOM с помощью атрибутов hx-target, hx-swap и hx-select.
  • Реализация пользовательских подтверждений действий и обработки ошибок с возвратом соответствующих HTTP-статусов.
  • Оптимизация производительности за счет отправки минимальных HTML-фрагментов с сервера и использования hx-boost.

Как работает

  1. Использовать атрибуты hx-get, hx-post, hx-put, hx-patch, hx-delete для инициирования HTTP-запросов к указанным URL.
  2. Назначать атрибут hx-target для определения элемента, в который будет вставлен ответ, и hx-swap для выбора метода вставки (innerHTML, outerHTML и др.).
  3. Применять hx-trigger для кастомизации событий и hx-push-url/hx-replace-url для управления историей браузера.
  4. Включать hx-confirm для запроса подтверждения пользователя перед выполнением опасных действий (например, удаления).
  5. Структурировать шаблоны как переиспользуемые фрагменты, обеспечивая разделение ответственности и минимизируя размер ответа сервера.

Примеры запросов агенту

Напиши HTML-код кнопки, которая загружает список пользователей с /api/users и вставляет их в элемент с id 'user-list'.
Создай форму для отправки email, которая отправляет POST-запрос на /api/submit и обновляет содержимое блока 'result' через innerHTML.
Реализуй кнопку удаления элемента с подтверждением пользователя и отправкой DELETE-запроса на /api/item/1.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «htmx» из репозитория: # https://github.com/mindrally/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r htmx/ ~/.claude/skills/htmx/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.