Las mejores Claude Code Skills de 2026: qué son, cómo instalarlas y cuáles usar

Le pides a Claude Code una landing y te devuelve la de siempre: fuente Inter, degradado morado y tarjetas redondeadas. No es que no sepa hacerlo mejor; le falta el criterio de un experto. Eso es lo que le dan las Skills. Aquí tienes qué son, cómo se instalan y las que de verdad merecen la pena en 2026, cada una con su instalación grabada.

Todos los comandos se han comprobado el 7 de noviembre de 2026 en la documentación oficial y en el repositorio de cada autor. Las grabaciones de terminal muestran la salida real de cada instalación.

Qué son las Claude Code Skills

Una Skill es una carpeta con un archivo SKILL.md: instrucciones, conocimiento o un flujo de trabajo que Claude añade a su caja de herramientas. La usa solo cuando la tarea encaja, o la llamas tú escribiendo /nombre-de-la-skill. Piensa en ella como la chuleta de un experto: la de Vercel le enseña 70 reglas de rendimiento para React; la de Supabase, a escribir políticas de seguridad sin huecos.

El truco está en cómo se carga. Claude Code lee siempre la descripción de cada Skill para decidir cuál usar, pero el resto del archivo solo entra en juego cuando hace falta. Por eso puedes tener Skills largas sin gastar contexto, y por eso la descripción es lo más importante: si no explica cuándo usarla, Claude no la activará solo.

---
name: revisar-cambios
description: Resume los cambios sin confirmar y señala riesgos. Úsala cuando
  el usuario pregunte qué ha cambiado o pida un mensaje de commit.
---

1. Ejecuta git diff HEAD para ver los cambios.
2. Resume lo que ha cambiado en dos o tres viñetas.
3. Enumera los riesgos: errores sin gestionar o tests que actualizar.

¿Cuándo crear una propia? La documentación oficial lo resume así: cuando te veas pegando en el chat las mismas instrucciones por tercera vez.

Skills, MCP, plugins y CLAUDE.md: en qué se diferencian

La regla corta: MCP le da a Claude acceso a algo; una Skill le enseña a usarlo bien. Y escribir en CLAUDE.md no instala ninguna Skill.

Cómo instalar Claude Code

Necesitas un plan de pago de Claude (Pro, Max, Ultra, Team o Enterprise) o una cuenta de la Consola de Anthropic; el plan gratuito no incluye Claude Code. Abre un terminal y ejecuta el comando de tu sistema:

# macOS, Linux y WSL
curl -fsSL https://claude.ai/install.sh | bash

# Windows (PowerShell)
irm https://claude.ai/install.ps1 | iex

Abre un terminal nuevo, comprueba que responde con claude --version y entra en tu proyecto con claude. La primera vez te pedirá iniciar sesión en el navegador.

Cómo instalar Skills

La forma más sencilla es la CLI de Skills de Vercel, que funciona con Claude Code y con decenas de agentes más. Se ejecuta con npx (Node.js 22.20 o superior) y no hay que instalarla. Así se ve instalar una:

npx skills add anthropics/skills --skill frontend-design -a claude-code -y

• --skill elige una Skill concreta del repositorio. Usa el nombre que figura dentro del SKILL.md; si dudas, añade --list para verlos.
• -a claude-code la instala solo para Claude Code.
• -g la instala para todos tus proyectos. Sin él, solo para el actual (en .claude/skills/).
• -y se salta las preguntas. Quítalo si prefieres elegir paso a paso.

Algunos proyectos se distribuyen como plugins, que además traen hooks o comandos y se actualizan solos. Esos se instalan con claude plugin install o, dentro de Claude Code, desde el menú /plugin. Y como una Skill es solo una carpeta, también puedes copiarla a mano en ~/.claude/skills/ (todos tus proyectos) o en .claude/skills/ (solo uno).

Para comprobar que Claude Code las ve, escribe /skills dentro de una sesión. Si creaste la carpeta con la sesión abierta, ejecuta /reload-skills.

Las mejores Skills de 2026 para desarrollo web

Nuestro criterio: autor con experiencia real en el tema, repositorio actualizado en los últimos meses y un problema concreto resuelto. Y antes de instalar nada, tres que ya vienen con Claude Code: /code-review revisa tu código en busca de errores, /security-review busca vulnerabilidades en los cambios de tu rama y /simplify limpia lo que acabas de escribir.

frontend-design: diseño que no parece hecho por una IA

