Instalar skills en tu editor de código

Configurar un editor de código con inteligencia artificial va mucho más allá de pedirle que genere archivos. Existe un mecanismo estandarizado que permite indicarle cómo debe trabajar, no solo qué debe construir. Ese mecanismo se llama skills y está transformando la forma en que los equipos mantienen consistencia y calidad en sus proyectos de desarrollo.

¿Qué son las skills y por qué importan en tu flujo de trabajo?

Las skills son sets de reglas que explican cómo se deben hacer las cosas dentro de un proyecto [0:24]. No le dicen al agente qué construir, sino qué lineamientos seguir al momento de crear componentes, optimizar rendimiento o estructurar código. Por ejemplo, si pides construir un front-end, la skill aporta el contexto de buenas prácticas que la comunidad ha definido para esa tecnología.

Este estándar fue impulsado por Vercel a través del sitio skills.sh [1:10], que en el momento del registro cuenta con más de 76 216 skills disponibles para prácticamente cualquier stack tecnológico. Son open source, lo que significa que cualquier persona puede crear una skill y publicarla en el repositorio.

¿Cómo se instalan las skills en un proyecto?

La instalación es directa desde la terminal. Vercel proporcionó un comando estándar: npx skills add seguido del enlace de la skill deseada [2:42]. Al ejecutarlo se abre un CLI que detecta automáticamente qué editores compatibles tienes instalados.

• El CLI muestra los agentes disponibles y preselecciona el editor activo.
• Permite elegir entre instalación global (disponible en todos los proyectos) o por proyecto (específica para un repositorio) [3:32].
• Ofrece dos métodos de instalación: symlink (enlace simbólico, recomendado por su ligereza) o copia completa para todos los agentes [3:48].

Una vez instalada, la skill aparece dentro de la carpeta .agents/skills del proyecto. Esta es la carpeta estándar que respetan múltiples editores como Windsurf, Cursor, Cloud Code y otros [4:18].

¿Qué contiene una skill por dentro?

Cada skill es esencialmente un archivo skill.md o .markdown con instrucciones detalladas [5:30]. En el caso de las React Best Practices de Vercel, el archivo incluye:

• Tabla de contenidos e índice de reglas.
• Ejemplos de TypeScript y SVG con código funcional.
• Clasificación de reglas por impacto: crítico, alto, medio-alto, medio, medio-bajo o bajo [2:15].
• Prefijos específicos para ejecución.
• Guías de optimización del bundle size para reducir el peso de la aplicación compilada [2:24].
• Patrones de rendering performance, re-render optimization y manejo de datos desde el cliente con Next.js [2:30].

El agente lee todo este archivo para saber cómo estructurar cada componente, en lugar de basarse únicamente en su entrenamiento previo.

¿Cómo funcionan las skills al construir un proyecto real?

Con las skills instaladas y un plan de desarrollo definido previamente (en este caso generado con Cloud Code), se le pidió al editor construir el front-end de un proyecto llamado Platzi Fútbol Club [7:40]. El prompt fue sencillo: avanzar en la construcción del front respetando el plan y el documento de requerimientos.

El agente realizó las siguientes acciones de forma autónoma:

• Verificó si existía un proyecto Next.js previo.
• Identificó la fase actual del plan (fase cero: setup).
• Creó la estructura completa del mono repo con archivos de configuración [8:18].
• Instaló dependencias usando PNPM como package manager.
• Generó páginas funcionales y placeholders para iterar después.
• Detectó y corrigió errores en componentes, como props faltantes en un batch component [8:50].
• Validó respuestas HTTP hasta obtener código 200 en los endpoints [9:40].

El resultado fue un front-end con calendario, compra de entradas, listado de partidos, menú de navegación, sección de noticias con detalle funcional y páginas placeholder listas para completar [10:20].

¿Por qué elegir un editor que respete el estándar de skills?

Un dato relevante es el costo operativo. Todo el front-end generado consumió apenas seis créditos en Windsurf [11:02], gracias al modelo de trabajo basado en output. Con otro editor o modelo, el consumo podría haber sido diferente.

La portabilidad es otro factor clave. Al usar la carpeta estándar .agents en lugar de una carpeta propietaria como .windsurf, el proyecto se puede abrir en Cursor u otro editor compatible sin perder las skills configuradas [5:55]. En Cursor, por ejemplo, las skills aparecen dentro de agent settings > rules > skills.

Las skills representan un salto importante frente a las reglas individuales, memorias o workflows que se manejaban antes. Son escalables, compartibles y estandarizadas. Puedes encontrar skills para casi cualquier lenguaje y, al ser open source, crear las tuyas propias basadas en los requerimientos específicos de tu equipo [11:30].

Si ya tienes un back-end construido con Supabase, existe una skill específica para esa tecnología. Instálala en tu editor y conecta ambas capas del proyecto. Comparte cómo te fue con esa integración.