Lección 2 - Validación de la planificación

Objetivo de la Lección

Aprender a configurar un entorno de desarrollo asistido por IA (ClaudeKit) creando reglas personalizadas, automatizando comandos y validando planes de ejecución antes de programar.

Módulo 1: Contexto del Proyecto

El Proyecto ProtoWeb

La lección se basa en la construcción de una aplicación llamada ProtoWeb, la cual permite a los usuarios crear prototipos web para diferentes sectores.

El Objetivo de Negocio

Esta herramienta funciona como un imán de clientes, capturando leads para luego poder ofrecerles servicios ampliados.

Módulo 2: Control de Calidad del Código y Creación de “Skills” (Reglas de IA)

El Problema con useEffect en React

Usar useEffect cuando no es estrictamente necesario se considera una mala práctica. Esto se debe a que tiene un costo de renderizado significativo y hace que el código sea demasiado grande. Su uso debe reservarse exclusivamente para efectos secundarios, como realizar llamadas fetch.

Creación de Reglas Estrictas para la IA

En lugar de depender de buenas intenciones, se puede obligar a la IA a respetar esta norma creando una habilidad o “skill” personalizada.

Proceso Técnico

Utilizando el comando skill creator de ClaudeKit, la IA puede buscar información en un repositorio, clonarlo en una carpeta temporal y analizar sus patrones para construir la regla.

El Resultado

La IA genera una regla validada de menos de 150 líneas que prohíbe el uso directo de useEffect. La regla obliga al sistema a utilizar alternativas correctas:

• useMemo para estados derivados
• Manejadores de eventos (EventHandlers)
• Limitar el uso de useEffect exclusivamente dentro de custom hooks reutilizables

Módulo 3: Automatización del Flujo de Trabajo con Comandos Personalizados

Creación de Atajos

Para mejorar la productividad, el desarrollador puede crear comandos personalizados en la herramienta de IA para tareas repetitivas.

Caso Práctico

Se crea el comando personalizado commit actual. Al ejecutarlo, la IA analiza automáticamente los cambios pendientes en el código y realiza un commit en el repositorio local sin necesidad de escribir los comandos de Git manualmente.

Módulo 4: La Fase de Validación del Plan

Antes de Programar (“Cocinar”)

Antes de pasar a la fase de escritura de código (conocida en la herramienta como cook), es un paso fundamental validar el plan de implementación.

Preguntas Críticas

Al ejecutar la validación, la IA analiza el contexto y formula una serie de preguntas críticas basadas en los riesgos y puntos de decisión del proyecto.

Decisiones Arquitectónicas Clave

• Volumen inicial: El MVP se lanzará con una oferta de entre 8 y 10 plantillas de negocios.
• Gestión de CSS: Se utilizará Tailwind conectado directamente a través de una CDN. Esto permite que el prototipo descargue los estilos mediante internet al cargar la web, evitando procesos de compilación pesados.
• Imágenes: Para los prototipos, se insertarán URLs directas de Unsplash en el código HTML generado. Es un método más rápido que no requiere almacenamiento en servidores propios. Si Unsplash no encuentra una imagen relevante, el LLM intentará con términos alternativos.
• Expiración de Prototipos: Los prototipos caducan a los 10 días. En lugar de usar una tarea programada (cron job), se implementará un Middleware que comprobará la fecha de expiración en cada petición de red.
• Flexibilidad de la IA: El modelo de IA principal será configurable desde el panel de administración, permitiendo elegir opciones como Haiku o usar OpenRouter según las necesidades.
• Interfaz de Administración: El panel de administración incluirá un sistema Kanban funcional con arrastrar y soltar (drag and drop).

Cierre de la Lección

Una vez que todas estas decisiones de validación han sido confirmadas por el desarrollador, el plan se vuelve sólido y el proyecto está listo para iniciar la generación de código (“cocinar”) en la siguiente sesión.