# En tu conversación principal
> Necesito que revises este código en busca de vulnerabilidades de seguridad

# Sin subagente (contamina el contexto principal)
> Ahora documenta esta función auxiliar en detalle...
# El contexto principal se llena con detalles de documentación
 
# Con subagente (contexto limpio)
> Usa un subagente para documentar esta función
# El subagente hace su trabajo, devuelve el resultado, y tu contexto principal sigue limpio

# Arquitectura compleja → Opus (más inteligente)
> Diseña la arquitectura de este sistema distribuido
 
# Refactor simple → Haiku (más rápido y económico)
> Renombra estas variables siguiendo las convenciones

# Múltiples subagentes trabajando simultáneamente
claude -p "Refactoriza módulo A" &
claude -p "Refactoriza módulo B" &
claude -p "Refactoriza módulo C" &
wait

# En tu conversación principal
> Encuentra todos los archivos que manejan autenticación
 
# Claude puede invocar internamente un subagente Explore que:
# 1. Busca patrones como "auth", "login", "jwt"
# 2. Analiza la estructura del proyecto
# 3. Devuelve la lista de archivos relevantes

1. [Agente Principal] Identifica que necesita ayuda especializada
   ↓
2. [Agente Principal] Invoca un subagente con instrucciones específicas
   ↓
3. [Subagente] Se crea con su propio contexto aislado
   ↓
4. [Subagente] Ejecuta la tarea (puede usar herramientas: Read, Grep, Bash, etc.)
   ↓
5. [Subagente] Devuelve el resultado al agente principal
   ↓
6. [Agente Principal] Recibe el resultado y continúa

┌─────────────────────┐
│  Agente Principal   │
│                     │
│  "Encuentra bugs"   │
└──────────┬──────────┘
           │
           │ Invoca subagente
           ↓
┌─────────────────────┐
│   Subagente         │
│   (Reviewer)        │
│                     │
│  - Lee código       │
│  - Analiza          │
│  - Encuentra issues │
└──────────┬──────────┘
           │
           │ Devuelve resultado
           ↓
┌─────────────────────┐
│  Agente Principal   │
│                     │
│  Recibe lista de    │
│  bugs encontrados   │
└─────────────────────┘

# Sin subagente
Tu contexto: [Tarea principal] + [500 líneas de código explorado] + [resultados de búsquedas]
Tokens usados: 15,000
 
# Con subagente
Tu contexto: [Tarea principal] + [Resultado final del subagente]
Tokens usados: 3,000

# Tres tareas en paralelo
claude -p "Analiza rendimiento de módulo A" &
claude -p "Analiza rendimiento de módulo B" &
claude -p "Analiza rendimiento de módulo C" &
wait
echo "Análisis completo"

# Agente principal: Sonnet (balance)
# Subagente de arquitectura: Opus (máxima capacidad)
# Subagente de renombrado: Haiku (velocidad)

# Conversación con el agente principal
 
Usuario: Necesito refactorizar el módulo de pagos en src/payments/
 
Claude: Voy a ayudarte con eso. Primero, déjame explorar el módulo.
 
[Claude invoca un subagente Explore]
  → Subagente busca archivos en src/payments/
  → Analiza dependencias
  → Identifica patrones
  → Devuelve: "5 archivos, 1200 líneas, patrón MVC"
 
Claude: He encontrado 5 archivos con patrón MVC. Voy a crear un plan de refactor.
 
[Claude invoca un subagente Plan]
  → Subagente diseña arquitectura mejorada
  → Propone pasos de migración
  → Identifica riesgos
  → Devuelve: Plan detallado
 
Claude: Aquí está el plan propuesto [muestra plan]. ¿Apruebas?
 
Usuario: Sí, adelante
 
Claude: Comenzando refactor...
[Ejecuta cambios en el agente principal]
 
Claude: Refactor completo. Ahora ejecuto los tests...
 
[Claude invoca subagente Bash]
  → Subagente ejecuta: npm test
  → Devuelve: "Tests passed"
 
Claude: ✅ Refactor completado, tests pasando.

> Analiza este proyecto y encuentra code smells

# Modo plan explícito
claude --plan "Implementa sistema de autenticación"
 
# Background agent
claude --background "Migra todos los archivos a TypeScript"

// src/services/payment.ts
export async function processPayment(userId: string, amount: number) {
  const user = await db.users.findById(userId);
  const balance = user.balance - amount;
 
  await db.users.update(userId, { balance });
  await db.transactions.create({
    userId,
    amount,
    timestamp: Date.now()
  });
 
  return { success: true };
}

Usuario: Revisa la función processPayment en src/services/payment.ts
 
Claude: Voy a revisar esta función en busca de problemas.
 
[Claude invoca subagente Reviewer especializado en seguridad y lógica]
 
Claude: He encontrado varios problemas críticos:
 
🔴 P1 - CRÍTICO: Race condition
- Si dos transacciones ocurren simultáneamente, el balance puede quedar inconsistente
- Solución: Usar una transacción de base de datos
 
🔴 P1 - CRÍTICO: Falta validación
- No verifica si el usuario tiene fondos suficientes
- Permite balances negativos
- Solución: Validar balance >= amount antes de procesar
 
🟡 P2 - ALTO: Sin manejo de errores
- Si db.transactions.create() falla, el balance ya fue debitado
- Solución: Envolver en try-catch o usar transacción
 
🟡 P2 - ALTO: Falta logging
- No hay auditoría de transacciones fallidas
- Dificulta debugging en producción
 
🟢 P3 - MEDIO: Tipo de retorno inconsistente
- Retorna { success: true } siempre, pero puede fallar
- Considerar retornar el objeto de transacción creado
 
¿Quieres que implemente las correcciones?

Usuario: Audita seguridad del módulo de autenticación en src/auth/
 
Claude: Iniciando auditoría de seguridad...
 
[Claude invoca subagente Security Reviewer]
 
Claude: Reporte de seguridad:
 
🔴 CRÍTICO - SQL Injection en auth/login.ts:42
  → query = `SELECT * FROM users WHERE email='${email}'`
  → Usar prepared statements
 
🔴 CRÍTICO - Passwords en plain text en auth/register.ts:28
  → No hay hash de contraseñas
  → Implementar bcrypt
 
🟡 ALTO - JWT sin expiración en auth/token.ts:15
  → Tokens válidos indefinidamente
  → Añadir expiresIn
 
🟡 ALTO - CORS demasiado permisivo en auth/middleware.ts:8
  → Allow-Origin: *
  → Restringir a dominios específicos
 
🟢 MEDIO - Rate limiting ausente
  → Vulnerable a brute force
  → Implementar express-rate-limit
 
Total: 2 críticos, 2 altos, 1 medio

Usuario: Necesito añadir un sistema de notificaciones en tiempo real a mi app.
Tengo backend en Node.js y frontend en React.
 
Claude: Voy a diseñar la arquitectura para este sistema.
 
[Claude invoca subagente Architect con modelo Opus para máxima capacidad]
 
Claude: He diseñado tres aproximaciones posibles:
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
OPCIÓN 1: WebSockets con Socket.io
 
Arquitectura:
┌─────────┐         WebSocket         ┌─────────┐
│ React   │ ←─────────────────────→  │ Node.js │
│ Client  │     Socket.io client      │ Server  │
└─────────┘                           └────┬────┘
                                           │
                                      ┌────▼────┐
                                      │  Redis  │
                                      │ Pub/Sub │
                                      └─────────┘
 
Pros:
  ✅ Bidireccional nativo
  ✅ Socket.io maneja reconexión automática
  ✅ Broadcast fácil a múltiples clientes
  ✅ Soporte de rooms para notificaciones por usuario
 
Contras:
  ❌ Requiere conexión persistente (+ recursos)
  ❌ Más complejo de escalar horizontalmente
  ❌ No funciona detrás de ciertos proxies
 
Complejidad: MEDIA
Costo operacional: MEDIO-ALTO
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
OPCIÓN 2: Server-Sent Events (SSE)
 
Arquitectura:
┌─────────┐         SSE stream         ┌─────────┐
│ React   │ ←─────────────────────────  │ Node.js │
│ Client  │    EventSource API          │ Server  │
└─────────┘                             └────┬────┘
                                             │
                                        ┌────▼────┐
                                        │  Redis  │
                                        │ Pub/Sub │
                                        └─────────┘
 
Pros:
  ✅ Más simple que WebSockets
  ✅ Reconexión automática nativa
  ✅ Funciona sobre HTTP normal
  ✅ Ideal para notificaciones unidireccionales (server → client)
 
Contras:
  ❌ Solo unidireccional
  ❌ Limitación de 6 conexiones en HTTP/1.1
 
Complejidad: BAJA
Costo operacional: BAJO
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
OPCIÓN 3: Polling + Firebase Cloud Messaging (híbrido)
 
Arquitectura:
┌─────────┐    Polling cada 30s    ┌─────────┐
│ React   │ ───────────────────→   │ Node.js │
│ Client  │                        │ Server  │
└────┬────┘                        └────┬────┘
     │                                  │
     │  Push para notificaciones        │
     │  urgentes via FCM               │
     │                                  │
     └──────────────┬──────────────────┘
                    │
               ┌────▼────┐
               │ Firebase│
               │   FCM   │
               └─────────┘
 
