01 Qué es Cult UI y por qué ayuda a Claude
Cuando pides a un agente de código una landing o un panel sin más indicaciones, tiende a repetir lo mismo: titular grande, párrafo gris, botones planos y tarjetas con sombra suave. No es un fallo del modelo, es que sin piezas de referencia elige el camino más seguro.
Cult UI es una colección de componentes animados (botones con brillo, textos que se revelan, una «dynamic island» al estilo iPhone, efectos de metal líquido con shaders, maquetas de dispositivos, tableros kanban…) publicada por Nolly Studio con licencia MIT. Cada componente es un elemento de registro de shadcn/ui: el CLI de shadcn copia el código fuente a tu proyecto, así que el componente es tuyo, lo puedes editar y no dependes de un paquete que cambie por debajo.
Componentes
Más de 150 piezas gratuitas agrupadas por tipo: textos animados, botones, tarjetas, fondos, heros, ilustraciones, maquetas de dispositivos y controles para apps de IA.
Registro shadcn
Cada componente tiene una URL JSON en cult-ui.com/r/. Se instala con npx shadcn add y aterriza en tu carpeta de componentes como cualquier otro de shadcn.
Servidor MCP de shadcn
Permite que Claude Code busque en el registro de Cult UI, lea ejemplos e instale componentes a partir de una petición en lenguaje natural.
Dos skills en el repositorio
components-build (16 categorías de reglas para construir componentes) y fixing-motion-performance (auditoría de animaciones). Las puedes copiar a tu proyecto.
02 Antes de empezar
- ✓Un proyecto React con shadcn/ui inicializado (debe existir components.json en la raíz). Si no lo tienes, npx shadcn@latest init lo prepara.
- ✓Tailwind CSS v4: los componentes usan sus clases y los tokens de tema de shadcn.
- ✓La librería motion para las animaciones (es la sucesora de Framer Motion; cada página de la documentación indica las dependencias exactas del componente).
- ✓Node.js reciente para ejecutar npx sin instalar nada global.
- ✓Claude Code abierto en la raíz del proyecto y el repositorio bajo git, para poder revisar y deshacer cambios.
03 Instalar componentes
-
1
Prueba con un componente por URL
Es la vía que siempre funciona, sin configurar nada. El CLI descarga el JSON del registro, instala las dependencias que declare y copia los archivos.
-
2
Registra el espacio de nombres
Si vas a usar varios, añade el registro @cult-ui a components.json una sola vez. A partir de ahí puedes instalar por nombre corto.
-
3
Instala por nombre
Con el registro configurado, puedes añadir uno o varios componentes en el mismo comando y revisar el diff antes de confirmar.
npx shadcn@latest add https://www.cult-ui.com/r/cosmic-button.json{
"registries": {
"@cult-ui": "https://www.cult-ui.com/r/{name}.json"
}
}npx shadcn@latest add @cult-ui/dynamic-island @cult-ui/text-animate04 Conectar Claude Code al registro por MCP
El servidor MCP oficial de shadcn permite que Claude Code busque componentes en los registros que figuren en tu components.json, lea su código y sus ejemplos y ejecute el shadcn add correcto. Solo ve los registros declarados, así que añade antes el bloque @cult-ui del apartado anterior.
npx shadcn@latest mcp init --client claude
# Crea .mcp.json en la raíz. Reinicia Claude Code y comprueba con /mcpAl pedir componentes, menciona Cult UI por su nombre para que busque en ese registro y no solo en el de shadcn por defecto.
Usa el MCP de shadcn para buscar en el registro @cult-ui componentes adecuados para [SECCIÓN: hero, CTA, tarjetas de precios, notificaciones…] de mi web. Dame una lista de 4 a 6 opciones con: nombre exacto, qué hace, dependencias que añade y el comando de instalación. No instales nada todavía; espera a que elija.05 Las dos skills del repositorio
El repositorio de Cult UI incluye dos skills que también sirven fuera de él:
- components-build: la especificación de components.build, coescrita por Hayden Bleasel y shadcn. Son 16 categorías de reglas (composición, accesibilidad, estado controlado y no controlado, tipos, polimorfismo,
asChild, atributosdata-*, estilos concny CVA, tokens de diseño, registro, publicación en npm…). Claude la usa al crear o refactorizar componentes. - fixing-motion-performance: reglas para animaciones fluidas (animar solo
transformyopacitycuando se pueda, no mezclar lecturas y escrituras de layout, cuidado con blur y filtros). Se invoca con/fixing-motion-performanceo pasándole un archivo para que lo revise.
En el repositorio no están en la misma carpeta: la primera vive en .agents/skills/ y la segunda en .claude/skills/. Para Claude Code, cópialas ambas a .claude/skills/ de tu proyecto.
git clone --depth 1 https://github.com/nolly-studio/cult-ui.git /tmp/cult-ui
mkdir -p .claude/skills
cp -r /tmp/cult-ui/.agents/skills/components-build .claude/skills/
cp -r /tmp/cult-ui/.claude/skills/fixing-motion-performance .claude/skills/
rm -rf /tmp/cult-ui06 Flujo de trabajo con prompts
La forma más rentable de usar Cult UI no es llenar la página de efectos, sino cambiar dos o tres piezas visibles (el hero, el botón principal, las notificaciones) y dejar el resto sobrio. Primero auditoría, luego cambios de uno en uno.
Revisa [RUTA, por ejemplo app/page.tsx] sin modificar nada. 1) Enumera los elementos visuales principales y con qué están hechos. 2) Señala cuáles se ven de plantilla y cuáles conviene no tocar. 3) Para cada elemento mejorable, propón un componente concreto del registro @cult-ui (comprueba que existe) con su comando de instalación y si el impacto es alto o bajo. 4) Ordena la lista empezando por lo que se ve sin hacer scroll. Termina con los riesgos: choques con mi paleta, dependencias nuevas y peso de las animaciones en móvil.Instala [COMPONENTE] de @cult-ui y úsalo para sustituir [ELEMENTO] en [ARCHIVO]. Antes, lee mis tokens de tema (variables CSS de globals.css) y úsalos: nada de colores ni radios fijos. Conserva el texto y los enlaces actuales. Si el componente es solo de cliente, márcalo correctamente para evitar errores de hidratación. Respeta prefers-reduced-motion. Sigue la skill components-build. Al acabar, ejecuta el build, dime qué archivos has tocado y pasa /fixing-motion-performance sobre el archivo nuevo.07 Casos de uso para negocio
| Proyecto | Qué cambiar | Por qué |
|---|---|---|
| Landing de producto o servicio | Hero con texto animado y un único botón principal llamativo | Es lo primero que se ve; el resto puede quedarse en shadcn estándar |
| Panel SaaS | Notificaciones tipo dynamic-island y tarjetas de métricas | Da sensación de producto pulido sin tocar tablas ni gráficos |
| App de IA | Campo de prompt y burbujas de chat del catálogo de IA | Resuelve detalles como autoajuste de altura o streaming |
| Presentación de app móvil | Maquetas de dispositivo y cajones apilados al estilo iOS | Muestra la app en contexto sin hacer capturas a mano |
08 Errores frecuentes
El agente solo encuentra componentes de shadcn
Falta el registro @cult-ui en components.json o no lo has nombrado en la petición. Añádelo y reinicia Claude Code.
Los estilos no se aplican
Suele ser Tailwind v3 o un proyecto sin los tokens de tema de shadcn. Revisa la versión y que globals.css tenga las variables.
Error al importar motion
Tienes framer-motion y motion mezclados o falta la dependencia. Revisa package.json y deja la que indique el componente.
Nombres inventados
Si Claude propone un componente que no existe, pídele que lo compruebe en el MCP o en la documentación en Markdown antes de instalar.
Preguntas frecuentes
Sí. El código está publicado con licencia MIT, así que puedes usarlo en webs de clientes y productos de pago. Conserva el aviso de licencia si redistribuyes el código.
No. Funciona en cualquier proyecto React compatible con el CLI de shadcn/ui y Tailwind CSS v4, como Next.js, Vite o React Router. Lo que sí necesitas es tener shadcn inicializado.
No. Al ser código copiado a tu proyecto, no hay actualizaciones automáticas. Si sale una versión mejor, vuelve a ejecutar el add y revisa el diff antes de aceptar.
Sí. Los comandos de shadcn funcionan igual desde la terminal, y el MCP también se puede configurar en Cursor o VS Code. Claude Code aporta la búsqueda en lenguaje natural y la adaptación a tu marca.
Sí. components-build es una guía general para construir componentes React accesibles y componibles, y fixing-motion-performance sirve para cualquier animación web.
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.