elsabro 4.0.0 → 4.2.0

package/commands/elsabro/design-ui.md

@@ -0,0 +1,407 @@
+---
+name: design-ui
+description: Diseñar interfaces visuales con Stitch AI - genera screens y mockups desde texto
+allowed-tools:
+  - Read
+  - Write
+  - Task
+  - TaskCreate
+  - TaskUpdate
+  - TaskList
+  - AskUserQuestion
+  - Glob
+  - mcp__stitch__create_project
+  - mcp__stitch__get_project
+  - mcp__stitch__list_projects
+  - mcp__stitch__list_screens
+  - mcp__stitch__get_screen
+  - mcp__stitch__generate_screen_from_text
+argument-hint: "[descripción de la interfaz o número de fase]"
+sync:
+  reads: [".elsabro/state.json", ".planning/*-PLAN.md"]
+  writes: [".elsabro/state.json", ".elsabro/context.md", ".planning/ui-designs/"]
+  phases: ["initializing", "designing", "generating", "documenting", "done"]
+  passes_context_to: ["execute"]
+---
+
+# ELSABRO: Design UI
+
+<state_sync>
+## SINCRONIZACIÓN DE ESTADO (OBLIGATORIO)
+
+**IMPORTAR**: Este comando DEBE seguir `/references/state-sync.md` y `/references/enforcement-rules.md`.
+
+### Al Iniciar (ANTES de cualquier operación)
+
+```javascript
+// 1. Crear task de inicialización
+TaskCreate({
+  subject: "Initialize design-ui command",
+  description: "Leer estado y preparar diseño de UI",
+  activeForm: "Inicializando..."
+})
+TaskUpdate(id, status: "in_progress")
+
+// 2. Leer estado existente
+const state = Read(".elsabro/state.json") || createInitialState();
+
+// 3. Actualizar estado
+state.current_flow = { command: "design-ui", phase: "initializing", started_at: new Date().toISOString() };
+state.elsabro_mode = true;
+Write(".elsabro/state.json", JSON.stringify(state, null, 2));
+
+// 4. Completar task de inicialización
+TaskUpdate(id, status: "completed")
+```
+
+### Al Cambiar de Fase
+
+```javascript
+// Antes de diseño
+state.current_flow.phase = "designing";
+Write(".elsabro/state.json", JSON.stringify(state, null, 2));
+
+// Antes de generación
+state.current_flow.phase = "generating";
+Write(".elsabro/state.json", JSON.stringify(state, null, 2));
+
+// Antes de documentación
+state.current_flow.phase = "documenting";
+Write(".elsabro/state.json", JSON.stringify(state, null, 2));
+```
+
+### Al Completar
+
+```javascript
+// Registrar en historial
+state.history.push({
+  command: "design-ui",
+  completed_at: new Date().toISOString(),
+  result: "screens_generated",
+  artifact: ".planning/ui-designs/"
+});
+
+// Pasar contexto a execute
+state.context = state.context || {};
+state.context.stitch_project_id = projectId;
+state.context.screens_generated = screenNames;
+state.context.ui_designs_path = ".planning/ui-designs/";
+
+// Limpiar flujo y sugerir siguiente
+state.current_flow = null;
+state.suggested_next = "execute";
+
+Write(".elsabro/state.json", JSON.stringify(state, null, 2));
+
+// Actualizar context.md legible
+Write(".elsabro/context.md", generateHumanReadableContext(state));
+```
+</state_sync>
+
+<objective>
+Diseñar interfaces visuales usando **Stitch AI** como motor de generación. Convierte descripciones de texto o requerimientos de fase en screens visuales profesionales.
+
+**El usuario puede no saber nada de diseño.** Guiarlo con opciones claras y generar screens automáticamente.
+</objective>
+
+<process>
+## Paso 1: Entender el Requerimiento
+
+### Si el argumento es un número de fase:
+```javascript
+// Leer plan de la fase
+const planFile = Glob(".planning/*-PLAN.md").find(f => f.includes(`0${phaseNumber}`));
+const plan = Read(planFile);
+// Extraer features que necesitan UI
+```
+
+### Si el argumento es texto descriptivo:
+```
+Usar directamente como input para Stitch.
+```
+
+### Si no hay argumento:
+```javascript
+AskUserQuestion({
+  questions: [{
+    question: "¿Qué interfaz necesitas diseñar?",
+    header: "Diseño UI",
+    options: [
+      { label: "Desde fase del plan", description: "Generar UI basada en una fase planificada" },
+      { label: "Pantalla específica", description: "Describir la pantalla que necesitas" },
+      { label: "Flujo completo", description: "Diseñar varias pantallas conectadas" }
+    ],
+    multiSelect: false
+  }]
+});
+```
+
+## Paso 2: Verificar/Crear Proyecto Stitch
+
+### 2.1 Buscar proyecto existente
+```javascript
+// Listar proyectos existentes
+const projects = mcp__stitch__list_projects();
+
+// Buscar proyecto del proyecto actual
+const existingProject = projects.find(p => p.name.includes(projectName));
+```
+
+### 2.2 Crear proyecto si no existe
+```javascript
+if (!existingProject) {
+  const project = mcp__stitch__create_project({
+    name: state.context.current_feature || "ELSABRO Design",
+    description: "UI designs for " + (state.context.current_feature || "project")
+  });
+  projectId = project.id;
+} else {
+  projectId = existingProject.id;
+}
+```
+
+## Paso 3: Generar Screens
+
+### 3.1 Preparar descripción para Stitch
+```javascript
+// Construir prompt rico para Stitch
+const screenDescription = buildScreenDescription({
+  requirement: userInput,
+  techStack: state.context.tech_stack,
+  existingPatterns: existingDesignPatterns,
+  accessibility: true
+});
+```
+
+### 3.2 Generar screen
+```javascript
+TaskCreate({
+  subject: "Generate UI screen: " + screenName,
+  activeForm: "Generando diseño...",
+  metadata: { type: "design", tool: "stitch" }
+})
+
+const screen = mcp__stitch__generate_screen_from_text({
+  project_id: projectId,
+  text: screenDescription
+});
+
+TaskUpdate(id, status: "completed")
+```
+
+### 3.3 Para flujos multi-pantalla
+```javascript
+// Generar múltiples screens en secuencia
+const screens = [
+  "Login page with email/password and social auth",
+  "Dashboard with sidebar navigation and cards",
+  "Settings page with form sections"
+];
+
+for (const screen of screens) {
+  mcp__stitch__generate_screen_from_text({
+    project_id: projectId,
+    text: screen
+  });
+}
+```
+
+## Paso 4: Revisar y Refinar
+
+### 4.1 Listar screens generados
+```javascript
+const allScreens = mcp__stitch__list_screens({ project_id: projectId });
+```
+
+### 4.2 Mostrar al usuario
+```
+╔══════════════════════════════════════════════════╗
+║  SCREENS GENERADOS                               ║
+╠══════════════════════════════════════════════════╣
+║                                                  ║
+║  1. Login Page                                   ║
+║     └─ Email/password + social auth              ║
+║                                                  ║
+║  2. Dashboard                                    ║
+║     └─ Sidebar + cards + stats                   ║
+║                                                  ║
+║  3. Settings                                     ║
+║     └─ Form sections + profile                   ║
+║                                                  ║
+╠══════════════════════════════════════════════════╣
+║  ¿Modificar alguna? (número o "ok" para aceptar)║
+╚══════════════════════════════════════════════════╝
+```
+
+### 4.3 Refinamiento
+```javascript
+if (userWantsChanges) {
+  // Obtener screen actual
+  const screen = mcp__stitch__get_screen({
+    project_id: projectId,
+    screen_id: screenId
+  });
+
+  // Regenerar con feedback
+  mcp__stitch__generate_screen_from_text({
+    project_id: projectId,
+    text: originalDescription + "\n\nRefinement: " + userFeedback
+  });
+}
+```
+
+## Paso 5: Documentar Diseños
+
+### 5.1 Crear directorio
+```bash
+mkdir -p .planning/ui-designs
+```
+
+### 5.2 Guardar referencia de diseños
+```javascript
+Write(".planning/ui-designs/UI-DESIGNS.md", `
+# UI Designs
+
+## Project: ${projectName}
+## Stitch Project ID: ${projectId}
+## Generated: ${new Date().toISOString()}
+
+## Screens
+
+${screens.map((s, i) => `
+### ${i + 1}. ${s.name}
+- **ID:** ${s.id}
+- **Descripción:** ${s.description}
+- **Estado:** Generated
+`).join("\n")}
+
+## Design Decisions
+- [Decisiones tomadas durante el diseño]
+
+## Next Steps
+- Implement screens in code: /elsabro:execute
+- Refine designs: /elsabro:design-ui
+`);
+```
+
+## Paso 6: Reportar
+
+```
+╔══════════════════════════════════════════════════╗
+║  DISEÑO UI COMPLETADO                            ║
+╠══════════════════════════════════════════════════╣
+║                                                  ║
+║  Proyecto Stitch: ${projectName}                 ║
+║  Screens generados: ${screens.length}            ║
+║                                                  ║
+║  Documentación: .planning/ui-designs/            ║
+║                                                  ║
+╚══════════════════════════════════════════════════╝
+```
+</process>
+
+<siguiente_paso>
+## Siguiente Paso
+
+Al completar el diseño, establecer en state.json:
+```javascript
+state.suggested_next = "execute";
+Write(".elsabro/state.json", JSON.stringify(state, null, 2));
+```
+
+Mostrar al usuario:
+```
+## Siguiente Paso
+
+→ /elsabro:execute — implementar los diseños en código
+→ /elsabro:design-ui — refinar o agregar más pantallas
+```
+</siguiente_paso>
+
+<error_handling>
+## Manejo de Errores
+
+### Si Stitch no responde
+```
+⚠ Stitch AI no está disponible en este momento.
+
+Opciones:
+1. Reintentar la conexión
+2. Crear wireframes en ASCII (manual)
+3. Continuar sin diseño visual
+
+¿Qué prefieres?
+```
+
+### Si el proyecto Stitch ya tiene screens
+```
+Este proyecto ya tiene ${existingScreens.length} screens.
+
+Opciones:
+1. Ver screens existentes
+2. Agregar nuevos screens
+3. Reemplazar todos
+4. Empezar proyecto nuevo
+```
+</error_handling>
+
+<integration>
+## Integración con ELSABRO
+
+### Con /elsabro:plan
+- Lee planes de fase para extraer requerimientos de UI
+- Genera screens basados en features planificadas
+
+### Con /elsabro:execute
+- Pasa `context.stitch_project_id` para referencia durante implementación
+- Los screens sirven como guía visual para el código
+
+### Con elsabro-ux-designer (Sally)
+- Sally puede usar este comando internamente
+- Combina con 21st.dev para componentes de código
+
+### Con /elsabro:verify-work
+- Los screens generados sirven como referencia visual para verificación
+</integration>
+
+<for_beginners>
+## Para Usuarios Sin Experiencia
+
+### ¿Qué es un diseño de UI?
+```
+UI = User Interface = La parte visual de tu app
+
+Es cómo se VE tu app:
+- Dónde van los botones
+- Cómo se organizan las secciones
+- Qué ve el usuario en cada pantalla
+
+Stitch AI genera estos diseños automáticamente
+a partir de tu descripción en texto.
+```
+
+### Ejemplo
+```
+Tú dices: "Necesito una página de login con email y contraseña"
+
+Stitch genera: Un diseño profesional de login con:
+- Campo de email
+- Campo de contraseña
+- Botón de iniciar sesión
+- Opciones de login social
+- Link de "olvidé mi contraseña"
+```
+</for_beginners>
+
+<checklist>
+## Checklist de Auto-Verificación
+
+- [ ] TaskCreate ejecutado al inicio
+- [ ] state.json leído y actualizado
+- [ ] Proyecto Stitch verificado/creado
+- [ ] Screens generados exitosamente
+- [ ] Diseños documentados en .planning/ui-designs/
+- [ ] state.json actualizado con stitch_project_id
+- [ ] suggested_next establecido como "execute"
+- [ ] TaskUpdate(completed) ejecutado
+</checklist>

package/commands/elsabro/discuss-phase.md

@@ -16,10 +16,12 @@ sync:
 ### Al Iniciar
 - Leer `.elsabro/state.json`
 - Verificar contexto actual del milestone/phase
+- Activar persistent mode: `state.elsabro_mode = true`
 
 ### Al Completar
 - Registrar cambio en `history`
 - Actualizar `context` si corresponde
+- Establecer `state.suggested_next = "plan"`
 </state_sync>
 
 <command-name>discuss-phase</command-name>
@@ -175,3 +177,21 @@ Genera/actualiza `.planning/milestones/M001/P3-DISCUSSION.md`:
 
   Next: /elsabro:execute to start implementation
 ```
+
+<siguiente_paso>
+## Siguiente Paso
+
+Al completar la discusión, establecer en state.json:
+```javascript
+state.suggested_next = "plan";
+Write(".elsabro/state.json", JSON.stringify(state, null, 2));
+```
+
+Mostrar al usuario:
+```
+## Siguiente Paso
+
+→ /elsabro:plan — planificar la fase discutida
+→ /elsabro:execute — ejecutar directamente si ya está claro
+```
+</siguiente_paso>