Pros:
  ✅ Funciona en todos los escenarios
  ✅ Push notifications nativas en móvil
  ✅ Polling ligero para updates no urgentes
  ✅ Muy escalable
 
Contras:
  ❌ Dependencia de servicio externo (Firebase)
  ❌ Latencia mayor para updates (hasta 30s)
  ❌ Más complejo de implementar
 
Complejidad: MEDIA-ALTA
Costo operacional: BAJO
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
RECOMENDACIÓN:
 
Para tu caso (notificaciones en tiempo real, Node.js + React):
 
🎯 OPCIÓN 2 (SSE) si:
  - Las notificaciones son solo server → client
  - No esperas más de 10K usuarios concurrentes
  - Quieres implementación rápida
 
🎯 OPCIÓN 1 (WebSockets) si:
  - Necesitas comunicación bidireccional
  - Planeas features tipo "usuario X está escribiendo..."
  - Tienes recursos para escalar Redis Pub/Sub
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
¿Qué opción prefieres? Puedo generar el código de implementación.

Usuario: Mi monolito en Express se está volviendo difícil de mantener.
¿Debería migrar a microservicios?
 
Claude: Voy a analizar tu situación y proponer opciones.
 
[Claude invoca subagente Architect]
 
Claude: Análisis de migración:
 
SITUACIÓN ACTUAL (detectada):
- Monolito Express: ~35K líneas
- 12 módulos principales
- 4 desarrolladores en el equipo
- Deploy semanal
- Sin problemas críticos de rendimiento
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
OPCIÓN 1: Mantener monolito modularizado ⭐ RECOMENDADO
 
Arquitectura:
/src
  /modules
    /auth      → Módulo independiente
    /users     → Módulo independiente
    /payments  → Módulo independiente
  /shared
    /db
    /logger
 
Esfuerzo: 2-3 semanas
Riesgo: BAJO
ROI: ALTO
 
Pros:
  ✅ Simple de mantener con equipo pequeño
  ✅ Deploy atómico
  ✅ Sin complejidad de red
  ✅ Debugging más fácil
 
Cuándo reconsiderar:
  - Equipo crece a +10 personas
  - Necesitas escalar módulos independientemente
  - Diferentes módulos en diferentes lenguajes
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
OPCIÓN 2: Microservicios
 
Esfuerzo: 4-6 meses
Riesgo: ALTO
ROI: BAJO (para tu caso actual)
 
⚠️ NO RECOMENDADO porque:
  ❌ Complejidad operacional (Kubernetes, service mesh)
  ❌ Debugging distribuido complejo
  ❌ Latencia de red entre servicios
  ❌ Overhead de DevOps
 
Solo considerar si:
  - Escala masiva (millones de usuarios)
  - Equipos independientes por dominio
  - Requerimientos específicos de tecnología
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
RECOMENDACIÓN FINAL:
 
1. Modulariza tu monolito actual (Opción 1)
2. Implementa boundaries claros entre módulos
3. Si en el futuro necesitas escalar, extrae módulos uno por uno
 
"No uses microservicios para solucionar problemas de organización de código"

Usuario: Voy a implementar una función calculateDiscount(price, discountCode).
Usa TDD: primero los tests.
 
Claude: Voy a generar tests completos antes de implementar.
 
[Claude invoca subagente Tester]
 
Claude: Tests generados para calculateDiscount:
 
// tests/calculateDiscount.test.ts
 
import { calculateDiscount } from '../src/calculateDiscount';
 
describe('calculateDiscount', () => {
  describe('Casos válidos', () => {
    test('aplica 10% de descuento con código SAVE10', () => {
      expect(calculateDiscount(100, 'SAVE10')).toBe(90);
    });
 
    test('aplica 20% de descuento con código SAVE20', () => {
      expect(calculateDiscount(100, 'SAVE20')).toBe(80);
    });
 
    test('precio de 0 con cualquier código retorna 0', () => {
      expect(calculateDiscount(0, 'SAVE10')).toBe(0);
    });
  });
 
  describe('Casos inválidos', () => {
    test('código desconocido no aplica descuento', () => {
      expect(calculateDiscount(100, 'INVALID')).toBe(100);
    });
 
    test('código vacío no aplica descuento', () => {
      expect(calculateDiscount(100, '')).toBe(100);
    });
  });
 
  describe('Casos edge', () => {
    test('precio negativo lanza error', () => {
      expect(() => calculateDiscount(-10, 'SAVE10'))
        .toThrow('Price cannot be negative');
    });
 
    test('descuento no puede resultar en precio negativo', () => {
      expect(calculateDiscount(5, 'SAVE20')).toBe(4); // 20% de 5 = 1
    });
 
    test('código case-insensitive', () => {
      expect(calculateDiscount(100, 'save10')).toBe(90);
      expect(calculateDiscount(100, 'SAVE10')).toBe(90);
    });
  });
 
  describe('Tipos', () => {
    test('price debe ser número', () => {
      expect(() => calculateDiscount('100' as any, 'SAVE10'))
        .toThrow('Price must be a number');
    });
 
    test('discountCode debe ser string', () => {
      expect(() => calculateDiscount(100, 123 as any))
        .toThrow('Discount code must be a string');
    });
  });
 
  describe('Precisión decimal', () => {
    test('maneja decimales correctamente', () => {
      expect(calculateDiscount(99.99, 'SAVE10')).toBe(89.99);
    });
 
    test('redondea a 2 decimales', () => {
      expect(calculateDiscount(99.99, 'SAVE20')).toBe(79.99);
    });
  });
});
 
Total: 14 tests cubriendo:
  ✅ Happy paths
  ✅ Edge cases
  ✅ Validación de tipos
  ✅ Manejo de errores
  ✅ Precisión numérica
 
Ahora ejecuta los tests (deben fallar) y luego implementa la función.

Usuario: Este módulo no tiene tests. Genera cobertura completa.
[Adjunta código de módulo legacy]
 
Claude: Analizando código y generando suite de tests...
 
[Claude invoca subagente Tester]
 
Claude: He generado 28 tests con cobertura del 95%:
 
📊 Resumen de cobertura:
 
✅ Functions: 95% (19/20)
✅ Branches: 92% (34/37)
✅ Lines: 94% (156/166)
 
Tests generados:
  - 8 tests unitarios para funciones puras
  - 6 tests de integración para flujos principales
  - 9 tests de casos edge
  - 5 tests de manejo de errores
 
⚠️ Cobertura faltante:
  - validateEmail.ts:45 → Rama de error de DNS no alcanzada
  - utils.ts:89 → Función deprecada (considerar eliminar)
 
¿Quieres ver los tests completos o ejecutarlos primero?

Usuario: Documenta la API en src/api/routes/
 
Claude: Voy a generar documentación completa de tu API.
 
[Claude invoca subagente Documenter]
 
Claude: Documentación generada:
 
# API Documentation
 
## Authentication
 
### POST /api/auth/login
 
Autentica un usuario y devuelve un token JWT.
 
