sdd-es 2.0.0 → 2.5.0

package/skills/vercel-deploy/vercel-deploy.sh

@@ -0,0 +1,216 @@
+#!/bin/bash
+# Vercel Deploy Skill - Wrapper para invocación desde SDD-ES
+# Uso: ./vercel-deploy.sh [--spec-id SPEC_ID] [--profile PROFILE]
+
+set -e
+
+# Colores
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Valores por defecto
+SPEC_ID="${spec_id:=}"
+PROFILE="${profile:=experto}"
+
+# Parsear argumentos
+while [[ $# -gt 0 ]]; do
+  case $1 in
+    --spec-id) SPEC_ID="$2"; shift 2 ;;
+    --profile) PROFILE="$2"; shift 2 ;;
+    *) shift ;;
+  esac
+done
+
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${BLUE}Vercel Deploy Skill${NC}"
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+
+# 1. Validar token Vercel
+if [ -z "$VERCEL_TOKEN" ]; then
+  echo -e "${RED}❌ VERCEL_TOKEN no configurado${NC}"
+  echo ""
+  echo "Para generar un token:"
+  echo "1. Ve a: https://vercel.com/account/tokens"
+  echo "2. Crea un nuevo token con scope 'full'"
+  echo "3. Copia el token y pégalo en la variable VERCEL_TOKEN"
+  echo ""
+  exit 1
+fi
+
+echo -e "${BLUE}📋 Configuración:${NC}"
+echo "   Profile: $PROFILE"
+echo "   Spec ID: $SPEC_ID"
+echo ""
+
+# 2. Ejecutar pre-checks
+echo -e "${BLUE}🔍 Ejecutando pre-checks...${NC}"
+
+# Check: Token Vercel
+echo -e "${GREEN}✅ Token Vercel presente${NC}"
+
+# Check: Cambios no commiteados → auto-commit sin mostrar git comandos
+if ! git diff-files --quiet || ! git diff-index --cached --quiet HEAD; then
+  echo -e "${YELLOW}⚠️  Guardando cambios automáticamente...${NC}"
+  git add -A
+  git commit -m "Auto-commit SDD-ES deploy ($(date +'%Y-%m-%d %H:%M:%S'))" 2>/dev/null || true
+  echo -e "${GREEN}✅ Cambios guardados${NC}"
+else
+  echo -e "${GREEN}✅ Rama limpia${NC}"
+fi
+
+# Check: Tests pasen (si existen)
+if [ -f "package.json" ] && grep -q '"test"' package.json; then
+  echo -e "${BLUE}🧪 Ejecutando tests...${NC}"
+  if npm test 2>&1 | tail -5; then
+    echo -e "${GREEN}✅ Tests pasando${NC}"
+  else
+    echo -e "${YELLOW}⚠️  Tests con fallos o warnings${NC}"
+  fi
+fi
+
+# Check: Sin secretos en código
+echo -e "${BLUE}🔒 Verificando secretos...${NC}"
+if grep -r "PRIVATE_KEY\|PASSWORD\|SECRET" --include="*.js" --include="*.ts" . 2>/dev/null | grep -v node_modules | grep -v ".git"; then
+  echo -e "${YELLOW}⚠️  Se encontraron posibles secretos en el código${NC}"
+else
+  echo -e "${GREEN}✅ Sin secretos detectados${NC}"
+fi
+
+echo ""
+
+# 3. Auto-generar vercel.json si no existe
+if [ ! -f "vercel.json" ]; then
+  echo -e "${BLUE}📝 Generando vercel.json...${NC}"
+
+  # Detectar tipo de proyecto
+  if [ -f "package.json" ]; then
+    # Node.js project
+    cat > vercel.json << 'EOF'
+{
+  "version": 2,
+  "buildCommand": "npm run build || npm run dev",
+  "installCommand": "npm install",
+  "env": {
+    "NODE_ENV": "production"
+  },
+  "regions": ["sfo1"],
+  "functions": {
+    "api/**/*.js": {
+      "maxDuration": 10
+    }
+  },
+  "redirects": [
+    {
+      "source": "/",
+      "destination": "/index.html"
+    }
+  ]
+}
+EOF
+    echo -e "${GREEN}✅ vercel.json creado${NC}"
+  else
+    echo -e "${YELLOW}⚠️  No se pudo detectar tipo de proyecto${NC}"
+  fi
+fi
+
+echo ""
+
+# 4. Desplegar a Vercel
+echo -e "${BLUE}🚀 Desplegando a Vercel...${NC}"
+
+# Usar Vercel CLI si está disponible, sino instrucciones
+if command -v vercel &> /dev/null; then
+  echo -e "${BLUE}Usando Vercel CLI...${NC}"
+
+  # Deploy
+  if vercel --token "$VERCEL_TOKEN" --prod 2>&1 | tee /tmp/vercel-deploy.log; then
+    echo -e "${GREEN}✅ Deploy completado${NC}"
+
+    # Obtener URL
+    VERCEL_URL=$(grep "https://" /tmp/vercel-deploy.log | tail -1 | awk '{print $NF}')
+    if [ -n "$VERCEL_URL" ]; then
+      echo -e "${GREEN}   URL: $VERCEL_URL${NC}"
+    fi
+  else
+    echo -e "${RED}❌ Error en el deploy${NC}"
+    exit 1
+  fi
+else
+  echo -e "${YELLOW}⚠️  Vercel CLI no instalado${NC}"
+  echo ""
+  echo "Para instalar:"
+  echo "  npm i -g vercel"
+  echo ""
+  echo "Luego ejecuta:"
+  echo "  vercel --token \$VERCEL_TOKEN --prod"
+  echo ""
+  exit 1
+fi
+
+echo ""
+
+# 5. Health check (3 reintentos)
+echo -e "${BLUE}🏥 Ejecutando health checks...${NC}"
+
+MAX_RETRIES=3
+RETRY=0
+HEALTH_OK=false
+
+while [ $RETRY -lt $MAX_RETRIES ]; do
+  RETRY=$((RETRY + 1))
+  echo -e "${BLUE}Intento $RETRY/$MAX_RETRIES...${NC}"
+
+  sleep 5  # Esperar a que Vercel estabilice
+
+  if curl -s -o /dev/null -w "%{http_code}" "$VERCEL_URL" | grep -q "200"; then
+    echo -e "${GREEN}✅ Health check pasó${NC}"
+    HEALTH_OK=true
+    break
+  else
+    echo -e "${YELLOW}⚠️  Health check falló, reintentando...${NC}"
+  fi
+done
+
+if [ "$HEALTH_OK" = false ]; then
+  echo -e "${RED}❌ Health check falló después de $MAX_RETRIES intentos${NC}"
+  echo ""
+  echo "Tu código está publicado en Vercel, pero parece haber un problema."
+  echo "Verifica en: https://vercel.com/dashboard"
+  exit 1
+fi
+
+echo ""
+
+# 6. Guardar configuración
+echo -e "${BLUE}💾 Guardando estado del deploy...${NC}"
+
+mkdir -p .sdd
+
+cat > .sdd/.vercel-deploy.json << EOF
+{
+  "deployed": true,
+  "deployment_date": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
+  "app_url": "$VERCEL_URL",
+  "profile": "$PROFILE",
+  "spec_id": "$SPEC_ID"
+}
+EOF
+
+echo -e "${GREEN}✅ Configuración guardada${NC}"
+
+echo ""
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${GREEN}✅ ¡Despliegue exitoso!${NC}"
+echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo ""
+echo "Tu app está en vivo:"
+echo -e "   ${GREEN}$VERCEL_URL${NC}"
+echo ""
+echo "Puedes compartir este link con quien quieras."
+echo ""
+
+exit 0

