vue开发skill

skill de desenvolvimento vue

Documentação

vue-skills

Habilidades de agente para desenvolvimento Vue 3.

🚧 Experimento Inicial / Projeto Comunitário

Este repositório é um experimento inicial na criação de habilidades especializadas para agentes de IA aprimorarem o desenvolvimento Vue 3. As habilidades são derivadas de problemas do mundo real, mas podem estar incompletas devido a alucinações — por favor, forneça feedback. Se for valioso, pretendo propor a transferência deste projeto para a organização Vue para beneficiar a comunidade em geral.

Instalação

npx skills add vuejs-ai/skills

Claude Code Marketplace

Uma alternativa para usuários do Claude Code:

# Add marketplace
/plugin marketplace add vuejs-ai/skills

# Install all skills at once
/plugin install vue-skills-bundle@vue-skills

# Install individual skills
/plugin install vue-best-practices@vue-skills

# Install multiple skills
/plugin install vue-best-practices@vue-skills vue-router-best-practices@vue-skills

Uso

Para obter resultados mais confiáveis, prefixe seu prompt com use vue skill:

Use vue skill, <your prompt here>

Isso aciona explicitamente a habilidade e garante que a IA siga os padrões documentados. Sem o prefixo, o acionamento da habilidade pode ser inconsistente, dependendo de quão próximo seu prompt corresponde às palavras-chave de descrição da habilidade.

Habilidades Disponíveis

Habilidade	Quando usar	Descrição
vue-best-practices	Vue 3 + Composition API + TypeScript	Melhores práticas, armadilhas comuns, orientação SSR, desempenho
vue-options-api-best-practices	Options API (`data()`, `methods`)	`this` contexto, ciclo de vida, TypeScript com Options API
vue-router-best-practices	Vue Router 4	Guardas de navegação, parâmetros de rota, ciclo de vida de componente de rota
vue-pinia-best-practices	Pinia para gerenciamento de estado	Configuração de store, reatividade, padrões de estado
vue-testing-best-practices	Escrever testes de componentes ou E2E	Vitest, Vue Test Utils, Playwright
vue-jsx-best-practices	JSX em Vue	Diferenças de sintaxe em relação ao React JSX
vue-debug-guides	Depuração de problemas Vue 3	Erros de runtime, avisos, tratamento de erros assíncronos, problemas de hidratação
create-adaptable-composable	Criar composables reutilizáveis	`MaybeRef`/`MaybeRefOrGetter` padrões de entrada

Exemplos

vue-best-practices

Demonstração - Aplicativo Todo

Prompt

create a todo app

🔎 Veja a demonstração saída completa.

Mudanças após usar a habilidade

Código mais legível
Componentes divididos
Estados movidos para composables (useTodos.ts)
Use shallowRef para dados reativos primitivos (veja a referência de Reatividade)

create-adaptable-composable

Original de create-agnostic-composable de serkodev/vue-skills

Demonstração - useHidden

Prompt

create a reusable composable for controlling hidden for a element

🔎 Veja a demonstração saída completa.

Mudanças após usar a habilidade

Usado MaybeRef e MaybeRefOrGetter para parâmetros de entrada para flexibilidade de reatividade.

export interface UseHiddenOptions {
  hidden?: MaybeRef<boolean>
  initialHidden?: MaybeRefOrGetter<boolean>
  syncAria?: boolean
}

export function useHidden(
  target?: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options: UseHiddenOptions = {},
)

Metodologia

Tipos de Habilidades

As habilidades são classificadas em duas categorias:

Capacidade: A IA não pode resolver o problema sem a habilidade. Elas abordam problemas específicos de versão, comportamentos não documentados, recursos recentes ou casos extremos fora dos dados de treinamento da IA.
Eficiência: A IA pode resolver o problema, mas não bem. Elas fornecem padrões ideais, melhores práticas e abordagens consistentes que melhoram a qualidade da solução.

Processo de Validação

Cada regra de habilidade é validada por meio de avaliações automatizadas:

Linha de base: Executar sem a habilidade instalada
Com habilidade: Executar com a habilidade instalada

Uma regra é mantida somente se permitir que o modelo resolva problemas que não conseguia resolver sem ela.

Linha de base	Com Habilidade	Ação
Falha	Passa	Manter
Passa	Passa	Considerada removida

Contribuindo

O desenvolvimento acontece no branch dev. O branch main é reservado apenas para habilidades publicadas.

Crie um branch de recurso a partir de dev
Envie um PR para dev
Após aprovação, as mudanças são mescladas para dev
Mantenedores sincronizam dev → main via GitHub Action quando pronto para publicar

Projetos relacionados

antfu/skills - Coleção curada de habilidades de agente de Anthony Fu para Vue/Vite/Nuxt
vueuse/vueuse-skills - Habilidades de agente para desenvolvimento VueUse
onmax/nuxt-skills - Habilidades de agente para desenvolvimento Nuxt

Licença

MIT