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

Quiero usar Cult UI (https://cult-ui.com · github.com/nolly-studio/cult-ui) en este proyecto. Es un registry de shadcn, no un paquete npm. Tu tarea es dejarlo listo en cinco pasos. Hazlos en orden y confirma cada uno antes de avanzar.

1. Verifica el stack
   - Lee package.json y dime: versión de Tailwind, versión de Next.js (o el framework), si hay shadcn (components.json en raíz), y si está instalado motion o framer-motion.
   - Si Tailwind está en v3, propón el upgrade a v4 (no lo corras todavía, solo dímelo y espera mi visto bueno).
   - Si tengo framer-motion instalado, márcalo: Cult UI usa motion, no framer-motion.

2. Inicializa shadcn si falta
   - Si no hay components.json, corre npx shadcn@latest init con defaults razonables para mi stack (paleta neutral, CSS variables, base color neutral).
   - Si ya hay components.json, no lo toques.

3. Instala dependencias faltantes
   - motion (no framer-motion). Si tengo framer-motion, desinstálalo primero.
   - clsx y tailwind-merge si no están.

4. Configura el registry @cult-ui
   - Edita components.json y agrega el bloque:
       "registries": {
         "@cult-ui": "https://cult-ui.com/r/{name}.json"
       }
   - Si components.json ya tenía un bloque registries, fusiona sin sobrescribir lo existente.

5. Smoke test
   - Agrega el cosmic-button como primer componente:
       npx shadcn@latest add https://cult-ui.com/r/cosmic-button.json
   - Confirma que el archivo quedó en components/ui/ (o donde shadcn lo configuró).
   - Importa el componente en una página de prueba para verificar que compila sin errores.

Si algún paso falla:
- Si el add falla con "registry not found", usa la URL directa en lugar de la sintaxis @cult-ui/.
- Si motion da error de imports tipo "Cannot find module 'motion/react'", verifica que NO esté instalado framer-motion en paralelo.
- Si Tailwind no aplica clases del componente, confirma que estás en v4 con el plugin @tailwindcss/postcss configurado.

Al final, dime: qué quedó instalado, qué archivos cambiaste, y un comando listo para que yo agregue el siguiente componente.

Cult UI viene con dos skills oficiales para Claude Code que hacen que sigas su spec de diseño automáticamente. Una se llama components-build (16 reglas: accessibility, design-tokens, polymorphism, registry, styling, types, etc., co-autoradas por Hayden Bleasel y shadcn) y la otra es fixing-motion-performance (auditor de animaciones). Quiero que las tengas en este proyecto.

Pasos:

1. Crea la carpeta .claude/skills/ en la raíz del proyecto si no existe.

2. Descarga las dos skills desde el repo upstream nolly-studio/cult-ui:
   - .claude/skills/components-build/
   - .claude/skills/fixing-motion-performance/

   La forma más limpia: clona shallow el repo a una carpeta temporal, copia solo esas dos carpetas, borra el resto.
       git clone --depth 1 https://github.com/nolly-studio/cult-ui.git /tmp/cult-ui-skills
       mkdir -p .claude/skills
       cp -r /tmp/cult-ui-skills/.claude/skills/components-build .claude/skills/
       cp -r /tmp/cult-ui-skills/.claude/skills/fixing-motion-performance .claude/skills/
       rm -rf /tmp/cult-ui-skills

   Si en el repo upstream components-build vive en .agents/skills/ (no en .claude/skills/), copia desde ahí — el contenido es el mismo.

3. Verifica que cada carpeta tenga su SKILL.md adentro:
       ls .claude/skills/components-build/SKILL.md
       ls .claude/skills/fixing-motion-performance/SKILL.md

4. Agrega .claude/skills/ a .gitignore solo si yo te lo pido (por default déjalo trackeado, las skills son parte del setup del proyecto).

5. Confírmame:
   - Cuántos archivos copiaste a cada skill.
   - Si components-build trae sus 16 reglas en la carpeta rules/ o como secciones del SKILL.md.
   - Que el SKILL.md de cada una se lee correcto (cita el nombre y description del frontmatter).

Una vez listo, cierra mi sesión de Claude Code y reábrela. Las skills se leen al arranque y desde ese momento, cuando te pida construir o refactorizar componentes, vas a seguir el spec de components-build sin que te lo recuerde. Para auditar performance de animaciones uso el slash command /fixing-motion-performance.

Si el clone falla porque no tengo git: usa gh repo clone nolly-studio/cult-ui --depth 1, o bájate los archivos vía curl al raw.githubusercontent.com de cada archivo.

Quiero meter el componente [COMPONENTE] de Cult UI en [DÓNDE] de mi proyecto. Hazlo en cuatro pasos.

1. Agrega el componente al proyecto:
       npx shadcn@latest add https://cult-ui.com/r/[COMPONENTE].json
   Si tengo el registry @cult-ui configurado en components.json, usa la sintaxis corta:
       npx shadcn@beta add @cult-ui/[COMPONENTE]

2. Lee mi globals.css y mi tailwind.config (si existe) para extraer los design tokens reales del proyecto: paleta, font-family, radius base, spacing scale. Vas a respetar esos tokens en el siguiente paso.

3. Importa el componente en [DÓNDE]:
   - Reemplaza el elemento equivalente que estoy usando hoy (mi button actual, mi hero, mi toast, lo que sea) por la versión de Cult UI.
   - Mantén intacto el contenido textual y el copy. Solo cambia el contenedor visual.
   - Ajusta los props del componente para que respete mi paleta y mi font — no me dejes el estilo demo del repo. Si el componente acepta className, fusiónalo con mi cn() helper.
   - Si el componente necesita un wrapper para animar (Suspense, dynamic import client-only, etc.), agrégalo correctamente para evitar errores de hidratación.

4. Verifica que funcione:
   - Corre el build o el dev y dime si hay warnings.
   - Mira el resultado en tu cabeza: ¿el componente queda integrado con el branding o se ve como un sticker pegado? Si se ve pegado, ajusta de nuevo.

Si Cult UI o tú tienes una skill components-build cargada (en .claude/skills/components-build/), síguela al pie de la letra: accessibility, polymorphism con as-child cuando aplique, design-tokens del proyecto en lugar de hardcoded values.

Al final, dame:
- Lista de archivos tocados.
- Antes/después en una frase (cómo era ese elemento antes y cómo quedó).
- Si el componente trae animación, dime cuánto FPS estás estimando — si es menos de 60, sugiere correr /fixing-motion-performance.

Quiero que audites [RUTA DEL ARCHIVO O PÁGINA, ej. app/page.tsx] y me digas dónde Cult UI le sumaría a la experiencia visual.

Tu tarea es un audit, no una refactorización. Léete el archivo entero y produce este reporte:

1. Inventario rápido
   - Lista los elementos visuales clave de la página (hero, CTAs, cards, navegación, footer, fondos, etc.).
   - Para cada elemento, di qué componente shadcn/raw HTML estoy usando hoy.

2. Diagnóstico
   - Marca cuáles se sienten genéricos o de plantilla — patrones que cualquiera ha visto (botón flat, hero con H1 + párrafo gris, card con shadow-md y border-radius medio, toast cuadrado).
   - Marca cuáles ya están bien y NO conviene tocar (lo que ya tiene personalidad).

3. Propuesta con Cult UI
   - Para cada elemento genérico, propón un componente de Cult UI específico que lo reemplaza. Usa solo componentes que sepas que existen en el registry (cosmic-button, dynamic-island, hero-liquid-metal, text-animate, family-drawer, shader-lens-blur, etc.); si no estás seguro de un nombre, dilo abierto y consulta cult-ui.com/docs antes de proponerlo.
   - Para cada propuesta, da el comando exacto de install (npx shadcn@latest add https://cult-ui.com/r/[NOMBRE].json).
   - Estima el impacto visual: ¿este cambio se nota mucho (high impact) o es polish secundario (low impact)?

4. Plan de aplicación priorizado
   - Ordena las propuestas de mayor a menor impacto.
   - Recomienda empezar por las 2-3 de high impact que tocan elementos en above-the-fold.
   - Para cada una, especifica los archivos que tendría que tocar.

5. Riesgos
   - ¿Algún componente propuesto va a chocar con mi paleta o mi tipografía? Si sí, dime cómo lo ajusto antes de instalarlo.
   - ¿Algún componente requiere setup extra (motion, shader support, etc.) que todavía no tengo?

No agregues ni instales nada todavía. Solo el reporte. Cuando lo apruebe, te paso el siguiente prompt para que apliques los cambios uno por uno.

Voy a armar una landing nueva para [MI PRODUCTO]. La propuesta de valor en una frase: [VALUE PROP EN UNA FRASE].

Quiero la landing usando Cult UI como librería principal de componentes. Asume que ya tengo shadcn + Tailwind v4 + motion instalados y el registry @cult-ui configurado. Si no es así, corre primero el prompt cult-ui-setup.

Estructura mínima de la landing (en este orden):

1. Navbar
   - Logo a la izquierda, links centrados, un cosmic-button como CTA principal a la derecha.
   - Sticky con scroll-blur si Cult UI tiene un componente para eso; si no, usa un Tailwind backdrop-blur estándar.

2. Hero
   - hero-liquid-metal con el headline principal (3-5 palabras de impacto).
   - Subheadline en text-animate revelándose después del hero.
   - Dos botones: el primario en cosmic-button (CTA principal), el secundario en variant ghost.
   - Si Cult UI tiene un componente de fondo animado tipo aurora o mesh-gradient, ponlo detrás del hero a opacidad baja.

3. Social proof
   - Una fila con logos de clientes/empresas en escala de grises a hover color.
   - Si me pides logos y no tengo, deja placeholders y pon un comentario TODO.

4. Features
   - Grid de 3 columnas con cards de Cult UI (animated borders o tilt 3D).
   - Cada card: ícono + título + 1 párrafo de 2 líneas.

5. Pricing
   - Tres cards lado a lado. La del medio destacada (border-glow o badge "Más popular").
   - Botón CTA por card.

6. FAQ
   - Accordion simple con 4-6 preguntas.

7. CTA final + footer
   - Sección con texto centrado + cosmic-button.
   - Footer minimal con links de docs, repo, twitter.

Reglas durante la construcción:

- Usa solo componentes que sepas que existen en el registry de Cult UI. Si no estás seguro de un nombre, busca el comando exacto en https://cult-ui.com/docs antes de meterlo.
- Respeta mi paleta (léela de globals.css). No metas colores hardcoded.
- Pon todo en app/page.tsx pero extrae a sub-componentes en components/landing/ a partir de la 3ra sección para que cada archivo se mantenga bajo 200 líneas.
- Si tengo cargada la skill components-build, síguela (as-child, polymorphism, design-tokens).

Al terminar dime: qué componentes de Cult UI instalaste (lista con comandos), qué archivos creaste, y un screenshot mental de cómo quedó arriba del fold.

Voy a armar un dashboard SaaS para [TIPO DE DASHBOARD]. Las métricas clave que tiene que mostrar son: [3-5 MÉTRICAS CLAVE].

Quiero que uses Cult UI para los elementos visuales y mantengas shadcn/Recharts para las primitivas estándar (tablas, charts básicos). Asume setup listo; si no, corre cult-ui-setup primero.

Estructura del dashboard:

1. Layout
   - Sidebar fijo a la izquierda (250px) con logo arriba, navegación principal en el medio, perfil del usuario abajo.
   - Si Cult UI tiene un sidebar animado o un command-menu tipo Linear/Raycast, úsalo para el quick-search en lugar de un input plano.
   - Topbar fina arriba con breadcrumb, búsqueda, notificaciones (dynamic-island como dropdown de notifs) y avatar.

2. Hero del dashboard
   - Saludo personalizado + filtro de fecha.
   - shader-lens-blur (si está disponible en el registry) como background sutil del wrapper de la sección para darle profundidad.

3. Métricas hero
   - Bento grid: la métrica principal grande (60% del ancho) + 3 secundarias en cards más pequeñas.
   - Cada card con animated border o tilt 3D de Cult UI.
   - Número grande, label arriba, sparkline o delta vs período anterior abajo.

4. Charts
   - Una fila con 2 charts grandes (un line chart y un bar chart usando Recharts o tu librería de charts estándar).
   - Los wrappers de los charts sí van con cards de Cult UI.

5. Tabla de actividad reciente
   - Tabla estándar de shadcn con sorting y filtros.
   - Row hover en color sutil; última columna con un botón ghost para "Ver detalle".

6. Toasts y notificaciones
   - dynamic-island de Cult UI como sistema de toast (en lugar del sonner default).
   - Conéctalo a un toast() helper para que todo el dashboard lo use.

Reglas:

- Usa solo componentes que sepas que existen. Si dudas, busca primero en cult-ui.com/docs.
- Respeta mi paleta de globals.css. El dashboard debe leerse en dark mode si lo tengo configurado.
- Mantén la performance: nada de animaciones pesadas en loops del listado. Si una animación se siente lenta, corre /fixing-motion-performance.
- Cada sub-componente del dashboard en su propio archivo bajo components/dashboard/.

Al terminar: lista de componentes Cult UI instalados (con comandos), archivos creados, y una recomendación de qué fué high impact vs polish.

Quiero una sección estilo iPhone/iOS premium en [RUTA, ej. app/features/page.tsx]. La idea es que el visitante sienta que estás mostrando una app real de iPhone, no una página web genérica.

Componentes a usar (todos de Cult UI):

1. dynamic-island como hero
   - Posicionado en el top centro de la sección, como el de un iPhone real.
   - Que se expanda con hover/click revelando un mensaje (ej. "Tu pedido va en camino · 3 min").
   - Si Cult UI tiene variants del componente con diferentes estados, muestra dos o tres en secuencia.

2. family-drawer para modales
   - Reemplaza cualquier modal/dialog de la sección con family-drawer. Es el modal stacked tipo iOS donde las cards se apilan con escala decreciente.
   - Úsalo para detalles de feature: tocar un feature card abre el family-drawer con el detalle.

3. Transparencias tipo iOS
   - Las cards de la sección con backdrop-blur fuerte (10-20px) + border semi-transparente.
   - Fondo de la sección con una imagen o mesh gradient sutil para que las transparencias se aprecien.

4. Botones magnéticos
   - Si Cult UI tiene magnetic-button o un button con efecto de atracción al hover, úsalo en los CTAs en lugar de los botones planos.

5. Microinteracciones
   - Cualquier scroll o tap dentro de la sección debe tener spring easing (no linear). Cult UI usa motion, configura los transitions con type: "spring", stiffness y damping razonables.

Reglas:

- Solo usa componentes que confirmes que existen. Si no estás seguro del nombre exacto en el registry, busca en cult-ui.com/docs antes de proponerlo.
- Los textos de los ejemplos (mensaje del dynamic-island, contenido del drawer, etc.) tienen que ser realistas para mi producto — léete app/page.tsx o el README para extraer el dominio antes de inventar.
- Respeta mi paleta de globals.css.
- Si tengo cargada components-build, sigue las reglas de design-tokens y polymorphism.

Al terminar: lista de archivos, comandos de install, y un check de FPS estimado de las animaciones. Si bajan de 60 FPS estimados, corre /fixing-motion-performance sobre esta sección.

Una o varias animaciones de [RUTA DEL ARCHIVO O CARPETA SOSPECHOSA, ej. components/landing/hero.tsx o components/dashboard/] se sienten lentas, chocan en mobile o me caen el FPS al hacer scroll.

Tu tarea: corre la skill oficial fixing-motion-performance que tengo cargada en .claude/skills/fixing-motion-performance/ (de Cult UI). Si todavía no la tengo, descárgala primero usando el prompt cult-ui-skills-download.

Si la skill está disponible como slash command, úsalo: /fixing-motion-performance [RUTA]

Si no, ejecuta el audit manual siguiendo el SKILL.md de la skill. Las nueve categorías de reglas que cubre son:

1. No intercales layout reads y writes en el mismo frame (forced reflow).
2. Mide una vez al inicio del frame, escribe después.
3. Anima solo via transform o opacity — nunca width, height, top, left.
4. Usa will-change con criterio (sí en hover continuos, no en componentes que cambian todo el tiempo).
5. Las imágenes pesadas no se animan: layout, sí; transform, ok.
6. Los gradients/shaders de Cult UI deben ir en sus propios layers (transform: translateZ(0) o isolation: isolate).
7. Sustituye setInterval con requestAnimationFrame.
8. Throttle/debounce los handlers de scroll y resize.
9. En motion, prefiere layout=false y type: "tween" para listas largas; spring solo para elementos hero.

Producto entregable:

1. Reporte por archivo
   - Por cada animación encontrada, lista en una tabla: archivo, línea, problema detectado, regla violada (de las 9), severidad (high/med/low).

2. Fixes propuestos
   - Para cada problema high y med, propón el diff exacto que lo arregla.
   - Para cada fix, explica el por qué en una frase.

3. Validación
   - Después de aplicar los fixes (con mi confirmación), corre el build y dime si compila limpio.
   - Si tengo Lighthouse o Web Vitals configurados, ejecuta un check y comparte la diferencia antes/después.

Solo aplica los fixes high y med automáticamente. Los low listalos pero deja que yo decida.