package/skills/wireframe-mvp/SKILL.md

@@ -0,0 +1,157 @@
+---
+description: Genera un wireframe HTML de la pantalla P0 del MVP. Usa el DESIGN.md activo para colores, tipografía y estilo. Guarda el HTML en .sdd/diseño/ con la tool Write. Respeta {PLUGIN_DIR}/craft/anti-ai-slop.md.
+model: claude-sonnet-4-6
+allowed-tools: Read, Write, Bash
+---
+
+# Skill: Wireframe MVP
+
+## Propósito
+
+Generar un **wireframe HTML funcional** de la pantalla más importante del MVP (P0). El wireframe es visual, usa los tokens del DESIGN.md activo, y el usuario puede verlo antes de que exista una línea de código real.
+
+---
+
+## Lo que lees antes de empezar
+
+```bash
+# Pantalla P0
+cat .sdd/product-design.json | node -e "
+  const d = JSON.parse(require('fs').readFileSync('/dev/stdin','utf8'));
+  const p0 = d.core_screens.find(s => s.priority === 'P0');
+  console.log(JSON.stringify(p0, null, 2));
+  console.log('DESIGN:', d.design_direction);
+"
+
+# DESIGN.md activo
+DESIGN_PATH=$(cat .sdd/estado.json | node -e "
+  const d = JSON.parse(require('fs').readFileSync('/dev/stdin','utf8'));
+  console.log(d.design_system_path || '{PLUGIN_DIR}/design-systems/neutral-modern/DESIGN.md');
+")
+cat "$DESIGN_PATH"
+
+# Reglas anti-slop
+cat "{PLUGIN_DIR}/craft/anti-ai-slop.md" | head -80
+```
+
+---
+
+## Lo que produces
+
+Un HTML completo, en un solo archivo, guardado con la tool `Write` en `.sdd/diseño/wireframe-pantalla-principal.html`:
+
+```html
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>[product.name] — [screen.name]</title>
+  <style>
+    /* Variables del DESIGN.md activo */
+    :root {
+      --bg-base: [valor del DESIGN.md];
+      --text-primary: [valor del DESIGN.md];
+      --accent: [valor del DESIGN.md];
+      /* ... resto de variables */
+    }
+    /* Estilos de componentes del DESIGN.md */
+    /* ... */
+  </style>
+</head>
+<body>
+  <!-- Wireframe de [screen.name] -->
+  <!-- Usando los elementos definidos en screen.elements[] -->
+</body>
+</html>
+```
+
+---
+
+## Reglas de generación
+
+### 1. Fidelidad al DESIGN.md
+
+- Los valores CSS **deben coincidir** con el DESIGN.md activo (colores, fuentes, border-radius, sombras)
+- Para las fuentes: si el DESIGN.md usa Google Fonts, añadir el `<link>` correspondiente
+- Para bold-brutalist: `border-radius: 0`, offset shadows, UPPERCASE en headings
+- Para warm-editorial: Playfair Display para headings, bordes casi cuadrados
+- Para neutral-modern: Inter, border-radius 6–8px, sombras mínimas
+
+### 2. Contenido del wireframe
+
+- Usar **copy real derivado del IR** — el nombre del producto, las features del mvp
+- **No usar lorem ipsum** ni "Feature One" ni placeholders genéricos
+- Los datos de ejemplo deben ser coherentes con el dominio (si es peluquería, usar "10:00 - Ana García", no "Item 1")
+
+### 3. Estructura del HTML
+
+- Un solo archivo (no imports externos excepto Google Fonts)
+- CSS en `<style>` inline
+- No usar frameworks externos (no Tailwind, no Bootstrap)
+- JavaScript solo si la pantalla lo requiere (ej: toggle de tab, modal básico)
+- El wireframe debe verse bien en 1280px de ancho (desktop first para web)
+
+### 4. Elementos a incluir
+
+Genera los elementos definidos en `screen.elements[]` del ProductDesign:
+- `nav` → barra de navegación con el nombre del producto + links principales
+- `hero` → sección principal con el value proposition
+- `form` → formulario con los campos relevantes al dominio
+- `table` → tabla con datos de ejemplo del dominio
+- `card` → tarjeta(s) con información
+- `list` → lista de items
+- `button` → botón con el label del CTA real
+- `modal` → modal (puede ser cerrado por defecto)
+
+### 5. Guardar con Write
+
+Usa la tool `Write` para guardar el HTML directamente:
+- Ruta destino: `.sdd/diseño/wireframe-pantalla-principal.html`
+- Crear el directorio `.sdd/diseño/` si no existe (con `Bash`: `mkdir -p .sdd/diseño`)
+- Después de guardar, abrir en el navegador: `start .sdd/diseño/wireframe-pantalla-principal.html` (Windows) / `open ...` (Mac) / `xdg-open ...` (Linux)
+
+---
+
+## Checklist anti-AI-slop (OBLIGATORIO antes de finalizar)
+
+Antes de guardar el HTML, verifica:
+
+- [ ] ¿Los colores son exactamente los del DESIGN.md? (sin indigo default `#6366F1`)
+- [ ] ¿No hay gradientes de 2 colores en diagonal sobre el hero?
+- [ ] ¿Los iconos son SVG o texto — no emojis?
+- [ ] ¿La fuente es la del DESIGN.md (no sistema default si el DESIGN.md especifica una)?
+- [ ] ¿No hay métricas inventadas ("10x más rápido")?
+- [ ] ¿El copy es específico del dominio (no "Feature One", "Lorem ipsum")?
+- [ ] ¿No hay el patrón "card con borde izquierdo de color + métrica"?
+
+Si alguno falla, corregir antes de guardar.
+
+---
+
+## Guardar el output
+
+```bash
+mkdir -p .sdd/diseño
+```
+
+Luego usar la tool `Write` con ruta `.sdd/diseño/wireframe-pantalla-principal.html` y el HTML completo como contenido.
+
+```bash
+# Abrir en navegador tras guardar
+start .sdd/diseño/wireframe-pantalla-principal.html    # Windows
+# open .sdd/diseño/wireframe-pantalla-principal.html   # macOS
+# xdg-open .sdd/diseño/wireframe-pantalla-principal.html # Linux
+
+echo "✅ Wireframe guardado en .sdd/diseño/wireframe-pantalla-principal.html"
+```
+
+---
+
+## Notas
+
+- El wireframe es un **boceto funcional**, no el diseño final
+- El objetivo es que el usuario vea "su producto" antes de que exista código
+- Después del wireframe, la skill `critica-diseno` evalúa y refina automáticamente
+- El HTML generado puede usarse como base para el frontend real (los tokens CSS son reutilizables)
+- El HTML se abre directamente en el navegador del sistema — no requiere servidor