La Skill oficial de diseño de Anthropic. Hace que Claude tome decisiones de diseño deliberadas (estética, tipografía, color, composición) en vez de caer en la plantilla genérica. Sirve para crear interfaces nuevas y para rediseñar las que ya tienes. Es la de la grabación de arriba. Ver en GitHub.

Vercel: React y Next.js

vercel-react-best-practices reúne 70 reglas de rendimiento de los creadores de Next.js, ordenadas por impacto: peticiones en cascada, tamaño del bundle, renderizado en servidor y re-renders innecesarios.

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices -a claude-code -y

En el mismo repositorio tienes vercel-composition-patterns (componentes que escalan sin acumular props), web-design-guidelines (revisa tu interfaz y te devuelve los fallos con archivo y línea) y deploy-to-vercel.

Emil Kowalski: animaciones con criterio

Emil Kowalski es ingeniero de diseño, ha trabajado en Vercel y Linear y es el autor de Sonner, una librería de notificaciones para React. Sus Skills parten de una idea sencilla: los agentes no tienen buen gusto. Usan ease-in en algo que aparece cuando lo correcto es ease-out, o animan lo que debería quedarse quieto. Son 17 Skills:

npx skills add emilkowalski/skills -a claude-code -y

Las cinco que más usarás en una web:

• emil-design-eng: su filosofía de pulido de interfaces y animación. La principal.
• find-animation-opportunities: te dice qué merece moverse y qué no, con valores exactos. No toca el código.
• animate: crea una animación eligiendo bien propiedades, curva y duración.
• choreograph: coordina varios elementos que se mueven a la vez.
• review-animations: revisión estricta antes de publicar.

Para instalar solo una, añade --skill review-animations (o la que quieras). Ver la colección.

Impeccable: el revisor de diseño

Impeccable va más allá de una Skill: trae un vocabulario de comandos para pedir cambios concretos, un revisor que puntúa tu diseño y un detector con 62 reglas que caza los tics del diseño genérico (Inter en todo, degradados de morado a azul, tarjetas dentro de tarjetas). Se instala como plugin:

claude plugin marketplace add pbakaus/impeccable
claude plugin install impeccable@impeccable

Después, una vez por proyecto, ejecuta /impeccable init: lee tu código y te hace las preguntas que no puede deducir. A partir de ahí, pide cambios con un comando y un objetivo:

/impeccable critique la página de precios
/impeccable typeset el artículo del blog
/impeccable polish el formulario de registro

Tiene 24 comandos: bolder, quieter, layout, animate, audit, harden… Escribe /impeccable para ver la lista. También existe un instalador propio, npx impeccable install, que añade un hook de diseño que revisa cada archivo que edita el agente. Ver Impeccable.

Find Skills: encuentra la Skill que necesitas

Hay miles de Skills publicadas. find-skills hace que Claude las busque por ti: le preguntas «¿hay alguna Skill para auditar accesibilidad?» y te propone opciones con su comando de instalación. Instálala en global, porque te servirá siempre:

npx skills add vercel-labs/skills --skill find-skills -g -a claude-code -y

Si prefieres buscar tú, el comando npx skills find seo (o react, animation, testing…) consulta el directorio skills.sh desde el terminal.

SEO, rendimiento y accesibilidad

web-quality-skills de Addy Osmani, una referencia en rendimiento web, son seis Skills basadas en Lighthouse: seo, core-web-vitals, performance, accessibility, best-practices y web-quality-audit, que lo combina todo. Es una colección no oficial, pero trabaja con datos medidos, no con opiniones.

npx skills add addyosmani/web-quality-skills -a claude-code -y

Supabase y backend

Supabase publica dos Skills: supabase, para todo lo relacionado con su plataforma (base de datos, autenticación, Edge Functions, Storage y su integración con Next.js), y supabase-postgres-best-practices, para tablas, índices, migraciones y políticas de seguridad RLS bien hechas.

npx skills add supabase/agent-skills -a claude-code -y
npx skills list

Recuerda la diferencia: estas Skills enseñan a Claude a trabajar con Supabase. Para que consulte tu base de datos real hace falta además el servidor MCP de Supabase.

Planificar, testear y no romper nada

Superpowers, de Jesse Vincent, convierte a Claude en un equipo disciplinado: antes de programar te pregunta qué quieres conseguir, escribe un plan y lo ejecuta con tests primero, depuración sistemática y verificación antes de dar nada por terminado. Las Skills de Matt Pocock añaden grill-me, una entrevista implacable para pulir un plan, además de tdd y code-review. Ambas están en el marketplace oficial de Anthropic:

