wp-interactivity-api
por WordPressUse a skill wp-interactivity-api para criar ou depurar recursos da WordPress Interactivity API no desenvolvimento frontend. Ela ajuda com diretivas `data-wp-*`, `@wordpress/interactivity` store/state/actions, integração com `viewScriptModule`, hydration e comportamento de diretivas, com orientações práticas de instalação, uso e troubleshooting específico do repositório.
Esta skill recebe 82/100, o que a torna uma boa opção de catálogo para usuários que trabalham com problemas da WordPress Interactivity API. O repositório oferece um gatilho claro para agentes, etapas práticas de triagem e detalhes suficientes de implementação e depuração para reduzir a adivinhação em comparação com um prompt genérico, embora seja mais focado do que uma skill completa de construção de aplicações end-to-end.
- Cobertura explícita de gatilhos para marcadores da Interactivity API como `data-wp-interactive`, `@wordpress/interactivity` e integração com `viewScriptModule`.
- Boa orientação operacional, com procedimento, inputs necessários e referências de debug para hydration, directives e server-side rendering.
- Notas úteis específicas do WordPress 6.9, incluindo IDs únicos de diretivas e o comportamento obsoleto de `data-wp-ignore`.
- Alguns fluxos exigem WP-CLI, e a skill pressupõe um agente baseado em filesystem com bash + node, então pode não se encaixar em ambientes leves.
- Não há comando de instalação nem scripts fornecidos, então a adoção depende de o usuário já saber como colocar e executar a skill.
Visão geral da skill wp-interactivity-api
O que esta skill faz
A skill wp-interactivity-api ajuda você a criar ou depurar recursos da WordPress Interactivity API sem adivinhar directives, formato da store ou a integração entre servidor e cliente. Ela é mais útil quando você está trabalhando com markup data-wp-*, @wordpress/interactivity, viewScriptModule ou funções wp_interactivity_*() e precisa de um caminho prático entre uma interação quebrada e uma implementação funcionando.
Para quem ela é
Use a wp-interactivity-api skill se você faz Frontend Development em um block, theme ou plugin no WordPress e precisa de uma UI interativa que continue funcionando corretamente após a primeira renderização. Ela encaixa muito bem quando você já tem um repo e precisa entender por que a hidratação falha, por que uma directive não dispara ou como estruturar corretamente uma nova área interativa.
Por que vale a pena instalar
O principal ganho é velocidade de decisão: ela mostra o que pesquisar, quais entradas importam e como separar abordagens em nível de block, theme e melhoria de plugin. Isso torna o guia wp-interactivity-api mais útil do que um prompt genérico, porque ele reflete as restrições reais do WordPress 6.9+ e a forma como essa API é conectada.
Como usar a skill wp-interactivity-api
Instale e delimite o escopo corretamente
Use o padrão wp-interactivity-api install a partir do ponto de entrada do diretório e, em seguida, aplique a skill em uma sessão de agente com acesso ao filesystem, bash e Node. As notas do repositório indicam compatibilidade com WordPress 6.9+ e, em alguns fluxos, com WP-CLI; se o seu ambiente não conseguir inspecionar os arquivos do projeto nem executar comandos do WordPress, o resultado tende a ser mais fraco.
Forneça as entradas iniciais certas
O uso de wp-interactivity-api funciona melhor quando você informa:
- raiz do repo
- saída de triagem de
wp-project-triage - superfície afetada: frontend, editor ou ambos
- versão do WordPress e quaisquer restrições de module/build
Um prompt fraco é: “Conserte a Interactivity API.”
Um prompt mais forte é: “Depure por que data-wp-on--click não dispara neste block no frontend, WordPress 6.9, module scripts ativados, triagem anexada, e o problema só aparece depois da navegação.”
Leia estes arquivos primeiro
Comece com SKILL.md e depois abra:
references/directives-quickref.mdpara nomes de directives e âncoras de buscareferences/debugging.mdpara a checklist de falhasreferences/server-side-rendering.mdpara setup no PHP e regras de hidratação
Se você estiver decidindo se a skill serve para a tarefa atual, esses três arquivos mostram o fluxo real de trabalho mais rápido do que a árvore do repo sozinha.
Siga o fluxo prático
A skill é organizada em uma sequência simples:
- detecte o uso existente com buscas por
data-wp-interactive,@wordpress/interactivityeviewScriptModule - identifique o namespace da store e verifique se o markup espera o mesmo nome
- valide o contexto renderizado no servidor e o estado inicial
- confira se o elemento raiz, o view script module e as directives de evento estão todos presentes no HTML renderizado
- reduza o escopo até isolar a directive quebrada ou o caminho de state problemático
Para novos blocks interativos, prefira o template oficial de scaffold em vez de inventar a estrutura do zero.
FAQ da skill wp-interactivity-api
Isso serve só para depuração?
Não. A wp-interactivity-api skill cobre tanto criação quanto depuração. Ela é especialmente útil quando você precisa decidir se deve adicionar interatividade por meio de um viewScriptModule de block, enriquecer markup existente em um plugin ou conectar comportamento no nível do theme de um jeito que ainda hidrate corretamente.
Em que ela é diferente de um prompt normal?
Um prompt comum muitas vezes ignora os detalhes específicos do WordPress que realmente determinam o sucesso: nomeação de directives, correspondência do namespace da store, contexto no lado do servidor e mudanças de comportamento no WordPress 6.9. Esta skill embute essas verificações, o que reduz tentativas frustradas e ajuda o agente a ler primeiro os arquivos certos.
Ela é amigável para iniciantes?
Sim, desde que você consiga descrever o objetivo e apontar o agente para a área certa do repo. Não é um tutorial para aprender toda a API do zero, mas ajuda iniciantes a evitar os erros de adoção mais comuns: root interativo ausente, namespaces divergentes e uso do caminho de renderização errado.
Quando eu não devo usá-la?
Não use para trabalho de UI em JavaScript sem relação com a WordPress Interactivity API, nem quando o recurso é puramente estático e não precisa de directives renderizadas no servidor. Também é uma escolha ruim se você não puder inspecionar os arquivos reais do repo, porque a skill depende de detalhes específicos de markup e da integração entre PHP e JS.
Como melhorar a skill wp-interactivity-api
Dê um contexto de origem mais preciso
Os melhores resultados vêm quando você mostra a superfície atual do block, theme ou plugin junto com a directive ou função exata que quer revisar. Inclua trechos ao redor de data-wp-interactive, data-wp-context e do namespace correspondente da store para que o agente compare intenção e implementação em vez de apenas inferir.
Descreva o modo de falha, não só o sintoma
Para a wp-interactivity-api skill, “o botão não faz nada” é vago demais. Entradas melhores nomeiam a quebra observável e o comportamento esperado: “o handler de clique está vinculado, mas o state não atualiza depois da renderização no servidor” ou “a hidratação funciona no primeiro carregamento, mas falha após navegação client-side”. Isso ajuda a distinguir problemas de directive de falhas de inicialização de state ou de carregamento do module.
Peça saída de leitura do repositório e depois itere
Um bom fluxo com o wp-interactivity-api guide é pedir:
- a causa raiz mais provável
- os arquivos exatos a inspecionar em seguida
- a mudança mínima de código
- qualquer risco de compatibilidade com WordPress 6.9
Depois, itere com o primeiro resultado em mãos. Se o problema for de server rendering, inclua o PHP relevante e o HTML renderizado. Se for de event handling, inclua o markup da directive e o arquivo de ações da store. Isso transforma a skill de uma ajuda de busca em uma checklist de implementação realmente útil.