vue-options-api-best-practices

Visão geral da skill vue-options-api-best-practices

O que esta skill ajuda você a fazer

A skill vue-options-api-best-practices é um pacote de orientação focado em escrever e revisar componentes Vue 3 que usam a Options API, especialmente quando data(), methods, lifecycle hooks e a lógica do componente baseada em this ainda são o padrão no seu codebase. O papel real dela não é ensinar Vue do zero, e sim evitar os erros específicos que tornam código em Options API frágil, mal tipado ou enganoso.

Melhor encaixe para equipes que ainda entregam com Options API

Esta skill é mais indicada para desenvolvedores frontend que mantêm migrações de Vue 2 para 3, apps Vue corporativos padronizados em Options API ou equipes que usam TypeScript com padrões mais antigos de componentes. Se no seu dia a dia você trabalha com defineComponent, tipagem de props, lifecycle hooks ou correções de problemas com this, vue-options-api-best-practices é uma escolha prática.

O que a diferencia de um prompt genérico sobre Vue

Um prompt comum pode trazer exemplos em Composition API, misturar padrões ou ignorar casos de borda do TypeScript. Esta skill permanece ancorada em soluções exclusivas de Options API e destaca armadilhas concretas, como:

• arrow functions quebrando this em methods e lifecycle hooks
• métodos com estado, usando debounce ou throttle, sendo compartilhados entre instâncias
• limitações de tipagem no TypeScript para props, computed, eventos e inject
• ressalvas de TypeScript legado em torno de validadores de props

Quando esta skill é a decisão certa de instalação

Instale vue-options-api-best-practices quando você quiser respostas consistentes e com pouca margem para adivinhação em refactors, code review, correções no estilo de lint ou ajustes seguros para migração dentro de componentes existentes em Options API. Ela é especialmente útil quando você precisa que o modelo respeite a estrutura legada em vez de “ajudar” reescrevendo tudo para Composition API.

Como usar a skill vue-options-api-best-practices

Contexto de instalação para vue-options-api-best-practices

Adicione a skill a partir do repositório vuejs-ai/skills no ambiente em que seu agente consegue acessar os arquivos do projeto. Um padrão comum de instalação é:

npx skills add vuejs-ai/skills --skill vue-options-api-best-practices

Se a sua configuração usa outro loader, o ponto importante é habilitar a pasta skills/vue-options-api-best-practices para que o agente possa ler SKILL.md e os arquivos em reference/.

Leia estes arquivos primeiro

Para esta skill, a ordem de leitura com melhor relação entre velocidade e valor costuma ser:

1. skills/vue-options-api-best-practices/SKILL.md
2. skills/vue-options-api-best-practices/reference/no-arrow-functions-in-methods.md
3. skills/vue-options-api-best-practices/reference/no-arrow-functions-in-lifecycle-hooks.md
4. skills/vue-options-api-best-practices/reference/stateful-methods-lifecycle.md
5. Referências de TypeScript que correspondam ao seu problema:
   • reference/ts-options-api-use-definecomponent.md
   • reference/ts-strict-mode-options-api.md
   • reference/ts-options-api-proptype-complex-types.md
   • reference/ts-options-api-type-event-handlers.md
   • reference/ts-options-api-provide-inject-limitations.md
   • reference/ts-options-api-computed-return-types.md
   • reference/ts-options-api-arrow-functions-validators.md

Que entrada a skill precisa

A skill vue-options-api-best-practices funciona melhor quando você fornece o componente real ou um trecho bem próximo dele, junto da restrição de que a resposta deve permanecer em Options API. Inclua:

• versão do Vue
• versão do TypeScript, se relevante
• código atual do componente
• bug, warning ou objetivo de refactor específico
• se Composition API está fora de cogitação
• se há múltiplas instâncias do componente envolvidas

Sem esse contexto, o modelo pode não captar o motivo exato de um padrão ser inseguro.

Como transformar um objetivo vago em um prompt forte

Prompt fraco:
“Fix this Vue component.”

Prompt mais forte:
“Use the vue-options-api-best-practices skill. Keep this component in Vue 3 Options API with defineComponent. Identify any this binding issues, prop typing problems, and lifecycle mistakes. If debounce or throttle is present, make sure each component instance gets its own stateful function and include cleanup in unmounted().”

