5 Claude Skills necesarias · busca, conecta, navega, audita y diseña solo
Las 5 skills que hacen que Claude Code trabaje casi solo — busca, se conecta, navega, audita y diseña por vos. La primera es la que te encuentra todas las demás; el resto se las pedís en lenguaje natural y ella las instala.
Las 5 skills · de un vistazo
find-skills
La meta-skill. Le decís qué necesitás, se mete al catálogo, encuentra la habilidad correcta y te la instala. Es la que te encuentra a las otras cuatro.
mcp-builder
Le describís con palabras una herramienta que usás y Claude escribe el server MCP que lo conecta. Vos no escribís el código — pero código sí hay.
agent-browser
Los ojos y las manos de Claude en internet: entra a páginas, hace clic, saca info y prueba tu web como una persona — gastando hasta 10x menos tokens.
web-design-guidelines
El auditor. Agarra más de cien reglas de diseño de Vercel, revisa tu página y te dice qué está mal. No la diseña — la critica.
frontend-design
El generador: la que mata el look de IA. Trae direcciones estéticas con tipografías ya combinadas para que tu página no se vea hecha por una máquina.
Guía comunidad · actualizada a mayo 2026
find-skills · mcp-builder · agent-browser · web-design-guidelines · frontend-design — con el comando de instalación de cada una
Guía con las 5 skills que más te cambian el día en Claude Code y el comando de instalación de cada una. find-skills busca e instala lo que necesites del catálogo · mcp-builder conecta Claude a tus herramientas sin que escribas el código · agent-browser le da un navegador de verdad para hacer clic y probar tu web · web-design-guidelines audita tu diseño contra más de cien reglas · frontend-design lo hace ver bien desde el primer prompt. Más el flujo de cómo encajan y 4 antipatrones de cuándo NO las necesitás todas.
01 · POR QUÉ ESTAS 5
El combo que hace que Claude trabaje solo
Claude Code de fábrica ya es potente, pero le faltan manos. Estas cinco skills no son las que más suenan — son las que, juntas, cierran el ciclo completo: encontrar lo que le falta, conectarse a tus herramientas, entrar a internet, revisar lo que hizo y dejarlo bonito. Cada una tapa un hueco distinto.
Y hay un truco en el orden. La primera, find-skills, es una meta-skill: su único trabajo es encontrar e instalar otras skills. Una vez que la tenés adentro, no volvés a buscar nada a mano — le decís a Claude qué necesitás y ella se mete al catálogo, encuentra la que sirve y la instala. Por eso va primero: te ahorra bajar las otras cuatro una por una.
Las cinco vienen de dos lugares serios: Vercel Labs (find-skills, agent-browser, web-design-guidelines) y Anthropic (mcp-builder, frontend-design) — los mismos equipos que construyen las herramientas que usás todos los días. Abajo te las explico una por una, con qué hace, por qué importa y cómo encaja en el flujo.
02 · LAS 5 SKILLS
Una por una · qué hace, por qué importa y cómo encaja
Cada skill tapa un hueco distinto del flujo. Las leés de arriba abajo y vas viendo cómo Claude pasa de buscar lo que le falta a entregarte una página terminada. El comando de instalación de cada una está más abajo, en la sección de instalación.
find-skills
Vercel LabsLa que busca e instala a las demás
Qué hace
Es una meta-skill. Le decís en lenguaje natural qué querés hacer ("necesito algo para auditar mi diseño", "quiero conectar Claude a Notion") y se mete al catálogo de skills, encuentra la que sirve y te la instala. Se acabó andar buscando a mano.
Por qué importa
Es la que cambia el flujo de todos. Una vez instalada, no volvés a buscar skills por GitHub ni copiás comandos de ningún lado — le pedís a Claude y listo. Por eso es la primera de la lista: con ella adentro, las otras cuatro se instalan solas.
Cómo encaja en el flujo
Es el arranque. La instalás a mano una vez (es el único comando que vas a correr vos) y después se vuelve la puerta de entrada al resto del catálogo.
mcp-builder
AnthropicLa que conecta Claude a tus herramientas
Qué hace
Conectar a Claude con tus otras herramientas. Le describís con palabras cualquier servicio o API que uses y Claude arma el server MCP que los une. Soporta Python y TypeScript, y te guía por las cuatro fases: investigar, construir, revisar y probar.
Por qué importa
Conectarse a tus herramientas es lo que saca a Claude del chat y lo mete en tu trabajo real. Lo honesto: vos no escribís el código del server, pero código sí hay — Claude lo escribe por vos a partir de tu descripción. La skill es la que sabe cómo hacerlo bien.
Cómo encaja en el flujo
Después de buscar (find-skills), conectás. Es el puente entre Claude y todo lo que ya usás — tu CRM, tu base de datos, tu herramienta de tareas — para que pueda actuar sobre eso y no solo hablar de eso.
agent-browser
Vercel LabsLos ojos y las manos de Claude en internet
Qué hace
Le da a Claude un navegador de verdad. Entra a las páginas, hace clic, saca la información y prueba tu web como si fuera una persona. En vez de mandarle la captura entera de la página (caro), arma un menú numerado de botones y links y manda solo eso.
Por qué importa
Conectarse no sirve de nada si Claude no puede hacer nada por su cuenta. Agent Browser le da manos. Y gasta hasta 10x menos tokens que Claude para Chrome o Playwright (que mandan la captura entera, ~3.000 tokens por acción, contra ~300 acá) — tu cuenta rinde mucho más.
Cómo encaja en el flujo
Una vez conectado, Claude necesita poder actuar afuera. Esta es la que lo deja entrar a internet, probar lo que construye y volver a arreglarlo. El loop de testing manual lo hace solo.
web-design-guidelines
Vercel LabsEl auditor: revisa tu diseño y te dice qué está mal
Qué hace
Agarra más de cien reglas de diseño de Vercel — accesibilidad, performance, tipografía, estados de foco, responsive — revisa tu página y te dice qué está mal. Ojo con esto: NO diseña ni genera nada. Es un revisor. Te marca los problemas para que vos (o Claude) los arregles.
Por qué importa
Cuando Claude ya te armó una página, ¿cómo sabés que no quedó fea o rota? Esta te lo dice. Es la diferencia entre "se ve bien" a ojo y "cumple cien reglas que la gente que sabe de diseño da por sentadas".
Cómo encaja en el flujo
Después de navegar y construir, auditás. Le pasás tu página y te devuelve la lista de qué arreglar. Es el control de calidad antes de dar algo por terminado.
frontend-design
AnthropicEl generador: la que mata el look de IA
Qué hace
Trae direcciones estéticas con sus tipografías ya combinadas (minimalista, maximalista, brutalista, retro-futurista y más) y empuja a Claude a elegir una de verdad en vez del default genérico. Esquiva las fuentes sobreusadas, los degradados violeta clichés y los layouts de molde.
Por qué importa
Es la que mata el look de IA. Mientras web-design-guidelines te dice qué está mal, esta hace que se vea bien desde el primer prompt. Tu página deja de verse "hecha por una máquina" sin que vos seas diseñador.
Cómo encaja en el flujo
Es el cierre. Con esta cargada, lo que Claude genera arranca con una dirección visual intencional. Auditás con la cuarta, diseñás con la quinta, y el resultado se ve terminado.
03 · INSTALACIÓN
Los comandos · y la ruta fácil para bajarlas todas
Hay dos formas y terminan en lo mismo. La fácil: instalás find-skills (un solo comando) y después le pedís a Claude que busque e instale las otras cuatro por vos. La manual: corrés el comando de cada skill a mano. La primera es menos trabajo.
Ruta fácil · find-skills instala al resto
Paso 1 · instalá find-skills (la única a mano)
npx skills add https://github.com/vercel-labs/skills --skill find-skillsInstalá las otras cuatro de una
Una vez que tenés find-skills, pegá esto en Claude Code. Va a buscar e instalar las otras cuatro, una por una, confirmando cada paso. Es la ruta que el reel promete: las instala todas de una.
Tengo find-skills instalada. Usala para encontrar e instalar estas cuatro skills, una por una, confirmando cada instalación antes de pasar a la siguiente: 1. mcp-builder (de Anthropic) — para crear y conectar servers MCP. 2. agent-browser (de Vercel) — un navegador real para Claude. 3. web-design-guidelines (de Vercel) — auditoría de diseño contra más de cien reglas. 4. frontend-design (de Anthropic) — estilos visuales y tipografías para frontend. Para cada una: buscala en el catálogo, mostrame el comando exacto que vas a correr, instalala y verificá que quedó registrada. Si alguna no aparece en el catálogo, decímelo y te paso el repo de GitHub. No inventes nombres de skills que no existan.
Revisá qué tengo y qué me falta
Si no estás seguro de qué skills ya tenés cargadas, este prompt te hace el inventario antes de instalar nada de más.
Listame las skills que ya tengo instaladas en este proyecto y en mi config global. Después decime cuáles de estas cinco me faltan: find-skills, mcp-builder, agent-browser, web-design-guidelines, frontend-design. Para las que falten, mostrame el comando de instalación y esperá mi OK antes de correrlo. No instales nada sin que yo confirme.
Ruta manual · los 5 comandos directos
Instalar find-skills (la única a mano)
npx skills add https://github.com/vercel-labs/skills --skill find-skillsEs la única que instalás manualmente. Con ella adentro, las otras cuatro se las pedís a Claude en lenguaje natural y ella las baja.
Instalar mcp-builder
npx skills add https://github.com/anthropics/skills --skill mcp-builderRepo oficial de skills de Anthropic. Si preferís la vía de plugins, corré /plugin marketplace add anthropics/skills.
Instalar agent-browser
npx skills add https://github.com/vercel-labs/agent-browserLa primera vez puede bajar un Chrome de testing — está bien, dejalo. Tiene guía completa propia en la bóveda.
Instalar web-design-guidelines
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelinesEs auditor, no generador: te dice qué cambiar, no lo cambia. La que lo deja lindo desde el arranque es la quinta.
Instalar frontend-design
npx skills add https://github.com/anthropics/claude-code --skill frontend-designSkill oficial de Anthropic, en el repo de Claude Code. También la activás con /plugin (marketplace de Anthropic) o la sumás desde vercel-labs/agent-skills con --skill frontend-design.
Cómo funcionan estos comandos
Los cinco usan npx skills, el instalador del catálogo skills.sh: baja una skill desde cualquier repo de GitHub con el patrón add <repo> --skill <nombre>. Es el mismo CLI que ya usan las guías de Agent Browser y Vercel Skills en la bóveda. mcp-builder y frontend-design, además, se pueden sumar como plugin con /plugin (marketplace de Anthropic) si preferís esa vía.
04 · EL FLUJO
Busca → conecta → navega → audita → diseña
Así se encadenan las cinco en un proyecto real. No tenés que usarlas todas siempre, pero cuando las usás en este orden, Claude hace el ciclo completo sin que lo lleves de la mano.
find-skills
Le decís qué necesitás y te trae la skill correcta del catálogo, ya instalada.
mcp-builder
Le describís una herramienta y Claude arma el server MCP que la conecta.
agent-browser
Claude entra a las páginas, hace clic, saca info y prueba tu web como una persona.
web-design-guidelines
Revisa tu diseño contra más de cien reglas y te dice exactamente qué está mal.
frontend-design
Le da estilo y tipografía intencional para que no se vea hecho por IA.
El combo en acción
El resultado: le pedís una página, Claude la arma, la prueba en el navegador, la audita contra las reglas de diseño y la deja con un estilo que no parece de máquina. Todo en el mismo hilo, sin que la lleves de la mano paso por paso.
05 · CUÁNDO NO
4 antipatrones honestos · cuándo NO las necesitás todas
Más skills cargadas no es mejor: cada una suma contexto que Claude tiene que leer. Estos son los casos donde el combo completo sobra y conviene quedarte con menos.
No programás ni vas a tocar diseño web
Si usás Claude solo para escribir, conversar o investigar, las dos de diseño (web-design-guidelines y frontend-design) y hasta agent-browser te quedan grandes. Con find-skills sola alcanza: el día que necesites algo puntual, se lo pedís y te lo instala.
Ya tenés tu set de skills afinado
Si sabés exactamente qué usás y qué no, no cargues skills por cargar. Cada skill instalada es más contexto que Claude lee antes de cada respuesta. Instalá solo las que tocás de verdad y dejá el catálogo para cuando aparezca una necesidad nueva.
Querés una sola cosa puntual hoy
Para una tarea única — "leé este link y resumímelo", "conectá esta API una vez" — instalá la que necesitás para eso y listo. No te hace falta bajar el combo completo para resolver algo de cinco minutos.
Recién instalaste Claude Code
Primero familiarizate con cómo trabaja Claude sin skills encima. Cuando ya sepas qué te falta, find-skills te lo trae en el momento. Cargar las cinco el primer día es ruido que te distrae de lo básico.
Guía de la comunidad
Esta guía junta cinco skills de Vercel Labs y Anthropic que, instaladas juntas, cubren el ciclo completo de trabajo con Claude Code. Se publica como parte de la bóveda de tododeia, una colección libre de recursos para quienes construyen con Claude todos los días.
Cierre · la primera es la que más cambia
“Con estas cinco, Claude Code deja de necesitarte para cada paso: busca lo que le falta, se conecta a tus herramientas, entra a las páginas y diseña sin que parezca hecho por una máquina. No las instales todas el primer día — instalá find-skills, y el resto pedíselo cuando lo necesites. La que más cambia el juego no es la más vistosa: es la primera, porque te encuentra todas las demás.”
El catálogo de skills · skills.sh
Donde find-skills busca y desde donde npx skills instala.
Guías hermanas · profundizá en cada skill
Agent Browser · la guía completa de la skill #3
La skill 03 tiene su propia guía a fondo: cómo navega, los 6 use cases del día a día y 5 prompts copy-paste para arrancar.
Vercel Skills · encontrar e instalar con skills.sh
El deep dive de la skill 01: cómo funciona el catálogo skills.sh y el flujo de descubrimiento con find-skills.
5 Skills de Diseño · más allá de frontend-design
Si lo tuyo es el diseño, este combo profundiza en las skills visuales — el siguiente paso después de la skill 05.
Guía de Skills 0 a 100 · qué son y cómo crearlas
Si querés entender qué es una skill por dentro y armar las tuyas, esta es la guía base sobre el sistema completo.
40 Skills en español · la librería ampliada
Cuando ya tenés el combo y querés explorar más, esta es la librería grande de skills traducidas por categoría.
Claude Code Setup · el plugin que escanea tu repo
El plugin oficial que mira tu proyecto y te recomienda qué automatizar — buen complemento de find-skills.
Por dónde empezar si llegaste sin saber nada
Si recién caés a Claude Code, no arranques instalando las cinco. Mirá primero guia-claude-code-completa para entender cómo trabaja Claude, instalá find-skills, y dejá que ella te traiga el resto el día que lo necesites. Aprender la herramienta antes de llenarla de skills te ahorra ruido.
Para quién no aplica esta página
Si no construís páginas ni conectás herramientas — usás Claude solo para escribir o conversar — este combo te queda grande. Con find-skills sola alcanza: el día que necesites algo puntual, se lo pedís y te lo instala. También saltá esto si ya tenés tu set de skills afinado y sabés exactamente qué usás.