Las skills de Vercel para que tu IA haga y publique mejores páginas
Vercel es la empresa donde se publican millones de sitios web, y liberó gratis la colección de skills que usa su propio equipo. Con ellas, tu IA revisa tu página contra más de 100 reglas de diseño y accesibilidad, y la publica en internet con un link. Tiene más de 33 mil estrellas en GitHub.
Qué es una skill
Una skill es un paquete de instrucciones que le enseña a tu IA a hacer una tarea como la hace un experto. La instalas una vez y la IA la usa sola cuando le pides algo relacionado, sin que tengas que explicarle todo de nuevo.
Estas funcionan en Claude Code y en otros agentes de programación como Cursor o Codex. Lo bueno de esta colección es que viene de la gente que más sabe de publicar sitios web, no de un tutorial cualquiera.
Las tres que más te sirven
Si estás armando tu página con IA, partiría por estas.
Revisa tu página
web-design-guidelines revisa tu página contra más de 100 reglas: que se lea bien, que funcione en el celular, que los formularios no frustren, que las imágenes no la pongan lenta y que la pueda usar una persona con discapacidad.
Publícala con un link
deploy-to-vercel sube tu página a Vercel y te devuelve el link. Si todavía no tienes cuenta, igual te deja una versión temporal para que la veas en internet y la reclames después.
Que cargue rápido
react-best-practices son más de 40 reglas del equipo de Vercel para que una página hecha en React o Next.js cargue rápido. Si tu página es HTML simple, esta no la necesitas.
Las ocho de la colección
Las demás son más técnicas. Te dejo para qué sirve cada una, por si alguna calza con lo que estás haciendo.
| Skill | Qué hace | Te sirve si |
|---|---|---|
| web-design-guidelines | Revisa diseño, accesibilidad y experiencia de uso | Tienes cualquier página web |
| deploy-to-vercel | Publica tu proyecto y te da el link | Quieres tu página en internet |
| react-best-practices | Reglas de velocidad para React y Next.js | Tu página está hecha en React o Next.js |
| vercel-optimize | Revisa tu proyecto en Vercel para bajar costos y hacerlo más rápido | Ya pagas Vercel o tu proyecto tiene mucho tráfico |
| react-view-transitions | Animaciones suaves al pasar de una página a otra | Quieres que la navegación se sienta como una app |
| composition-patterns | Ordena el código de los componentes de React | Tu proyecto creció y se está volviendo un enredo |
| react-native-guidelines | Buenas prácticas para apps de celular | Estás haciendo una app con React Native o Expo |
| writing-guidelines | Revisa textos con el manual de escritura de Vercel | Escribes documentación en inglés |
Según el repositorio oficial, noviembre de 2026. Las reglas están escritas en inglés, pero tu IA te explica los resultados en español si se lo pides.
Cómo instalarlas
Si tienes Claude Code, copia este mensaje y él hace la instalación. Si todavía no lo tienes, en esta guía te explico cómo instalarlo.
Quiero instalar las skills oficiales de Vercel: https://github.com/vercel-labs/agent-skills Usa su instalador oficial (npx skills add vercel-labs/agent-skills) e instala solo estas tres, para Claude Code: web-design-guidelines, deploy-to-vercel y react-best-practices. Yo no sé de programación: explícame cada paso en simple y pídeme aprobación antes de hacerlo. Al terminar, dime cómo compruebo que quedaron instaladas y dame un ejemplo de cómo pedirte que uses cada una.
Claude Code te va a pedir permiso para descargar el instalador. Es lo normal. Si quieres las ocho, cambia la segunda línea por «instala todas».
Cómo usarlas
No tienes que llamarlas por su nombre, la IA las usa sola cuando le pides algo que calza. Abre Claude Code en la carpeta de tu página y prueba con estos dos.
Revisa mi página con la skill web-design-guidelines. Explícame en simple qué está mal, ordenado de lo más importante a lo menos importante, y pídeme aprobación antes de arreglar cada cosa.
Publica mi página en Vercel y dame el link. Si no tengo cuenta, explícame cómo crearla o usa la versión temporal, y dime cuánto dura antes de que se borre.
Úsalas con criterio
Las skills le dan muy buen criterio a tu IA, pero igual revisa tú lo que cambia antes de publicar. Una página revisada contra 100 reglas no reemplaza mirarla tú en tu celular.
Si publicas sin cuenta, Vercel te da dos links: el de la página, que puedes compartir, y uno para reclamarla, que es solo para ti. Si no la reclamas antes de que venza, la página se borra. Y el link de reclamo no se lo mandes a nadie, porque quien lo abra se queda con la página.
Una skill son instrucciones que tu IA sigue al pie de la letra, así que una skill mala puede hacer cosas que no quieres. Esta colección es la oficial de Vercel, pero cualquier skill que encuentres por ahí, revísala antes de instalarla.
De quién es
La colección es de Vercel, publicada en su cuenta de proyectos experimentales, vercel-labs. Tiene más de 33 mil estrellas en GitHub, se actualiza seguido y es gratis, con licencia MIT. Ver el repositorio ↗ · skills.sh ↗
Si te sirvió esto, en recursos tengo más cosas del mismo estilo, todas gratis y explicadas para gente que no programa.