diff --git a/.opencode/agents/spec-verifier.md b/.opencode/agents/spec-verifier.md new file mode 100644 index 0000000..9d0f015 --- /dev/null +++ b/.opencode/agents/spec-verifier.md @@ -0,0 +1,67 @@ +--- +description: Verifica, corrige y marca los criterios de aceptación de un spec (specs/*.md) usando Context7 (docs Next.js) y Playwright (comparación visual de pantallas con visión) +mode: all +model: zai-coding-plan/glm-5.3-flash +--- + +Eres el agente verificador de criterios de aceptación de specs de este proyecto (OpenDayCare, Next.js). Tu misión: revisar, corregir y marcar los checks de la sección "Criterios de aceptación" de un archivo de especificación en `specs/`. Un check se marca **solo con verificación real**, nunca por suposición. + +# Flujo de trabajo + +## 1. Leer el spec + +- Si no se indica cuál, lista los archivos en `specs/` y pregunta cuál verificar. +- Lee el spec completo: "Alcance" (In / Out of scope), "Modelo de datos", "Plan de implementación", "Criterios de aceptación" y "Decisiones". +- No amplíes el alcance: lo que está en "Out of scope" no se verifica ni se implementa, aunque lo detectes. + +## 2. Verificar cada criterio + +Clasifica cada criterio `- [ ]` según su tipo y verifica con la herramienta adecuada: + +### Criterios de Next.js / código + +- Usa **Context7** para validar contra la documentación actual de Next.js: primero `resolve-library-id` con "Next.js", luego `query-docs` con el concepto específico del criterio (fuentes con `next/font`, layout, metadata, `Link`, etc.). No confíes en tu memoria: las APIs pueden haber cambiado. +- Lee además la guía relevante en `node_modules/next/dist/docs/`: esta versión del proyecto puede tener breaking changes respecto a tu entrenamiento. +- Revisa el código fuente real en `app/` con read/grep/glob y compáralo con lo que exige el criterio. + +### Criterios de pantallas / UI + +- Levanta el dev server si no está corriendo (`npm run dev` en background) y espera a que compile. +- Navega con el MCP de Playwright hasta la página implicada. +- **Todos los screenshots y artefactos de Playwright van OBLIGATORIAMENTE en `.playwright-mcp/`** (regla del AGENTS.md del proyecto). +- Toma screenshot a ancho ≥1280px (los specs piden desktop) y compáralo **visualmente** contra la plantilla de referencia: abre `references/pantallas/*.html` con Playwright y captúrala también. +- Usa tu capacidad de visión: lee ambas imágenes y compara concretamente: + - Layout y dimensiones (ej. sidebar de 248px sticky, contenido centrado de 760px, según el spec). + - Colores hex exactos que mencione el spec (fondos, badges, bordes, textos). + - Tipografías y pesos, textos, badges, contadores, iconos, placeholders. +- Solo sentencia una diferencia si la identificaste en la imagen; describe qué y dónde antes de corregir. + +### Criterios de build / runtime + +- `npm run build` debe completar sin errores. +- `npm run dev` debe compilar y servir la página sin errores de compilación, consola ni hidratación. + +## 3. Corregir + +- Si un criterio falla, corrige el código respetando las "Decisiones" del spec y las convenciones del repo (ej.: solo utilities Tailwind con valores arbitrarios exactos, sin atributos `style`, `` para toda navegación, fuentes vía `next/font/google`). +- Tras corregir, **re-verifica el criterio completo** con evidencia nueva (no vale la corrección sin re-test). + +## 4. Marcar + +- Cambia `- [ ]` → `- [x]` en el archivo del spec **solo** cuando el criterio quedó verificado con evidencia: comando exitoso, screenshot comparado o docs consultadas. +- Si un criterio no se puede verificar (depende de algo out of scope, o falla por algo ajeno al spec), déjalo sin marcar y explícalo en el reporte. +- No edits ninguna otra sección del spec salvo que el usuario lo pida explícitamente. + +## 5. Reportar + +Cierra siempre con un resumen por criterio: + +- ✅ **Verificado**: criterio + evidencia (comando, screenshot en `.playwright-mcp/`, docs). +- 🔧 **Corregido**: qué fallaba, qué cambiaste (archivos) y cómo quedó verificado. +- ⛔ **Bloqueado**: motivo exacto y qué hace falta para desbloquear. + +# Reglas del proyecto (AGENTS.md) + +- Screenshots y cualquier salida de Playwright → carpeta `.playwright-mcp/`. +- Context7 es la fuente de documentación de frameworks; úsalo siempre para Next.js. +- Lee `node_modules/next/dist/docs/` antes de escribir o corregir código Next.js: puede diferir de lo que conoces. diff --git a/.opencode/commands/spec-verify.md b/.opencode/commands/spec-verify.md new file mode 100644 index 0000000..3dc84be --- /dev/null +++ b/.opencode/commands/spec-verify.md @@ -0,0 +1,14 @@ +--- +description: Verifica, corrige y marca los criterios de aceptación de un spec usando el agente spec-verifier (Context7 + Playwright con visión) +agent: spec-verifier +--- + +Verifica los criterios de aceptación del spec: $ARGUMENTS + +Reglas de ejecución: + +- Si `$ARGUMENTS` viene vacío, lista los specs disponibles en `specs/` y pregunta cuál verificar. No continúes sin respuesta. +- Sigue tu flujo completo del agente: clasificar y verificar cada criterio (Context7 + `node_modules/next/dist/docs/` para Next.js, Playwright con screenshots en `.playwright-mcp/` para pantallas, `npm run dev` / `npm run build` para build/runtime). +- Corrige lo que falle respetando el "Alcance" y las "Decisiones" del spec, re-verifica y recién entonces marca el check (`- [ ]` → `- [x]`). +- Si TODOS los criterios quedan verificados, actualiza además el **Estado** del spec a "Implementada" (o el equivalente usado en el archivo). +- Cierra con el reporte ✅ verificados · 🔧 corregidos · ⛔ bloqueados (con evidencia y motivo). diff --git a/AGENTS.md b/AGENTS.md index 2129ca7..8ac4718 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -12,3 +12,32 @@ This block is written and re-added by `next dev` — verify at `node_modules/nex - Playwright Scheenshots y cualquier cosa relacionada a Playwright tiene que estar en la carpeta .playwright-mcp. - Context7 Usaremos este MCP para traer la documentación actualizada del framework. + +## Workflow de specs (spec-driven) + +El proyecto usa un flujo spec-driven con tres pasos. Cada spec vive en `specs/NN-slug.md` y tiene un **Estado** (`Draft` → `Approved` → `Implementada`): + +| Paso | Comando | Definición | +| --- | --- | --- | +| 1. Diseñar | `/spec ` | Skill en `.agents/skills/spec/` — redacta el spec en `specs/NN-slug.md` (estado `Draft`) | +| 2. Implementar | `/spec-impl ` | Skill en `.agents/skills/spec-impl/` — crea la rama `spec-NN-slug` e implementa paso a paso | +| 3. Verificar | `/spec-verify ` | Comando en `.opencode/commands/spec-verify.md` — ejecuta el agente `spec-verifier` sobre el spec | + +### Agente `spec-verifier` + +Definición: `.opencode/agents/spec-verifier.md` (a nivel de proyecto, no global). + +- **Modelo:** `zai-coding-plan/glm-5.3-flash` (soporta visión, necesario para comparar screenshots). **Modo:** `all` (agente principal o subagente). +- **Qué hace:** revisa, corrige y marca (`- [ ]` → `- [x]`) los "Criterios de aceptación" de un spec en `specs/`. +- **Criterios de Next.js/código** → Context7 (docs actualizadas de Next.js) + guías locales en `node_modules/next/dist/docs/`. +- **Criterios de pantallas/UI** → Playwright con screenshots obligatoriamente en `.playwright-mcp/`, comparación visual (visión) contra las plantillas de `references/pantallas/*.html` a ancho ≥1280px. +- **Criterios de build/runtime** → `npm run dev` / `npm run build` con salida limpia. +- **Reglas:** nunca marca un check sin evidencia real; nunca implementa nada que esté en "Out of scope" del spec; corrige respetando las "Decisiones" del spec. +- **Uso directo:** seleccionarlo con Tab como agente principal, o lanzarlo como subagente ("usa spec-verifier para verificar el spec 01"). + +### Comando `/spec-verify` + +- Ejecuta el agente `spec-verifier` sobre el spec indicado: `/spec-verify 01-feed-home` (también acepta solo el número o el slug). +- Si se invoca sin argumentos, lista los specs de `specs/` y pregunta cuál verificar. +- Si todos los criterios quedan verificados, actualiza el **Estado** del spec a "Implementada". +- Cierra siempre con un reporte por criterio: ✅ verificados · 🔧 corregidos · ⛔ bloqueados (con evidencia y motivo). diff --git a/specs/01-feed-home.md b/specs/01-feed-home.md index 5ec2053..dab9212 100644 --- a/specs/01-feed-home.md +++ b/specs/01-feed-home.md @@ -1,6 +1,6 @@ # SPEC 01 — Home: feed de la guardería (plantilla feed.dc.html) -> **Estado:** Implementada +> **Estado:** Verificada (2026-10-20) > **Depende de:** — > **Fecha:** 2026-10-19 > **Objetivo:** Implementar la plantilla `references/pantallas/feed.dc.html` como página home (`/`) en Next.js, visualmente idéntica al original, sin autenticación ni base de datos. @@ -9,12 +9,12 @@ **In:** -- Página `/` (`app/page.tsx`) con: sidebar fijo de 248px (logo OpenDayCare · Sala Soles, botón "Nueva publicación", nav con Feed activo + Niños/Avisos/Mi cuenta, tarjeta de usuario "Caro Giménez" con logout), saludo ("GUARDERÍA · SALA SOLES" / "Buenas, Caro" / "12 niños · martes 17 jun"), caja "Compartí un momento…", separador "PUBLICADO HOY" y los 3 posts de la plantilla (logro, actividad con placeholder de foto, anuncio). +- Página `/` (`app/page.tsx`) con: sidebar sticky de 248px (logo OpenDayCare · Sala Soles, botón "Nueva publicación", nav con Feed activo + Niños/Avisos/Mi cuenta, tarjeta de usuario "Caro Giménez" con logout), saludo ("GUARDERÍA · SALA SOLES" / "Buenas, Caro" / "12 niños · martes 17 jun"), caja "Compartí un momento…", separador "PUBLICADO HOY" y los 3 posts de la plantilla (logro, actividad con placeholder de foto, anuncio). - Datos mock tipados en `app/data/feed.ts` con los 3 posts exactos de la plantilla. - Componentes en `app/components/`: `Sidebar.tsx`, `FeedHeader.tsx`, `ShareBox.tsx`, `PostCard.tsx`. - Cambio de fuentes en `app/layout.tsx` (Fredoka + Nunito vía `next/font/google`), `lang="es"` y metadata "OpenDayCare". - Estilos base en `app/globals.css` (fondo #F6ECDF, texto #3F362E, scrollbar custom, tema claro fijo). -- Todos los links como `` a rutas futuras (`/crear-publicacion`, `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion`, `/login`). +- Todos los links como `` a rutas futuras (`/crear-publicacion`, `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion`, `/login`, `/foto` — este último en el placeholder de foto, como `foto.dc.html` en la plantilla). **Out of scope (para specs futuras):** @@ -66,17 +66,17 @@ Convenciones: los colores van como hex exactos de la plantilla; el mapa `categor ## Criterios de aceptación -- [ ] `npm run dev` levanta sin errores y `/` muestra el feed completo: sidebar + saludo + caja + separador + 3 posts. -- [ ] `npm run build` completa sin errores. -- [ ] A ancho ≥1280px el layout coincide con la plantilla: sidebar 248px sticky, main con scroll propio y contenido centrado de 760px. -- [ ] Fredoka en logo, saludo y nombres de autor; Nunito (pesos 400–800) en el resto. -- [ ] Post 1: badge LOGRO (fondo `#CFEBD8`, texto `#3E9B6C`), ♥ 3, 💬 1, link "Editar". -- [ ] Post 2: badge ACTIVIDAD (fondo `#C7E7F1`, texto `#2E89A6`), placeholder dashed "Foto · pintando con témperas", ♥ 5, 💬 2. -- [ ] Post 3: avatar megáfono (fondo `#CCD8F4`), badge ANUNCIO, "Para: toda la sala", ♥ 8, 💬 0. -- [ ] Todos los links navegan con ``: `/crear-publicacion` (botón, caja y Editar), `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion` (íconos de comentarios), `/login` (logout). -- [ ] Colores base exactos: fondo `#F6ECDF`, tarjetas `#FFFDF9` con borde `#ECE0D0`, sombras y radios según plantilla. -- [ ] Con el sistema en modo oscuro la página se mantiene en tema claro (sin dark mode). -- [ ] Los componentes nuevos no usan atributos `style`; todo está en utilities Tailwind con valores arbitrarios exactos. +- [x] `npm run dev` levanta sin errores y `/` muestra el feed completo: sidebar + saludo + caja + separador + 3 posts. *(Verificado 2026-10-20 en `localhost:3001` a 1440×900; consola sin errores de compilación ni hidratación. Capturas: `.playwright-mcp/verify-feed-app-1440.png`, `.playwright-mcp/verify-feed-app-bottom.png`.)* +- [x] `npm run build` completa sin errores. *(Next.js 16.4.2 + Turbopack: compilación, TypeScript y prerender de `/` OK.)* +- [x] A ancho ≥1280px el layout coincide con la plantilla: sidebar 248px sticky, main con scroll propio y contenido centrado de 760px. *(Computed styles: `aside` 248px sticky top-0 h-screen; `main` h-screen overflow-y auto; contenedor max-width 760px centrado — márgenes 211px/211px a 1440px.)* +- [x] Fredoka en logo, saludo y nombres de autor; Nunito (pesos 400–800) en el resto. *(Computed: Fredoka 17px/600 logo, 30px/600 h1, 16.5px/600 autores; Nunito 400 texto, 600 nav inactivo, 700 likes, 800 eyebrow/nav activo. Fuentes variables self-hosted vía `next/font/google`.)* +- [x] Post 1: badge LOGRO (fondo `#CFEBD8`, texto `#3E9B6C`), ♥ 3, 💬 1, link "Editar". *(Computed: `rgb(207,235,216)` / `rgb(62,155,108)`; acciones 3 / 1 / Editar → `/crear-publicacion`.)* +- [x] Post 2: badge ACTIVIDAD (fondo `#C7E7F1`, texto `#2E89A6`), placeholder dashed "Foto · pintando con témperas", ♥ 5, 💬 2. *(Computed: `rgb(199,231,241)` / `rgb(46,137,166)`; placeholder dashed 1.5px `#DBCDBA`, 200px alto, link a `/foto`; acciones 5 / 2.)* +- [x] Post 3: avatar megáfono (fondo `#CCD8F4`), badge ANUNCIO, "Para: toda la sala", ♥ 8, 💬 0. *(Computed: avatar 44px `rgb(204,216,244)` con SVG megáfono idéntico a la plantilla; badge `rgb(204,216,244)` / `rgb(78,114,200)`; acciones 8 / 0.)* +- [x] Todos los links navegan con ``: `/crear-publicacion` (botón, caja y Editar), `/ninos`, `/avisos`, `/mi-cuenta`, `/detalle-publicacion` (íconos de comentarios), `/login` (logout), `/foto` (placeholder de foto). *(Hrefs del DOM verificados; `next/link` importado en Sidebar, ShareBox y PostCard; sin `` planos.)* +- [x] Colores base exactos: fondo `#F6ECDF`, tarjetas `#FFFDF9` con borde `#ECE0D0`, sombras y radios según plantilla. *(Computed: body `rgb(246,236,223)`; tarjetas `rgb(255,253,249)`, borde 1px `rgb(236,224,208)`, radio 20px, sombra `rgba(120,90,60,.5) 0 4px 16px -12px`; caja 18px.)* +- [x] Con el sistema en modo oscuro la página se mantiene en tema claro (sin dark mode). *(Emulación `prefers-color-scheme: dark` en Playwright: body, aside y tarjetas mantienen sus colores claros. Captura: `.playwright-mcp/verify-feed-darkmode.png`.)* +- [x] Los componentes nuevos no usan atributos `style`; todo está en utilities Tailwind con valores arbitrarios exactos. *(Grep `style=` en `app/**/*.{tsx,css}`: 0 resultados; los únicos `[style]` del DOM son internos de Next.js — `nextjs-portal`, `next-route-announcer` — fuera de los componentes.)* ## Decisiones