vue
Crear componentes de Vue 3 con Composition API
Los proyectos de Vue necesitan patrones consistentes para el estado, los componentes y TypeScript. Esta habilidad proporciona a Claude, Codex y Claude Code referencias enfocadas de Vue 3 para trabajos de implementación prácticos.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Recursos legibles por agentes
Usa estos enlaces cuando un AI Agent, crawler o script necesite contexto limpio en lugar de leer toda la página.
Pruébalo
Usando "vue". Un desarrollador pide un componente de tarjeta de perfil tipado.
Resultado esperado:
La habilidad ayuda a producir un plan de componente de Vue 3 con props tipadas, estado de visualización computed, acciones emitidas y notas de integración con el componente padre.
Usando "vue". Un equipo tiene lógica duplicada de fetch y carga en varios componentes.
Resultado esperado:
La habilidad sugiere una estructura de composable con valores de retorno reactivos, estado de error, estado de carga y orientación de limpieza.
Usando "vue". Un revisor no está seguro de si top-level await es apropiado.
Resultado esperado:
La habilidad destaca el requisito de un límite de Suspense y ofrece un patrón de carga con onMounted cuando convienen estados explícitos.
Auditoría de seguridad
Riesgo bajoStatic analysis reported many high and medium patterns, but review found documentation examples rather than executable skill code. Backticks, dynamic imports, fetch calls, and Vue terminology appear inside Markdown reference material and do not show command execution, exfiltration, prompt injection, or malicious intent. The skill is safe to publish with low residual risk from community-authored documentation snippets.
Problemas de riesgo bajo (4)
Factores de riesgo
⚙️ Comandos externos (4)
⚡ Contiene scripts (1)
Puntuación de calidad
Lo que puedes crear
Crear componentes tipados
Crea componentes de Vue con patrones de props, emits, slots y v-model tipados.
Refactorizar lógica compartida
Mueve comportamientos con estado repetidos a composables que preserven la reactividad y limpien los efectos secundarios.
Revisar patrones de Vue
Comprueba si el código de los componentes sigue la orientación sobre Composition API, ciclo de vida y manejo asíncrono.
Prueba estos prompts
Crea un componente de Vue 3 usando script setup y TypeScript. Incluye props tipadas, un valor computed simple y una estructura de template clara.
Actualiza este componente de Vue para usar defineEmits tipado y defineModel cuando corresponda. Explica el uso desde el componente padre en lenguaje sencillo.
Refactoriza esta lógica repetida de Vue en un composable. Preserva la reactividad después de desestructurar e incluye limpieza de efectos secundarios.
Revisa este flujo de componente asíncrono de Vue. Identifica requisitos de Suspense, estados de carga y error, limpieza de watchers y alternativas más seguras.
Mejores prácticas
- Usa script setup con TypeScript para nuevos componentes de Vue 3.
- Prefiere refs para estado que se pueda desestructurar y devuelve objetos planos desde composables.
- Limpia watchers, temporizadores y event listeners creados por lógica reutilizable.
Evitar
- No desestructures objetos reactive cuando los valores desestructurados deban seguir siendo reactivos.
- No uses top-level await sin planificar el límite de Suspense requerido.
- No mezcles props y emits sin tipado cuando los contratos de los componentes sean importantes.