sdd-es 2.0.0 → 2.6.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: sonnet
+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