Skills para Claude Code: instalarlas, revisarlas y usarlas con cabeza

Una skill es un paquete de instrucciones (a veces con scripts) que le enseña a Claude Code a hacer algo concreto: diseñar una interfaz, auditar la accesibilidad de una web, construir un servidor MCP o probar tu web con un navegador. Esta guía instala cinco muy útiles y, sobre todo, enseña a revisarlas antes, porque una skill puede ejecutar comandos en tu equipo.

Las skills se descargan de GitHub, no de un repositorio oficial de tu sistema. Trátalas como código de terceros: revísalas antes de instalarlas y pruébalas primero en un proyecto de pruebas.

Skill, programa, MCP y plugin

• Skill: instrucciones reutilizables para Claude. Viven en .claude/skills/<nombre>/SKILL.md (del proyecto) o en ~/.claude/skills/ (tuyas, para todos los proyectos).
• Programa: un ejecutable real, como agent-browser.
• MCP: un protocolo para dar herramientas o datos a un agente.
• Plugin: un paquete de Claude Code que puede traer skills, agentes, automatizaciones y MCP.

Claude Code carga una skill solo cuando su descripción encaja con lo que le pides, o cuando la llamas con /nombre. Los antiguos comandos de .claude/commands/ siguen funcionando, pero para lo nuevo se recomiendan las skills. Tienes la documentación oficial de skills.

Instalar lo necesario

Hace falta Claude Code, Git y Node 24 o superior (la herramienta skills pide Node 22.20 como mínimo y agent-browser, Node 24).

CachyOS: todo desde el repositorio oficial.

sudo pacman -S --needed claude-code git nodejs npm chromium

Windows: con WinGet, Git y Node LTS, y el instalador oficial de Claude Code:

winget install --id Git.Git -e
            winget install --id OpenJS.NodeJS.LTS -e
            irm https://claude.ai/install.ps1 | iex

En Windows nativo, Claude Code no tiene su «sandbox» (el entorno que limita lo que puede tocar). Si tu proyecto vive en Linux, usa WSL2, que sí lo tiene.

macOS (13 o posterior): las herramientas de línea de comandos (xcode-select --install), Homebrew y:

curl -fsSL https://claude.ai/install.sh -o /tmp/claude-install.sh
            less /tmp/claude-install.sh
            bash /tmp/claude-install.sh
            brew install node@24

El paso de less es para leer el instalador antes de ejecutarlo. node@24 no se añade solo al PATH: sigue lo que te indique Homebrew al terminar.

Otras distribuciones Linux: el instalador oficial (como en macOS) o los repositorios firmados de Anthropic para apt, dnf y apk. Node 24, desde tu distribución o desde nodejs.org.

Comprueba que todo responde:

claude --version
            claude doctor
            node --version
            git --version

Revisar una skill antes de instalarla

Una skill puede llevar instrucciones, scripts, direcciones web y comandos. Antes de instalar una de terceros:

1. Mira de quién es el repositorio.
2. Lee su SKILL.md.
3. Revisa los scripts y archivos que trae, y si tiene package.json, automatizaciones o configuración de MCP.
4. Busca comandos destructivos o que pidan credenciales.

Para leerla sin instalarla, clónala aparte:

git clone --depth 1 https://github.com/anthropics/skills.git
            less skills/skills/frontend-design/SKILL.md

Palabras que merecen una segunda mirada: sudo, rm -rf, curl | sh, eval, ssh, token, password, secret, api_key. Que aparezcan no prueba nada malo; que no aparezcan tampoco prueba que sea seguro.

No uses -y, --yes ni --all con una fuente nueva antes de revisarla.

La herramienta skills manda estadísticas anónimas de uso. Para desactivarlas: export DISABLE_TELEMETRY=1 en Linux y macOS, o $env:DISABLE_TELEMETRY="1" en PowerShell.

Un proyecto de pruebas

La primera vez, siempre en un repositorio que te dé igual romper:

mkdir -p ~/Proyectos/claude-skills-lab
            cd ~/Proyectos/claude-skills-lab
            git init

Instala las skills en el proyecto (.claude/skills/) mientras las pruebas; cuando ya las conozcas, puedes pasarlas a tu carpeta personal (--global).

La herramienta skills

npx skills add anthropics/skills --list
            npx skills add anthropics/skills --skill frontend-design --agent claude-code
            npx skills list --agent claude-code
            npx skills find accessibility
            npx skills remove --agent claude-code frontend-design

• add … --list: ver qué trae un repositorio sin instalar nada.
• add … --skill: instalar una concreta. Pon siempre --agent claude-code.
• use: probar una sin instalarla.
• update: actualizar. Modifica archivos; haz antes git status y revisa después con git diff.

En Windows, si falla el método de enlaces (symlinks), repite la instalación añadiendo --copy.

Las cinco skills

npx skills add vercel-labs/agent-browser --skill agent-browser --agent claude-code
            npx skills add anthropics/skills --skill mcp-builder --agent claude-code
            npx skills add anthropics/skills --skill frontend-design --agent claude-code
            npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code
            npx skills add vercel-labs/skills --skill find-skills --agent claude-code