**Request:**
```json
{
  "email": "user@example.com",
  "password": "secretPassword123"
}

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": "user_123",
    "email": "user@example.com",
    "name": "John Doe"
  }
}

{
  "email": "newuser@example.com",
  "password": "securePassword123",
  "name": "Jane Doe"
}

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": {
    "id": "user_124",
    "email": "newuser@example.com",
    "name": "Jane Doe"
  }
}

 
### Ejemplo 2: Explicar código complejo
 

interface Task {
  id: string;
  priority: number;    // 1-10 (1 = más alta)
  timestamp: number;   // Cuándo ejecutar
  fn: () => Promise<void>;
}
 
class MinHeap {
  private heap: Task[] = [];
  // ...
}

 
### Ventajas del subagente Documenter
 
- **Genera documentación estructurada** siguiendo estándares
- **Explica con diagramas** cuando es útil
- **Identifica patrones** y los documenta
- **No llena tu contexto** con documentación larga
 
---
 
## 5. Explore — Exploración rápida de codebase
 
### ¿Qué hace?
 
El subagente **Explore** está especializado en:
- Búsqueda rápida de archivos
- Análisis de estructura de proyecto
- Grep inteligente de código
- Identificación de patrones
- Mapeo de dependencias
 
### Cuándo usarlo
 
✅ **Úsalo cuando:**
- Explores un proyecto nuevo
- Busques dónde se implementa algo
- Analices la estructura del codebase
- Encuentres todos los usos de una función
- Identifiques módulos relacionados
 
### Ejemplo: Onboarding a proyecto nuevo
 

 
### Ventajas del subagente Explore
 
- **Extremadamente rápido** para búsquedas
- **No contamina contexto** con resultados intermedios
- **Puede buscar en múltiples lugares** simultáneamente
- **Identifica patrones** automáticamente
 
---
 
## 6. Plan — Planificación antes de implementar
 
### ¿Qué hace?
 
El subagente **Plan** está especializado en:
- Diseñar plan de implementación paso a paso
- Identificar archivos críticos
- Evaluar trade-offs
- Proponer orden de ejecución
- Detectar riesgos antes de empezar
 
### Cuándo usarlo
 
✅ **Úsalo cuando:**
- La tarea es compleja (múltiples archivos, features grandes)
- Quieres alineación antes de implementar
- No estás seguro del mejor enfoque
- La tarea puede tener efectos secundarios
- Trabajas en producción
 
### Ejemplo: Plan para feature compleja
 

 💡 Recomiendo: SendGrid (fácil setup, tier gratuito 100/día)

 
### Ventajas del subagente Plan
 
- **Previene errores** al pensar antes de actuar
- **Identifica riesgos** proactivamente
- **Da visibilidad** del alcance completo
- **Permite feedback** antes de escribir código
 
---
 
## Comparación de subagentes
 
| Subagente | Cuándo usar | Modelo recomendado | Duración típica |
|-----------|-------------|-------------------|-----------------|
| **Reviewer** | Code review, bugs | Sonnet | 30s - 2min |
| **Architect** | Diseño, decisiones | Opus | 1min - 5min |
| **Tester** | Generar tests | Sonnet | 30s - 3min |
| **Documenter** | Documentación | Sonnet | 1min - 5min |
| **Explore** | Búsqueda rápida | Haiku | 10s - 1min |
| **Plan** | Planificación | Opus/Sonnet | 1min - 10min |
 
---
 
## Resumen
 
Los subagentes especializados te permiten:
 
✅ **Delegar tareas específicas** a expertos virtuales
✅ **Mantener contexto limpio** en tu sesión principal
✅ **Usar modelos apropiados** para cada tarea (Opus para arquitectura, Haiku para búsqueda)
✅ **Ahorrar tiempo y tokens** al separar responsabilidades
 
**En el siguiente punto (7.3)** aprenderemos sobre el **Plan Mode**, un subagente especial que te ayuda a planificar tareas complejas antes de ejecutarlas.
 
---
 
## Verificación de comprensión
 
Antes de continuar:
 
- [ ] Identificas cuándo usar cada tipo de subagente
- [ ] Entiendes las ventajas de especialización
- [ ] Sabes qué modelo es mejor para cada tipo de tarea
- [ ] Comprendes cómo los subagentes ahorran tokens
 
---
 
# 7.3 Plan Mode
 
## Objetivo
 
Dominar el uso de Plan Mode para obtener alineación y validación antes de ejecutar tareas complejas, reduciendo errores y asegurando que Claude entiende correctamente tus requerimientos.
 
---
 
## Introducción
 
Imagina este escenario:
 

 
**Frustrante, ¿verdad?**
 
**Plan Mode** soluciona este problema: Claude te muestra su plan **antes** de ejecutar, tú lo apruebas o corriges, y solo entonces implementa.
 
---
 
## ¿Qué es Plan Mode?
 
**Plan Mode** es un modo de operación de Claude Code donde:
 
1. **📋 Claude planifica primero**: Analiza tu solicitud y crea un plan detallado
2. **👀 Tú revisas**: Ves exactamente qué hará, qué archivos tocará, qué decisiones tomará
3. **✅ Apruebas o corriges**: Das feedback, ajustas el plan
4. **⚙️ Claude ejecuta**: Solo cuando apruebes, implementa paso a paso
 
### Analogía
 
Es como trabajar con un **arquitecto**:
 
- No te traen una casa ya construida
- Primero te muestran los planos
- Puedes pedir cambios antes de empezar
- Una vez aprobados, construyen según el plan
 
---
 
## ¿Cuándo usar Plan Mode?
 
### ✅ Usa Plan Mode cuando:
 
#### 1. La tarea es compleja o afecta múltiples archivos
 

 
#### 2. No estás 100% seguro de cómo pedir lo que quieres
 

 
#### 3. Trabajas en producción o código crítico
 

 
#### 4. Quieres aprender el enfoque de Claude
 

 
### ❌ No uses Plan Mode cuando:
 
- **Tareas triviales**: "Añade console.log aquí"
- **Instrucciones muy específicas**: Ya sabes exactamente qué hacer
- **Exploraciones**: "¿Qué hace este código?" (usa modo normal)
 
---
 
## Cómo activar Plan Mode
 
### Opción 1: Configuración global
 
```bash
# Activar para todas las sesiones
claude /config

→ Plan mode
  [ ] Disabled
  [x] Enabled

{
  "planMode": true
}

# Solo esta sesión usará Plan Mode
claude --plan

# Dentro de una conversación normal
> /plan Refactoriza el módulo de autenticación

┌─────────────────────────────────────────────────────────┐
│  1. SOLICITUD                                           │
│  Usuario: "Implementa sistema de notificaciones"       │
└───────────────────────┬─────────────────────────────────┘
                        │
                        ▼
┌─────────────────────────────────────────────────────────┐
│  2. EXPLORACIÓN (opcional)                              │
│  Claude lee archivos relevantes para entender contexto  │
└───────────────────────┬─────────────────────────────────┘
                        │
                        ▼
┌─────────────────────────────────────────────────────────┐
│  3. PLANIFICACIÓN                                       │
│  Claude genera plan detallado:                          │
│    - Pasos a seguir                                     │
│    - Archivos a modificar/crear                         │
│    - Decisiones técnicas                                │
│    - Riesgos identificados                              │
└───────────────────────┬─────────────────────────────────┘
                        │
                        ▼
┌─────────────────────────────────────────────────────────┐
│  4. PRESENTACIÓN DEL PLAN                               │
│  Claude muestra el plan y pregunta:                     │
│  "¿Apruebas este plan?"                                 │
└───────────────────────┬─────────────────────────────────┘
                        │
              ┌─────────┴─────────┐
              │                   │
        RECHAZAR              APROBAR
              │                   │
              ▼                   ▼
    ┌──────────────────┐   ┌──────────────────┐
    │  5a. AJUSTES     │   │  5b. EJECUCIÓN   │
    │  Usuario da      │   │  Claude ejecuta  │
    │  feedback        │   │  paso a paso     │
    └────┬─────────────┘   └──────────────────┘
         │
         └─────► Vuelve a paso 3 (nuevo plan)

Usuario: Implementa autenticación con Google OAuth en mi app Express + React

Claude: Voy a explorar tu proyecto para crear un plan apropiado.
 
[Claude lee:]
  - package.json (frontend y backend)
  - Estructura de carpetas
  - Código de autenticación actual (si existe)
  - Variables de entorno (.env.example)

Claude:
 
═══════════════════════════════════════════════════════════════
PLAN: Implementar Google OAuth
═══════════════════════════════════════════════════════════════
 
📋 RESUMEN
 
Implementaré autenticación con Google OAuth 2.0 usando:
  - Backend: passport.js + passport-google-oauth20
  - Frontend: Botón "Sign in with Google"
  - Flujo: OAuth2 con redirect
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
📝 PASOS DETALLADOS
 
BACKEND
-------
 
1. Instalar dependencias
   Comando: npm install passport passport-google-oauth20 express-session
   Archivos: backend/package.json
 
2. Configurar Passport
   Archivo: backend/src/config/passport.ts (NUEVO)
 
   Tareas:
     ✓ Configurar GoogleStrategy
     ✓ Callback para obtener perfil de Google
     ✓ Serializar/deserializar usuario
     ✓ Usar variables de entorno para credenciales
 
3. Crear rutas de autenticación
   Archivo: backend/src/routes/auth.ts (MODIFICAR)
 
   Rutas nuevas:
     GET  /api/auth/google          → Inicia OAuth
     GET  /api/auth/google/callback → Callback de Google
     GET  /api/auth/logout          → Cierra sesión
     GET  /api/auth/user            → Info usuario actual
 
4. Middleware de sesión
   Archivo: backend/src/server.ts (MODIFICAR)
 
   Tareas:
     ✓ Configurar express-session
     ✓ Inicializar Passport
     ✓ Configurar CORS apropiadamente
 
5. Modelo de usuario (si no existe)
   Archivo: backend/src/models/User.ts (MODIFICAR o NUEVO)
 
   Campos necesarios:
     - googleId (único)
     - email
     - name
     - avatar
 
FRONTEND
--------
 
6. Botón de login
   Archivo: frontend/src/components/GoogleLoginButton.tsx (NUEVO)
 
   Funcionalidad:
     → Redirige a /api/auth/google
     → Maneja estado de "loading"
 
7. Context de autenticación
   Archivo: frontend/src/contexts/AuthContext.tsx (NUEVO o MODIFICAR)
 
   Estado:
     - user (null | User)
     - loading (boolean)
     - login() → Redirige a OAuth
     - logout() → Llama a /api/auth/logout
 
8. Protected routes
   Archivo: frontend/src/components/ProtectedRoute.tsx (NUEVO o MODIFICAR)
 
   Funcionalidad:
     → Verifica si usuario autenticado
     → Redirige a login si no
 
CONFIGURACIÓN
-------------
 
9. Variables de entorno
   Archivo: .env.example (MODIFICAR)
 
   Nuevas variables:
     GOOGLE_CLIENT_ID=tu_client_id
     GOOGLE_CLIENT_SECRET=tu_client_secret
     GOOGLE_CALLBACK_URL=http://localhost:3001/api/auth/google/callback
     SESSION_SECRET=random_secret_key
 
10. Documentación
    Archivo: docs/AUTH.md (NUEVO)
 
    Contenido:
      - Cómo obtener credenciales de Google Cloud
      - Setup de OAuth consent screen
      - Configuración local vs producción
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
🎯 DECISIONES TÉCNICAS
 
1. ¿Session-based o JWT?
   → ELEGIDO: Session-based (más simple con Passport)
   → Alternativa: Podría usar JWT si prefieres stateless
 
2. ¿Dónde guardar sesiones?
   → ELEGIDO: express-session con memoria (desarrollo)
   → RECOMENDADO: Redis para producción (¿implemento?)
 
