vue

Visão geral da skill vue

Para que serve a skill vue

A skill vue é um guia focado em gerar e revisar código Vue 3 com boas práticas atuais, especialmente Composition API, <script setup lang="ts">, compiler macros, APIs de reatividade e componentes nativos como Transition, Teleport, Suspense e KeepAlive. Ela é mais útil quando você quer que um agente de IA produza Vue Single File Components que já sigam um estilo moderno de Vue, em vez de cair em padrões mais antigos da Options API.

Quem deve instalar esta skill vue

Esta vue skill atende bem desenvolvedores frontend, full-stack e usuários de IA que pedem com frequência componentes Vue, composables ou refactors. Ela é especialmente valiosa se você quer saídas com foco em TypeScript, consciência de macros e alinhadas com a documentação da era Vue 3.5, em vez de hábitos misturados de Vue 2 com início do Vue 3.

O trabalho real que ela resolve

A maioria dos usuários não precisa de um resumo genérico do framework. Precisa que o agente escreva código Vue com consistência, de forma que:

• use Composition API por padrão
• prefira <script setup lang="ts">
• trate defineProps, defineEmits e defineModel corretamente
• escolha ref, shallowRef, computed e watch com mais critério
• recorra a recursos nativos avançados só quando realmente fizer sentido

Esse é o valor prático de vue for Frontend Development: reduzir o retrabalho de limpeza depois do código gerado por IA.

O que diferencia esta skill de forma relevante

O principal diferencial é a orientação opinativa. A fonte prefere explicitamente TypeScript, <script setup lang="ts"> e Composition API, e desincentiva Reactive Props Destructure. Ela também inclui referências focadas em:

• macros de script setup
• reatividade e APIs centrais mais novas
• componentes e diretivas nativos avançados

Isso torna a skill melhor para trabalho de implementação do que um prompt amplo do tipo “me ensine Vue”.

O que esta skill não tenta cobrir

Isto não é um mapa completo do ecossistema Vue. Não substitui documentação aprofundada sobre routing, bibliotecas de estado, frameworks SSR, testes ou tooling de build. Se sua principal tarefa envolve arquitetura com Nuxt, configuração de Vue Router, modelagem com Pinia ou pipelines de deploy, a skill vue ajuda no estilo de código em nível de componente, mas não deve ser sua única fonte.

Como usar a skill vue

Contexto de instalação da vue

Instale a skill no seu ambiente com suporte a skills usando:

npx skills add antfu/skills --skill vue

As evidências no repositório mostram que a skill fica em skills/vue dentro de antfu/skills. Não há aqui uma instalação separada do próprio Vue; trata-se de orientação para melhorar a geração assistida por IA em Vue, não do runtime do framework.

Leia estes arquivos primeiro

Se você quiser o caminho de maior sinal antes de usar a vue skill, leia estes arquivos nesta ordem:

1. skills/vue/SKILL.md
2. skills/vue/references/script-setup-macros.md
3. skills/vue/references/core-new-apis.md
4. skills/vue/references/advanced-patterns.md
5. skills/vue/GENERATION.md

Por que nessa ordem:

• SKILL.md traz as preferências operacionais e o escopo.
• Os três arquivos de referência concentram os detalhes práticos que o agente tende a aplicar.
• GENERATION.md informa que o material é gerado a partir da documentação do Vue e acompanha um snapshot recente.

Quais entradas a skill vue precisa

A qualidade de vue usage depende muito do pedido que você envia. Forneça ao agente:

• objetivo do componente
• props e eventos emitidos
• se você precisa de v-model
• formato esperado do estado
• necessidades de dados assíncronos
• se a saída deve ser um componente, composable ou exemplo de padrão
• restrições de versão do Vue, caso você não esteja em um Vue 3 recente
• exigência de TypeScript
• quaisquer restrições de UI ou performance

Entrada fraca:

• “Crie um componente Vue para busca.”

Entrada forte:

• “Create a Vue 3.5 SFC using <script setup lang="ts"> for a searchable product list. Props: items, loading, modelValue. Emit update:modelValue and select. Use defineModel if appropriate, debounce local search input, and prefer shallowRef for large item arrays.”

Como transformar objetivos vagos em bons prompts de vue

Para acionar bem a skill vue, peça explicitamente pelas escolhas de implementação. Uma boa estrutura de prompt é:

