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, vous allez découvrir comment configurer une équipe de développement autonome assistée par l'IA amusante 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, de la spécification technique 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 dans laquelle vos exigences passent par un cycle automatisé alimenté par trois principes Antigravity de base :

  1. agents.md : pour définir exactement qui fait partie de votre équipe d'IA (responsable produit, interface, QA, DevOps).
  2. Compétences et skills.md : un 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 à barre oblique personnalisées qui enchaînent de manière transparente 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

  • Initialiser l'espace de travail : configurez votre projet pour qu'il soit bien compris par Antigravity.
  • Définir l'équipe : créez un fichier agents.md pour établir vos personas d'IA spécialisés.
  • Programmer 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émarrer la réaction en chaîne : utilisez une seule commande pour exécuter automatiquement l'ensemble du pipeline multi-agent de manière efficace.

Ce que vous allez essayer

  • Comment séparer l'ingénierie des requêtes d'IA du code d'application.
  • Comment créer un agent qui s'arrête activement pour interpréter les commentaires et les modifications de l'utilisateur dans les fichiers Markdown générés.
  • Comment créer des compétences dynamiques de génération et de déploiement de code indépendantes du langage.
  • Comment créer des commandes macro personnalisées (workflows) dans un IDE agentique.

Prérequis

Avant de commencer

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

2. Initialiser l'espace de travail

Comme Antigravity comprend de manière native 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 "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 les fichiers de structure sans encombrer d'autres projets. Une fois cette opération terminée, accédez à la vue Éditeur, puis aux étapes (5), (6) et (7).

d84ba507939a5efc.png

  1. Effectuez un clic droit et créez un dossier skills-codelab.
  2. Créez deux répertoires à l'intérieur : production_artifacts et app_build.
  3. Créez un répertoire .agents, puis créez des dossiers workflows et skills à l'intérieur.

(Autre solution) 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 ressemble à ceci :

7234ea48c2b175a7.png

À quoi servent ces nouveaux dossiers ?

  • .agents/ : il s'agit d'un répertoire spécial reconnu de manière native par Antigravity. En plaçant des fichiers ici, vous étendez le comportement d'IA intégré d'Antigravity.
  • skills/ : ce dossier est utilisé pour 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 requête massive et confuse par des étapes modulaires.
  • production_artifacts/ : il s'agit de notre dossier partagé dans lequel les membres de notre équipe automatisée déposeront intentionnellement des fichiers pour que l'agent suivant les lise.
  • app_build/ : espace de travail désigné pour le code d'application réel. 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, en isolant 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 dans .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 que l'IA ne soit confuse. Le chef de produit se concentre uniquement sur les exigences, l'ingénieur uniquement sur la génération de code et le contrôle qualité 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érents personas de votre équipe :

  1. Le responsable produit (@pm) : 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) : ne se soucie pas de la planification. Il prend simplement les spécifications du chef de produit et se concentre entièrement sur l'écriture de code de haute qualité dans le langage que vous approuvez.
  3. L'ingénieur QA (@qa) : agit comme 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 responsable DevOps (@devops) : se concentre strictement sur l'environnement d'exécution. Il sait 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 caractéristiques et les contraintes pour chaque persona.

  • Les objectifs indiquent à l'agent sa responsabilité exacte dans le pipeline.
  • Les caractéristiques lui donnent une personnalité comportementale, en lui indiquant comment agir (par exemple, "développeur senior 10x" ou "paranoïaque en matière de sécurité").
  • Les contraintes agissent comme des garde-fous stricts (par exemple, "n'écrivez jamais de code", "suivez strictement l'architecture approuvée").

La structuration de vos requêtes de cette manière réduit considérablement les hallucinations de l'IA et garantit que l'agent respecte strictement le workflow requis.

Assurez-vous que votre dossier ressemble à ceci :

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

L'ingénierie d'instructions détaillée est la clé de la magie sans code. Nous allons créer des fichiers texte très spécifiques pour chaque compétence, en veillant à ce que le chef de produit revienne activement en arrière si vous demandez une retouche.

1. Compétence de spécification

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

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 la "porte d'approbation" stricte. Au lieu de créer l'application entière en une seule fois et d'espérer qu'elle soit correcte, l'IA est explicitement invitée à s'arrêter, à 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 principal créateur. 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 front-end et back-end 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). Elle repose explicitement sur la pile technologique dynamique choisie par le chef de produit. Cela signifie que votre compétence unique de génération de code fonctionne pour n'importe quel framework que vous avez approuvé dans les spécifications.

3. Compétence d'audit

Cette compétence fournit un filet de sécurité. L'agent QA agit comme un examinateur indépendant, spécifiquement chargé de rechercher les dépendances manquantes et les erreurs logiques 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 travail consiste à rechercher les erreurs, nous augmentons considérablement le taux de réussite de l'exécution de l'application finale.

4. Compétence de déploiement dynamique

Cette compétence donne vie à l'application. L'agent DevOps détermine le type d'application 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 en toute sécurité.

L'agent agit comme un véritable ingénieur DevOps, en déterminant dynamiquement 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 mettre votre application directement en production au lieu de l'exécuter localement, vous pouvez créer une compétence de déploiement alternative. Comme Antigravity fonctionne directement sur votre ordinateur local, l'IA peut utiliser de manière transparente votre gcloud CLI authentifié 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 ("Agissez comme le chef de produit et rédigez des spécifications..." puis "OK, agissez maintenant comme l'ingénieur et écrivez du code..."), la commande /startcycle agit comme un orchestrateur automatisé. Elle enchaîne de manière transparente les personas 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 retravail pour la phase du chef de produit.

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 ressemble à ceci :

de21eeb6012ddbcd.png

6. Démarrer 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.

Invitez Antigravity :

  1. Dans la zone de chat du Gestionnaire d'agents, 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."

Asseyez-vous et collaborez :

  1. Gemini devient le chef de produit, rédige des spécifications robustes 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") et demandez à l'agent de le retravailler. Il révisera le fichier de manière autonome.
  3. Une fois que vous l'aurez approuvé, Gemini passera de manière native au contexte de l'ingénieur, en utilisant les spécifications approuvées pour écrire le code back-end/front-end.
  4. Il devient l'ingénieur QA, corrige les bugs et enregistre le code final.
  5. Enfin, le responsable DevOps installe dynamiquement les modules et diffuse l'application dans votre navigateur.

Exemple d'exécution de Technical_Specification.md et d'attente d'approbations ou de commentaires

11defe4c48e874cc.png

Une fois l'approbation de l'utilisateur sur la requête, l'ensemble du workflow commence.

b9af07291806ae60.png

7. Récapitulatif et étapes suivantes

Félicitations ! Vous avez appris à injecter des boucles d'itération collaboratives et une génération d'applications Full-Stack dynamique 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éer des boucles de retravail collaboratives dans .agents/skills/write_specs.md afin que l'agent lise vos commentaires Markdown intégrés.
  • Créer des compétences .md dynamiques qui écrivent du code dans n'importe quel framework (Python, React) en fonction des spécifications approuvées.