3. ¿Permitir otros métodos de login?
   → DETECTADO: No tienes login tradicional actualmente
   → ¿Mantengo solo Google o añado email/password también?
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
⚠️ RIESGOS Y CONSIDERACIONES
 
1. MEDIO: CORS debe estar correctamente configurado
   → De lo contrario, callback de Google fallará
   → Verificaré configuración
 
2. BAJO: Sesiones en memoria se pierden al reiniciar
   → Aceptable para desarrollo
   → Para producción, necesitas Redis
 
3. MEDIO: Callback URL debe coincidir EXACTAMENTE con Google Console
   → Documentaré claramente
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
📂 ARCHIVOS AFECTADOS
 
NUEVOS (6):
  ✨ backend/src/config/passport.ts
  ✨ frontend/src/components/GoogleLoginButton.tsx
  ✨ frontend/src/contexts/AuthContext.tsx
  ✨ frontend/src/components/ProtectedRoute.tsx
  ✨ docs/AUTH.md
  ✨ backend/src/models/User.ts (si no existe)
 
MODIFICADOS (4):
  📝 backend/package.json
  📝 backend/src/routes/auth.ts
  📝 backend/src/server.ts
  📝 .env.example
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
❓ PREGUNTAS ANTES DE CONTINUAR
 
1. ¿Prefieres sessions o JWT para los tokens?
   (Recomiendo sessions para simplicidad)
 
2. ¿Implemento Redis para sessions desde ya o solo memoria?
   (Memoria para dev está bien, Redis para producción)
 
3. ¿Solo Google OAuth o también quieres email/password tradicional?
 
4. ¿Qué hacer si un email ya existe con otro método de login?
   (Vincular cuentas o error?)
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
✅ APROBAR PLAN  |  ✏️ AJUSTAR  |  ❌ CANCELAR
 
¿Cómo quieres proceder?

Usuario: Perfecto, pero:
1. Usa JWT en lugar de sessions (prefiero stateless)
2. Solo Google por ahora, no email/password
3. Si el email ya existe, vincular cuentas automáticamente
4. No necesito documentación en docs/, solo README.md

Claude: Entendido. Plan actualizado:
 
CAMBIOS:
  ❌ Removido: express-session, passport sessions
  ✅ Añadido: jsonwebtoken para JWT
  ✅ Cambio: Callback retorna JWT en lugar de crear sesión
  ✅ Cambio: Frontend guarda JWT en localStorage
  ✅ Cambio: Middleware verifica JWT en requests
  ✅ Cambio: Si email existe, vincula googleId al usuario existente
  ❌ Removido: docs/AUTH.md
  ✅ Añadido: Sección de OAuth en README.md
 
Archivos afectados ahora: 8 (2 menos que antes)
 
¿Apruebas este plan actualizado?

Usuario: Aprobado, adelante
 
Claude: ✅ Plan aprobado. Comenzando implementación...
 
[Paso 1/8] Instalando dependencias...
✓ Instaladas: passport, passport-google-oauth20, jsonwebtoken
 
[Paso 2/8] Creando configuración de Passport...
✓ Creado: backend/src/config/passport.ts
 
[Paso 3/8] Implementando rutas de autenticación...
✓ Modificado: backend/src/routes/auth.ts
 
[Paso 4/8] Configurando middleware JWT...
✓ Modificado: backend/src/server.ts
✓ Creado: backend/src/middleware/auth.ts
 
[Paso 5/8] Actualizando modelo de Usuario...
✓ Modificado: backend/src/models/User.ts
  - Añadido campo googleId
  - Añadido índice único en googleId
 
[Paso 6/8] Creando componente de login en React...
✓ Creado: frontend/src/components/GoogleLoginButton.tsx
 
[Paso 7/8] Implementando context de autenticación...
✓ Creado: frontend/src/contexts/AuthContext.tsx
✓ Creado: frontend/src/hooks/useAuth.ts
 
[Paso 8/8] Actualizando documentación...
✓ Modificado: README.md
  - Añadida sección "Google OAuth Setup"
 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
✅ Implementación completada
 
SIGUIENTES PASOS:
 
1. Obtén credenciales en Google Cloud Console:
   https://console.cloud.google.com/apis/credentials
 
2. Configura variables de entorno en .env:
   GOOGLE_CLIENT_ID=...
   GOOGLE_CLIENT_SECRET=...
   JWT_SECRET=... (genera uno seguro)
 
3. Reinicia los servidores:
   npm run dev
 
4. Prueba el flujo de login
 
¿Quieres que te ayude con alguno de estos pasos?

Sin Plan Mode:
  Implementa → Descubres que no era lo que querías → Reviertes → Reimplementa
  Tiempo perdido: 30 min - 2 horas
 
Con Plan Mode:
  Plan → Corriges expectativas → Implementa correctamente la primera vez
  Tiempo ahorrado: 80%

Claude en plan:
"Voy a modificar la función calculatePrice en pricing.ts:45"
 
Tú:
"¡Espera! Esa función es usada por el billing automático en producción.
Mejor crea una nueva función y migra gradualmente."
 
Claude:
"Buen punto. Ajusto el plan para no tocar la función existente."

Claude: "Voy a instalar estas 5 dependencias..."
 
Tú: "No instales lodash, ya usamos Ramda en el proyecto"
 
Claude: "Ajustado, usaré Ramda"

❌ Malo:
"Mejora el código"
 
✅ Bueno:
"Refactoriza el módulo de pagos para:
 - Separar lógica de Stripe de la de PayPal
 - Hacer más fácil añadir nuevos procesadores
 - Mantener compatibilidad con código existente"

Tú: "¿Por qué propones usar Redis para el cache?"
 
Claude: "Porque vi que ya lo usas para sessions.
         Podemos usar el mismo servidor.
         Alternativa: podría usar cache en memoria"
 
Tú: "Ah sí, tiene sentido. Aprobado."

Claude: [Plan con 15 pasos]
 
Tú: "Muy ambicioso. Empecemos solo con los pasos 1-5.
     Cuando funcionen, continuamos con el resto."
 
Claude: "Buen punto. Plan reducido a primeros 5 pasos..."

# Esto NO necesita Plan Mode:
> Añade un console.log en la línea 42
 
# Esto SÍ:
> Refactoriza todo el módulo de autenticación

Claude: [Plan detallado de 100 líneas]
 
Tú: "Aprobado" ← ❌ Malo
 
Tú: [Lee cuidadosamente, hace 2 preguntas, ajusta 1 decisión] ← ✅ Bueno

❌ Malo:
Tú: "No me gusta el plan, hazlo diferente"
 
✅ Bueno:
Tú: "No uses MongoDB para el cache, prefiero Redis.
     Y en lugar de crear nuevos archivos, modifica los existentes."

Modo Normal:
  → Útil para: Tareas simples, exploraciones, preguntas
  → Ejemplo: "¿Qué hace este código?"
 
Plan Mode:
  → Útil para: Implementaciones complejas, refactors grandes
  → Ejemplo: "Migra la app a Next.js 14"

Prompt super detallado (sin Plan Mode):
  > "Crea un endpoint POST /api/users que:
     - Valide email y password
     - Hash password con bcrypt
     - Guarde en DB
     - Retorne JWT
     - Maneje errores de duplicados"
 
  → Claude implementa directamente
  → No ves el plan
  → No puedes corregir antes
 
Plan Mode (con prompt conciso):
  > "Crea endpoint de registro de usuarios"
 
  → Claude genera plan detallado
  → Propone validaciones, hash, JWT, etc.
  → Tú corriges lo que haga falta
  → Entonces implementa

# Aprobar el plan
> aprobado
> adelante
> sí, continúa
 
# Pedir ajustes
> Ajusta el plan: no uses Redis, usa memoria
> Cambia el paso 3 para usar TypeScript estricto
 
# Cancelar
> cancela
> no, mejor déjalo
 
# Pedir explicación
> ¿Por qué elegiste este enfoque?
> Explica el paso 4 con más detalle
 
# Solicitar alternativas
> ¿Qué otras opciones hay para el paso 2?

Usuario: Migra de MongoDB a PostgreSQL
 
Sin Plan Mode:
  → Claude empieza a cambiar código
  → Después de 1 hora, descubres que:
     - No migró los datos existentes
     - Cambió esquemas incompatibles con producción
     - Rompió tests que dependían de MongoDB
  → Tienes que revertir todo
 
Con Plan Mode:
  → Claude genera plan:
     1. Script de migración de datos
     2. Nuevos modelos con Sequelize
     3. Migración gradual (dual-write por un tiempo)
     4. Tests actualizados
     5. Rollback plan si algo falla
 
  → Tú revisas y añades:
     "Antes del paso 1, haz backup de la DB de producción"
     "En el paso 3, mantén MongoDB corriendo 1 semana más"
 
  → Claude ajusta el plan
  → Implementa con tu feedback
  → Resultado: migración exitosa sin downtime

Tú: Claude, refactoriza todos los componentes de React para usar TypeScript estricto
 
Claude: [Empieza a procesar...]
        [5 minutos después, sigue procesando archivo 12 de 50...]
        [Tu terminal está bloqueada...]
        [No puedes hacer nada más...]
        [15 minutos después, aún procesando...]
 
Tú: 😴 [Esperando...]