Essa versão diz à skill qual régua de qualidade aplicar e o que ela não deve alterar.

Padrão de prompt para code review

Use isto ao revisar arquivos existentes:

“Apply vue-options-api-best-practices to this component. Return:

1. a short issue list grouped by severity,
2. the corrected Options API code,
3. why each change matters,
4. any TypeScript-specific follow-up needed.”

Isso funciona bem porque as referências da skill já organizam os problemas por armadilhas concretas, e não por opiniões genéricas de estilo.

Padrão de prompt para correções em TypeScript

Se o seu principal problema for tipagem, peça com versão e sintomas:

“Use vue-options-api-best-practices for Frontend Development. This is a Vue 3 Options API component on TypeScript 4.6. Fix typing for props, computed properties, event handlers, and injected values without converting to Composition API. Explain any legacy TS workaround that applies.”

Isso ativa explicitamente as referências de TypeScript da skill, incluindo a ressalva de validadores em versões anteriores à 4.7.

Regras de alto impacto que esta skill aplica bem

As verificações mais valiosas desta skill são:

• nunca usar arrow functions em methods
• nunca usar arrow functions em lifecycle hooks da Options API
• criar métodos com debounce ou throttle específicos por instância em created()
• limpar funções com estado em unmounted()
• usar defineComponent para melhorar a inferência
• usar PropType para props complexas de objeto, array, função ou union
• adicionar tipos de retorno explícitos quando a inferência de computed não estiver clara
• ter cuidado com a tipagem de inject em Options API

São esses os pontos com maior chance de gerar bugs em runtime ou erros de TS confusos.

Exemplo de uma boa solicitação de uso

Um pedido prático de vue-options-api-best-practices usage se parece com isto:

“Use vue-options-api-best-practices on the component below. Keep Options API only. Find any broken this usage, convert invalid arrow-function methods or hooks, and improve TypeScript for complex props and computed values. If any debounced method is shared across instances, move setup to created() and add teardown in unmounted().”

Como usar em um fluxo de migração

Se você está migrando um codebase aos poucos, use a skill como uma proteção de processo, não como ferramenta de reescrita em lote:

1. execute em um componente com bug concreto ou problema de tipagem
2. revise os diffs para entender as mudanças de padrão
3. transforme as correções aceitas em convenções da equipe
4. aplique o mesmo prompt em componentes semelhantes
5. só então amplie o escopo para pastas ou lotes

Isso reduz churn e mantém a skill alinhada à arquitetura já existente.

Limites práticos antes de instalar

Esta skill é estreita por design. Ela ajuda mais quando o seu componente já usa convenções de Options API. Ela é menos útil para:

• projetos em Composition API
• perguntas arquiteturais de Nuxt ou de framework fora do componente
• problemas de styling, testes ou pipeline de build
• desenho avançado de reatividade além das referências fornecidas para Options API

Se a sua principal necessidade é “me ensine Vue”, ela é especializada demais. Se a sua necessidade é “pare os erros sutis de Options API”, ela é bem direcionada.

FAQ da skill vue-options-api-best-practices

A vue-options-api-best-practices é amigável para iniciantes?

Sim, desde que você já reconheça a estrutura básica de um componente Vue. As referências são concretas e guiadas por exemplos, então iniciantes podem usar a skill para corrigir código real com segurança. Ela não é um currículo completo de Vue, mas é um guia corretivo forte para erros comuns de Options API.

Esta skill oferece suporte apenas a Vue 3?

A redação é centrada em Vue 3 com Options API, mas parte da orientação principal também se aplica a padrões de Options API no estilo Vue 2, especialmente as regras de binding de this em methods e lifecycle hooks. As recomendações de TypeScript são mais relevantes em Vue 3 com defineComponent.

A vue-options-api-best-practices é melhor do que um prompt comum?

Para esse nicho, em geral sim. O principal valor está no controle de escopo: ela mantém as respostas em Options API, destaca armadilhas conhecidas e evita o conselho genérico de “simplesmente reescreva para Composition API”. Isso a torna mais útil para equipes de manutenção e fluxos de code review.

Quando eu não devo usar vue-options-api-best-practices?

