¡Adiós al caos! GitHub Copilot Agents al rescate de tus workflows de desarrollo

¿Alguna vez has sentido que tus proyectos de desarrollo se convierten en un laberinto a medida que crecen? Es común: un script rápido, un prototipo, una pequeña automatización… y de repente, el código se vuelve frágil y difícil de mantener. Pero, ¿qué tal si pudieras darle claridad y estructura a esos proyectos sin perder impulso? Aquí es donde entran en juego los agentes de GitHub Copilot.

De la improvisación al orden: Copilot Agents en acción

Este artículo explora cómo usar los agentes de GitHub Copilot para refactorizar y mejorar un proyecto personal de GitHub Actions llamado ‘validate-file-exists’. Lo que comenzó como una herramienta improvisada se transformó en un proyecto bien estructurado, con pruebas, documentación y listo para el éxito gracias al modo agente de Copilot.

Veremos cómo:

• Actualizar las instrucciones personalizadas de Copilot para una mejor alineación de tareas.
• Crear el archivo copilot-setup-steps.yaml para darle al agente de codificación las herramientas que necesita en su entorno.
• Trabajar con Copilot para identificar deuda técnica.
• Colaborar con Copilot en pull requests.
• Usar Copilot para mejorar iterativamente la UI en un proyecto separado.

El GitHub Action que lo empezó todo

En noviembre de 2024, se creó un pequeño GitHub Action llamado validate-file-exists. El objetivo era asegurar que ciertos archivos (como dependabot.yml o .github/copilot-instructions.md) estuvieran presentes en un repositorio. Si no, el workflow de GitHub Actions fallaría. Admitía entradas separadas por comas y formaba parte de una “línea base” más grande de controles de calidad.

Aunque funcional, tenía margen de mejora: faltaba documentación, la metadata era inconsistente, había lagunas en la validación de entradas y carecía de instrucciones personalizadas o pasos de configuración para Copilot.

Paso 1: Mejorar las instrucciones personalizadas

Antes de usar el agente, se revisó el archivo copilot-instructions.md existente. Era escaso, sin descripción del propósito, uso o estructura del repositorio, ni orientación clara para Copilot.

Acción:

Se basaron las instrucciones en las mejores prácticas para usar Copilot en tareas, proporcionando el archivo de instrucciones personalizado como ejemplo y pidiendo a Copilot que lo actualizara según el código base. En otras palabras, se buscaba que proporcionara:

• Un resumen claro del repositorio/código base y lo que hace la acción.
• Guías de contribución (cómo construir, formatear, lintear y probar el código base, incluyendo expectativas antes de hacer commit).
• Visión general de la estructura del proyecto.
• Principios técnicos clave (TypeScript estricto, incorporación de TSDoc y funciones enfocadas y manejables).

Resultado:

Copilot tenía el contexto adecuado sobre las expectativas para guiarlo hacia contribuciones significativas. Aquí un extracto del resultado:

# Validate File Exists Action

This is a TypeScript-based GitHub Action that validates whether specified files
exist in a repository. It takes a comma-separated list of files and validates
their existence, failing the workflow if any files are missing. Please follow
these guidelines when contributing:

## Code Standards

### Required Before Each Commit

- Run `npm run format:write` to ensure consistent code formatting with Prettier
- Run `npm run lint` to check for ESLint violations
- Run `npm run test` to ensure all tests pass
- Run `npm run local-action` to test the action locally with a `.env` file

### Development Flow

- Build: `npm run package` (compiles TypeScript and bundles with ncc)
- Test: `npm run test` or `npm run ci-test`
- Coverage: `npm run coverage` (generates coverage badge)
- Full check: `npm run all` (format, lint, test, coverage, package)
- Local testing: `npm run local-action` (test action locally with .env file)

## Repository Structure

- `src/`: Core TypeScript source code
  - `main.ts`: Main entry point and action orchestration
  - `fileValidator.ts`: Core file validation logic
  - `index.ts`: Action entrypoint that calls run()
  - `types.ts`: TypeScript type definitions
- `__tests__/`: Jest unit tests for all source files
- `dist/`: Compiled and bundled JavaScript output (generated)
- `action.yml`: GitHub Action metadata and interface definition
- `script/`: Release automation scripts
- `badges/`: Generated coverage and status badges

## Key Guidelines

1. Follow TypeScript strict mode and best practices
1. Use clear, descriptive variable and function names
1. Add TSDoc comments for all public methods and classes
1. Write comprehensive unit tests using Jest for all new functionality
1. Keep functions focused and manageable (generally under 50 lines)
1. Use consistent error handling with @actions/core.setFailed()
1. Validate inputs and provide meaningful error messages
1. Use @actions/core for all GitHub Actions integrations (inputs, outputs,
   logging)
1. Maintain backwards compatibility for action inputs/outputs

Paso 2: Añadir copilot-setup-steps.yaml

Como cualquier desarrollador, el agente de codificación de Copilot necesita un entorno adecuado: configurar frameworks, instalar dependencias y asegurarse de que Copilot tenga acceso a las herramientas correctas.

Acción:

Se creó .github/copilot-setup-steps.yaml utilizando la documentación de GitHub sobre la personalización del entorno de desarrollo para el agente de codificación de Copilot. El ejemplo extrae el código, configura Node.js e instala las dependencias necesarias. Dado que se trata de una acción de TypeScript, ¡era prácticamente todo lo que se necesitaba!

