# Vue Best Practices

> Debe usarse para tareas de Vue.js. Recomienda firmemente Composition API con `<script setup>` y TypeScript. Cubre Vue 3, SSR, Volar y vue-tsc.

Fuente: https://skillsagentes.com/skills/antfu/skills/vue-best-practices
Markdown: https://skillsagentes.com/skills/antfu/skills/vue-best-practices.md

Repositorio: https://github.com/antfu/skills
Autor: antfu
Licencia: MIT
Actualizado: hace 7 meses
Coste de contexto: 79 tok instalada, 2.2k tok al activarse, 28k tok con todos los archivos del bundle
Bundle: 25 archivos, 109 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add antfu/skills --skill vue-best-practices --agent claude-code
# Cursor
npx -y skills add antfu/skills --skill vue-best-practices --agent cursor
# Codex
npx -y skills add antfu/skills --skill vue-best-practices --agent codex
# Gemini CLI
npx -y skills add antfu/skills --skill vue-best-practices --agent gemini
# Windsurf
npx -y skills add antfu/skills --skill vue-best-practices --agent windsurf
# Cline
npx -y skills add antfu/skills --skill vue-best-practices --agent cline
```

## Qué hace

- Impone un flujo de trabajo para tareas Vue: Composition API con `<script setup lang="ts">` por defecto
- Obliga a leer referencias sobre reactividad, SFC, flujo de datos y composables antes de codificar
- Exige planificar los límites de componentes y sus contratos props/emits antes de implementar
- Define criterios objetivos para dividir componentes en piezas más pequeñas
- Carga referencias opcionales (slots, Teleport, Suspense, animaciones, rendimiento) solo cuando el requisito lo justifica

## Cuándo usarla

- Al trabajar con archivos .vue, Vue Router, Pinia o Vite en proyectos Vue
- Para cualquier tarea de Vue.js en general
- Cuando el proyecto usa explícitamente Options API o JSX (carga skills alternativas)

## Qué la activa

- "Ayúdame a estructurar este componente Vue con Composition API"
- "Revisa este archivo .vue y aplica buenas prácticas"
- "Necesito dividir este componente Vue en piezas más pequeñas"
- "Cómo manejo el estado compartido en mi app Vue 3 con Pinia"

## Antes de instalar

- Requiere las referencias incluidas en la carpeta references/ del skill para aplicarse correctamente.

## Archivos

- LICENSE.md — 1 KB
- SKILL.md — 9 KB
- SYNC.md — 154 B
- references/animation-class-based-technique.md — 5 KB
- references/animation-state-driven-technique.md — 6 KB
- references/component-async.md — 2 KB
- references/component-data-flow.md — 7 KB
- references/component-fallthrough-attrs.md — 4 KB
- references/component-keep-alive.md — 3 KB
- references/component-slots.md — 4 KB
- references/component-suspense.md — 5 KB
- references/component-teleport.md — 3 KB
- references/component-transition-group.md — 3 KB
- references/component-transition.md — 3 KB
- references/composables.md — 7 KB
- references/directives.md — 4 KB
- references/perf-avoid-component-abstraction-in-lists.md — 5 KB
- references/perf-v-once-v-memo-directives.md — 5 KB
- references/perf-virtualize-large-lists.md — 5 KB
- references/plugins.md — 4 KB
- references/reactivity.md — 8 KB
- references/render-functions.md — 4 KB
- references/sfc.md — 6 KB
- references/state-management.md — 3 KB
- references/updated-hook-performance.md — 5 KB

## SKILL.md

No se reproduce aquí. Léelo en https://github.com/antfu/skills/blob/main/skills/vue-best-practices/SKILL.md

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [antfu](https://skillsagentes.com/creators/antfu.md) — 19 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Antfu](https://skillsagentes.com/skills/antfu/skills/antfu.md): Herramientas y convenciones de Anthony Fu para proyectos JavaScript/TypeScript: configuración de ESLint, monorepos y publicación de librerías.
- [Antfu Design](https://skillsagentes.com/skills/antfu/skills/antfu-design.md): Convenciones de diseño estilo antfu: tokens semánticos basados en clases con UnoCSS para light/dark, más reglas anti-slop y de micro-interacción para devtools y landing pages.
- [Nitro](https://skillsagentes.com/skills/antfu/skills/nitro.md): Nitro es el toolkit de servidor agnóstico de framework (usado por Nuxt) para construir y desplegar servidores web en cualquier lugar: routing, config, caching, tasks, websockets y despliegue en Node/Bun/Deno/Cloudflare/Vercel.
- [Nuxt](https://skillsagentes.com/skills/antfu/skills/nuxt.md): Framework full-stack Vue con SSR, auto-imports y routing basado en archivos. Úsalo para apps Nuxt, server routes, useFetch, middleware o hybrid rendering.
- [Pnpm](https://skillsagentes.com/skills/antfu/skills/pnpm.md): Gestor de paquetes de Node.js con resolución estricta de dependencias. Úsalo para comandos de pnpm, pnpm-workspace.yaml, catalogs, patches, overrides, config dependencies o el global virtual store.

## Skills relacionadas

- [Context Engineering](https://skillsagentes.com/skills/addyosmani/agent-skills/context-engineering.md): Optimiza la configuración del contexto del agente. Úsalo al iniciar una sesión nueva, cuando la calidad del agente empeora, al cambiar de tarea o al configurar archivos de reglas y contexto de un proyecto.
- [Deprecation And Migration](https://skillsagentes.com/skills/addyosmani/agent-skills/deprecation-and-migration.md): Gestiona la baja y migración de sistemas: retirar APIs o funciones antiguas, migrar usuarios a una nueva implementación, migrar un esquema de BD en producción (expand/contract) sin downtime, o decidir si mantener o retirar código.
- [Git Workflow And Versioning](https://skillsagentes.com/skills/addyosmani/agent-skills/git-workflow-and-versioning.md): Estructura las prácticas de flujo de trabajo en git: commits, ramas, resolver conflictos, dividir trabajo sin confirmar en commits atómicos, PRs, push, trabajo en paralelo, releases, versión semántica, tags y changelog.
- [Incremental Implementation](https://skillsagentes.com/skills/addyosmani/agent-skills/incremental-implementation.md): Entrega los cambios en fragmentos finos y verificables. Úsalo al implementar algo que toque más de un archivo, al retomar la siguiente tarea de un plan, tras un feature flag o cuando la tarea parece demasiado grande para un solo paso.
- [Performance Optimization](https://skillsagentes.com/skills/addyosmani/agent-skills/performance-optimization.md): Optimiza el rendimiento de la aplicación en frontend, backend, consultas y bases de datos. Úsalo cuando hay requisitos de rendimiento, se sospecha una regresión, hace falta mejorar Core Web Vitals o el profiling revela cuellos de botella.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)