1. dizer qual artefato você quer
2. informar as convenções Vue
3. definir entradas e saídas
4. adicionar comportamentos e restrições
5. pedir justificativa quando houver tradeoffs relevantes

Exemplo:

“Using the vue skill style, write a Vue 3 component with <script setup lang="ts">. Use Composition API only. Define typed props and emits, avoid Options API, and explain whether ref or shallowRef is the better fit for the main state. Include template and minimal styles.”

Isso funciona melhor do que um pedido genérico como “escreva em Vue”, porque combina com as preferências embutidas da skill.

Estilo de código padrão para o qual a skill vai direcionar

O material de origem empurra fortemente o agente para:

• Vue 3.5
• Composition API
• <script setup lang="ts">
• definições de componente baseadas em macros
• props e emits tipados
• uso seletivo de shallowRef para dados sensíveis a performance

Se você quer Options API, JavaScript puro ou padrões legados de Vue, deixe isso explícito, porque a skill tem viés contra esses caminhos.

Melhores casos de uso de vue usage

Este vue guide é mais forte para:

• criar novos Vue SFCs
• refatorar componentes antigos para <script setup>
• definir props, emits e models tipados
• escolher entre ref, reactive, computed e watchers
• usar Transition, Teleport, Suspense ou KeepAlive
• produzir exemplos de composables que sigam padrões modernos de Vue

Ele é menos útil para trabalho puramente visual de design ou tarefas frontend independentes de framework.

Fluxo de trabalho prático para a primeira saída

Um fluxo confiável é:

1. Peça uma primeira versão de um Vue SFC com props, emits e formato de estado explícitos.
2. Revise se a API gerada bate com o contrato real do seu componente.
3. Peça uma segunda passada ajustando melhor as escolhas de reatividade, tipagem e edge cases.
4. Só então peça recursos avançados como transições ou boundaries de suspense.

Essa sequência importa porque recursos avançados do Vue são fáceis de exagerar quando o fluxo básico de estado ainda não está claro.

Detalhes do repositório que afetam a qualidade da saída

Detalhes úteis revelados pela fonte da skill:

• defineModel é tratado como disponível no Vue 3.4+
• withDefaults continua relevante para Vue 3.4 e anteriores
• reactive() perde reatividade ao fazer destructuring
• shallowRef é preferido quando reatividade profunda não é necessária
• componentes nativos como Transition e Suspense são cobertos com padrões práticos

São exatamente esses tipos de detalhe que elevam o código gerado além de uma leitura superficial do repositório.

Exemplos de pedidos que combinam bem com a skill

Bons pedidos de vue usage:

• “Refactor this Options API component into <script setup lang="ts">.”
• “Generate typed defineProps and defineEmits for this form component.”
• “Show a Vue 3 example using Teleport for a modal.”
• “Explain whether to use watch, watchEffect, or computed here.”
• “Rewrite this component to use defineModel on Vue 3.4+.”

Casos comuns de desalinhamento antes de instalar

Não espere que a vue skill, sozinha, resolva:

• scaffolding de projeto
• arquitetura de router
• modelagem de store de estado em uma aplicação grande
• decisões específicas de SSR ou Nuxt
• configuração de test runner
• detalhes de integração com framework CSS

Se esses forem seus principais bloqueios, instale a skill pela qualidade na geração de componentes, não como guia completo da sua stack Vue.

FAQ da skill vue

Esta skill vue é boa para iniciantes?

Sim, se você já está construindo com Vue 3 e quer saídas de IA mais limpas. Ela não é um currículo para iniciantes, mas reduz a confusão ao favorecer um estilo claro: Composition API com <script setup lang="ts">. Essa consistência ajuda usuários mais novos a evitar padrões misturados.

A skill vue oferece suporte a padrões antigos de Vue?

Não como primeira escolha. A fonte diz para sempre usar Composition API em vez de Options API. Se seu codebase é carregado de legado, você ainda pode usar a skill, mas deve pedir explicitamente restrições de compatibilidade e revisar migrações com cuidado.

Em que isso difere de um prompt comum sobre Vue?

Um prompt comum muitas vezes produz código Vue inconsistente: APIs misturadas, tipagem mais fraca ou macros desatualizadas. A vue skill dá ao agente um playbook mais restrito, incluindo preferências, uso moderno de macros e referências direcionadas. Isso normalmente significa menos correção manual.

Instalar vue é suficiente se eu trabalho com Nuxt ou uma stack maior?

