DEMOS SECCIÓN 02
CLAUDE CODE EN ACCIÓN

Preparación

• Tener index.html abierto en el navegador con la presentación visible
• Tener Claude Code abierto en terminal en el directorio del proyecto
• Tener el archivo CLAUDE.md listo para mostrar

Pasos

1. Mostrar CLAUDE.md: Abrir el archivo y explicar cómo define las reglas del proyecto — idioma, diseño, restricciones (sin emojis), branding ESIC
2. Explicar el sistema de slides: Mostrar brevemente la estructura HTML — cada <div class="slide"> es un slide, los CSS controlan el look
3. Generar un slide en vivo: Pedirle a Claude Code que agregue un slide nuevo
   Agrega un slide de agradecimiento al final de la presentación con el texto "Gracias" y el logo de ESIC
4. Refrescar el navegador: Mostrar el slide generado, navegar hasta él con las flechas
5. Mostrar los diagramas: Navegar a los diagramas de la Sección 01 y mostrar cómo cada flecha aparece al presionar "Siguiente"
6. Mencionar Remotion: Explicar que Claude también generó un proyecto React completo para la animación en video del loop de herramientas

Puntos Clave

• CLAUDE.md es el contexto: Un simple archivo de texto guía todo el comportamiento del asistente
• No solo código: Claude Code genera documentación, presentaciones, contenido visual
• Iteración: Los diagramas pasaron por 3 rondas de mejora hasta llegar al resultado actual
• Despliegue incluido: Claude también copió archivos al repo de GitHub y desplegó en Vercel

Resultado Esperado

• El slide nuevo aparece en la presentación al refrescar
• El contador de slides se actualiza automáticamente
• El slide sigue el sistema de diseño del proyecto

Preparación

• Clonar el repositorio de Chalk (librería JavaScript de colores en terminal)
• Verificar que los benchmarks existentes corren correctamente: npm run bench
• Tener Claude Code abierto en el directorio de Chalk

Pasos

1. Contexto: Explicar que Chalk es la 5ta librería más descargada de JS (429M descargas/semana)
2. Ejecutar benchmarks: Correr npm run bench y mostrar los resultados base
3. Pedir optimización:
   Analiza los benchmarks de este proyecto, identifica los cuellos de botella de rendimiento y optimiza el throughput
4. Observar el proceso: Claude va a:
   • Leer los archivos de source y benchmarks
   • Ejecutar profiling y crear scripts de análisis propios
   • Crear un todo list con las optimizaciones
   • Implementar cada mejora
5. Comparar resultados: Ejecutar benchmarks de nuevo y mostrar la mejora (esperado: ~3.9x)

Puntos Clave

• Combinación de herramientas: Claude usa Read, Edit, Bash y Grep en un solo flujo
• Autonomía: Claude crea sus propios scripts de análisis sin que se lo pidan
• Planificación: Genera un plan antes de ejecutar cambios

Resultado Esperado

• Mejora significativa en throughput (el curso original reporta 3.9x)
• Código limpio y optimizado que pasa los tests existentes

Preparación

• Tener un archivo CSV con datos de churn de plataforma de streaming (suscripciones, cancelaciones, fechas, planes)
• Verificar que Jupyter está instalado: pip install jupyter
• Tener Claude Code abierto en el directorio con el CSV

Pasos

1. Mostrar el dataset: Abrir el CSV brevemente para que la audiencia vea la estructura de datos
2. Pedir análisis:
   Analiza el churn de esta plataforma de streaming. Usa un Jupyter notebook para explorar los datos, identificar patrones y generar visualizaciones
3. Observar la iteración: Claude va a:
   • Crear un notebook nuevo
   • Ejecutar celdas con código de análisis
   • Ver los resultados y adaptar el siguiente paso
   • Generar gráficos y conclusiones
4. Mostrar el notebook: Abrir en Jupyter para ver las visualizaciones

Puntos Clave

• Iteración inteligente: Claude adapta su análisis basado en lo que encuentra
• No solo código: Genera insights y conclusiones en lenguaje natural
• Notebooks como herramienta: Ejecuta código y lee resultados en un ciclo

Resultado Esperado

• Notebook completo con análisis exploratorio, visualizaciones y conclusiones
• Identificación de factores clave de churn

Preparación

• Instalar el MCP server de Playwright:
  claude mcp add playwright npx @anthropic-ai/mcp-playwright
• Tener una app web local corriendo en localhost:3000 (cualquier proyecto con UI)
• Reiniciar Claude Code después de agregar el MCP server
• Verificar que el MCP server está activo: Claude debería mencionar las herramientas de Playwright al iniciar

Pasos

1. Explicar MCP: "Los MCP servers son herramientas externas que expanden las capacidades de Claude Code más allá de editar archivos"
2. Pedir screenshot:
   Abre el navegador, navega a localhost:3000 y toma un screenshot de la página principal
3. Pedir mejoras de UI:
   Analiza el screenshot y mejora los estilos de la página. Haz los cambios y toma otro screenshot para verificar
4. Mostrar el ciclo: Claude toma screenshot, analiza, edita CSS/HTML, toma otro screenshot, compara

Puntos Clave

• Extensibilidad: Claude Code no está limitado a leer y escribir archivos
• MCP es un estándar: Cualquier herramienta puede exponerse como MCP server
• Feedback visual: Claude puede "ver" la UI y tomar decisiones basadas en ello

Resultado Esperado

• Claude controla un navegador real, visible para la audiencia
• La UI mejora visiblemente después de los cambios
• El ciclo screenshot-analisis-cambio demuestra automatización end-to-end

Preparación

• Tener un repositorio en GitHub con configuración de Terraform (AWS Lambda + DynamoDB + S3 compartido con partner externo)
• Tener la GitHub App de Claude Code instalada en el repo: /install GitHub app
• Preparar un cambio que exponga PII: agregar email de usuario al output del Lambda
• Tener el repo clonado localmente para crear el PR

Pasos

1. Explicar la arquitectura: Lambda procesa datos de usuarios, DynamoDB almacena, S3 se comparte con partner externo
2. Mostrar la integración: Explicar que Claude Code se instaló como GitHub App con dos actions: mention support y PR review
3. Hacer el cambio: En el código del Lambda, agregar el email del usuario al output
   // En el handler del Lambda, agregar: response.user_email = event.user.email
4. Crear el PR: Push y crear pull request en GitHub
5. Esperar el review: Claude Code analiza automáticamente el PR y detecta que el email (PII) puede llegar al S3 compartido con el partner
6. Mostrar el comentario: Abrir el PR en GitHub y mostrar el review automático de Claude alertando sobre la exposición de datos sensibles

Puntos Clave

• Análisis de infraestructura: Claude entiende el flujo completo, no solo el código modificado
• Seguridad proactiva: Detecta riesgos de PII sin que nadie se lo pida explícitamente
• CI/CD inteligente: Se integra en el flujo existente de desarrollo
• Extensible: Las actions son personalizables y pueden incluir MCP servers

Resultado Esperado

• Comentario automático en el PR identificando el riesgo de exponer PII al partner externo
• Sugerencia de cómo mitigar el problema