01 Qué aporta cada skill
Una skill es una carpeta con instrucciones (un SKILL.md y, a veces, scripts o referencias) que Claude carga cuando la tarea lo pide. No cambian el modelo: le dan un procedimiento probado para un tipo de trabajo concreto. Estas cinco se complementan bien porque cubren fases distintas de un proyecto.
find-skills (Vercel Labs)
Enseña a Claude a buscar en el catálogo abierto de skills con npx skills find y a proponerte la que encaja con lo que pides. Es la puerta de entrada a las demás.
mcp-builder (Anthropic)
Una guía para que Claude escriba servidores MCP de calidad en Python (FastMCP) o TypeScript, en cuatro fases: investigar, construir, revisar y evaluar.
agent-browser (Vercel Labs)
Un CLI en Rust que controla Chrome y devuelve un árbol de accesibilidad con referencias numeradas (@e1, @e2) en lugar de capturas, lo que ahorra mucho contexto.
web-design-guidelines (Vercel Labs)
Un revisor: descarga las Web Interface Guidelines de Vercel y devuelve los problemas en formato archivo:línea. No modifica nada por sí mismo.
frontend-design (Anthropic)
Empuja a Claude a tomar decisiones visuales deliberadas (paleta, tipografía, composición) en lugar de caer en plantillas genéricas al construir interfaces.
02 Instalación
Todas se instalan con npx skills, el gestor de paquetes del ecosistema abierto de skills. Su sintaxis es npx skills add propietario/repo y, si el repositorio contiene varias, --skill nombre para elegir una. Por defecto instala en el proyecto actual; con -g lo hace para tu usuario y con -a claude-code te ahorras la pregunta de a qué agente va destinada.
# 1. Buscar skills
npx skills add vercel-labs/skills --skill find-skills
# 2. Crear servidores MCP
npx skills add anthropics/skills --skill mcp-builder
# 3. Navegador para agentes: CLI + Chrome de pruebas + skill
npm install -g agent-browser
agent-browser install
npx skills add vercel-labs/agent-browser
# 4. Auditoría de interfaz
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
# 5. Diseño de frontend
npx skills add anthropics/skills --skill frontend-design03 Cómo encajan en un proyecto
-
1
Detecta lo que te falta
Cuando una tarea se repite o se te atasca, pídele a Claude que busque una skill. find-skills consultará el catálogo y te propondrá opciones con su comando, sin instalar nada hasta que digas que sí.
-
2
Conecta tus herramientas
Si trabajas con un CRM, un ERP o una API interna sin conector, mcp-builder guía a Claude para crear el servidor MCP que la expone como herramientas.
-
3
Prueba en un navegador real
Con agent-browser, Claude abre tu web, rellena formularios, comprueba que los enlaces funcionan y te cuenta lo que falla, como haría una persona.
-
4
Revisa la interfaz
web-design-guidelines repasa accesibilidad, foco, formularios, rendimiento y tipografía, y te deja una lista de incidencias con su línea.
-
5
Rediseña lo que no convence
frontend-design se activa al construir o rehacer pantallas y evita el aspecto de plantilla. Úsala antes de auditar si partes de cero, o después para corregir lo detectado.
04 Prompts listos para usar
Necesito [describe la tarea, por ejemplo: generar facturas en PDF a partir de un CSV]. Busca en el catálogo de skills las tres opciones más usadas para esto, explícame en una línea qué hace cada una y quién la publica, y dame el comando de instalación. No instales nada hasta que elija.Usa la skill mcp-builder para diseñar un servidor MCP en TypeScript que conecte con nuestra API de [nombre]. La documentación está en [ruta o URL]. Empieza solo por la fase de investigación: dime qué herramientas expondrías, con qué nombres y qué permisos necesita cada una. Las operaciones que borren o modifiquen datos deben pedir confirmación.Con agent-browser abre [URL de tu entorno local o de pruebas], recorre la página de inicio y el formulario de contacto, y anota cualquier error de consola o paso que no funcione. Después revisa con web-design-guidelines los archivos de esas plantillas y dame una lista única ordenada por gravedad. No cambies código todavía.05 Seguridad y límites
- ✓Lee el SKILL.md antes de instalar una skill de un autor que no conoces: son instrucciones que Claude seguirá.
- ✓Prefiere skills de repositorios mantenidos y con historial; el catálogo es abierto y cualquiera puede publicar.
- ✓Con agent-browser, limita los dominios con --allowed-domains cuando trabajes con sesiones iniciadas o datos de clientes.
- ✓No pidas al navegador que introduzca contraseñas reales ni datos de pago; usa cuentas de prueba.
- ✓Un servidor MCP generado es código: revísalo, guarda las claves en variables de entorno y dale el mínimo de permisos.
06 Cuándo no instalar las cinco
| Tu caso | Con qué te basta |
|---|---|
| Usas Claude para escribir, investigar o analizar documentos | find-skills, para traer otras cuando surja la necesidad. |
| Haces automatizaciones o APIs sin interfaz | find-skills, mcp-builder y quizá agent-browser para probar integraciones web. |
| Mantienes webs de clientes | agent-browser, web-design-guidelines y frontend-design. |
| Acabas de empezar con Claude Code | Ninguna todavía: aprende primero cómo trabaja sin añadidos. |
Preguntas frecuentes
Por defecto en la carpeta del proyecto (para Claude Code, dentro de .claude/skills/). Con la opción -g se instalan en tu directorio de usuario y están disponibles en todos tus proyectos.
Con npx skills update. Si instalaste mediante plugins de Claude Code, se actualizan desde el propio sistema de plugins.
Cubre casos parecidos con otro enfoque: un CLI que devuelve el árbol de accesibilidad con referencias en lugar de capturas completas, lo que consume menos contexto. Para tareas en tu propio navegador con tus sesiones, Claude in Chrome sigue siendo más cómodo.
No. Es un revisor que devuelve hallazgos con archivo y línea. Las correcciones se las pides después a Claude, a mano o apoyándote en frontend-design.
No para empezar, porque Claude escribe el código, pero sí para revisar lo que conecta a tus sistemas. En un entorno de empresa conviene que alguien técnico valide el servidor antes de usarlo con datos reales.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.