Cult UI · 75 componentes para que Claude deje de sacarte diseños genéricos

Pediste a Claude que te haga una landing y te devolvió un layout que ya viste 200 veces: hero con título grande, subtítulo en gris, dos botones con esquinas redondeadas, sección de features con íconos de Lucide. Funciona. Es feo. Y peor: se ve igual que toda landing hecha con IA en los últimos dos años.

Cult UI es la cura. 75 componentes premium open-source para shadcn que le suben el techo estético a cualquier proyecto generado por agente. Sumale dos skills oficiales para Claude Code y tenés un sistema completo: librería + reglas + workflow.

Qué es exactamente

Cult UI no es otro "Tailwind component library". Es una colección curada por nolly-studio sobre la convención de shadcn/ui: cada componente es código que copiás a tu proyecto, no una dependencia que instalás. Eso significa que podés modificarlo, romperlo, mejorarlo. Es tuyo apenas lo metés en components/ui/.

Números actuales:

• 75 componentes premium.
• ~4.2K stars en GitHub.
• Licencia MIT.
• Stack: Tailwind CSS v4, Motion (antes Framer Motion), Radix UI primitives.

Los componentes que importan

No voy a listar los 75. Voy a marcar los que realmente cambian el aspecto de un proyecto y que Claude nunca te va a generar de cero sin pedírselo explícito.

Textos animados

• Text Shimmer — texto con gradient animado pasando por encima. Para subtítulos premium.
• Text Generate Effect — letras apareciendo de a una con blur. Para hero copy.
• Text Reveal — bloque grande de texto que se va llenando de color al hacer scroll. Para narrativas largas.
• Number Ticker — contador animado para landings de SaaS ("12,847 usuarios").

Botones con efectos

• Shimmer Button — botón con un brillo pasando en loop. Default de muchas landings premium.
• Magnetic Button — el botón se "estira" hacia el cursor cuando te acercás.
• Pulsating Button — anillos expandiéndose. Para CTAs primarios.
• Border Trail — borde animado que da una vuelta al botón en hover.

Componentes "wow"

• Dynamic Island — réplica del Dynamic Island de iPhone para notificaciones inline.
• Hero Líquido Metálico — fondo metálico con WebGL que se distorsiona con el mouse. El componente que más rompe el aire de "esto lo hizo IA".
• Background Beams — rayos animados de fondo. Para hero sections oscuras.
• Bento Grid — grilla tipo Apple para showcase de features.
• Marquee — carousel infinito de logos/testimonios.

Fondos con shaders

• Aurora Background — auroras boreales animadas con CSS puro (sin WebGL).
• Sparkles — partículas brillantes en canvas.
• Meteors — meteoritos cayendo en diagonal.
• Grid Pattern — grilla animada que se ilumina cerca del mouse.

Cada uno viene con preview, código copy-paste y notas de performance.

Las 2 skills oficiales para Claude Code

Acá está la parte que la mayoría se pierde. Cult UI no solo publicó los componentes — publicó dos skills de Claude Code co-autoradas por Hayden Bleasel y shadcn (sí, el creador de shadcn/ui) que le enseñan a Claude a usar la librería bien.

Skill 1: components-build

Skill que le da a Claude el catálogo completo de los 75 componentes con metadata: cuándo usar cada uno, qué props acepta, qué dependencias necesita, qué componentes pueden combinarse y cuáles no.

Cuando pedís "armame una landing", Claude con components-build activa razona así:

"Necesito hero. Cult UI tiene Hero Líquido Metálico. Pesa más en GPU pero es el más impactante. Para sección de features tengo Bento Grid. Para social proof tengo Marquee de logos. CTA principal: Shimmer Button con copy directo."

Sin la skill, Claude genera <div className="hero"> y un h1 plano. Con la skill, sabe qué herramientas tiene.

Instalación:

npx skills@latest add nolly-studio/components-build

Skill 2: fixing-motion-performance

Esta es más nicho pero salva proyectos enteros. Motion (Framer Motion) tiene patrones que en desktop se ven hermosos pero en mobile colapsan a 30fps. La skill detecta esos patrones y los corrige.