Tú: "Organiza estos 1000 archivos en carpetas por fecha"
 
Asistente tradicional (síncrono):
  → Tú esperas ahí parado mientras lo hace
  → No puedes hacer nada más
  → Pierdes tiempo
 
Asistente en background (asíncrono):
  → Le das la tarea
  → Él trabaja solo
  → Tú continúas con otras cosas
  → Te avisa cuando termina

# Migración masiva
claude --background "Migra todos los archivos JS a TypeScript"
 
# Mientras tanto, puedes:
# - Revisar PRs
# - Escribir documentación
# - Hacer code review
# - Tomar café ☕

# Actualizar 100+ archivos
claude --background "Actualiza todos los imports para usar la nueva estructura de carpetas"
 
# O renombrados masivos
claude --background "Renombra oldAPICall a newAPICall en todo el proyecto"

# Documentación completa
claude --background "Genera documentación JSDoc para todos los archivos en src/"
 
# Tests exhaustivos
claude --background "Genera tests unitarios para todos los módulos en src/services/"

# Auditoría de seguridad
claude --background "Audita todo el código en busca de vulnerabilidades de seguridad"
 
# Análisis de rendimiento
claude --background "Identifica todos los cuellos de botella de rendimiento en la app"

# Optimización de imágenes
claude --background "Optimiza todas las imágenes en assets/ y actualiza referencias"
 
# Limpieza de código
claude --background "Elimina todo el código comentado y console.logs del proyecto"

claude --background "Tu tarea aquí"
 
# O la forma corta
claude -b "Tu tarea aquí"

# Iniciar tarea en background
claude --background "Refactoriza todos los componentes en src/components/ para usar React hooks en lugar de class components"
 
# Output:
Background task started
Task ID: bg_1234567890
Output file: /home/user/.claude/outputs/bg_1234567890.txt
 
You can:
  - Check progress: tail -f /home/user/.claude/outputs/bg_1234567890.txt
  - View tasks: /tasks
  - Continue working in your terminal

# Ver progreso en tiempo real
tail -f ~/.claude/outputs/bg_1234567890.txt

[11:23:45] Background task started: Refactorizar componentes a hooks
[11:23:46] Analyzing project structure...
[11:23:48] Found 23 class components to refactor
[11:23:50] [1/23] Refactoring UserProfile.tsx...
[11:24:02] ✓ UserProfile.tsx refactored successfully
[11:24:03] [2/23] Refactoring Dashboard.tsx...
[11:24:15] ✓ Dashboard.tsx refactored successfully
[11:24:16] [3/23] Refactoring Settings.tsx...
...

# Ver todas las tareas en background
/tasks

Background Tasks:
 
ID              Status      Started    Task
─────────────────────────────────────────────────────────────────
bg_1234567890   Running     11:23 AM   Refactorizar componentes
bg_0987654321   Completed   10:15 AM   Generar documentación
bg_5555555555   Failed      09:30 AM   Migrar base de datos
 
Use /task <id> to view details

# Ver output completo de una tarea específica
/task bg_1234567890

# Detener una tarea que está corriendo
/cancel bg_1234567890

1. INICIO
   ┌──────────────────────────────────────┐
   │ claude --background "Tarea larga"    │
   └────────────────┬─────────────────────┘
                    │
                    ↓
   ┌──────────────────────────────────────┐
   │ Sistema crea background agent        │
   │ - Asigna ID único                    │
   │ - Crea archivo de output             │
   │ - Inicia proceso separado            │
   └────────────────┬─────────────────────┘
                    │
                    ↓
   ┌──────────────────────────────────────┐
   │ Tu terminal queda LIBRE              │
   │ Puedes continuar trabajando          │
   └──────────────────────────────────────┘
 
2. DURANTE EJECUCIÓN
   ┌──────────────────────────────────────┐
   │ Background agent trabaja             │
   │ - Lee archivos                       │
   │ - Hace modificaciones                │
   │ - Ejecuta comandos                   │
   │ - Escribe progreso en archivo        │
   └────────────────┬─────────────────────┘
                    │
                    ↓
   ┌──────────────────────────────────────┐
   │ Tú (opcional):                       │
   │ - Monitoreas con tail -f             │
   │ - O ignoras y haces otras cosas      │
   └──────────────────────────────────────┘
 
3. FINALIZACIÓN
   ┌──────────────────────────────────────┐
   │ Agent termina (éxito o error)        │
   └────────────────┬─────────────────────┘
                    │
                    ↓
   ┌──────────────────────────────────────┐
   │ Notificación (si configurado)        │
   │ "Task bg_xxx completed"              │
   └────────────────┬─────────────────────┘
                    │
                    ↓
   ┌──────────────────────────────────────┐
   │ Revisas resultado                    │
   │ - Lee output file                    │
   │ - Verifica cambios                   │
   │ - Ejecuta tests                      │
   └──────────────────────────────────────┘

claude --background "Migra todos los archivos .js en src/ a TypeScript:
- Convierte a .ts o .tsx según corresponda
- Añade tipos apropiados (no uses 'any')
- Actualiza imports
- Ejecuta tsc para verificar que compila
- Reporta cualquier archivo problemático"

✓ Background task started
Task ID: bg_ts_migration_001
Output: ~/.claude/outputs/bg_ts_migration_001.txt
 
Monitor with: tail -f ~/.claude/outputs/bg_ts_migration_001.txt

# Tu terminal está libre, puedes hacer otras cosas:
 
# Revisar un PR
gh pr review 123
 
# Trabajar en otra feature
git checkout feature/new-auth
 
# O iniciar otra sesión de Claude
claude
> Ayúdame a diseñar la API para notificaciones

tail -f ~/.claude/outputs/bg_ts_migration_001.txt

[14:20:12] Starting TypeScript migration
[14:20:13] Found 150 JavaScript files
[14:20:14] Creating migration plan...
 
[14:20:20] [1/150] Migrating src/components/Button.js...
[14:20:25] ✓ src/components/Button.tsx created
[14:20:25]   - Added Props interface
[14:20:25]   - Converted to functional component
[14:20:25]   - All types inferred correctly
 
[14:20:26] [2/150] Migrating src/utils/validator.js...
[14:20:30] ✓ src/utils/validator.ts created
[14:20:30]   - Added function signatures
[14:20:30]   - Return types explicit
 
[14:20:31] [3/150] Migrating src/services/api.js...
[14:20:40] ⚠ src/services/api.ts - Type warnings
[14:20:40]   - Line 45: Implicit any in response
[14:20:40]   - Line 78: Possible null reference
[14:20:41]   - FIXED: Added proper types
 
...
 
[14:45:23] [150/150] Migrating src/index.js...
[14:45:28] ✓ src/index.ts created
 
[14:45:30] Running TypeScript compiler...
[14:45:35] ✓ Compilation successful (0 errors)
 
[14:45:36] MIGRATION COMPLETE
─────────────────────────────────────
Total files: 150
Migrated: 150
Errors: 0
Warnings: 12 (all fixed)
Time: 25 minutes
 
NEXT STEPS:
1. Review changes: git diff
2. Run tests: npm test
3. Delete old .js files if satisfied
4. Update tsconfig.json if needed

# Ver el resumen
cat ~/.claude/outputs/bg_ts_migration_001.txt | tail -20
 
# Ver cambios en git
git status
git diff
 
# Ejecutar tests
npm test

{
  "hooks": {
    "Notification": [
      {
        "matcher": "BackgroundTaskComplete",
        "hooks": [
          {
            "type": "command",
            "command": "notify-send 'Claude Code' 'Background task $TASK_ID completed'"
          }
        ]
      }
    ]
  }
}

# Inicias tarea
claude --background "Tarea compleja"
 
# Output después de un tiempo:
[15:30:45] [ERROR] Task failed
[15:30:45] Reason: Permission denied writing to /protected/file.txt
[15:30:45] Files modified before error: 15
[15:30:45] Rollback available: Yes
[15:30:45]
[15:30:45] Options:
[15:30:45]   1. Fix permission issue and retry
[15:30:45]   2. Rollback changes (git reset)
[15:30:45]   3. Continue from file 16

claude --background "Tarea con checkpoints cada 10 archivos"

claude --background --transactional "Tarea crítica"

# Primero: simulación
claude --background --dry-run "Tarea riesgosa"
 
# Si la simulación es buena:
claude --background "Tarea riesgosa"

claude --background "Refactoriza todos los componentes"

