Lección 5 - Cocinando Fase 4

Módulo 1: Gestión del Entorno Local y Scripts de Arranque

Automatización de tareas ("Edit Automatically"): En fases avanzadas, se puede configurar ClaudeKit para que lea las tareas completadas del plan y avance automáticamente, ejecutando el código sin necesidad de preguntar paso a paso.

Gestión de Puertos: Es común enfrentarse a conflictos si el puerto del servidor (como el 3000) ya está en uso por otro proceso.

Creación de Scripts de Liberación: En lugar de matar los procesos manualmente, se instruye a la IA para crear un script de terminal (por ejemplo, dev.sh). Este script automatiza la liberación del puerto y arranca el proyecto limpiamente usando herramientas rápidas como bun dev.

Módulo 2: Intervención Dinámica y Cumplimiento de Reglas

El comando "By the way": A diferencia de los prompts tradicionales donde se espera a que la IA termine, este comando permite interrumpir a la IA mientras está escribiendo el código para que lea instrucciones urgentes en tiempo real y aplique cambios inmediatamente.

Auditoría de Buenas Prácticas: Al usar esta interrupción para recordar la prohibición de usar useEffect directamente, la IA es capaz de auditar su propio código. En este caso práctico, la IA justifica correctamente su decisión, demostrando que está respetando las reglas porque el useEffect se encuentra encapsulado dentro de un custom hook.

Módulo 3: Resolución de Errores, Refactorización y Enrutamiento

Actualización de Modelos y Dependencias: Al conectar APIs externas (como OpenRouter), los modelos hardcodeados pueden quedar deprecados, causando fallos de conexión. También es vital actualizar dependencias específicas del framework (como las respuestas de streams en Vercel) para evitar bloqueos en la comunicación de la IA.

Migración de Herramientas Obsoletas: Durante el desarrollo, la IA debe adaptar el código a las versiones modernas, como sustituir el uso de middleware (cuando está deprecado para ciertas funciones) por proxy.ts para abrir túneles de comunicación.

Mejora de URLs (De IDs a Slugs): Para el SEO y la legibilidad, se debe refactorizar la aplicación para que las rutas utilicen "slugs" amigables en lugar de IDs de base de datos. Esto implica que la IA debe modificar la base de datos y ajustar las promesas asíncronas para resolver los datos correctamente en la URL.

Módulo 4: Panel de Administración y Sistema de Diseño (Design System)

Desarrollo del Dashboard: Se debe estructurar un panel administrativo completo que incluya KPIs, reportes y un sistema Kanban con funcionalidad de arrastrar y soltar (drag and drop) para gestionar los clientes potenciales (leads).

Centralización del Diseño: Para garantizar la coherencia visual, se instruye a la IA a crear una página de Componentes UI y Configuración de Branding dentro del administrador.

Reutilización y Escalabilidad: Este Sistema de Diseño permite centralizar la paleta de colores, fuentes, botones y estilos corporativos. Al modificar un parámetro aquí, los cambios se propagan de manera unificada tanto al panel de administración como al frontend público del proyecto.

Cierre de la lección

Una vez consolidada la arquitectura interna, la base de datos, los flujos de commits y el sistema de diseño centralizado, el proyecto queda preparado para la siguiente fase: la construcción detallada de la landing page pública y la optimización SEO.