comunidadbóveda5 Claude Skills necesarias
5 skills · Vercel Labs + Anthropic · busca · conecta · navega · audita · diseña

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.

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.

Guía comunidad · mayo 20265 skills · 1 comboVercel Labs + AnthropicVoseo Latam · sin promesas falsasfind-skills instala al resto

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.

01 · busca

find-skills

Vercel Labs

La 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.

Vercel Skills · encontrar e instalar skills con skills.sh
02 · conecta

mcp-builder

Anthropic

La 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.

03 · navega

agent-browser

Vercel Labs

Los 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.

Agent Browser · la guía completa de esta skill
04 · audita

web-design-guidelines

Vercel Labs

El 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.

05 · diseña

frontend-design

Anthropic

El 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-skills

Instalá 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-skills

Es 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-builder

Repo 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-browser

La 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-guidelines

Es 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-design

Skill 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.

01 · Busca

find-skills

Le decís qué necesitás y te trae la skill correcta del catálogo, ya instalada.

02 · Conecta

mcp-builder

Le describís una herramienta y Claude arma el server MCP que la conecta.

03 · Navega

agent-browser

Claude entra a las páginas, hace clic, saca info y prueba tu web como una persona.

04 · Audita

web-design-guidelines

Revisa tu diseño contra más de cien reglas y te dice exactamente qué está mal.

05 · Diseña

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

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.