• Agent Browser (Vercel Labs): maneja un navegador para probar tu web, rellenar formularios y seguir flujos.
• MCP Builder (Anthropic): enseña a diseñar y construir servidores MCP. No instala ninguno.
• Frontend Design (Anthropic): obliga a decidir una dirección visual antes de escribir código, para no acabar con el diseño genérico de siempre.
• Web Design Guidelines (Vercel Labs): audita la interfaz (accesibilidad, teclado, formularios, rendimiento) con las reglas más recientes de Vercel.
• Find Skills (Vercel Labs): busca otras skills.

Dentro de Claude Code, /skills muestra las que tiene cargadas. Si creaste la carpeta de skills con Claude Code abierto y no las ve, reinícialo.

El programa agent-browser

La skill de Agent Browser necesita además su programa, que se instala con npm (tampoco está en ningún repositorio oficial):

npm install -g agent-browser
            agent-browser install
            agent-browser doctor

agent-browser install descarga su propio navegador de pruebas. En CachyOS puedes usar el Chromium del sistema en su lugar, con --executable-path /usr/bin/chromium. En macOS se instala mejor con brew install agent-browser.

En Linux, no uses sudo npm. Configura antes una carpeta de usuario para npm (npm config set prefix "$HOME/.local") y añade ~/.local/bin a tu PATH.

Lo básico:

agent-browser open https://example.com
            agent-browser snapshot -i
            agent-browser screenshot
            agent-browser close

Tiene opciones para limitar lo que puede hacer, como --allowed-domains localhost,127.0.0.1 para no salir de tu web local, o --confirm-actions para que pida permiso.

Probar tu web con Agent Browser

Un buen encargo para Claude Code:

Usa Agent Browser sobre http://localhost:3000.
            No salgas de localhost. No modifiques código todavía. Usa solo datos ficticios.
            Prueba la carga inicial, la navegación, el formulario principal, los errores,
            el inicio y cierre de sesión si existe y una ruta protegida.
            Por cada fallo: pasos, qué esperabas, qué pasó, prueba y gravedad.

Después, corrige los fallos de uno en uno: que confirme la causa en el código, que ejecute las pruebas y que reproduzca el fallo para comprobar que ya no ocurre.

Agent Browser comprueba lo que se ve y se puede tocar. No demuestra que tu web sea segura por dentro: permisos del servidor, inyecciones o cifrado necesitan otras pruebas.

Encargos para las demás

MCP Builder: «Usa mcp-builder. Diseña un MCP local de ejemplo con dos herramientas, echo_text y add_numbers, sin red ni credenciales. No lo implementes todavía: explica lenguaje, archivos, permisos, errores y pruebas.»

Frontend Design: dale el producto, el público y la acción principal, y pídele que defina dirección visual, paleta, tipografía y distribución antes de tocar nada. Si el diseño ya está aprobado, dile expresamente que no lo rediseñe.

Web Design Guidelines: «Audita solo los archivos de interfaz modificados. No cambies código. Devuelve archivo y línea, gravedad, regla, impacto y la corrección mínima.» Si no puede descargar las reglas, tiene que decirlo, no inventarse la auditoría.

Find Skills: «Busca skills de pruebas de extremo a extremo. No instales ninguna. De cada una dime propietario, repositorio, qué hace, qué scripts trae y sus riesgos. Espera a que yo decida.» Las estrellas y la popularidad no son una auditoría.

Si trabajas con React o Next.js, Vercel tiene también React Best Practices. Mira su nombre exacto con npx skills add vercel-labs/agent-skills --list antes de instalarla.

En un proyecto de verdad

1. Árbol limpio
2. Revisar la skill
3. Instalar una
4. Revisar el diff
5. Tarea sin riesgo
6. Pruebas
7. Commit

Para una web, un buen orden: requisitos → Frontend Design → programar → pruebas → Web Design Guidelines → corregir → Agent Browser → volver a comprobar.

Una skill no anula tu CLAUDE.md, tus normas de seguridad, tus pruebas ni tu revisión. Y en las pruebas exploratorias, nunca uses cuentas reales.

Si algo falla

• npx skills no funciona: comprueba node --version (24 o más).
• Claude no ve la skill: npx skills list --agent claude-code, /skills y la carpeta .claude/skills/; si hace falta, reinicia Claude Code.
• Agent Browser no encuentra navegador: agent-browser doctor y lee lo que dice antes de usar --fix, que puede reinstalar el navegador y borrar su estado.
• Referencias que ya no valen (@e1, @e2…): la página cambió; haz otro snapshot -i.
• La skill acaba en otro agente: pon siempre --agent claude-code.

Para actualizar: npx skills update NOMBRE (revisando el diff) y agent-browser upgrade. Claude Code se actualiza solo o, en CachyOS, con el sistema. No borres la carpeta ~/.claude a ciegas: ahí están tus ajustes.