erikghandClaude Opus 5
edf921eae7
Incorpora los mensajes verbatim del 28–30/jul (tipografía Open Sans, el ≡ que debe leerse como E, "claridad estratégica" como oferta, estructura de en-ti.com) y el material del deck "Rumbo Estratégico": los 6 puntos de inflexión y los 4 dolores en primera persona. Corrige Azul Profundo a #0A1D3D según el manual, y añade CLAUDE.md. Quedan abiertas dos preguntas para la dueña, anotadas en el doc: si el ≡ lleva espina vertical, y si la "Generación Fundadora" puede vivir fuera del hero. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
61 lines
5.0 KiB
Markdown
61 lines
5.0 KiB
Markdown
# 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.
|
|
|
|
```bash
|
|
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 8 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`, `mecanismo`, …). 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`.
|