#!/bin/bash
for file in src/components/*.tsx; do
  claude -p "Refactoriza $file para usar hooks" &
done
wait

# Iniciar background task
claude --background "Tarea"
claude -b "Tarea"
 
# Listar todas las tasks
/tasks
 
# Ver detalles de una task
/task <task_id>
 
# Monitorear en tiempo real
tail -f ~/.claude/outputs/<task_id>.txt
 
# Cancelar task en ejecución
/cancel <task_id>
 
# Ver últimas 50 líneas del output
tail -50 ~/.claude/outputs/<task_id>.txt
 
# Buscar en el output
grep "error" ~/.claude/outputs/<task_id>.txt
 
# Ver tasks completadas hoy
/tasks --today
 
# Limpiar tasks antiguas
/tasks --clean

{
  "backgroundAgents": {
    "timeout": 7200000  // 2 horas en ms
  }
}

{
  "backgroundAgents": {
    "maxConcurrent": 3  // Máximo 3 background agents simultáneos
  }
}

# Alta prioridad (usa más recursos)
claude --background --priority high "Tarea urgente"
 
# Baja prioridad (background real, usa recursos sobrantes)
claude --background --priority low "Tarea no urgente"

claude --background "Migra toda la app de Create React App a Vite:
- Actualiza configuración
- Cambia imports de archivos estáticos
- Actualiza scripts en package.json
- Actualiza documentación
- Verifica que build funciona"

claude --background "Optimiza el tamaño del bundle:
- Encuentra dependencias no usadas
- Implementa code splitting donde sea útil
- Optimiza imports (tree shaking)
- Comprime assets
- Genera reporte de tamaño"

claude --background "Actualiza todas las dependencias a sus últimas versiones:
- Actualiza package.json
- Ejecuta npm install
- Ejecuta tests
- Reporta breaking changes
- Sugiere fixes para tests que fallan"

claude --background "Genera tests para todos los archivos que no tienen coverage:
- Identifica archivos sin tests
- Genera tests unitarios apropiados
- Verifica que los tests pasen
- Reporta coverage final"

claude --background "Limpia código legacy:
- Elimina funciones no usadas
- Elimina imports no usados
- Elimina código comentado
- Elimina console.logs
- Actualiza sintaxis obsoleta a ES6+
- Reporta cambios realizados"

# Ver todo el output
cat ~/.claude/outputs/bg_xxx.txt
 
# Ver solo errores
grep -i "error\|fail\|warning" ~/.claude/outputs/bg_xxx.txt
 
# Ver progreso
grep "✓\|✗" ~/.claude/outputs/bg_xxx.txt

# Si una task falló, puedes ajustar y reintentar
claude --background --resume bg_xxx "Continúa desde donde fallaste"

# Enfoque secuencial tradicional
Para cada archivo en 100 archivos:
  Claude procesa el archivo (30 segundos promedio)
 
Tiempo total: 100 × 30s = 50 minutos

# Enfoque paralelo
Lanzas 10 instancias de Claude simultáneamente
Cada una procesa 10 archivos
 
Tiempo total: 10 × 30s = 5 minutos

# Un solo Claude procesa todo
claude -p "Refactoriza todos los archivos en src/"

Claude: [Procesando archivo 1...]  ████░░░░░░░░░░░░░░░░ 5%
        [Procesando archivo 2...]  ████████░░░░░░░░░░░░ 10%
        [Procesando archivo 3...]  ████████████░░░░░░░░ 15%
        ...
        [Procesando archivo 100...] ████████████████████ 100%
 
Tiempo: 50 minutos

# 10 Claudes procesando simultáneamente
for file in src/*.ts; do
  claude -p "Refactoriza $file" &
done
wait

Claude 1: [Archivo 1]  ████████████████████ 100%
Claude 2: [Archivo 2]  ████████████████████ 100%
Claude 3: [Archivo 3]  ████████████████████ 100%
Claude 4: [Archivo 4]  ████████████████████ 100%
Claude 5: [Archivo 5]  ████████████████████ 100%
Claude 6: [Archivo 6]  ████████████████████ 100%
Claude 7: [Archivo 7]  ████████████████████ 100%
Claude 8: [Archivo 8]  ████████████████████ 100%
Claude 9: [Archivo 9]  ████████████████████ 100%
Claude 10: [Archivo 10] ████████████████████ 100%
... (todos al mismo tiempo)
 
Tiempo: 5 minutos

# Cada archivo puede procesarse sin conocer los demás
for file in src/components/*.tsx; do
  claude -p "Añade PropTypes a $file" &
done
wait

# La misma transformación en muchos archivos
find src/ -name "*.test.ts" | xargs -P 8 -I {} \
  claude -p "Migra {} de Jest a Vitest"

Con 5 archivos   → Secuencial está bien (2-3 min)
Con 50 archivos  → Paralelo ahorra 40 min
Con 500 archivos → Paralelo ahorra 6-7 horas

# ✅ Bueno: cada componente es independiente
for component in components/*.tsx; do
  claude -p "Optimiza $component" &
done
 
# ❌ Malo: archivos con dependencias
# Si A depende de B, hay que procesar B primero

#!/bin/bash
# parallel-refactor.sh
 
for file in src/**/*.ts; do
  claude -p "Refactoriza $file para usar async/await" &
done
 
# Espera a que todos terminen
wait
 
echo "✅ Todos los archivos procesados"

#!/bin/bash
# parallel-xargs.sh
 
# -P 8 = máximo 8 procesos en paralelo
find src/ -name "*.tsx" | xargs -P 8 -I {} \
  claude -p "Añade tipos TypeScript estrictos a {}"

#!/bin/bash
# parallel-gnu.sh
 
# Instalar: sudo apt install parallel (Linux) o brew install parallel (Mac)
 
find src/ -name "*.ts" | \
  parallel -j 8 --bar \
    claude -p "Optimiza {}"
 
# -j 8 = 8 jobs en paralelo
# --bar = muestra barra de progreso

#!/bin/bash
# migrate-sequential.sh
 
echo "Iniciando migración secuencial..."
start_time=$(date +%s)
 
for file in src/**/*.js; do
  echo "Migrando $file..."
  claude -p "Migra $file a TypeScript con tipos explícitos"
done
 
end_time=$(date +%s)
duration=$((end_time - start_time))
 
echo "✅ Migración completada en $duration segundos"

#!/bin/bash
# migrate-parallel.sh
 
echo "Iniciando migración paralela..."
start_time=$(date +%s)
 
# Función para migrar un archivo
migrate_file() {
  local file=$1
  local ts_file="${file%.js}.ts"
 
  echo "Migrando $file..."
 
  claude -p "Migra $file a TypeScript:
  - Usa tipos explícitos (no 'any')
  - Convierte a $ts_file
  - Mantén la misma funcionalidad
  - Añade interfaces para objetos complejos" > /tmp/migrate_$(basename "$file").log 2>&1
 
  if [ $? -eq 0 ]; then
    echo "✅ $file migrado exitosamente"
  else
    echo "❌ Error migrando $file" >&2
    return 1
  fi
}
 
export -f migrate_file
 
# Ejecutar en paralelo (8 a la vez)
find src/ -name "*.js" | \
  parallel -j 8 --bar migrate_file {}
 
end_time=$(date +%s)
duration=$((end_time - start_time))
 
echo ""
echo "✅ Migración completada en $duration segundos"
echo "Logs disponibles en /tmp/migrate_*.log"

#!/bin/bash
# modernize-codebase.sh
 
set -e  # Exit on error
 
echo "🚀 Iniciando modernización de codebase"
echo ""
 
# ═════════════════════════════════════════════════════════════
# FASE 1: Análisis (secuencial)
# ═════════════════════════════════════════════════════════════
echo "📊 FASE 1: Análisis del proyecto"
 
claude -p "Analiza la estructura del proyecto y lista:
- Archivos que usan sintaxis obsoleta
- Dependencias desactualizadas
- Patrones anti-patrón comunes
Guarda resultado en /tmp/analysis.json" > /tmp/analysis.log
 
echo "✅ Análisis completado"
echo ""
 
# ═════════════════════════════════════════════════════════════
# FASE 2: Actualización de dependencias (secuencial)
# ═════════════════════════════════════════════════════════════
echo "📦 FASE 2: Actualizando dependencias"
 
claude -p "Basándote en /tmp/analysis.json:
- Actualiza package.json con últimas versiones
- Ejecuta npm install
- Verifica que no haya breaking changes
- Reporta cambios necesarios" > /tmp/deps.log
 
echo "✅ Dependencias actualizadas"
echo ""
 
# ═════════════════════════════════════════════════════════════
# FASE 3: Migración de sintaxis (PARALELO)
# ═════════════════════════════════════════════════════════════
echo "⚡ FASE 3: Migrando sintaxis (paralelo)"
 
migrate_syntax() {
  local file=$1
  claude -p "Moderniza $file:
  - Convierte var → const/let
  - Convierte callbacks → async/await
  - Usa destructuring donde sea apropiado
  - Usa template literals
  - Arrow functions donde sea apropiado" > /tmp/syntax_$(basename "$file").log 2>&1
}
 
export -f migrate_syntax
 
find src/ -name "*.js" | parallel -j 10 --bar migrate_syntax {}
 
echo "✅ Sintaxis migrada"
echo ""
 
# ═════════════════════════════════════════════════════════════
# FASE 4: Optimización (PARALELO)
# ═════════════════════════════════════════════════════════════
echo "🔧 FASE 4: Optimizando componentes (paralelo)"
 
optimize_component() {
  local file=$1
  claude -p "Optimiza $file:
  - Implementa React.memo donde sea útil
  - Usa useMemo/useCallback apropiadamente
  - Lazy loading de componentes pesados
  - Code splitting si es necesario" > /tmp/optimize_$(basename "$file").log 2>&1
}
 
export -f optimize_component
 
find src/ -name "*.tsx" -o -name "*.jsx" | \
  parallel -j 8 --bar optimize_component {}
 
echo "✅ Componentes optimizados"
echo ""
 
# ═════════════════════════════════════════════════════════════
# FASE 5: Tests (PARALELO)
# ═════════════════════════════════════════════════════════════
echo "🧪 FASE 5: Generando tests (paralelo)"
 