package/.claude-plugin/marketplace.json

@@ -1,31 +0,0 @@
-{
-  "name": "sdd-es-marketplace",
-  "owner": {
-    "name": "SDD-ES",
-    "url": "https://github.com/tu-usuario/sdd-es"
-  },
-  "metadata": {
-    "description": "Marketplace de SDD-ES — Spec-Driven Development en español para Claude Code.",
-    "version": "2.0.0"
-  },
-  "plugins": [
-    {
-      "name": "sdd-es",
-      "source": "./",
-      "description": "Fábrica de software agnóstica al stack: de la idea al despliegue, con 12 agentes especializados, mapas y compresión de tokens.",
-      "version": "2.0.0",
-      "author": {
-        "name": "SDD-ES"
-      },
-      "homepage": "https://github.com/tu-usuario/sdd-es",
-      "license": "MIT",
-      "keywords": [
-        "spec-driven-development",
-        "español",
-        "agentes",
-        "mcp",
-        "agnóstico-al-stack"
-      ]
-    }
-  ]
-}

package/.claude-plugin/plugin.json

@@ -1,97 +0,0 @@
-{
-  "name": "sdd-es",
-  "version": "2.0.0",
-  "description": "Spec-Driven Development en español. Fábrica de software agnóstica al stack: de la idea al despliegue. Con mapas y compresión de tokens.",
-  "homepage": "https://github.com/carlos060798/sdd-lite",
-  "repository": "https://github.com/carlos060798/sdd-lite",
-  "license": "MIT",
-  "instructions": "El usuario corre comandos /sdd.* para guiar el flujo SDD-ES. El plugin orquesta 12 agentes especializados.",
-
-  "commands": [
-    "sdd",
-    "sdd.constitucion",
-    "sdd.configurar",
-    "sdd.descubrir",
-    "sdd.especificar",
-    "sdd.importar",
-    "sdd.aclarar",
-    "sdd.checklist",
-    "sdd.planificar",
-    "sdd.tareas",
-    "sdd.analizar",
-    "sdd.implementar",
-    "sdd.qa",
-    "sdd.verificar",
-    "sdd.desplegar",
-    "sdd.canary",
-    "sdd.snapshot",
-    "sdd.retro",
-    "sdd.release",
-    "sdd.glosario",
-    "sdd.estado",
-    "sdd.mapear",
-    "sdd.comprimir",
-    "sdd.ayuda",
-    "sdd.crear-mcp",
-    "sdd.crear-app"
-  ],
-
-  "agents": [
-    "arquitecto",
-    "disenador-api",
-    "asesor-datos",
-    "desarrollador-backend",
-    "desarrollador-frontend",
-    "operaciones",
-    "tester",
-    "revisor",
-    "critico",
-    "seguridad",
-    "investigador",
-    "documentador"
-  ],
-
-  "skills": [
-    "deteccion-stack",
-    "gestion-estado",
-    "validacion-spec",
-    "enrutador-agentes",
-    "verificador-implementacion",
-    "indexador",
-    "compresion-tokens",
-    "constitucion-constraint",
-    "modo-guiado",
-    "orquestacion-ptc"
-  ],
-
-  "mcpServers": {
-    "sdd-figma": {
-      "description": "Integración con Figma para el agente desarrollador-frontend. Analiza el sistema de diseño local, trae componentes de Figma y genera código adaptado.",
-      "command": "node",
-      "args": ["{PLUGIN_DIR}/mcp-figma/dist/index.js"],
-      "requiredBy": ["desarrollador-frontend"],
-      "activatesOn": ["ui", "componente", "interfaz", "diseño", "vista", "figma", "layout"]
-    },
-    "navegador": {
-      "description": "Navegador real (Playwright) para QA E2E del comando /sdd.qa: ejecuta casos generados desde los Criterios de Aceptación en un navegador de verdad. Se usa un MCP existente, no se mantiene uno propio.",
-      "command": "npx",
-      "args": ["-y", "@playwright/mcp@latest"],
-      "requiredBy": ["tester"],
-      "activatesOn": ["qa", "navegador", "e2e", "prueba", "probar", "playwright"],
-      "opcional": true
-    }
-  },
-
-  "features": [
-    "Spec-Driven Development",
-    "12 agentes especializados",
-    "Integración Figma → código adaptado al design system local",
-    "Mapas de proyecto (ahorro de tokens)",
-    "Compresión caveman-like",
-    "Recomendaciones de modelos",
-    "Hooks personalizables",
-    "Instalador multiplataforma (npx sdd-es)",
-    "Totalmente editable (Markdown plano)",
-    "100% agnóstico al stack"
-  ]
-}