Lo que la skill busca y arregla:

• Animaciones que disparan layout reflow (width, height, top, left) y las convierte a transform.
• Componentes sin will-change que tendrían que tenerlo.
• Animaciones que corren en requestAnimationFrame cuando deberían ser CSS puro.
• Loops infinitos sin reduced-motion query (accesibilidad + performance en bajo batería).
• Variantes anidadas que generan diff trees pesados.

Instalación:

npx skills@latest add nolly-studio/fixing-motion-performance

Y la corrés así:

> /fixing-motion-performance sobre src/components/hero/

Claude revisa los archivos, identifica los problemas, y te muestra un plan antes de aplicar cambios.

Cómo se usa en un flujo real

Asumamos que arrancás un proyecto nuevo de Next.js con shadcn ya inicializado.

Paso 1 — Instalar las dos skills.

npx skills@latest add nolly-studio/components-build
npx skills@latest add nolly-studio/fixing-motion-performance

Paso 2 — Configurar Cult UI.

Cult UI usa la registry de shadcn, así que agregás un componente con:

npx shadcn@latest add https://cult-ui.com/r/shimmer-button.json

(reemplazás shimmer-button por el componente que querés)

Paso 3 — Pedirle a Claude que diseñe.

> Armame una landing para mi SaaS de project management.
  Tono: profesional pero con un toque magnético.
  Usá Cult UI donde tenga sentido.

Con components-build activa, Claude:

1. Propone estructura (hero, problem, features, social proof, pricing, CTA final).
2. Asigna componentes Cult UI a cada sección (Hero Líquido Metálico, Bento Grid para features, Marquee para logos).
3. Te muestra el plan antes de tocar código.
4. Cuando aprobás, corre los shadcn add necesarios y arma el código.

Paso 4 — Pasar el fixing-motion-performance al final.

> /fixing-motion-performance sobre app/

Última pasada antes de deployar. Claude detecta los problemas de performance y los corrige.

Lo que no es Cult UI

Tres aclaraciones para que la expectativa quede clara:

• No es un framework. Es una colección de componentes copiables sobre shadcn. Si no usás shadcn, hay que hacer trabajo de portabilidad.
• No es Apple/Linear/Stripe. Algunos componentes se inspiran en esos diseños pero no son réplicas pixel-perfect. Si querés clonar exactamente, mirá Open Design o Awesome Design MD.
• No es accesibilidad-first. La base de shadcn/Radix te da accesibilidad razonable, pero algunos componentes de animación pesada no respetan prefers-reduced-motion por defecto. La skill fixing-motion-performance lo arregla pero hay que pasarla.

Por qué importa que sea MIT

Tres razones prácticas:

1. Uso comercial libre. Tu producto puede vender con Cult UI dentro sin licencias adicionales.
2. Forks legales. Si un componente no hace exactamente lo que querés, lo cambiás. Sin pedir permiso.
3. No depende del proyecto. Si nolly-studio dejara mañana el repo, tu código sigue funcionando — ya está copiado a tu proyecto.

Sinergia con otras herramientas

Cult UI es una pieza de un stack más grande. Combinaciones que rinden:

• Cult UI + Magic UI — Magic UI tiene componentes que Cult UI no (calendarios animados, command menu fancy). Conviven sin chocar.
• Cult UI + 21st.dev — 21st.dev es marketplace de componentes; Cult UI tiene cosas que no están en 21st y viceversa.
• Cult UI + Stitch (Google) — Stitch diseña la estructura inicial; Cult UI da los componentes premium para reemplazar los genéricos que Stitch genera.

Conclusión

El problema "Claude me genera diseños genéricos" no se resuelve con mejores prompts. Se resuelve dándole a Claude un vocabulario de componentes premium y reglas claras de cuándo usarlos. Cult UI es ese vocabulario, las dos skills son las reglas.

Instalá los 75 componentes en tu proyecto. Pegá las dos skills. La próxima landing que pidas va a salir distinta — no porque Claude cambió, sino porque le diste mejores piezas para construir.

Tags: cult-ui, componentes, shadcn, claude-code, tailwind-v4, motion, frontend, open-source, mit