generate_tests() {
  local file=$1
  claude -p "Genera tests completos para $file:
  - Casos happy path
  - Casos edge
  - Casos de error
  - Coverage mínimo 80%" > /tmp/test_$(basename "$file").log 2>&1
}
 
export -f generate_tests
 
find src/ -name "*.ts" -o -name "*.tsx" | \
  grep -v ".test." | \
  parallel -j 6 --bar generate_tests {}
 
echo "✅ Tests generados"
echo ""
 
# ═════════════════════════════════════════════════════════════
# FASE 6: Verificación final (secuencial)
# ═════════════════════════════════════════════════════════════
echo "✔️  FASE 6: Verificación final"
 
claude -p "Ejecuta verificación final:
- npm run build (verifica que compile)
- npm test (verifica que tests pasen)
- npm run lint (verifica linting)
- Genera reporte de cobertura
Guarda resultado en /tmp/final-report.md" > /tmp/verification.log
 
echo "✅ Verificación completada"
echo ""
 
# ═════════════════════════════════════════════════════════════
# RESUMEN
# ═════════════════════════════════════════════════════════════
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo "🎉 MODERNIZACIÓN COMPLETADA"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
echo ""
cat /tmp/final-report.md
echo ""
echo "Logs detallados disponibles en /tmp/"

SECUENCIAL          PARALELO         SECUENCIAL
    ↓                   ↓                ↓
┌─────────┐     ┌──────────────┐   ┌──────────┐
│Análisis │ →   │ 10 Claudes   │ → │Verificar │
│ (1 min) │     │ migrando     │   │ (2 min)  │
└─────────┘     │ sintaxis     │   └──────────┘
                │ (5 min)      │
┌─────────┐     └──────────────┘
│Deps     │ →   ┌──────────────┐
│ (2 min) │     │ 8 Claudes    │
└─────────┘     │ optimizando  │
                │ (4 min)      │
                └──────────────┘
                     ↓
                ┌──────────────┐
                │ 6 Claudes    │
                │ generando    │
                │ tests        │
                │ (6 min)      │
                └──────────────┘
 
Tiempo total: ~20 minutos
(vs 200+ minutos secuencial)

# Regla general:
# Número de CPUs × 1.5
 
# En Linux/Mac:
CPUS=$(nproc)  # o $(sysctl -n hw.ncpu) en Mac
JOBS=$((CPUS * 3 / 2))
 
parallel -j $JOBS ...

#!/bin/bash
 
process_file() {
  local file=$1
 
  if claude -p "Procesa $file" 2>&1 | tee /tmp/log_$file.txt; then
    echo "✅ $file OK"
  else
    echo "❌ $file FAILED" >> /tmp/failures.txt
    # No retornar error, continuar con otros
  fi
}
 
export -f process_file
 
find src/ -name "*.ts" | parallel -j 8 process_file {}
 
# Al final, revisar fallos
if [ -f /tmp/failures.txt ]; then
  echo "⚠️  Algunos archivos fallaron:"
  cat /tmp/failures.txt
fi

#!/bin/bash
 
# Primera pasada
find src/ -name "*.ts" | \
  parallel -j 8 --joblog /tmp/joblog.txt \
    claude -p "Procesa {}"
 
# Reintentar solo los que fallaron
parallel -j 8 --retry-failed --joblog /tmp/joblog.txt

#!/bin/bash
 
# --halt soon,fail=1 = detiene si 1 job falla
find src/ -name "*.ts" | \
  parallel -j 8 --halt soon,fail=1 \
    claude -p "Procesa {}"

#!/bin/bash
 
process_file() {
  local file=$1
  local logfile="/tmp/logs/$(basename $file).log"
 
  {
    echo "═══════════════════════════════════════"
    echo "Procesando: $file"
    echo "Inicio: $(date)"
    echo "═══════════════════════════════════════"
 
    claude -p "Procesa $file"
 
    echo ""
    echo "Fin: $(date)"
  } > "$logfile" 2>&1
 
  echo "✅ $file → $logfile"
}
 
export -f process_file
 
mkdir -p /tmp/logs
 
find src/ -name "*.ts" | parallel -j 8 process_file {}
 
echo ""
echo "Todos los logs en: /tmp/logs/"

#!/bin/bash
 
# Terminal 1: Ejecutar procesamiento
find src/ -name "*.ts" | \
  parallel -j 8 --bar --joblog /tmp/jobs.log \
    claude -p "Procesa {}"
 
# Terminal 2: Monitorear progreso
watch -n 1 'cat /tmp/jobs.log | tail -20'

#!/bin/bash
 
# ... (procesamiento paralelo)
 
# Al final, generar resumen
claude -p "Lee todos los logs en /tmp/logs/ y genera un resumen:
- Total de archivos procesados
- Archivos exitosos vs fallidos
- Tipos de errores comunes
- Tiempo total aproximado
- Recomendaciones
Guarda en /tmp/summary.md"
 
cat /tmp/summary.md

#!/bin/bash
# ci-parallel.sh
 
echo "🔄 CI Pipeline con paralelización"
 
# Fase 1: Tests en paralelo por módulo
echo "Ejecutando tests..."
ls src/modules/ | parallel -j 8 \
  "claude -p 'Ejecuta tests para módulo {} y reporta coverage'"
 
# Fase 2: Builds en paralelo
echo "Builds..."
parallel -j 4 ::: \
  "claude -p 'Build frontend para producción'" \
  "claude -p 'Build backend para producción'" \
  "claude -p 'Build mobile para Android'" \
  "claude -p 'Build mobile para iOS'"
 
# Fase 3: Security scans en paralelo
echo "Security scans..."
parallel -j 3 ::: \
  "claude -p 'Ejecuta npm audit y reporta vulnerabilidades'" \
  "claude -p 'Ejecuta OWASP dependency check'" \
  "claude -p 'Escanea código con SonarQube'"
 
echo "✅ CI completado"

#!/bin/bash
# multi-framework-migration.sh
 
# Migrar diferentes partes del monorepo en paralelo
parallel -j 4 ::: \
  "claude -p 'Migra packages/web de Webpack a Vite'" \
  "claude -p 'Migra packages/api de Express a Fastify'" \
  "claude -p 'Migra packages/mobile de RN 0.69 a 0.73'" \
  "claude -p 'Migra packages/shared de JS a TS'"

#!/bin/bash
# generate-docs.sh
 
# Generar documentación para cada módulo en paralelo
find src/ -type d -name "module-*" | \
  parallel -j 6 \
    "claude -p 'Genera README.md completo para {} con:
    - Descripción del módulo
    - API documentation
    - Ejemplos de uso
    - Diagramas de arquitectura (en Mermaid)'"

#!/bin/bash
# refactor-pattern.sh
 
# Aplicar patrón Repository en todos los services
find src/services/ -name "*.service.ts" | \
  parallel -j 8 \
    "claude -p 'Refactoriza {} para usar patrón Repository:
    - Separa lógica de acceso a datos
    - Crea interfaz IRepository
    - Implementa cache layer
    - Mantén tests actualizados'"

proyecto-legacy/
├── src/
│   ├── components/     (50 componentes en class components)
│   ├── services/       (20 servicios con callbacks)
│   ├── utils/          (15 archivos con var y sintaxis ES5)
│   └── pages/          (12 páginas sin optimizar)
├── tests/              (Cobertura: 30%)
└── docs/               (Documentación desactualizada)

Explora completamente el proyecto y genera un reporte que incluya:
1. Estructura de carpetas y archivos
2. Lista completa de dependencias
3. Patrones de código detectados (buenos y malos)
4. Archivos que usan sintaxis obsoleta
5. Componentes sin tests
6. Código duplicado o similar
7. Oportunidades de optimización

Audita estos archivos en busca de:
- Vulnerabilidades de seguridad
- Bugs potenciales
- Problemas de rendimiento
- Violaciones de mejores prácticas
 
Archivos:
- src/services/authService.js
- src/components/UserProfile.jsx
- src/utils/apiClient.js

Genera tests completos con:
- Casos happy path
- Casos edge
- Casos de error
- Mocks apropiados
- Coverage mínimo 80%

claude --background "Genera documentación JSDoc completa para todos los archivos en src/services/:
- Descripción de cada función
- Parámetros con tipos
- Valores de retorno
- Ejemplos de uso
- Posibles errores
Guarda la documentación dentro de cada archivo"

#!/bin/bash
# migrate-to-hooks.sh
 
echo "🚀 Migrando componentes a hooks en paralelo"
 
migrate_component() {
  local file=$1
  local logfile="/tmp/migrate_$(basename $file).log"
 
  echo "Migrando $file..."
 
  claude -p "Migra $file de class component a hooks:
  - Convierte a functional component
  - Usa useState, useEffect, etc.
  - Mantén la misma funcionalidad
  - Preserva PropTypes o añade TypeScript types
  - Asegura que compile sin errores" > "$logfile" 2>&1
 
  if [ $? -eq 0 ]; then
    echo "✅ $file migrado"
  else
    echo "❌ $file falló" >&2
  fi
}
 
export -f migrate_component
 
# Ejecutar en paralelo (8 a la vez)
find src/components/ -name "*.jsx" -o -name "*.js" | \
  parallel -j 8 --bar migrate_component {}
 
echo "✅ Migración completada"
echo "Logs en /tmp/migrate_*.log"

#!/bin/bash
# modernize-utils.sh
 