Não escolha vue-options-api-best-practices se o seu projeto é principalmente Composition API, <script setup> ou código específico de framework em que as preocupações da Options API são secundárias. Ela também não é a skill certa para arquitetura frontend geral ou problemas não relacionados de tooling em TypeScript.

A instalação de vue-options-api-best-practices inclui automação?

Não há evidência de scripts empacotados ou verificações automatizadas nesta pasta da skill. O valor está na curadoria das referências, não em tooling. Trate vue-options-api-best-practices install como ativação de conhecimento para o seu agente, não como substituto de linter.

Ela ajuda com as dores do strict mode no TypeScript?

Sim. Esse é um dos motivos mais fortes para usar a skill. Ela direciona você para defineComponent, tratamento mais estrito de this, tipagem de props complexas com PropType, tipagem de event handlers, anotações de retorno em computed e limitações de inject na Options API que costumam confundir equipes em strict mode.

Como melhorar a skill vue-options-api-best-practices

Dê ao modelo o contexto completo do componente

A forma mais rápida de melhorar a qualidade de saída da vue-options-api-best-practices é colar o componente inteiro em vez de linhas isoladas. Muitas das verificações da skill dependem de como data, methods, props, hooks e reutilização de instância interagem entre si.

Deixe a restrição inegociável explícita

Se você precisa permanecer em Options API, diga isso de forma direta:
“Do not convert to Composition API.”
Essa única frase evita a resposta fora do alvo mais comum em ambientes Vue mistos.

Inclua detalhes de versão que mudam a recomendação

Algumas orientações dependem de versão, especialmente no TypeScript. Se você está em uma versão anterior à 4.7, a solução alternativa para validator/default com arrow functions pode ser relevante. Se você omitir as versões, o modelo pode dar um conselho moderno e tecnicamente correto, mas inviável na sua stack.

Peça detecção de problemas antes da reescrita

Em geral, a saída melhora com uma instrução em duas etapas:

1. identificar todas as violações de boas práticas da Options API
2. depois produzir o código corrigido

Isso reduz correções parciais e ajuda você a verificar se o modelo realmente captou as armadilhas relevantes da vue-options-api-best-practices.

Destaque explicitamente o risco de instâncias compartilhadas

Se o seu componente aparece em uma lista ou é instanciado muitas vezes, mencione isso. Isso aumenta a chance de a skill identificar o problema de métodos com estado em que debounce ou throttle é definido em methods em vez de ser criado por instância em created().

Peça explicações vinculadas a mudanças específicas

Um prompt de alta qualidade é:
“Fix the code and explain each change in one sentence.”
Isso deixa a resposta mais fácil de auditar e torna mais simples aplicar o mesmo padrão em outras partes do seu codebase frontend.

Modos de falha comuns para observar

Mesmo com vue-options-api-best-practices, revise as saídas procurando por:

• reescritas acidentais para Composition API
• arrow functions ainda presentes em methods ou lifecycle hooks
• funções com debounce criadas uma vez e compartilhadas entre instâncias
• ausência de cleanup em unmounted()
• tipagem vaga de props onde PropType é necessário
• excesso de confiança em torno de inject tipado na Options API

Esses são os pontos em que a correção importa mais do que o estilo.

Melhore a reutilização criando templates de prompt

Para equipes, crie um prompt padrão de vue-options-api-best-practices guide para tarefas comuns:

• code review
• correção de bug
• limpeza para TS strict-mode
• refactor seguro para migração

Isso torna as saídas mais consistentes e reduz o retrabalho com prompt engineering.

Itere depois da primeira resposta

Se o primeiro resultado estiver perto do ideal, mas incompleto, faça um follow-up direcionado:
“Re-check for any remaining Options API this binding issues and TS typing gaps. Keep the previous structure.”
Prompts curtos e iterativos costumam funcionar melhor do que pedir de saída uma resposta enorme e perfeita.

Use como padrão de revisão, não apenas como ferramenta de resgate

O melhor uso de longo prazo de vue-options-api-best-practices for Frontend Development é preventivo. Execute a skill em componentes novos durante a revisão, não apenas depois que os bugs aparecem. O valor dela se acumula quando vira um verificador recorrente de padrões para trabalho com Vue legado de forma segura.