Créer des pipelines de développement autonomes à l'aide d'agents.md et de skills.md dans Antigravity

1. Introduction

Dans cet atelier de programmation, nous allons vous montrer comment configurer une équipe de développeurs d'IA autonome et amusante, assistée par l'IA, directement sur votre ordinateur à l'aide de l'IDE Antigravity. Vous allez créer une application fonctionnelle en guidant une exigence tout au long de son cycle de vie, des spécifications techniques au déploiement final, à l'aide d'un puissant workflow skills.md et agents.md.

Au lieu d'être limité à une pile technologique spécifique ou d'écrire des scripts d'orchestration Python complexes, nous allons utiliser une approche conviviale sans code où vos exigences suivent un cycle automatisé basé sur trois principes fondamentaux d'Antigravity :

  1. agents.md : pour définir précisément les membres de votre équipe d'IA (responsable produit, équipe frontend, équipe QA, équipe DevOps).
  2. Skills et skills.md : répertoire dédié dans lequel vous définissez des capacités techniques robustes et des règles de transfert d'artefacts sous forme de fichiers .md modulaires.
  3. Workflows (workflows/) : pour définir des commandes slash personnalisées qui enchaînent de manière fluide les membres de votre équipe d'IA dans un pipeline autonome.

En combinant ces trois éléments de manière native dans Antigravity, vous guiderez Gemini pour automatiser complètement le développement d'une application prête pour la production, du début à la fin.

Points abordés

  • Initialisez l'espace de travail : configurez votre projet pour qu'Antigravity le comprenne en détail.
  • Définissez l'équipe : créez un fichier agents.md pour établir vos personas d'IA spécialisés.
  • Programmez les compétences : créez des fichiers .md détaillés dans un répertoire skills/ pour définir des règles techniques strictes et des boucles de retravail itératives.
  • Définir des workflows personnalisés : créez une commande à barre oblique /startcycle pour automatiser le workflow du studio.
  • Démarrez la réaction en chaîne : utilisez une seule commande pour exécuter automatiquement l'ensemble du pipeline multi-agents de manière efficace.

Ce que vous allez faire

  • Comment séparer l'ingénierie des prompts d'IA du code de l'application.
  • Comment construire un agent qui met activement en pause pour interpréter les commentaires et les modifications des utilisateurs dans les fichiers Markdown générés.
  • Développez des compétences dynamiques et indépendantes du langage pour la génération et le déploiement de code.
  • Comment créer des commandes de macros personnalisées (workflows) dans un IDE agentique.

Prérequis

Avant de commencer

Pour les crédits Google Cloud : pour vous aider à utiliser Antigravity avec les projets Google Cloud, utilisez ce lien pour profiter de vos crédits Google Cloud sans frais. Pour activer le crédit et créer un projet, suivez ces instructions.

  1. Assurez-vous d'avoir installé l'IDE Antigravity (disponible sur antigravity.google).
  2. Ouvrez votre IDE Antigravity et assurez-vous d'avoir initialisé un espace de travail dédié.
  3. Ouvrez un terminal lorsque vous travaillez en mode Éditeur.

2. Initialiser l'espace de travail

Comme Antigravity comprend nativement les fichiers de workflow placés dans le répertoire .agents, la configuration de votre pipeline de développement autonome est aussi simple que la création de quelques dossiers standards.

Vous pouvez configurer votre espace de travail :

  1. Ouvrez l'IDE Antigravity.
  2. Ouvrez le Gestionnaire d'agents. À tout moment, vous pouvez basculer entre le Gestionnaire d'agents et l'éditeur en appuyant sur CMD+E (Mac) ou CTRL+E (Windows), ou en cliquant sur les boutons "Ouvrir l'éditeur" et "Ouvrir le Gestionnaire d'agents" en haut à droite de la barre de menu. .
  3. Cliquez sur + Ouvrir l'espace de travail.

Pour démarrer une conversation dans un espace de travail, sélectionnez l'espace de travail souhaité dans l'onglet "Démarrer une conversation" ou cliquez sur le bouton Plus à côté du nom de l'espace de travail dans la barre latérale.

