sdd-es 2.0.0 → 2.6.0

package/design-systems/warm-editorial/DESIGN.md

@@ -0,0 +1,221 @@
+# DESIGN SYSTEM: Warm Editorial
+
+> **Dirección**: Cálido, editorial, humano. Inspirado en revistas de calidad. Serif para display, sans-serif para cuerpo. Tonos tierra.
+
+---
+
+## 1. Visual Theme & Atmosphere
+
+Como una revista bien editada. Contenido primero, estructura visible. Tipografía como elemento de diseño.
+Cálido sin ser informal. Elegante sin ser frío.
+
+**Palabras clave**: editorial · cálido · legible · humano · curado · artesanal
+
+---
+
+## 2. Color Palette & Roles
+
+```css
+/* Fondos */
+--bg-base:       #FAF8F4;   /* pergamino cálido */
+--bg-surface:    #FFFFFF;
+--bg-subtle:     #F2EDE6;   /* secciones alternadas */
+--bg-emphasis:   #E8DDD2;   /* hover */
+
+/* Texto */
+--text-primary:  #1A1410;   /* casi negro cálido */
+--text-secondary:#6B5D52;   /* marrón medio */
+--text-muted:    #A89585;   /* gris cálido */
+--text-inverse:  #FAF8F4;
+
+/* Acento */
+--accent:        #C0392B;   /* rojo editorial */
+--accent-hover:  #A93226;
+--accent-subtle: #FDECEA;
+
+/* Secundario */
+--accent2:       #8B6914;   /* dorado oscuro para detalles */
+
+/* Estado */
+--success:       #27AE60;
+--warning:       #E67E22;
+--error:         #C0392B;
+--info:          #2980B9;
+
+/* Bordes */
+--border:        #DDD0C4;
+--border-strong: #B8A99A;
+```
+
+---
+
+## 3. Typography Rules
+
+```css
+/* Fuentes — la clave del sistema */
+--font-display: 'Playfair Display', 'Georgia', serif;  /* headings */
+--font-body:    'Source Serif 4', 'Georgia', serif;    /* body (serif también) */
+--font-ui:      'Inter', system-ui, sans-serif;        /* labels, nav, botones */
+--font-mono:    'JetBrains Mono', monospace;
+
+/* Escala */
+--text-xs:   12px / 1.4;   /* labels UI */
+--text-sm:   14px / 1.5;
+--text-base: 17px / 1.7;   /* cuerpo más generoso */
+--text-lg:   20px / 1.6;
+--text-xl:   24px / 1.4;
+--text-2xl:  30px / 1.3;
+--text-3xl:  38px / 1.15;
+--text-4xl:  48px / 1.05;
+
+/* Pesos display */
+--display-normal: 400;
+--display-italic: 400 italic;  /* uso frecuente de itálica en editorial */
+--display-bold:   700;
+```
+
+**Reglas específicas**:
+- H1: Playfair Display, 38–48px, weight 700, tracking -0.01em
+- H2: Playfair Display, 30px, weight 400 (elegante sin negrita)
+- Subtítulo / pullquote: Playfair Display italic, 20–24px
+- Body: Source Serif 4, 17px, line-height 1.7 (más espacio para lectura)
+- UI (botones, nav, labels): Inter, 13–14px
+
+---
+
+## 4. Component Stylings
+
+### Botones
+```css
+/* Primario — sin bordes redondeados, más recto */
+.btn-primary {
+  background: var(--accent);
+  color: white;
+  padding: 12px 28px;
+  border-radius: 2px;   /* casi cuadrado, editorial */
+  font-family: var(--font-ui);
+  font-weight: 500;
+  font-size: 13px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* Outline editorial */
+.btn-outline {
+  background: transparent;
+  border: 1.5px solid var(--text-primary);
+  color: var(--text-primary);
+  padding: 12px 28px;
+  border-radius: 2px;
+  font-family: var(--font-ui);
+  font-size: 13px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+```
+
+### Cards
+```css
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 0;   /* cuadrado, editorial */
+  padding: 28px 32px;
+}
+
+/* Card con acento en borde izquierdo — solo para featured */
+.card-featured {
+  border-left: 3px solid var(--accent);
+  padding-left: 28px;
+}
+```
+
+### Divisores
+```css
+.divider {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 32px 0;
+}
+
+/* Ornamental — para secciones principales */
+.divider-ornamental::before {
+  content: '✦';
+  display: block;
+  text-align: center;
+  color: var(--accent2);
+  margin-bottom: 8px;
+}
+```
+
+### Pullquotes
+```css
+.pullquote {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 22px;
+  line-height: 1.4;
+  color: var(--text-secondary);
+  border-left: 3px solid var(--accent);
+  padding-left: 20px;
+  margin: 32px 0;
+}
+```
+
+---
+
+## 5. Layout Principles
+
+- **Grid**: 12 columnas, gutter 24px, max-width 1100px (más angosto = más editorial)
+- **Columnas de contenido**: max 65–70 caracteres por línea (aprox 680px a 17px)
+- **Sidebar editorial**: a la derecha, 30% del ancho
+- **Espaciado**: múltiplos de 8px, generoso (secciones con 80–96px entre ellas)
+- **Drop cap**: primera letra grande en artículos principales
+
+---
+
+## 6. Depth & Elevation
+
+```css
+/* Casi sin sombras — la jerarquía viene de la tipografía y los bordes */
+--shadow-sm: 0 1px 4px rgba(26,20,16,0.08);
+--shadow-md: 0 4px 16px rgba(26,20,16,0.10);
+```
+
+Sin sombras de colores. Sin elevation artificial. El peso visual viene del tamaño y grosor tipográfico.
+
+---
+
+## 7. Do's and Don'ts
+
+**✅ Hacer:**
+- Mezclar tamaños tipográficos con contraste fuerte (48px headline + 17px body)
+- Usar itálica del display font para énfasis y citas
+- Espaciado generoso entre párrafos (margin-bottom: 24px en body)
+- Líneas divisoras delgadas entre secciones
+- Fechas, categorías y bylines en Inter 12px uppercase
+
+**❌ No hacer:**
+- Fondos de colores brillantes o saturados
+- Bordes muy redondeados (max 4px en botones, 0 en cards)
+- Gradientes (ninguno)
+- Iconos tipo emoji o ilustraciones de dibujos animados
+- Demasiados elementos en una pantalla (editorial es curado)
+- Tablas sin estilo cuidadoso de bordes
+- Imágenes sin ratio definido (usar aspect-ratio: 16/9 o 3/2)
+
+---
+
+## 8. Responsive Behavior
+
+```
+Desktop  (≥1024px): layout de revista 2–3 col, tipografía grande
+Tablet   (640–1023px): 1–2 col, tipografía reducida un nivel
+Mobile   (<640px): 1 col, heading 28px max, mayor padding lateral (20px)
+```
+
+---
+
+## 9. Agent Prompt Guide
+
+> Usa el sistema Warm Editorial: fondos pergamino (#FAF8F4), tipografía Playfair Display para headings (serif, con itálica), Source Serif 4 para cuerpo, Inter para UI. Acento rojo oscuro (#C0392B) solo en acciones. Tonos tierra (#6B5D52, #A89585). Bordes casi cuadrados (border-radius 2px en botones, 0 en cards). Sin gradientes. Sin bordes redondeados grandes. Espaciado generoso. El diseño se siente como una revista de calidad: curado, elegante, tipográficamente rico.

package/docs/AGENTES.md

@@ -1,6 +1,6 @@
 # Guía de Agentes Especializados
 
-SDD-ES incluye 11 agentes con roles bien definidos. Esta guía explica cuándo se activa cada uno.
+SDD-ES incluye 14 agentes con roles bien definidos. Esta guía explica cuándo se activa cada uno.
 
 ## Tabla rápida
 
@@ -17,6 +17,9 @@ SDD-ES incluye 11 agentes con roles bien definidos. Esta guía explica cuándo s
 | critico | opus | `/sdd.planificar`, `/sdd.analizar` | Riesgos y puntos ciegos |
 | seguridad | opus | Cambios sensibles automáticamente | Auditoría de vulnerabilidades |
 | documentador | sonnet | Bajo demanda (desactivado por defecto) | Docs útiles (no obvias) |
+| investigador | sonnet | Bajo demanda | Investigación técnica, benchmarks, comparativas |
+| product-designer | opus | `/sdd.diseñar` (fase de producto) | Pantallas P0/P1/P2, user flow, mvp_scope |
+| architecture-designer | sonnet | `/sdd.diseñar` (fase de stack) | Stack más simple viable, decisión técnica en lenguaje llano |
 
 ## Cuándo activar/desactivar agentes
 

package/docs/CASO-COMPLETO.md

@@ -0,0 +1,206 @@
+# Caso completo: app de lista de tareas desde cero
+
+Este documento muestra un recorrido real de FORGE para un proyecto pequeño.
+Cada bloque muestra qué escribe el usuario y qué hace FORGE en respuesta.
+
+El caso usa el flujo FORGE (idea → deploy) con perfil `guiado` para un usuario no-técnico.
+
+---
+
+## Fase 1 — Descubrir la idea
+
+**Usuario:**
+```
+/sdd "quiero una app de lista de tareas para mí solo"
+```
+
+**FORGE** (hub `/sdd`):
+1. Lee `.sdd/estado.json` — no existe, proyecto sin inicializar.
+2. Detecta intención FORGE ("quiero una app").
+3. Llama a `/sdd.interpretar` con el texto de la idea.
+
+---
+
+## Fase 2 — Interpretar (`/sdd.interpretar`)
+
+**FORGE** ejecuta internamente:
+1. Activa el agente `investigador` para leer el contexto del directorio actual.
+2. Hace 3 preguntas mínimas al usuario (sí/no o una palabra):
+   - ¿Web en el navegador o app de escritorio? → `web`
+   - ¿Con cuenta de usuario o sin login? → `sin login`
+   - ¿Solo tú o quieres compartir listas? → `solo yo`
+3. Genera `.sdd/ir.json`:
+
+```json
+{
+  "id": "ir-todo-app-001",
+  "product": {
+    "name": "Mi Lista de Tareas",
+    "type": "web",
+    "target_users": "usuario único sin cuenta",
+    "value_proposition": "Lista de tareas personal, sin registro, datos en el navegador"
+  },
+  "features": {
+    "core": ["agregar tarea", "marcar como hecha", "eliminar tarea"],
+    "nice_to_have": ["filtrar por estado", "persistencia en localStorage"]
+  },
+  "constraints": {
+    "tech_preference": null,
+    "budget": "bajo",
+    "team_size": "1"
+  }
+}
+```
+
+**Usuario ve:**
+```
+Entendido. Tu app es una lista de tareas personal para el navegador, sin login.
+
+Características principales:
+  ✓ Agregar tarea
+  ✓ Marcar como hecha
+  ✓ Eliminar tarea
+  ✓ Persistencia en localStorage (los datos quedan aunque cierres el navegador)
+
+¿Arrancamos con el diseño? (responde sí)
+```
+
+---
+
+## Fase 3 — Diseñar (`/sdd.diseñar`)
+
+**Usuario:** `sí`
+
+**FORGE** orquesta internamente:
+1. Agente `product-designer` lee `ir.json` y genera `product-design.json`:
+   - Pantallas P0: lista de tareas + input de nueva tarea
+   - User flow: usuario abre → ve lista → agrega → marca → cierra
+   - MVPscope: solo las 3 features core, sin filtros en V1
+2. Agente `architecture-designer` lee `ir.json` y propone stack:
+   - Frontend: HTML + CSS vanilla + JS puro (sin frameworks — proyecto de 1 persona, bajo presupuesto)
+   - Backend: ninguno (datos en localStorage)
+   - Deploy: GitHub Pages o Vercel (gratis)
+3. Skill `critica-diseno` revisa y aprueba: no hay over-engineering.
+
+**Usuario ve:**
+```
+Diseño listo:
+
+Stack: HTML/CSS/JS vanilla — sin framework, sin backend, datos en tu navegador.
+Deploy: Vercel gratis.
+
+Una pantalla: input + lista de tareas. Simple y directo.
+
+¿Construimos el código? (responde sí)
+```
+
+---
+
+## Fase 4 — Especificar y Planificar
+
+**Usuario:** `sí`
+
+**FORGE** ejecuta `/sdd.especificar` automáticamente desde el IR + ProductDesign:
+1. Genera `.sdd/especificaciones/2026-06-14-todo-app/spec.md` con criterios de aceptación:
+   - CA-001: Al cargar la página, se muestran las tareas guardadas en localStorage
+   - CA-002: El usuario puede agregar una tarea escribiendo en el input y presionando Enter
+   - CA-003: Al hacer click en una tarea se marca como completada (tachada)
+   - CA-004: El botón "×" elimina una tarea permanentemente
+   - CA-005: Los cambios persisten tras recargar la página
+
+Luego ejecuta `/sdd.planificar`:
+1. Plan técnico: 1 archivo `index.html`, 1 `style.css`, 1 `app.js`
+2. Agente `critico` revisa — sin riesgos identificados para este alcance
+3. Presenta plan al usuario para aprobación.
+
+**Usuario ve:**
+```
+Plan aprobado. 3 archivos: index.html, style.css, app.js.
+Estimado: 15 minutos de implementación.
+
+¿Implementamos? (responde sí)
+```
+
+---
+
+## Fase 5 — Implementar (`/sdd.implementar`)
+
+**Usuario:** `sí`
+
+**FORGE** ejecuta `/sdd.tareas` y luego `/sdd.implementar`:
+1. Genera tareas atómicas:
+   - T001: Crear `index.html` con estructura base (input + ul#tasks)
+   - T002: Crear `style.css` con estilos minimalistas
+   - T003: Crear `app.js` con lógica CRUD + localStorage
+   - T004: Conectar los tres archivos y verificar criterios de aceptación
+
+2. Agente `desarrollador-frontend` ejecuta cada tarea en secuencia.
+3. Al terminar T004, agente `tester` genera y corre tests básicos (sin navegador — valida lógica pura de `app.js`).
+4. Agente `revisor` verifica que cada CA del spec esté cubierto.
+
+**Usuario ve:**
+```
+Implementación completa.
+
+✓ T001 index.html
+✓ T002 style.css
+✓ T003 app.js
+✓ T004 integración verificada
+
+Tests: 5/5 pasando
+Spec: CA-001 ✓  CA-002 ✓  CA-003 ✓  CA-004 ✓  CA-005 ✓
+
+¿Desplegamos? (responde sí)
+```
+
+---
+
+## Fase 6 — Verificar y Desplegar
+
+**Usuario:** `sí`
+
+**FORGE** ejecuta `/sdd.verificar` y luego `/sdd.desplegar`:
+
+1. `/sdd.verificar` hace la verificación final:
+   - Lee `spec.md` y el código generado
+   - Confirma que cada criterio de aceptación tiene cobertura en el código
+   - Gate pasa: 0 violaciones de constitución (no hay constitución configurada en este proyecto)
+
+2. `/sdd.desplegar` con gate duro:
+   - Tests verdes ✓
+   - Spec verificada ✓
+   - Sin secretos en el código ✓
+   - Pide confirmación explícita: **el usuario escribe "desplegar"**
+
+3. Agente `operaciones` ejecuta:
+   ```bash
+   npx vercel --prod
+   ```
+4. Health check post-deploy: GET a la URL devuelta por Vercel, verifica HTTP 200.
+5. Registra URL en `.sdd/estado.json`.
+
+**Usuario ve:**
+```
+✓ Desplegado en: https://mi-lista-tareas-abc123.vercel.app
+
+Health check: OK (142ms)
+
+Tu app está en línea. Puedes compartir ese enlace o abrirlo en cualquier navegador.
+```
+
+---
+
+## Resumen del flujo
+
+| Fase | Comando FORGE | Qué produce |
+|------|--------------|-------------|
+| Interpretar idea | `/sdd.interpretar` | `.sdd/ir.json` |
+| Diseñar producto | `/sdd.diseñar` | `product-design.json`, stack definido |
+| Especificar | `/sdd.especificar` | `spec.md` con 5 criterios de aceptación |
+| Planificar | `/sdd.planificar` | `plan.md`, tareas aprobadas |
+| Implementar | `/sdd.implementar` | `index.html`, `style.css`, `app.js` |
+| Verificar | `/sdd.verificar` | Confirmación de CAs cubiertos |
+| Desplegar | `/sdd.desplegar` | URL pública + health check |
+
+Interacciones del usuario: 5 respuestas (`sí` / `sí` / `sí` / `sí` / `desplegar`).
+Todo lo técnico lo maneja FORGE.