GitHub Copilot CLI en proyectos React: guía práctica

GitHub Copilot CLI es útil en proyectos React cuando le das contexto claro: abre la terminal en la raíz del repo, ejecuta copilot y pide cambios acotados. Con un archivo de instrucciones y prompts pequeños, acelera componentes, hooks y pruebas sin convertir el código en una caja negra. Si necesitas la referencia del comando, consulta GitHub Copilot CLI.

Por qué GitHub Copilot CLI encaja en proyectos React

Un proyecto React tiene convenciones fuertes: componentes, props, hooks, árbol de imports y tests. Copilot CLI puede leer varios archivos a la vez, seguir la traza de un componente y lanzar comandos como npx vitest run o npm run lint. Eso lo hace útil para tareas que requieren contexto disperso: mover lógica a un hook, actualizar todos los usos de un componente o corregir tests tras un cambio de API.

No es un generador de pantallas: funciona mejor cuando el repo ya tiene una estructura clara y le pides una responsabilidad por prompt. En React, eso significa pedir un componente, un hook o una corrección de tests, y validar con el runner. Si usas Zustand, Redux Toolkit o Context, indícalo en las instrucciones para que no mezcle patrones de estado.

Configurar el proyecto para el agente

GitHub Copilot CLI lee las instrucciones del proyecto desde .github/copilot-instructions.md o AGENTS.md. En React no basta con decir que use React: define comandos, carpetas y reglas que eviten ambigüedad. Un archivo corto es mejor que un documento largo; lo importante es que responda qué ejecutar y qué convenciones respetar.

Un ejemplo realista:

# Instrucciones para agentes en este repo React

Proyecto: panel React con Vite y TypeScript.

Comandos:
- Instalar: npm ci
- Dev: npm run dev
- Test: npx vitest run
- Lint: npm run lint
- Build: npm run build
- Storybook: npm run storybook

Carpetas:
- src/components: componentes reutilizables
- src/hooks: hooks propios
- src/features: lógica por dominio
- src/test: utilidades de prueba

Reglas específicas de React:
- Usa componentes funcionales y hooks; evita clases salvo justificación.
- No derives estado con useEffect si puedes calcularlo durante el render.
- Mantén el fetching en hooks, no en el cuerpo del componente.
- Si cambias un componente, revisa sus tests con Vitest y React Testing Library.
- Prioriza consultas accesibles (getByRole, getByLabelText) sobre getByTestId.
- No añadas dependencias sin confirmar con package.json.

Si el proyecto crece, conviene mantener un mapa de código para agentes de IA que reduzca búsquedas ciegas.

Ciclo de trabajo con el agente

El flujo que mejor funciona en React es: planifica, da un paso pequeño, ejecuta las pruebas y revisa el diff. No pidas modernizar la app; pide extraer el estado del formulario a un hook y actualizar los tests. Antes de aceptar, mira git diff y verifica que no cambie props públicas ni añada dependencias sin motivo. Si el agente propone un cambio grande, pídele que lo divida en pasos.

Prompts de ejemplo:

• Crea el componente EmptyState en src/components/ con tipos, story de Storybook y test de Vitest.
• Extrae la lógica de useUsers de UserList a src/hooks/useUsers.ts sin cambiar el comportamiento; ejecuta los tests.
• Añade estados loading, error y data a useProducts y actualiza el test para simular fetch fallido y exitoso.
• Refactoriza CheckoutForm para usar useReducer y mueve las validaciones a funciones puras; ejecuta lint y tests.
• Analiza por qué falla ProductCard.test.tsx tras el cambio de props y propón la corrección mínima.

Para tareas más grandes, una especificación breve antes de abrir el agente reduce iteraciones; aquí tienes una guía de desarrollo guiado por especificaciones con agentes de IA.

Tareas típicas y puntos donde vigilar

Copilot CLI maneja bien tareas mecánicas de React: crear componentes pequeños con tipos y tests, extraer hooks, migrar estado local a useReducer o Context, actualizar pruebas tras un cambio de props, corregir errores de TypeScript y añadir atributos de accesibilidad.

Donde hay que vigilar de cerca:

• Efectos: puede introducir useEffect innecesario o con dependencias mal calculadas; revisa que no haya suscripciones duplicadas ni llamadas en bucle.
• Memorización: a veces envuelve todo con useMemo o useCallback sin ganancia real; acepta solo si hay evidencia de rendimiento.
• API pública: un refactor puede cambiar el contrato de un componente sin actualizar todos los consumidores; revisa el diff global, no solo el archivo tocado.
• Tests: puede generar pruebas que comprueban estado interno en lugar del comportamiento renderizado; pide consultas accesibles y aserciones de usuario.
• Estado: si usas una librería de estado, confirma que el agente respete el patrón existente en lugar de añadir Context o props por su cuenta.

Pruebas y verificación para React

Pide al agente que ejecute las pruebas después de cada cambio y no asumas que ya lo hizo. En React, la verificación mínima es npx vitest run, npm run lint y npm run build. Si usas React Testing Library, indícale que use testing-library/jest-dom y simulaciones reales de fetch. Para flujos con navegador, combina Copilot CLI con Playwright; esta guía cubre pruebas en navegador con agentes de IA y Playwright.

Después revisa que no queden tests con skip o only, y que las esperas asíncronas usen find* en lugar de waitFor innecesario. Un diff limpio con tests verdes es la señal mínima para aceptar.

Varios agentes en un proyecto React con AgentVera

Si quieres lanzar varios agentes sobre el mismo repo React, AgentVera los ejecuta en terminales reales y permite que cada uno trabaje en su propio git worktree. Así uno puede refactorizar componentes mientras otro corrige tests sin pisar archivos. Al acabar un turno, un segundo modelo revisa el código y enlaza los hallazgos a file:line, útil para detectar regresiones en props o hooks. Los checkpoints guardan cada turno y permiten deshacerlo o reproducirlo paso a paso; los presupuestos de tokens frenan al agente sin perder la conversación.

Conclusión

GitHub Copilot CLI no sustituye el criterio de React; el valor está en tareas acotadas con verificación inmediata. Define instrucciones, trabaja en pasos pequeños, ejecuta pruebas y revisa el diff. Con ese hábito, el agente reduce el trabajo mecánico sin convertirse en una caja negra.