45e7241be5552e42.png

  1. Cliquez sur "Open New Workspace" (Ouvrir un nouvel espace de travail), nommez l'espace de travail skills-codelab et sélectionnez un répertoire local. Cela permet à l'agent de disposer d'un dossier racine spécifique pour échafauder les fichiers sans encombrer les autres projets. Une fois cette étape terminée, accédez à la vue Éditeur, puis suivez les étapes (5), (6) et (7).

d84ba507939a5efc.png

  1. Effectuez un clic droit et créez un dossier skills-codelab.
  2. Créez-y deux répertoires : production_artifacts et app_build.
  3. Créez un répertoire .agents, puis créez-y les dossiers workflows et skills.

(Autre option) Si vous préférez utiliser le terminal, vous pouvez générer instantanément cette structure en exécutant la commande suivante :

mkdir skills-codelab && cd skills-codelab
mkdir -p .agents/workflows .agents/skills
mkdir production_artifacts app_build

Assurez-vous que votre dossier se présente comme suit :

7234ea48c2b175a7.png

À quoi servent ces nouveaux dossiers ?

  • .agents/ : il s'agit d'un répertoire spécial reconnu nativement par Antigravity. En plaçant des fichiers ici, vous étendez le comportement de l'IA intégrée d'Antigravity.
  • skills/ : ce dossier permet de stocker des manuels d'instructions techniques spécifiques (fichiers .md) pour votre IA. Cela indique à l'IA comment effectuer des tâches spécifiques, comme écrire du code ou déployer des applications, en remplaçant une invite massive et confuse par des étapes modulaires.
  • production_artifacts/ : il s'agit de notre dossier partagé dans lequel les membres automatisés de notre équipe déposeront intentionnellement des fichiers pour que le prochain agent puisse les lire.
  • app_build/ : espace de travail désigné pour le code d'application proprement dit. L'agent Full-Stack Engineer générera tout le code (comme package.json, app.py, les composants React) et l'enregistrera directement dans ce dossier, isolant ainsi la source de l'application des instructions de l'IA.

3. Définir l'équipe (agents.md)

Tout d'abord, nous devons indiquer à Antigravity qui travaille sur ce projet. Au lieu de conserver les instructions dans quatre dossiers de projet imbriqués différents, nous centralisons l'identité de notre équipe. Créez un fichier à l'emplacement .agents/agents.md :

Pourquoi avons-nous besoin de différents personas ?

Lorsque vous demandez à une IA de créer une application entière à partir de zéro, elle peut facilement être dépassée si vous l'obligez à être à la fois architecte, codeur, testeur et responsable du déploiement. En centralisant ces rôles dans agents.md, vous évitez de perturber l'IA. Le PM se concentre uniquement sur les exigences, l'ingénieur uniquement sur la génération de code et l'équipe QA uniquement sur la correction des bugs. Vous bénéficiez d'experts spécialisés pour chaque étape de votre pipeline.

