Creeer-Web/docs/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Lee primero

AGENTS.md (reglas operativas + decisiones bloqueadas) y docs/dueña-directrices.md (source of truth de marca, con los mensajes verbatim de la dueña). Toda decisión de copy, diseño o código pasa por ese filtro. Si una propuesta contradice algo de ahí, pregunta antes de avanzar.

El proyecto es en español — copy, docs y commits. Los comentarios de código están en inglés.

Comandos

Gestor de paquetes: pnpm (pnpm@11.7.0 vía corepack). No usar npm.

pnpm install
pnpm dev                                    # http://localhost:3000
pnpm build                                  # export estático → out/
pnpm lint                                   # eslint-config-next/core-web-vitals
pnpm test                                   # vitest run (una pasada)
pnpm test:watch
pnpm test components/sections/__tests__/Hero.test.tsx   # un solo archivo
pnpm test -t "renders the CTA"                          # un solo test por nombre
npx tsc --noEmit                            # typecheck (no hay script propio)

Arquitectura

Landing one-page estática. Next.js 14 App Router con output: 'export' en next.config.mjs → no hay backend, ni API routes, ni next/image optimizado, ni middleware. El contacto son enlaces directos (WhatsApp / mailto / LinkedIn); no hay formulario.

Una sola ruta. app/page.tsx compone las 10 secciones en orden fijo y monta el JSON-LD (ProfessionalService) inline. app/layout.tsx carga Open Sans vía next/font/google exponiéndola como --font-open-sans, y concentra toda la metadata/OG/canonical.

El copy vive en lib/content.ts, no en el JSX. Es el source of truth: cada sección importa su objeto (hero, fraseAncla, paraQuien, proceso, …). Las frases que necesitan énfasis parcial están partidas en segmentos (headline.line1 / headline.effort / headline.clarity) para que el componente pinte en dorado o subraye sin fragmentar strings dentro del JSX. Al cambiar copy, edita lib/content.ts; al cambiar énfasis visual, edita el componente. Los enlaces de contacto ahí llevan TODO dueña con placeholders — no inventes valores reales.

Animación centralizada en lib/motion.ts. Las secciones son client components ('use client') que usan fadeInUp + staggerContainer con viewportOnce, y siempre combinan usePrefersReducedMotion() con motionProps(reduced) — ese spread neutraliza whileInView/initial cuando el usuario pide menos movimiento. Es requisito de a11y del spec; replícalo en cualquier sección nueva.

Primitivas antes que utilidades sueltas. Container (ancho max-w-content, 1152px), CTA (variantes light/dark, flecha con motion-reduce: guards) y Wordmark (renderiza cre≡er con el ≡ en text-dorado y tagline opcional). El wordmark nunca se escribe a mano en el JSX.

Tokens de color en tailwind.config.ts, nombrados en español según el Manual de Identidad Visual: azul-profundo, dorado, azul-claro, gris-claro, gris-medio, más los alias ink y bg-dark. Usa los tokens, no hex sueltos (las pocas excepciones existentes son bordes inline en el hero). app/globals.css fija body, ::selection y el focus-visible dorado global — no redefinas focus por componente.

Tests: co-locados en __tests__/ junto a cada componente. Vitest + jsdom + Testing Library, alias @ → raíz. vitest.setup.ts inyecta stubs de IntersectionObserver y matchMedia porque jsdom no los trae y Framer Motion los necesita. Los tests verifican copy y contrato de marca, no estilos — incluido un test negativo en Hero que falla si aparece escasez (cupos|cohorte|generación fundadora), decisión explícita de la dueña.

Decisiones bloqueadas (no reabrir sin consultar a la dueña)

• Wordmark cre≡er, siempre en minúsculas, con la "e" central como ≡ dorado que debe leerse como E. Nunca CREEER ni Creeer.
• Paleta: Azul Profundo #0A1D3D + Dorado #C4942E + blanco + neutros. Sin amarillo eléctrico.
• Tipografía Open Sans. Aptos descartada (EULA de Microsoft prohíbe servirla en web).
• Tono: "seguridad + cercanía", "simple, directo, limpio". Segunda persona ("tú"), sin jerga corporativa.
• Sin escasez en el hero.

Flujo de trabajo

• Rama nueva por cada cambio, nombrada según el cambio. Nunca trabajar directo en main.
• No hacer commits sin aprobación explícita del usuario.
• Si la dueña manda un mensaje nuevo (WhatsApp, etc.), agrégalo a docs/dueña-directrices.md bajo "Mensajes verbatim" con fecha y contexto.
• Specs y planes aprobados en docs/superpowers/{specs,plans}/.

Skills relevantes

transformation-positioning es obligatorio al escribir copy. Además: frontend-design, web-design-guidelines, vercel-react-best-practices, tailwind-design-system, nextjs-app-router-patterns, framer-motion-animator, seo, accessibility, performance, core-web-vitals.