wp-interactivity-api — скилл для Claude Code: обзор и запуск
Помогает настраивать интерактивные блоки WordPress без сбоев гидратации. Пригодится при отладке директив, интеграции скриптов и синхронизации состояния между PHP и браузером.
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a claude-codeЧто делает wp-interactivity-api
Скилл инструктирует агента по внедрению Interactivity API в темы, плагины и кастомные блоки. Он проверяет разметку на атрибуты data-wp-*, отслеживает хранилища @wordpress/interactivity и связывает скрипты через свойство viewScriptModule в файле block.json. Если блок создаётся с нуля, агент предложит шаблон @wordpress/create-block-interactive-template.
Главная проблема клиентской логики во фронтенде WordPress — визуальные скачки разметки при несовпадении начального рендера. Поэтому скилл переносит расчёт производного состояния в PHP с помощью wp_interactivity_state(), а контекст передаёт через wp_interactivity_data_wp_context(). В WordPress 6.9 директива data-wp-ignore объявлена устаревшей, а для повторяющихся директив одного типа добавлен разделитель ---.
Для работы окружению нужны Node.js и Bash, поддержка WordPress 7.0+ и версия PHP от 7.4.0. В отдельных сценариях потребуется установленная утилита WP-CLI. Без серверной обработки директив через supports.interactivity интерактивность на странице просто не оживёт.
Какие задачи решает
- синхронизировать состояние PHP и клиентского хранилища через
wp_interactivity_state - исправить мерцание разметки и ошибки гидратации после загрузки страницы
- прописать
viewScriptModuleи флагsupports.interactivityвblock.json - настроить обработчики кликов и событий через директивы
data-wp-on
Примеры запросов агенту
- Найди причину, почему директива
data-wp-on--clickне обновляет состояние в блоке. - Добавь вычисление начального состояния в PHP через
wp_interactivity_state. - Проверь регистрацию модуля в
block.jsonи подготовь разметку для гидратации.
Как установить wp-interactivity-api
1Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a claude-code2Вручную: положить файлы
~/.claude/skills/wp-interactivity-api/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/wp-interactivity-api/
1Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a codex2Вручную: положить файлы
.agents/skills/wp-interactivity-api/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a cursor2Вручную: положить файлы
.cursor/skills/wp-interactivity-api/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install WordPress/agent-skills wp-interactivity-api2Вручную: положить файлы
.github/skills/wp-interactivity-api/SKILL.md1Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a gemini-cli2Командой платформы
gemini skills install https://github.com/WordPress/agent-skills --path skills/wp-interactivity-apiВручную: положить файлы
.devin/skills/wp-interactivity-api/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о wp-interactivity-api
Как установить wp-interactivity-api в Claude Code?
Выполните команду npx skills add WordPress/agent-skills --skill wp-interactivity-api -a claude-code в терминале. Скилл пропишется в конфигурацию агента.
Что делает wp-interactivity-api?
Он инструктирует модель по работе с WordPress Interactivity API, связыванию директив разметки, настройке серверного рендеринга и устранению сбоев гидратации.
Какие требования к версии платформы предъявляет этот скилл?
Требуются WordPress 7.0+, интерпретатор PHP от 7.4.0, а также Node.js и Bash в среде запуска. Для части задач может пригодиться консольная утилита WP-CLI.