claude plugin marketplace add anthropics/claude-plugins-official
claude plugin install superpowers@claude-plugins-official
claude plugin install mattpocock-skills@claude-plugins-official

El primer comando solo hace falta si nunca has abierto Claude Code en ese ordenador: al iniciar la primera sesión, el marketplace oficial se añade solo.

Para proyectos largos, planning-with-files guarda el plan, lo investigado y el progreso en tres archivos de tu proyecto, para que puedas limpiar la conversación y retomar donde lo dejaste. Tiene versión en español:

npx skills add OthmanAdi/planning-with-files --skill planning-with-files-es -g -a claude-code -y

Elige tu pack

Instalar todo es mala idea: cada Skill añade su descripción al contexto y Claude tiene más opciones entre las que dudar. Elige tu perfil:

Prompts listos para copiar

Mencionar la Skill por su nombre ayuda a que Claude la cargue. Abre el que necesites:

Usa la skill frontend-design para rediseñar la home de este proyecto.
Público: pymes que buscan software de facturación.
Antes de escribir código, propón una dirección visual (paleta, tipografía,
estructura del hero) y explica por qué encaja.
Mantén los textos, las rutas y la estructura SEO actuales.

Usa find-animation-opportunities para revisar los componentes de app/
y dime qué merece animarse y qué no. Después implementa solo las tres
propuestas más útiles con la skill animate.
Respeta prefers-reduced-motion y anima solo transform y opacity.

Usa la skill web-quality-audit para auditar este proyecto Next.js.
Agrupa los problemas en críticos, importantes y menores.
Para cada uno: archivo, por qué importa y cómo arreglarlo.
No cambies nada todavía.

Usa las skills core-web-vitals y vercel-react-best-practices.
La home tiene un LCP de 3,8 s en móvil según PageSpeed Insights.
Encuentra la causa y arregla primero lo que más impacto tenga.
Explica cada cambio.

Quiero una app Next.js con Supabase para reservas de un gimnasio:
login con email, clases con plazas limitadas y panel de administración.
Usa las skills de Supabase. Antes de programar, escribe el plan y el
esquema de base de datos con sus políticas RLS, y espera mi aprobación.

Usa grill-me: hazme todas las preguntas necesarias sobre este proyecto
(un marketplace de profesores particulares) hasta que no queden dudas.
Después usa planning-with-files para crear el plan por fases.

Necesito generar tests end-to-end para un proyecto Next.js.
Usa find-skills para buscar opciones. Muéstrame las tres mejores
con su autor y el comando de instalación, y espera a que elija una.

Antes de instalar: seguridad

La propia CLI lo avisa al terminar cada instalación: las Skills se ejecutan con todos los permisos del agente. Pueden traer scripts, y un plugin puede añadir hooks que se ejecutan solos. Cuatro normas:

1. Instala de autores que conozcas, como Anthropic, Vercel, Supabase o profesionales con trayectoria pública.
2. Lee el SKILL.md y sus scripts si el autor no te suena.
3. Revisa los hooks de tus plugins con /hooks antes de dejar a Claude trabajando solo.
4. Haz limpieza: /doctor detecta las Skills y plugins que no usas.

Preguntas frecuentes

Por dónde empezar

Si hoy solo instalas tres, que sean find-skills para descubrir el resto cuando las necesites, frontend-design para que tus interfaces dejen de parecer generadas, y la de tu stack: vercel-react-best-practices si usas Next.js o las de Supabase si trabajas con su base de datos. Úsalas una semana en un proyecto real y añade solo lo que eches en falta. Y si lo tuyo es crear apps sin programar, echa un vistazo a nuestro análisis de Lovable.

Fuentes

• Documentación de Claude Code — Extender Claude con skills
• Documentación de Claude Code — Configuración avanzada (instalación)
• Documentación de Claude Code — Extender Claude Code
• Documentación de Claude Code — Instalar y administrar plugins
• vercel-labs/skills — CLI de Skills y find-skills
• vercel-labs/agent-skills
• anthropics/skills
• emilkowalski/skills
• pbakaus/impeccable
• supabase/agent-skills
• addyosmani/web-quality-skills
• obra/superpowers
• mattpocock/skills
• OthmanAdi/planning-with-files