DiseñoVercel Agent Skills (oficial)
Es la colección oficial de skills de Vercel, la empresa detrás de Next.js. Trae guías de buenas prácticas para React, diseño web, accesibilidad, escritura y despliegue. Es de las más útiles para un proyecto web moderno.
Revisada el 2026-09-21
- Popularidad
- 31.4k
- Licencia
- MIT
- Autor
- Vercel (empresa oficial)
- Categoría
- Diseño
Seguridad: revisada
El contenido es seguro; el instalador o el servicio externo no se auditan aquí.
¿Qué es?
Es la colección oficial de Vercel (empresa de Next.js y hosting). Son guías de buenas prácticas que tu IA aplica automáticamente cuando programas: cómo hacer React rápido, cómo cumplir normas de diseño y accesibilidad, cómo escribir bien, y cómo desplegar tu web.
Piénsalo como el manual de estilo de Vercel para webs modernas: cuando tu IA hace frontend, estas skills la obligan a seguir las reglas que usa una empresa líder.
Las 9 skills incluidas:
| Skill | Qué hace | Fase del proyecto |
|---|---|---|
| react-best-practices | 40+ reglas de rendimiento de React/Next.js | Desarrollo |
| web-design-guidelines | Revisa tu interfaz con 100+ reglas (accesibilidad, UX) | Diseño / QA |
| writing-guidelines | Revisa textos y documentación (80+ reglas) | Redacción |
| react-native-guidelines | 16 reglas para apps móviles (React Native/Expo) | Desarrollo móvil |
| react-view-transitions | Animaciones de transición entre páginas | Desarrollo |
| composition-patterns | Patrones para componentes React reutilizables | Desarrollo |
| vercel-optimize | Audita tu proyecto en Vercel: costes, velocidad, caché | Mantenimiento |
| deploy-to-vercel | Despliega tu app en Vercel (da un enlace) | Despliegue |
| vercel-cli-with-tokens | Gestiona Vercel con tokens de acceso | Despliegue |
¿Cuándo me sirve?
Cuando programas frontend o despliegas en Vercel:
- "Revisa mi interfaz contra buenas prácticas" →
web-design-guidelines. - "Optimiza mi componente React" →
react-best-practices. - "Revisa mi documentación" →
writing-guidelines. - "Despliega mi app" →
deploy-to-vercel. - "Mi web en Vercel va lenta o cara" →
vercel-optimize.
¿Esto me sirve a mí?
Sí, si haces un proyecto web (sobre todo con React/Next.js) y quieres calidad de nivel profesional sin ser experto.
| Si un día piensas... | Te da... |
|---|---|
| "Mi web React va lenta" | 40+ reglas de rendimiento |
| "¿Cumple mi web las normas de accesibilidad?" | Auditoría con 100+ reglas |
| "Quiero animaciones fluidas entre páginas" | react-view-transitions |
| "Quiero publicar mi web y tener un enlace" | deploy-to-vercel |
| "Quiero que mis textos no parezcan de IA" | writing-guidelines |
| "Uso React Native, ¿y para móvil?" | react-native-guidelines |
No te sirve si no haces frontend ni usas React/Vercel.
¿Es segura?
Veredicto: ✅ Limpia con matices.
- Las skills de calidad (React, diseño, writing, transiciones, composición): son solo texto con guías. Totalmente seguras.
vercel-optimize: usa scripts.mjsque leen tu proyecto y consultan la API de tu propia cuenta de Vercel para medir el rendimiento. No es malicioso: es una auditoría de tu propio proyecto.deploy-to-vercel(matiz): empaqueta tu proyecto y lo sube a un servicio de Vercel (claude-skills-deploy.vercel.com) para desplegarlo. Es legítimo y de Vercel, pero significa que tu código sale de tu ordenador. Como siempre, hazlo solo con proyectos que quieras publicar.vercel-cli-with-tokens(matiz): maneja tu token de acceso de Vercel (VERCEL_TOKEN). Es una credencial sensible. La skill lo trata con cuidado, pero implica dar acceso a tu cuenta.- Origen: Vercel, empresa oficial y fiable.
Casos de uso
- Auditar el diseño de tu web:
web-design-guidelines. - Optimizar React/Next.js:
react-best-practices. - Revisar tus textos y docs:
writing-guidelines. - Añadir transiciones fluidas:
react-view-transitions. - Desplegar tu proyecto:
deploy-to-vercel(devuelve un enlace). - Auditar costes y velocidad en Vercel:
vercel-optimize.
Cómo se instala
npx skills add vercel-labs/agent-skills¿Dónde funciona?
| CLI | ¿Funciona? | Notas |
|---|---|---|
| OpenCode | ✅ Sí | Vía npx skills add |
| Claude Code | ✅ Sí | Vía npx skills add |
| Codex | ✅ Sí | Vía npx skills add |
| Cursor | ✅ Sí | Vía npx skills add |
| Gemini CLI | ✅ Sí | Vía npx skills add |
| Otros | ✅ Sí | Usa el estándar Agent Skills |
Las guías son texto y funcionan en cualquier agente. Las skills de deploy/optimize necesitan la CLI de Vercel y tu cuenta.
Enlaces
- Repositorio: https://github.com/vercel-labs/agent-skills
- Catálogo: https://skills.sh/vercel-labs/agent-skills