Se realizó un cambio menor en el workflow: cambiar la versión de Node.js para que se obtenga del archivo .node-version, para ser coherente con el workflow de CI:

- name: Setup Node.js
  id: setup-node
  uses: actions/setup-node@v4
  with:
    node-version-file: .node-version
    cache: npm

Resultado:

El agente de codificación de Copilot tiene las dependencias y herramientas necesarias para construir, lintear y probar el código base. A medida que realiza cambios, puede verificar la calidad (como se solicitó en las instrucciones personalizadas) utilizando las herramientas instaladas en copilot-setup-steps.yml.

Paso 3: Dejar que Copilot encuentre la deuda técnica

Con los pasos de configuración y las instrucciones personalizadas en su lugar, era hora de encontrar una tarea. Se utilizó Copilot Chat en VS Code y se le preguntó:

“¿Qué deuda técnica existe en este proyecto? Por favor, dame una lista priorizada de áreas en las que debemos centrarnos. Me gustaría crear un Issue en GitHub con los 2 o 3 elementos principales. Incluye una breve declaración del problema, un conjunto de criterios de aceptación y punteros sobre qué archivos deben añadirse/actualizarse.”

En minutos, exploró el código base y propuso:

• Metadata inconsistente del paquete.
• Desajustes en el README (nombres de entrada incorrectos).
• Falta de validación para entradas vacías o malformadas.

Acción:

Se le pidió a Copilot que escribiera un issue que abordara esos tres elementos. Una vez creado el issue, se le asignó a Copilot.

Paso 4: Copilot coding agent en acción

Una vez asignado, el agente inició un nuevo pull request. Esto es lo que hizo, de forma asíncrona:

• Exploró el contenido del repositorio para construir su comprensión del problema.
• Creó un plan basado en su exploración.
• Corrigió el nombre, la descripción, las URLs y el campo de autor en package.json.
• Actualizó los ejemplos de uso en el README para que coincidan con el código.
• Añadió lógica de validación de entrada:
• Rechazar cadenas vacías o que solo contengan espacios en blanco.
• Rechazar entradas que solo sean comas.
• Escribió cuatro nuevas pruebas para estos casos extremos.
• Confirmó que el linting, el formateo y la cobertura estuvieran intactos.
• Actualizó el cuerpo del pull request con una lista de verificación del trabajo completado.

Resultado:

Copilot completó todas las tareas en poco más de 11 minutos. Tras una revisión del enfoque del agente, se aprobó el workflow de CI para que pudiera ejecutar los controles de calidad estándar en el código base. El workflow falló, pero no por culpa de Copilot, sino porque había comprobaciones adicionales de linting de Markdown en el CI que no estaban en las instrucciones.

Depuración en tiempo real y correcciones de linting

Se añadió un nuevo comentario al pull request, pidiendo a Copilot:

“Nuestro GitHub Action tuvo un error de linting para el markdown, ¿puedes arreglarlo, por favor?” (También se pegó el error del workflow de GitHub Actions).

Unos minutos más tarde, actualizó el código, subió un nuevo commit y el pull request pasó.

Bonus: Cambios en la UI con Copilot coding agent y el servidor Playwright MCP

Mientras Copilot trabajaba en los cambios iniciales del código para el GitHub Action, se mostró un segundo proyecto: una aplicación de visualización Trend Radar (aquí está el repositorio) construida con Next.js y Tailwind CSS.

Problema:

Los usuarios tenían que introducir manualmente datos de puntos en formularios. Se quería:

• Permitir a los usuarios hacer clic en el radar para colocar un punto.
• Habilitar el reposicionamiento por arrastre para cambiar la categoría o probabilidad de un punto.

Solución:

Se creó un issue en GitHub describiendo la UX, los criterios de aceptación y las referencias.

Después de algunas iteraciones de comentarios trabajando a través del pull request, Copilot coding agent:

• Implementó la lógica de clic para colocar.
• Añadió soporte de arrastrar y soltar.
• Escribió pruebas unitarias.
• Tomó capturas de pantalla y las adjuntó al pull request.
• Actualizó el pull request (y respondió con comentarios) con resúmenes del trabajo completado.

Playwright ahora está instalado por defecto con el agente de codificación de Copilot, lo que permite a Copilot validar también los comportamientos visuales.

Reflexiones finales

Los agentes de GitHub Copilot son el nuevo compañero de equipo.

Al estructurar los repositorios con contexto e intención, se invita a Copilot a contribuir de forma significativa.

Si aún no has probado el agente de codificación de Copilot, piensa en tus proyectos existentes:

• Limpiar un viejo GitHub Action.
• Refactorizar un repositorio descuidado.
• Añadir validaciones y pruebas.

Te sorprenderá cuánto progreso puedes hacer en una tarde.

• Escribe un copilot-instructions.md claro y conciso para dirigir al agente.
• Utiliza copilot-setup-steps.yaml para darle al agente las herramientas que necesita.
• Establecer una tarea clara y bien definida es importante cuando se trabaja con Copilot.
• Copilot ahora tiene acceso a un navegador, gracias al servidor Playwright MCP, lo que le permite interactuar con páginas web y añadir capturas de pantalla al pull request.

No tienes que trabajar en proyectos nuevos para probar Copilot y sus capacidades de agente. ¿Con qué proyecto existente podrías empezar?

Fuente: GitHub Blog