Le fichier agents.md résout ce problème en centralisant les différentes personas de votre équipe :

  1. Le responsable produit (@pm) : il se concentre uniquement sur la vue d'ensemble. Il rédige le fichier Technical_Specification.md et gère le processus d'approbation avec vous (l'humain).
  2. L'ingénieur Full Stack (@engineer) : il ne se soucie pas de la planification. Il se contente de prendre les spécifications du chef de produit et se concentre entièrement sur l'écriture d'un code de haute qualité dans le langage de programmation que vous approuvez.
  3. L'ingénieur QA (@qa) : il apporte un regard neuf. Au lieu d'écrire de nouvelles fonctionnalités, il se concentre uniquement sur la recherche de dépendances manquantes, d'erreurs de syntaxe ou de bugs logiques dans le code de l'ingénieur.
  4. Le DevOps Master (@devops) : se concentre strictement sur l'environnement d'exécution. Ils savent lire le terminal, installer des packages (npm install, pip install) et démarrer le serveur local.
# 🤖 The Autonomous Development Team

## The Product Manager (@pm)
You are a visionary Product Manager and Lead Architect with 15+ years of experience.
**Goal**: Translate vague user ideas into comprehensive, robust, and technology-agnostic Technical Specifications.
**Traits**: Highly analytical, user-centric, and structured. You never write code; you only design systems.
**Constraint**: You MUST always pause for explicit user approval before considering your job done. You are highly receptive to user feedback and will enthusiastically re-write specifications based on inline comments.

## The Full-Stack Engineer (@engineer)
You are a 10x senior polyglot developer capable of adapting to any modern tech stack.
**Goal**: Translate the PM's Technical Specification into a beautiful, perfectly structured, production-ready application.
**Traits**: You write clean, DRY, well-documented code. You care deeply about modern UI/UX and scalable backend logic.
**Constraint**: You strictly follow the approved architecture. You do not make assumptions—if the spec says Python, you use Python. You always save your code into the `app_build/` directory.

## The QA Engineer (@qa)
You are a meticulous Quality Assurance engineer and security auditor.
**Goal**: Scrutinize the Engineer's code to guarantee production-readiness.
**Traits**: Detail-oriented, paranoid about security, and relentless in finding edge cases.
**Focus Areas**: You aggressively hunt for missing dependencies in configurations, unhandled promises, syntax errors, and logic bugs. You proactively fix them.

## The DevOps Master (@devops)
You are the elite deployment lead and infrastructure wizard.
**Goal**: Take the final code in `app_build/` and magically bring it to life on a local server.
**Traits**: You excel at terminal commands and environment configurations.
**Expertise**: You fluently use tools like `npm`, `pip`, or native runners. You install all necessary modules seamlessly and provide the local URL directly to the user so they can see the final product!

Notez comment nous définissons les objectifs, les traits et les contraintes pour chaque persona.

  • Les objectifs indiquent à l'agent sa responsabilité exacte dans le pipeline.
  • Les traits lui donnent une personnalité comportementale, en lui indiquant comment agir (par exemple, "développeur senior x10" ou "paranoïaque concernant la sécurité").
  • Les contraintes agissent comme des garde-fous stricts (par exemple, "n'écris jamais de code", "suis strictement l'architecture approuvée").

Cette façon de structurer vos requêtes réduit considérablement les hallucinations de l'IA et garantit que l'agent respecte strictement le workflow requis.

Assurez-vous que votre dossier se présente comme suit :

4. Programmer les compétences spécialisées (skills/)

L'ingénierie d'instructions détaillées est la clé de la magie du no-code. Nous allons créer des fichiers texte très spécifiques pour chaque compétence, en veillant à ce que le PM effectue une boucle arrière active si vous demandez une retouche.

1. Compétence en spécifications

Cette compétence sert de point de départ. L'agent PM l'utilise pour vous interroger et étoffer l'architecture avant d'écrire du code, ce qui vous évite de perdre des heures de codage potentiellement inutiles.

Créez .agents/skills/write_specs.md :

# Skill: Write Specs

## Objective
Your goal as the Product Manager is to turn raw user ideas into rigorous technical specifications and **pause for user approval**.

## Rules of Engagement
- **Artifact Handover**: Save all your final output back to the file system.
- **Save Location**: Always output your final document to `production_artifacts/Technical_Specification.md`.
- **Approval Gate**: You MUST pause and actively ask the user if they approve the architecture before taking any further action.
- **Iterative Rework**: If the user leaves comments directly inside the `Technical_Specification.md` or provides feedback in chat, you must read the document again, apply the requested changes, and ask for approval again!

## Instructions
1. **Analyze Requirements**: Deeply analyze the user's initial idea request.
2. **Draft the Document**: Your specification MUST include:
   - **Executive Summary**: A brief, high-level overview.
   - **Requirements**: Functional and non-functional requirements.
   - **Architecture & Tech Stack**: Suggest the absolute best framework (e.g., Python/Django, Node/Express, React/Next.js) for the job and outline the layout/API structure.

   - **State Management**: Briefly outline how data should flow.
3. Save the document to disk.
4. **Halt Execution**: Explicitly ask the user: "Do you approve of this tech stack and specification? You can safely open `Technical_Specification.md` and add comments or modifications if you want me to rework anything!" Wait for their "Yes" or feedback before the sequence continues!

Notez le strict "Approval Gate" (Portail d'approbation). Au lieu de créer l'intégralité de l'application en une seule fois et d'espérer que tout soit correct, l'IA est explicitement invitée à faire une pause, à attendre votre décision finale et à relire activement le document si vous avez laissé des commentaires intégrés.

2. Compétence de génération Full-Stack

Cette compétence est le cœur du builder. L'agent Engineer lit la pile technologique exacte à partir des spécifications du chef de produit et crée dynamiquement tous les fichiers de code frontend et backend nécessaires.

Créez .agents/skills/generate_code.md :

# Skill: Generate Code

## Objective
Your goal as the Full-Stack Engineer is to write the physical code based entirely on the PM's approved specification.

## Rules of Engagement
- **Dynamic Coding**: You are not limited to HTML/JS. You must write code in the exact language/framework defined in the approved `Technical_Specification.md`.
- **Save Location**: Save all your raw code, accurately retaining necessary folder structures, directly inside `app_build/`.

## Instructions
1. **Read the Spec**: Open and carefully study `production_artifacts/Technical_Specification.md`.
2. **Scaffold Structure**: Generate all core backend and frontend application files.
3. **Output**: Dump your code perfectly into the `app_build/` directory. Do not skip or summarize any code blocks. Ensure all `package.json` or `requirements.txt` files are present.

Cette compétence n'a pas de pile prédéfinie (comme Next.js ou Django). Il s'appuie explicitement sur la pile technologique dynamique choisie par le PM. Cela signifie que votre compétence unique de génération de code fonctionne pour tous les frameworks que vous avez approuvés dans la spécification.

3. Compétence d'audit

Cette compétence sert de filet de sécurité. L'agent QA agit comme un examinateur indépendant, spécifiquement chargé de dénicher les dépendances manquantes et les erreurs de logique dans le code nouvellement généré.

Créez .agents/skills/audit_code.md :

# Skill: Audit Code

## Objective
Your goal as the QA Engineer is to ensure the generated code is perfectly functional natively.

## Rules of Engagement
- **Target Context**: Your focus area is the `app_build/` directory.

## Instructions
1. **Assess Alignment**: Compare the raw code against the approved `Technical_Specification.md`.
2. **Bug Hunting**: Find and fix dependency mismatches, unhandled errors, and logic breaks.
3. **Commit Fixes**: Overwrite any flawed files in `app_build/` with your polished revisions.

L'IA générative commet naturellement de petites erreurs de syntaxe lorsqu'elle écrit de grandes quantités de code. En disposant d'une compétence d'audit distincte dont le seul rôle est de rechercher les erreurs, nous augmentons considérablement le taux de réussite de l'exécution de l'application finale.

4. Skill de déploiement dynamique

Cette compétence donne vie à l'application. L'agent DevOps détermine le type d'application qui a été créé (Node, Python, etc.) et exécute en toute sécurité les commandes de terminal nécessaires pour installer les modules et démarrer le serveur.

Créez .agents/skills/deploy_app.md :

# Skill: Deploy App

## Objective
Your goal as DevOps is to intelligently package the application and fire up a server based on the chosen stack.

## Instructions
1. **Stack Detection**: Inspect the `Technical_Specification.md` and the files in `app_build/` to figure out what stack is being used.

2. **Install Dependencies**: Use your native terminal to navigate into `app_build/` and run `npm install`, `pip install -r requirements.txt`, or whatever is appropriate!

3. **Host Locally**: Execute the appropriate native terminal command (e.g., `npm run dev`, `python3 app.py`) to start a background server.
4. **Report**: Output the clickable localhost link to the user and celebrate a successful launch!

Nous exploitons la capacité de l'IDE à exécuter des commandes de terminal natives de manière sécurisée.

L'agent se comporte comme un véritable ingénieur DevOps, en déterminant de manière dynamique la commande d'installation à exécuter en fonction des fichiers qu'il voit réellement dans le dossier app_build/.

(Facultatif) 5. Compétence de déploiement Cloud Run

Si vous souhaitez déployer votre application directement en production au lieu de l'exécuter en local, vous pouvez créer une autre compétence de déploiement. Comme Antigravity fonctionne directement sur votre ordinateur local, l'IA peut utiliser de manière fluide la gcloud CLI authentifiée localement.

Créez .agents/skills/deploy_cloud_run.md :

# Skill: Deploy to Cloud Run

## Objective
Your goal as DevOps is to package the application into a container and deploy it to Google Cloud Run.

## Instructions
1. **Verify Environment**: Ensure the necessary files for the chosen tech stack are in `app_build/`.
2. **Containerize**: Use the IDE terminal to navigate to `app_build/` and run `gcloud run deploy --source .`. 
3. **Configure**: If prompted by the CLI tool, automatically select the default region and allow unauthenticated invocations so the web app is public.
4. **Report**: Output the live production Google Cloud Run URL to the user!

5. Définir une commande à barre oblique personnalisée

À quoi sert une commande à barre oblique personnalisée ?

En enregistrant ce fichier texte dans .agents/workflows/ , vous enregistrez une toute nouvelle commande directement dans l'interface de chat d'Antigravity.

Au lieu d'inviter manuellement l'IA étape par étape ("Agis en tant que chef de produit et rédige une spécification…" puis "OK, maintenant agis en tant qu'ingénieur et écris du code…"), la commande /startcycle agit comme un orchestrateur automatisé. Il enchaîne de manière fluide les personas que vous avez définis et leurs compétences spécifiques dans une séquence continue et automatisée. Nous allons créer une seule macro qui gère le transfert entre les agents, en gérant explicitement la boucle de retouche pour la phase de PM.

Créez .agents/workflows/startcycle.md :

---
description: Start the Autonomous AI Developer Pipeline sequence with a new idea
---

When the user types `/startcycle <idea>`, orchestrate the development process strictly using `.agents/agents.md` and `.agents/skills/`.

### Execution Sequence:
1. Act as the **Product Manager** and execute the `write_specs.md` skill using the `<idea>`.
   *(Wait for the user to explicitly approve the spec. If the user provides feedback or adds comments directly to the Markdown file, act as the PM again to re-read and revise the document. Loop this step until they type "Approved").*
2. Shift context, act as the **Full-Stack Engineer**, and execute the `generate_code.md` skill.
3. Shift context, act as the **QA Engineer**, and execute the `audit_code.md` skill.
4. Shift context, act as the **DevOps Master**, and execute the `deploy_app.md` skill.

Assurez-vous que votre dossier se présente comme suit :

de21eeb6012ddbcd.png

6. Lancez la réaction en chaîne !

Une fois votre équipe et vos règles officiellement définies dans Antigravity, vous pouvez déclencher l'ensemble du workflow sans effort.

Adressez ce prompt à Antigravity :

  1. Dans la zone de chat de l'Agent Manager, saisissez "/" pour ouvrir le menu des commandes personnalisées. Sélectionnez ou saisissez startcycle.
  2. Donnez-lui votre idée :
/startcycle "I need a fast, real-time chat application for customer support on my ecommerce website."

Détendez-vous et collaborez :

  1. Gemini devient le chef de produit, rédige une spécification solide et vous demande votre approbation.
  2. Ouvrez Technical_Specification.md dans l'éditeur de votre IDE, ajoutez quelques notes (par exemple, "Utilisons Python au lieu de Node"), puis demandez à l'agent de le retravailler. Il révisera le fichier de manière autonome.
  3. Une fois que vous l'avez approuvée, Gemini transfère nativement le contexte à l'ingénieur, en utilisant la spécification approuvée pour écrire le code backend/frontend.
  4. Il devient l'ingénieur QA, corrige les bugs et enregistre le code final.
  5. Enfin, le DevOps Master installe dynamiquement les modules et diffuse l'application dans votre navigateur.

Exécution d'exemple de Technical_Specification.md et attente d'approbations ou de commentaires

11defe4c48e874cc.png

Une fois que l'utilisateur a approuvé l'invite, l'ensemble du workflow commence.

b9af07291806ae60.png

7. Récapitulatif et étapes suivantes

Félicitations ! Vous avez appris à injecter des boucles d'itération collaborative et la génération d'applications full stack dynamiques dans un pipeline agentique.

Dans cet atelier de programmation, nous avons abordé les points suivants :

  • Comment mapper des personas d'IA à l'aide de .agents/agents.md.
  • Créez des boucles de retravail collaboratives dans .agents/skills/write_specs.md afin que l'agent lise vos commentaires Markdown intégrés.
  • Construis des compétences dynamiques .md qui écrivent du code dans n'importe quel framework (Python, React) en fonction des spécifications approuvées.