echo "⚡ Modernizando sintaxis en utils"
 
modernize_file() {
  local file=$1
 
  claude -p "Moderniza $file:
  - Convierte var → const/let
  - Convierte function → arrow functions donde sea apropiado
  - Usa destructuring
  - Usa template literals
  - Usa spread operator
  - Convierte callbacks a async/await si aplica" > /tmp/modernize_$(basename $file).log 2>&1
 
  echo "✅ $file modernizado"
}
 
export -f modernize_file
 
find src/utils/ -name "*.js" | parallel -j 8 modernize_file {}
 
echo "✅ Modernización completada"

#!/bin/bash
# modernize-all.sh
 
set -e
 
echo "🎯 MODERNIZACIÓN COMPLETA DEL PROYECTO"
echo ""
 
# Backup
echo "📦 Creando backup..."
git add -A
git commit -m "Checkpoint antes de modernización automática"
 
# FASE 1: Análisis (secuencial)
echo "📊 FASE 1: Analizando proyecto..."
claude -p "Analiza el proyecto y guarda hallazgos en /tmp/analysis.json" > /tmp/analysis.log
 
# FASE 2: Componentes (paralelo)
echo "⚡ FASE 2: Migrando componentes a hooks (paralelo)..."
bash migrate-to-hooks.sh
 
# FASE 3: Utils (paralelo)
echo "⚡ FASE 3: Modernizando utils (paralelo)..."
bash modernize-utils.sh
 
# FASE 4: Verificación (secuencial)
echo "✔️  FASE 4: Verificando cambios..."
npm run build
npm test
 
echo ""
echo "🎉 MODERNIZACIÓN COMPLETADA"

#!/bin/bash
# full-modernization-pipeline.sh
 
set -e
 
echo "═══════════════════════════════════════════════════════"
echo "  PIPELINE COMPLETO DE MODERNIZACIÓN"
echo "═══════════════════════════════════════════════════════"
echo ""
 
# ═══════════════════════════════════════════════════════
# PASO 1: PLANIFICACIÓN
# ═══════════════════════════════════════════════════════
echo "📋 PASO 1: Generando plan de modernización..."
 
claude --plan <<EOF
Crea un plan detallado para modernizar este proyecto:
- 50 componentes React class → hooks
- 20 servicios callbacks → async/await
- 15 utils ES5 → ES6+
- Mejorar coverage de tests
- Generar documentación
 
Guarda el plan en plan.md
EOF
 
read -p "¿Aprobar plan y continuar? (y/n) " -n 1 -r
echo
if [[ ! $REPLY =~ ^[Yy]$ ]]; then
    echo "Pipeline cancelado"
    exit 1
fi
 
# ═══════════════════════════════════════════════════════
# PASO 2: ANÁLISIS
# ═══════════════════════════════════════════════════════
echo ""
echo "📊 PASO 2: Análisis exhaustivo del proyecto..."
 
claude -p "Explora el proyecto completamente y genera reporte en analysis-report.md"
 
# ═══════════════════════════════════════════════════════
# PASO 3: AUDITORÍA DE SEGURIDAD
# ═══════════════════════════════════════════════════════
echo ""
echo "🔒 PASO 3: Auditoría de seguridad..."
 
claude -p "Audita seguridad de:
- src/services/authService.js
- src/services/apiClient.js
- src/utils/tokenManager.js
Genera security-report.md"
 
# ═══════════════════════════════════════════════════════
# PASO 4: BACKUP
# ═══════════════════════════════════════════════════════
echo ""
echo "💾 PASO 4: Creando backup..."
 
git add -A
git commit -m "Pre-modernization checkpoint - $(date)"
 
# ═══════════════════════════════════════════════════════
# PASO 5: DOCUMENTACIÓN EN BACKGROUND
# ═══════════════════════════════════════════════════════
echo ""
echo "📚 PASO 5: Generando documentación (background)..."
 
TASK_ID=$(claude --background "Genera JSDoc para todos los archivos en src/" | grep "Task ID:" | awk '{print $3}')
echo "Background task iniciado: $TASK_ID"
 
# ═══════════════════════════════════════════════════════
# PASO 6: MIGRACIÓN PARALELA
# ═══════════════════════════════════════════════════════
echo ""
echo "⚡ PASO 6: Migración masiva en paralelo..."
 
# Sub-paso 6a: Componentes
echo "  6a. Migrando componentes a hooks..."
find src/components/ -name "*.jsx" | \
  parallel -j 8 --bar \
    "claude -p 'Migra {} a hooks' > /tmp/component_{#}.log 2>&1"
 
# Sub-paso 6b: Servicios
echo "  6b. Convirtiendo callbacks a async/await..."
find src/services/ -name "*.js" | \
  parallel -j 6 --bar \
    "claude -p 'Convierte callbacks a async/await en {}' > /tmp/service_{#}.log 2>&1"
 
# Sub-paso 6c: Utils
echo "  6c. Modernizando sintaxis ES6+..."
find src/utils/ -name "*.js" | \
  parallel -j 8 --bar \
    "claude -p 'Moderniza sintaxis en {}' > /tmp/util_{#}.log 2>&1"
 
# ═══════════════════════════════════════════════════════
# PASO 7: GENERACIÓN DE TESTS (PARALELO)
# ═══════════════════════════════════════════════════════
echo ""
echo "🧪 PASO 7: Generando tests faltantes..."
 
find src/ -name "*.js" -o -name "*.jsx" | \
  grep -v ".test." | \
  parallel -j 6 --bar \
    "claude -p 'Genera tests para {}' > /tmp/test_{#}.log 2>&1"
 
# ═══════════════════════════════════════════════════════
# PASO 8: VERIFICACIÓN
# ═══════════════════════════════════════════════════════
echo ""
echo "✅ PASO 8: Verificación final..."
 
echo "  - Instalando dependencias..."
npm install
 
echo "  - Ejecutando linter..."
npm run lint --fix || echo "⚠️  Warnings de linter (revisar)"
 
echo "  - Compilando..."
npm run build || {
    echo "❌ Build falló. Revisar errores."
    exit 1
}
 
echo "  - Ejecutando tests..."
npm test || {
    echo "⚠️  Algunos tests fallaron. Revisar."
}
 
# ═══════════════════════════════════════════════════════
# PASO 9: ESPERAR BACKGROUND TASK
# ═══════════════════════════════════════════════════════
echo ""
echo "⏳ PASO 9: Esperando documentación en background..."
 
while /task $TASK_ID | grep -q "Running"; do
    echo "  Aún generando documentación..."
    sleep 10
done
 
echo "✅ Documentación completada"
 
# ═══════════════════════════════════════════════════════
# PASO 10: REPORTE FINAL
# ═══════════════════════════════════════════════════════
echo ""
echo "📊 PASO 10: Generando reporte final..."
 
claude -p "Genera reporte final de la modernización:
- Archivos modificados
- Mejoras realizadas
- Problemas encontrados
- Coverage de tests actual
- Próximos pasos recomendados
Guarda en MODERNIZATION-REPORT.md"
 
# ═══════════════════════════════════════════════════════
# RESUMEN
# ═══════════════════════════════════════════════════════
echo ""
echo "═══════════════════════════════════════════════════════"
echo "  ✅ PIPELINE COMPLETADO"
echo "═══════════════════════════════════════════════════════"
echo ""
echo "📁 Archivos generados:"
echo "  - plan.md"
echo "  - analysis-report.md"
echo "  - security-report.md"
echo "  - MODERNIZATION-REPORT.md"
echo ""
echo "📊 Logs de migración:"
echo "  - /tmp/component_*.log"
echo "  - /tmp/service_*.log"
echo "  - /tmp/util_*.log"
echo "  - /tmp/test_*.log"
echo ""
echo "🔍 Próximos pasos:"
echo "  1. Revisar MODERNIZATION-REPORT.md"
echo "  2. Revisar tests que fallaron (si hubo)"
echo "  3. Hacer commit de cambios"
echo "  4. Crear PR para review"
echo ""

practica-modulo-7/
├── plan-modernizacion.md
├── reporte-exploracion.md
├── code-review-results.md
├── tests/
│   ├── authService.test.js
│   ├── UserProfile.test.jsx
│   └── apiClient.test.js
├── scripts/
│   ├── migrate-to-hooks.sh
│   ├── modernize-utils.sh
│   ├── modernize-all.sh
│   └── full-modernization-pipeline.sh
├── reportes/
│   ├── analysis-report.md
│   ├── security-report.md
│   └── MODERNIZATION-REPORT.md
├── capturas/
│   ├── background-agent.png
│   ├── parallel-execution.png
│   └── pipeline-complete.png
└── reflexion.md

# Clonar proyecto legacy de ejemplo
git clone https://github.com/example/legacy-react-project
cd legacy-react-project
 
# O crear uno simple con Create React App (versión vieja)
npx create-react-app@4 my-legacy-project
cd my-legacy-project
 
# Añadir componentes class para practicar

# Plan Mode
claude --plan
 
# Background Agent
claude --background "Tarea"
/tasks
/task <id>
 
# Parallel con xargs
find . -name "*.js" | xargs -P 8 -I {} claude -p "Procesa {}"
 
# Parallel con GNU Parallel
find . -name "*.js" | parallel -j 8 claude -p "Procesa {}"
 
# Monitorear background
tail -f ~/.claude/outputs/<task_id>.txt