vue开发skill

skill de desarrollo vue

Documentación

vue-skills

Habilidades de agente para el desarrollo de Vue 3.

🚧 Experimento temprano / Proyecto comunitario

Este repositorio es un experimento temprano en la creación de habilidades especializadas para agentes de IA para mejorar el desarrollo de Vue 3. Las habilidades se derivan de problemas del mundo real pero pueden estar incompletas debido a alucinaciones; por favor, da tu opinión. Si es valioso, planeo proponer transferir este proyecto a la organización Vue para beneficiar a la comunidad en general.

Instalación

npx skills add vuejs-ai/skills

Mercado de Claude Code

Una alternativa para usuarios de 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 obtener los resultados más fiables, prefija tu prompt con use vue skill:

Use vue skill, <your prompt here>

Esto activa explícitamente la habilidad y asegura que la IA siga los patrones documentados. Sin el prefijo, la activación de la habilidad puede ser inconsistente dependiendo de qué tan cerca coincida tu prompt con las palabras clave de descripción de la habilidad.

Habilidades disponibles

Habilidad	Cuándo usar	Descripción
vue-best-practices	Vue 3 + Composition API + TypeScript	Mejores prácticas, errores comunes, guía de SSR, rendimiento
vue-options-api-best-practices	Options API (`data()`, `methods`)	`this` contexto, ciclo de vida, TypeScript con Options API
vue-router-best-practices	Vue Router 4	Guardas de navegación, parámetros de ruta, ciclo de vida de componente de ruta
vue-pinia-best-practices	Pinia para gestión de estado	Configuración de store, reactividad, patrones de estado
vue-testing-best-practices	Escribir pruebas de componentes o E2E	Vitest, Vue Test Utils, Playwright
vue-jsx-best-practices	JSX en Vue	Diferencias de sintaxis con React JSX
vue-debug-guides	Depuración de problemas de Vue 3	Errores de ejecución, advertencias, manejo de errores asíncronos, problemas de hidratación
create-adaptable-composable	Creación de composables reutilizables	`MaybeRef`/`MaybeRefOrGetter` patrones de entrada

Ejemplos

vue-best-practices

Demo - Aplicación de Tareas

Prompt

create a todo app

🔎 Ver demo salida completa.

Cambios después de usar la habilidad

Más legible código
Componentes separados
Movió estados a composables (useTodos.ts)
Usa shallowRef para datos reactivos primitivos (ver referencia de Reactividad)

create-adaptable-composable

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

Demo - useHidden

Prompt

create a reusable composable for controlling hidden for a element

🔎 Ver demo salida completa.

Cambios después de usar la habilidad

Usó MaybeRef y MaybeRefOrGetter para parámetros de entrada para flexibilidad de reactividad.

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

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

Metodología

Tipos de habilidades

Las habilidades se clasifican en dos categorías:

Capacidad: La IA no puede resolver el problema sin la habilidad. Estas abordan problemas específicos de versión, comportamientos no documentados, características recientes o casos límite fuera de los datos de entrenamiento de la IA.
Eficiencia: La IA puede resolver el problema pero no bien. Estas proporcionan patrones óptimos, mejores prácticas y enfoques consistentes que mejoran la calidad de la solución.

Proceso de validación

Cada regla de habilidad se valida mediante evaluaciones automatizadas:

Línea base: Ejecutar sin la habilidad instalada
Con habilidad: Ejecutar con la habilidad instalada

Una regla se mantiene solo si permite al modelo resolver problemas que no podía resolver sin ella.

Línea base	Con habilidad	Acción
Falla	Pasa	Mantener
Pasa	Pasa	Considerado eliminado

Contribución

El desarrollo ocurre en la rama dev. La rama main está reservada solo para habilidades publicadas.

Crea una rama de características desde dev
Envía un PR a dev
Después de la aprobación, los cambios se fusionan en dev
Los mantenedores sincronizan dev → main mediante GitHub Action cuando estén listos para publicar

Proyectos relacionados

antfu/skills - Colección curada de Anthony Fu de habilidades de agente para Vue/Vite/Nuxt
vueuse/vueuse-skills - Habilidades de agente para el desarrollo de VueUse
onmax/nuxt-skills - Habilidades de agente para el desarrollo de Nuxt

Licencia

MIT