Vercel ha lanzado Agent-Skills, una colección de habilidades que convierte los manuales de mejores prácticas en habilidades reutilizables para los agentes de codificación de IA. El proyecto sigue la especificación Agent Skills y se centra primero en el rendimiento de React y Next.js, la revisión del diseño web y las implementaciones reclamables en Vercel. Las habilidades se instalan con un comando similar a npm y luego son descubiertas por agentes compatibles durante los flujos de codificación normales.
Formato de habilidades del agente
Agent Skills es un formato abierto para empaquetar capacidades para agentes de IA. Una habilidad es una carpeta que contiene instrucciones y scripts opcionales. El formato está diseñado para que diferentes herramientas puedan entender el mismo diseño.
Una habilidad típica en vercel-labs/agent-skills tiene tres componentes principales:
SKILL.md para instrucciones en lenguaje natural que describen lo que hace la habilidad y cómo debe comportarse. Un directorio de scripts para comandos auxiliares que el agente puede llamar para inspeccionar o modificar el proyecto. Un directorio de referencias opcional con documentación o ejemplos adicionales.
react-best-practices también compila sus archivos de reglas individuales en un único archivo AGENTS.md. Este archivo está optimizado para agentes. Agrega las reglas en un documento que se puede cargar como fuente de conocimiento durante una revisión o refactorización del código. Esto elimina la necesidad de ingeniería rápida ad hoc por proyecto.
Habilidades básicas en vercel-labs/agent-skills
Actualmente, el repositorio presenta tres habilidades principales que apuntan a flujos de trabajo front-end comunes:
1. reaccionar-mejores-practicas
Esta habilidad codifica la guía de rendimiento de React y Next.js como una biblioteca de reglas estructurada. Contiene más de 40 reglas agrupadas en 8 categorías. Estos cubren áreas como la eliminación de cascadas de red, reducción del tamaño del paquete, rendimiento del lado del servidor, obtención de datos del lado del cliente, comportamiento de re-renderizado, rendimiento de renderizado y microoptimizaciones de JavaScript.
Cada regla incluye una calificación de impacto. Los problemas críticos se enumeran primero y luego los cambios de menor impacto. Las reglas se expresan con ejemplos de código concretos que muestran un antipatrón y una versión corregida. Cuando un agente compatible revisa un componente de React, puede asignar los hallazgos directamente a estas reglas.
2. pautas-de-diseño-web
Esta habilidad se centra en la interfaz de usuario y la calidad de la experiencia del usuario. Incluye más de 100 reglas que abarcan accesibilidad, manejo de enfoque, comportamiento de formularios, animación, tipografía, imágenes, rendimiento, navegación, modo oscuro, interacción táctil e internacionalización.
Durante una revisión, un agente puede usar estas reglas para detectar atributos ARIA faltantes, asociaciones de etiquetas incorrectas para controles de formulario, uso indebido de la animación cuando el usuario solicita movimiento reducido, texto alternativo faltante o carga diferida en imágenes y otros problemas que son fáciles de pasar por alto durante la revisión manual.
3. vercel-implementación-reclamable
Esta habilidad conecta el ciclo de revisión del agente con la implementación. Puede empaquetar el proyecto actual en un tarball, detectar automáticamente el marco basado en package.json y crear una implementación en Vercel. El script puede reconocer más de 40 frameworks y también admite sitios HTML estáticos.
La habilidad devuelve dos URL. Una es una URL de vista previa del sitio implementado. La otra es una URL de reclamo. La URL de reclamo permite a un usuario o equipo adjuntar la implementación a su cuenta de Vercel sin compartir las credenciales del entorno original.
Flujo de instalación e integración.
Las habilidades se pueden instalar desde la línea de comando. El anuncio de lanzamiento destaca un camino sencillo:
Este comando recupera el repositorio de habilidades del agente y lo prepara como un paquete de habilidades.
Vercel y el ecosistema circundante también proporcionan una CLI de habilidades adicionales que está diseñada para conectar habilidades a agentes específicos. Un flujo típico se ve así:
add-skill escanea los agentes de codificación instalados comprobando sus directorios de configuración. Por ejemplo, Claude Code usa un directorio .claude y Cursor usa .cursor y un directorio debajo de la carpeta de inicio. Luego, la CLI instala las habilidades elegidas en las carpetas de habilidades correctas para cada herramienta.
Puede llamar a add-skill en modo no interactivo para controlar exactamente lo que está instalado. Por ejemplo, puedes instalar solo la habilidad React para Claude Code a nivel global:
También puede enumerar las habilidades disponibles antes de instalarlas:
Después de la instalación, las habilidades se guardan en directorios específicos del agente, como ~/.claude/skills o .cursor/skills. El agente descubre estas habilidades, lee SKILL.md y luego puede enrutar las solicitudes de los usuarios relevantes a la habilidad correcta.
Después de la implementación, el usuario interactúa mediante lenguaje natural. Por ejemplo, “Revise este componente para detectar problemas de rendimiento de React” o “Consulte esta página para detectar problemas de accesibilidad”. El agente inspecciona las habilidades instaladas y utiliza las mejores prácticas de reacción o pautas de diseño web cuando corresponde.
Conclusiones clave
vercel-labs/agent-skills implementa la especificación Agent Skills, empaquetando cada capacidad como una carpeta con SKILL.md, scripts opcionales y referencias, para que diferentes agentes de codificación de IA puedan consumir el mismo diseño de habilidades. Actualmente, el repositorio incluye 3 habilidades, mejores prácticas de reacción para el rendimiento de React y Next.js, pautas de diseño web para revisión de UI y UX, y vercel-deploy-claimable para crear implementaciones reclamables en Vercel. reaccionar-mejores prácticas codifica más de 40 reglas en 8 categorías, ordenadas por impacto, y proporciona ejemplos de código concretos, lo que permite a los agentes ejecutar revisiones de desempeño estructuradas en lugar de verificaciones basadas en avisos ad hoc. web-design-guidelines proporciona más de 100 reglas sobre accesibilidad, manejo de enfoque, formularios, animación, tipografía, imágenes, rendimiento, navegación, modo oscuro, interacción táctil e internacionalización, lo que permite controles sistemáticos de calidad de la interfaz de usuario por parte de los agentes. Las habilidades se instalan a través de comandos como npx skills i vercel-labs/agent-skills y npx add-skill vercel-labs/agent-skills, y luego se descubren en directorios de habilidades específicas del agente, lo que convierte las bibliotecas de mejores prácticas en bloques de construcción reutilizables y controlados por versiones para flujos de trabajo de codificación de IA.
Consulte el repositorio de GitHub. Además, no dude en seguirnos en Twitter y no olvide unirse a nuestro SubReddit de más de 100.000 ML y suscribirse a nuestro boletín. ¡Esperar! estas en telegrama? Ahora también puedes unirte a nosotros en Telegram.
Michal Sutter es un profesional de la ciencia de datos con una Maestría en Ciencias de Datos de la Universidad de Padua. Con una base sólida en análisis estadístico, aprendizaje automático e ingeniería de datos, Michal se destaca en transformar conjuntos de datos complejos en conocimientos prácticos.