Vue Best Practices skill

O que ela faz

A skill é um roteiro que o Claude segue em ordem em qualquer tarefa de Vue. O padrão é Vue 3 com Composition API, <script setup> e TypeScript. Se o projeto usa Options API ou JSX, ela manda carregar a skill irmã correspondente do mesmo repositório, se estiver instalada.

Antes de escrever, o Claude lê quatro referências obrigatórias (reatividade, arquivos .vue, fluxo de dados entre componentes e composables) e planeja quem cuida de cada parte da tela. As regras: estado mínimo e o resto calculado com computed, props descendo e eventos subindo, e v-model só quando a ligação é de mão dupla de verdade.

Slots, Teleport, KeepAlive, Suspense e animações só entram quando o pedido exige, cada um com sua referência. Otimização, como lista virtualizada e v-memo, vem depois que tudo funciona. No fim, o Claude passa por uma checagem: comportamento certo, contratos tipados, estado com dono definido e efeitos que se limpam junto com o componente.

Nas palavras de quem fez

Quando usar

• Criar uma tela nova num app ou site feito em Vue
• Quebrar um componente gigante em partes menores sem mudar o que ele faz
• Corrigir tela que não atualiza quando o dado muda
• Revisar o código Vue que o Claude escreveu antes de publicar
• Deixar uma lista longa mais rápida depois que a tela já funciona

Depois de instalar, é só pedir assim

• Cria o componente de carrinho em Vue com script setup e TypeScript
• Esse componente de cadastro está enorme, separa em partes sem mudar o que ele faz
• A lista de pedidos não atualiza quando eu edito um item, descobre o porquê e corrige

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas