Tienes un componente de tabla que se repite en seis pantallas. Un formulario con validación que ya escribiste otras diez veces. Un modal que necesita accesibilidad, estados de carga y manejo de errores. Y por alguna razón, seguís escribiéndolos a mano, uno por uno, con la misma estructura de siempre.

Si eso te suena familiar, ya sabes lo que se siente el desarrollo frontend moderno: mucha repetición y poco tiempo para lo que realmente importa. Los agentes de IA no van a eliminar la repetición por arte de magia, pero sí pueden absorberla — si los usás con un flujo claro.

El problema: React escala, pero el tiempo no

React resolvió el problema de la complejidad de UI con componentes. Pero cada componente nuevo trae consigo una lista interminable de decisiones que ya tomaste antes:

  • ¿Cómo manejo el estado de carga, error y vacío?
  • ¿Qué pasa con la accesibilidad (aria, foco, contraste)?
  • ¿Uso Tailwind, CSS modules o styled-components para este caso?
  • ¿Cómo integro este componente con React Query o el fetch manual?
  • ¿Los tests cubren los estados críticos o solo el feliz?

Son decisiones de diseño que un desarrollador con experiencia resuelve en segundos, pero que toman minutos de código repetitivo. Multiplicá eso por decenas de componentes y tenés tu semana perdida.

El error más común no es no usar IA: es usarla como un autocompletado glorificado. Pedir “hacé un modal” y pegar el resultado sin contexto es como copiar de Stack Overflow sin leer la respuesta. El código generado sin un contrato claro es deuda técnica en tiempo real.

“El problema de React no es escribir componentes. Es escribir los mismos componentes por décima vez.”

La solución: agentes con contexto, no generadores genéricos

La diferencia entre una herramienta de generación de código y un agente real es el contexto. Un agente de código que trabaja sobre tu repositorio puede:

  1. Leer tu codebase: detectar si usás Tailwind, qué versiones de dependencias tenés, cómo estructurás tus componentes.
  2. Seguir tus convenciones: si tus componentes usan useMemo solo cuando hace falta, si tus tests viven junto al componente, si el naming es PascalCase o kebab-case.
  3. Iterar sobre feedback: generar el componente, correr el linter, leer los errores y corregirlos sin que intervengas.

Eso convierte al agente en un junior muy rápido con acceso a todo tu código, no en un generador de snippets sueltos.

Los tres niveles de uso

En la práctica, los equipos que obtienen resultados con agentes de IA en frontend los usan en tres niveles:

Nivel 1 — Componentes a pedido. El agente genera un componente completo a partir de una descripción: “Creá un DataTable con ordenamiento, filtros y paginación, usando Tailwind y el patrón de acceso que ya usamos en useProducts”. El resultado es un punto de partida sólido que vos revisás y ajustás.

Nivel 2 — Refactorización y tests. “Encontrá los componentes que repiten la lógica de formatCurrency y extraé un hook”. El agente recorre el repo, identifica los duplicados y propone el refactor. Igual con tests: “Generá tests para los estados de error de este formulario siguiendo el estilo de los tests existentes”.

Nivel 3 — Feature completo. “Implementá la pantalla de detalle de producto: ruta, fetch de datos con React Query, estados de carga/error/vacío, breadcrumbs y tests”. Acá el agente ya coordina varios archivos y depende críticamente de que tu codebase tenga convenciones claras.

Ejemplo práctico: generar un componente con contexto real

Pongamos el flujo concreto. Supongamos que tu proyecto usa React + TypeScript + Tailwind + React Query, y necesitás un dropdown de selección múltiple con búsqueda.

Un buen prompt para un agente con acceso al repo se vería así:

Creá un componente MultiSelect con:
- TypeScript estricto, props tipadas
- Búsqueda con debounce de 300ms
- Manejo de estados vacío y cargando
- Accesibilidad: role listbox, navegación con teclado, aria-selected
- Estilos Tailwind consistentes con los componentes existentes
- Un test con Testing Library para el caso de búsqueda
Mirá cómo están hechos los componentes en src/components/ui para seguir el mismo patrón.

El agente lee el repo, encuentra tus convenciones y genera el componente. Vos hacés lo que ningún agente debería hacer por vos: revisar la lógica de negocio y la UX.

Los resultados que ves en la práctica con este flujo son contundentes: componentes de formularios y tablas que antes tomaban medio día, ahora salen en una o dos horas con calidad de review. No porque el agente sea brillante, sino porque la parte repetitiva se automatizó y tu criterio se enfocó en lo importante.

Buenas prácticas para que el código generado no se vuelva un dolor

El código generado por IA tiene una particularidad: es mantenible en la medida en que tu codebase tenga reglas explícitas. Estas cinco prácticas marcan la diferencia entre un flujo que acelera y uno que genera caos:

1. Definí convenciones antes de delegar. El agente solo puede seguir reglas que existan. Documentá el patrón de componentes, el manejo de estados, el naming y los estilos. Un CONTRIBUTING.md para tu frontend es la mejor inversión para trabajar con agentes.

2. Nunca pegues código sin revisar. El agente propone, vos decidís. Todo PR generado por IA debería pasar por el mismo review que cualquier otro — o uno más estricto, porque el código va a ser leído por humanos después.

3. Exigí tests en el prompt. Si el agente genera el componente, que genere también los tests. Es la forma más rápida de validar que el código hace lo que dice.

4. Mantené los tipos estrictos. TypeScript estricto es tu red de seguridad. El código generado que no compila se detecta al instante, no en producción.

5. Versioná los prompts que funcionan. Si encontraste un prompt que produce excelentes componentes, guardalo en una carpeta prompts/ del repo. La próxima vez empezás desde ahí en vez de reescribir todo.

El rol del desarrollador no desaparece: cambia

Hay un miedo recurrente: “si la IA genera el frontend, ¿qué hago yo?”. La respuesta honesta es que el trabajo cambia de forma, no desaparece. El desarrollador deja de ser quien escribe las mil líneas repetitivas y se convierte en quien define la arquitectura, revisa la calidad, cuida la experiencia de usuario y decide qué vale la pena construir.

Los equipos que mejor usan agentes de código en frontend no son los que generan más código: son los que tienen las convenciones más claras y los reviews más rigurosos. La IA acelera la ejecución; la dirección la seguís poniendo vos.

“La IA no reemplaza al desarrollador: reemplaza a las mil líneas repetitivas que lo distraían de lo importante.”

Empieza hoy con un solo componente

No necesitás reestructurar todo tu proyecto para beneficiarte de los agentes de IA en React. Empezá con un solo componente repetitivo — esa tabla, ese formulario, ese modal — y corré el flujo completo: prompt con contexto, generación, review, tests, merge. Medí cuánto tardaste comparado con hacerlo a mano.

Cuando veas el resultado, vas a entender por qué el frontend potenciado por IA no es una moda: es la forma en que los equipos están recuperando el tiempo que la repetición les robaba.

Sigue explorando estos temas en el blog de DojoFullStack: cada semana publicamos guías prácticas sobre desarrollo de software, agentes de código y automatización para que lleves tu stack al siguiente nivel.