# wp-interactivity-api

Помогает настраивать интерактивные блоки WordPress без сбоев гидратации. Пригодится при отладке директив, интеграции скриптов и синхронизации состояния между PHP и браузером.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4200 установок · ★ 2298
- Автор: WordPress
- Лицензия: LicenseRef-Unknown · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/WordPress/agent-skills/tree/HEAD/skills/wp-interactivity-api/SKILL.md
- Обновлён: 2026-10-21
- HTML: https://affpapa.org/nevibecode/skills/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` интерактивность на странице просто не оживёт.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/wp-interactivity-api/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/wp-interactivity-api/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/wp-interactivity-api/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/wp-interactivity-api/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install WordPress/agent-skills wp-interactivity-api
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/wp-interactivity-api/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/WordPress/agent-skills --path skills/wp-interactivity-api
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/wp-interactivity-api/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/WordPress/agent-skills/tree/HEAD/skills/wp-interactivity-api/SKILL.md

## Когда брать
- синхронизировать состояние PHP и клиентского хранилища через `wp_interactivity_state`
- исправить мерцание разметки и ошибки гидратации после загрузки страницы
- прописать `viewScriptModule` и флаг `supports.interactivity` в `block.json`
- настроить обработчики кликов и событий через директивы `data-wp-on`

## Примеры запросов агенту
- Найди причину, почему директива `data-wp-on--click` не обновляет состояние в блоке.
- Добавь вычисление начального состояния в PHP через `wp_interactivity_state`.
- Проверь регистрацию модуля в `block.json` и подготовь разметку для гидратации.

## Похожие
- [wordpress-pro](https://affpapa.org/nevibecode/skills/wordpress-pro.md) — скилл · 9700 установок
- [wordpress-master](https://affpapa.org/nevibecode/agents/wordpress-master.md) — субагент · 763 установки
- [woocommerce-code-review](https://affpapa.org/nevibecode/skills/woocommerce-code-review.md) — скилл · 1800 установок
- [wordpress-plugin-to-emdash](https://affpapa.org/nevibecode/skills/wordpress-plugin-to-emdash.md) — скилл · 688 установок
- [wp-guard](https://affpapa.org/nevibecode/skills/wp-guard.md) — скилл · 2600 установок
- [wordpress](https://affpapa.org/nevibecode/skills/wordpress.md) — скилл · 894 установки

Из того же набора: [wordpress/agent-skills](https://affpapa.org/nevibecode/by/wordpress/agent-skills.md) — 19 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md