Não. vue install ajuda com orientação para componentes e reatividade, mas preocupações de stack maior ainda exigem conhecimento de Nuxt, routing, estado, data fetching e deploy. Use isso como uma camada de geração de código Vue, não como uma skill de arquitetura completa de aplicação.

Quando eu não devo usar a skill vue?

Evite quando sua tarefa for:

• código de UI neutro em relação a framework
• trabalho com React/Angular/Svelte
• implementação somente de backend
• convenções fortemente específicas de Nuxt com pouco trabalho direto em componentes Vue
• manutenção rígida de Options API legada, em que padrões modernos não são permitidos

Ela cobre recursos avançados de Vue?

Sim, mas de forma seletiva. As referências incluídas cobrem Transition, Teleport, Suspense, KeepAlive, diretivas, APIs de reatividade, lifecycle hooks e macros. Isso é suficiente para muitas tarefas reais de frontend sem tentar virar uma enciclopédia completa de Vue.

Como melhorar a skill vue

Informe ao agente os limites de versão e compatibilidade

A skill se baseia em orientações da era Vue 3.5. Se seu app usa Vue 3.3, 3.4 ou tem limites mais antigos de suporte a macros, diga isso logo no início. Isso é especialmente importante para recursos como defineModel e para a forma como defaults são tratados em props.

Especifique contratos de componente, não apenas ideias de UI

A forma mais rápida de melhorar a saída de vue é fornecer:

• nomes e tipos das props
• eventos emitidos
• bindings de model
• estados assíncronos
• estados vazio e de erro
• responsabilidades entre componente pai e filho

A skill é forte na implementação quando o contrato está claro. Ela é mais fraca quando precisa inferir uma API completa a partir de uma descrição vaga de UI.

Peça explicitamente pelas escolhas de reatividade

Muitos erros em Vue vêm da modelagem de estado, não da sintaxe do template. Inclua no prompt tradeoffs como:

• “Use shallowRef if deep tracking is unnecessary.”
• “Explain whether computed or watch is more appropriate.”
• “Avoid destructuring reactive objects unless using toRefs.”

Isso se alinha com o material mais forte das referências e melhora mais a qualidade do código do que pedir “best practices” de forma abstrata.

Detecte cedo os modos de falha mais comuns

Revise as primeiras saídas procurando por estes problemas:

• Options API aparecendo quando você queria Composition API
• <script> simples em vez de <script setup lang="ts">
• defineProps ou defineEmits sem tipagem
• reatividade profunda desnecessária
• uso indevido de watchers quando computed seria mais simples
• componentes nativos avançados adicionados sem necessidade real

Essas são as formas mais prováveis de uma geração genérica se afastar do padrão de qualidade que a skill pretende entregar.

Faça iterações focando em uma preocupação por vez

Depois da primeira resposta, não peça tudo de uma vez. Melhore em etapas:

1. formato da API
2. tipagem e macros
3. correção da reatividade
4. estados de renderização
5. padrões avançados de UX

Isso facilita verificar cada mudança e mantém o agente ancorado no vue guide, em vez de regenerar o componente inteiro de forma imprevisível.

Use os arquivos de referência como caminho de escalonamento

Quando o primeiro resultado estiver perto do ideal, mas ainda não sólido, direcione o agente para as próprias referências da skill:

• references/script-setup-macros.md para props, emits, models, slots e sintaxe de macros
• references/core-new-apis.md para reatividade, watchers e composables
• references/advanced-patterns.md para componentes e diretivas nativos

Essa é uma das formas mais práticas de melhorar saídas de vue for Frontend Development sem reescrever seu prompt do zero.

Peça uma versão mínima e uma versão de produção

Um padrão de alto retorno é:

• primeiro pedido: SFC mínimo e funcional
• segundo pedido: versão de produção com tipagem, estados, acessibilidade e escolhas de performance

Isso evita rascunhos iniciais inchados e evidencia onde as decisões específicas de Vue realmente importam.

Mantenha a skill alinhada com as regras do seu codebase

Se sua equipe tem convenções diferentes dos padrões da skill, diga isso diretamente. Por exemplo:

• apenas JavaScript
• sem defineModel
• evitar Suspense
• usar objetos de props explícitos em vez de declarações só de tipo
• sem componentes nativos avançados, a menos que sejam pedidos

A vue skill é opinativa, o que é útil, mas você vai obter os melhores resultados quando os defaults dela forem ajustados às restrições reais do seu repositório.