Introduction
Si vous utilisez Cursor comme un simple “VS Code amélioré”, vous passez à côté de sa killer feature : le Composer Mode. C’est un peu comme passer de la pêche à la ligne à la pêche au chalut (mais en plus éthique, promis).
Le Composer Mode ne se contente pas de compléter votre ligne de code. Il peut créer des fichiers entiers, modifier plusieurs fichiers simultanément pour implémenter une feature complexe, et même exécuter des commandes terminal. En gros, c’est votre binôme junior sous stéroïdes.
Voici comment le maîtriser en 3 étapes, de “débutant” à “magicien”.
Niveau 1 : L’invocation (Ctrl+I vs Ctrl+L)
La première erreur qu’on fait tous, c’est de confondre le Chat (Ctrl+L) et le Composer (Ctrl+I).
- Chat (
Ctrl+L) : C’est pour poser une question, avoir une explication, ou générer un petit bout de code à copier-coller. C’est passif. - Composer (
Ctrl+I) : C’est pour agir. Il a les droits d’écriture sur votre projet.
Exercice pratique :
Ouvrez Ctrl+I et tapez : “Crée un fichier utils/date.ts avec une fonction qui formate une date en ‘JJ/MM/AAAA’ et ses tests unitaires associés.”
Boom. Deux fichiers créés, le code écrit, les imports gérés. Sans que vous ayez touché au clavier.
Niveau 2 : Le Context Engineering
Le secret du Composer, c’est qu’il ne peut travailler que sur ce qu’il “voit”. Si vous lui demandez de modifier une fonction sans qu’il connaisse le fichier, il va halluciner.
L’astuce, c’est d’utiliser les @mentions.
- Tapez
@Filespour inclure des fichiers spécifiques. - Tapez
@Codebasepour qu’il scanne tout le projet (attention, c’est plus lent). - Tapez
@Docspour lui donner accès à une documentation externe (genre la doc de Stripe ou de Next.js).
Exemple concret : Vous voulez ajouter un bouton “Logout” dans votre Navbar. Prompt : “Ajoute un bouton Logout dans @Navbar.tsx qui appelle la fonction logout de @auth-context.tsx. Stylise-le comme le bouton Login.”
En lui donnant explicitement les deux fichiers, vous garantissez que l’import sera bon et que le style sera cohérent.
Niveau 3 : Le Multi-Step Generation (La magie)
C’est là que ça devient fou. Le Composer peut enchaîner les étapes logiques. Vous n’avez pas besoin de micro-manager chaque fichier.
Essayez ce prompt pour une nouvelle feature :
“Je veux une page ‘Profil Utilisateur’.
- Crée un schéma Zod pour le profil (nom, bio, avatar).
- Crée une Server Action pour mettre à jour le profil avec validation.
- Crée le composant UI avec un formulaire React Hook Form.
- Ajoute la route dans
app/profile/page.tsx.”
Cursor va planifier les étapes, créer les fichiers dans l’ordre (le schéma d’abord, car l’UI en dépend), et vous proposer un “Apply All”.
Ce que ça change pour les devs
Le Composer Mode change notre rapport au code. On passe moins de temps à taper du boilerplate (les imports, les types, la structure des fichiers) et plus de temps à designer la solution.
On devient des “architectes” qui valident le travail de l’IA. Attention cependant : relisez toujours le code. Le Composer est confiant, mais il peut introduire des bugs subtils ou des failles de sécurité si on le laisse en roue libre.
Conclusion
Maîtriser le Composer Mode, c’est surtout gagner du temps sur le “plomberie” (structure, fichiers, imports, itérations). Le vrai bonus, ce n’est pas un % magique : c’est le fait de rester dans un workflow diff → tests → review, même quand l’IA produit beaucoup.
Alors, la prochaine fois que vous devez créer une feature, lâchez votre clavier, faites Ctrl+I, et laissez la magie opérer.
Prochain tuto : On vous montrera comment créer vos propres .cursorrules pour forcer le Composer à respecter vos conventions de code.
Sources:
