Automatiser le Boilerplate avec Devin Desktop et Cursor

Pourquoi le boilerplate vole 30% de votre temps de développement

À chaque nouveau projet, vous répétez les mêmes opérations : créer la structure de dossiers, configurer ESLint et Prettier, initialiser Git, installer les dépendances de base, et écrire les premiers fichiers. C’est du boilerplate — du code mécanique et répétitif qui n’apporte aucune valeur métier.

Selon Ludovic Dumay, formateur IA pour développeurs : “Un développeur freelance passe en moyenne 6 à 10 heures par semaine sur du boilerplate. C’est du temps non facturable si vous êtes au forfait, et du temps volé à la création de valeur si vous êtes à l’heure. L’automatisation est le premier levier de productivité à actionner.”

Le vrai coût caché du copier-coller

Quand vous copiez la structure d’un ancien projet pour en démarrer un nouveau, vous importez souvent :

• Des dépendances obsolètes
• Une configuration inadaptée au nouveau contexte
• Des fichiers inutiles que vous oubliez de supprimer
• Des conventions de nommage incohérentes

Résultat : vous passez plus de temps à nettoyer qu’à créer.

Quand la créativité s’efface devant la répétition

Le problème du boilerplate n’est pas seulement le temps perdu. C’est aussi l’énergie cognitive dépensée avant même de commencer le travail intéressant. Vous arrivez frais sur un projet… et vous passez 2 heures sur des fichiers de configuration. L’IA élimine cette friction.

Prérequis et configuration initiale

Installer Devin Desktop et Cursor

Les deux IDE sont des forks de VS Code, ce qui signifie que votre configuration existante (extensions, thèmes, raccourcis) reste compatible.

• Devin Desktop (anciennement Windsurf) : téléchargez sur devin.ai/download, installez comme VS Code. Vos extensions et settings Windsurf sont préservés.
• Cursor : téléchargez sur cursor.com, importez vos settings VS Code

Configurer les prompts système pour votre stack

Le prompt système est l’instruction que l’IA suit pour chaque interaction. Pour un boilerplate cohérent, configurez-le avec vos conventions :

Tu es un développeur senior spécialisé en [React/TypeScript/Tailwind]. 
Tu génères du code propre, typé strictement, avec des composants fonctionnels. 
Tu utilises les hooks personnalisés pour la logique réutilisable.
Tu écris toujours les tests unitaires avec Vitest et React Testing Library.

Méthode 1 : Génération de scaffolding avec Devin Desktop

Créer un projet complet à partir d’un prompt

Devin Desktop intègre un agent local — Devin Local (successeur de Cascade) — qui comprend des instructions de haut niveau. Pour générer un projet complet :

1. Ouvrez Devin Desktop et créez un nouveau dossier
2. Ouvrez le chat Devin Local (Ctrl+Shift+L)
3. Tapez votre prompt structuré :

Crée une application React 18 avec TypeScript, Vite, Tailwind CSS,
React Router, et Zustand pour la gestion d'état.
Structure : src/{components,pages,hooks,stores,types,utils}.
Ajoute ESLint, Prettier, et Vitest configurés.
Génère un composant Layout, une page Home, et un store d'authentification.

Devin Desktop génère l’intégralité du projet en une seule passe, avec les fichiers créés et la configuration fonctionnelle.

Personnaliser la structure de dossiers

Pour forcer une architecture spécifique, ajoutez des contraintes dans le prompt :

Architecture obligatoire :
- src/components/atomiques (Button, Input, Card)
- src/components/composites (Header, Form, Table)
- src/features/ (auth, dashboard, settings)
- Chaque feature contient : {api, components, hooks, types}
- Pas de fichiers hors de ces dossiers

Devin Desktop respecte ces contraintes et génère la structure exacte demandée.

Générer la configuration (eslint, prettier, tsconfig)

La configuration est souvent la partie la plus fastidieuse. Avec Devin Desktop :

Génère une configuration complète :
- tsconfig.json strict avec paths mapping (@/*)
- .eslintrc avec les règles react-hooks, typescript recommandé
- .prettierrc avec singleQuote, trailingComma all, printWidth 100
- vitest.config.ts avec jsdom, coverage v8, et setupFiles
- .gitignore pour Node.js + macOS + IDE

Résultat : 15 minutes de travail manuel réduit à 30 secondes.

Méthode 2 : Templates personnalisés avec Cursor

Créer des snippets de projet réutilisables

Cursor propose des .cursorrules — des fichiers de configuration qui définissent le comportement de l’IA pour un projet. Créez un fichier .cursorrules à la racine de votre template :

# .cursorrules — Mon Starter Kit React
Tu es un expert React/TypeScript. 
Tu privilégies les Server Components quand c'est possible.
Tu utilises shadcn/ui pour les composants UI de base.
Tu gères les formulaires avec React Hook Form + Zod.
Tu implémentes les appels API avec TanStack Query.
Tout le style est en Tailwind. Pas de CSS modules.

Chaque nouveau projet basé sur ce template hérite automatiquement des conventions.

Utiliser le mode Composer pour les refactors transversaux

Le Composer de Cursor permet de modifier plusieurs fichiers simultanément. C’est particulièrement utile pour :

• Renommer une fonction utilisée dans 12 fichiers
• Migrer de useState vers useReducer dans toute l’app
• Extraire un composant répété en composant réutilisable

Commande : Ctrl+I → décrivez la modification → Cursor applique les changements dans tous les fichiers concernés avec un diff reviewable.

Synchroniser les templates entre équipe

Pour partager vos conventions avec une équipe de 5 développeurs :

1. Créez un dépôt Git company-starter-templates
2. Chaque template est un dossier avec .cursorrules, package.json, et src/ initial
3. Les développeurs clonent le template et lancent npm install
4. Cursor lit automatiquement le .cursorrules et applique les conventions

Méthode 3 : Scripts automatisés avec Claude Code

Générer un CLI interne pour votre équipe

Claude Code est un terminal conversationnel qui peut créer des scripts réutilisables. Par exemple, pour générer un nouveau composant :

claude "Crée un composant React dans src/components/atomiques 
appelé UserCard avec props : name, email, avatarUrl, onClick. 
Ajoute le test unitaire, le storybook, et exporte-le depuis l'index."

Claude crée les 4 fichiers nécessaires et met à jour l’index en une seule commande.

Automatiser la création de composants

Transformez cette commande en alias shell dans votre .zshrc :

alias newcomp='claude "Crée un composant React atomique avec le nom que je te donne, son test, et son export"'

Intégrer avec votre CI/CD

Vous pouvez même automatiser la génération de boilerplate dans vos pipelines. Exemple avec GitHub Actions :

- name: Générer la structure du microservice
  run: |
    claude "À partir du schema OpenAPI dans openapi.yaml, 
    génère un microservice Express complet avec routes, 
    contrôleurs, modèles, et tests."

Attention : cette approche nécessite une revue humaine systématique avant merge.

Checklist : votre boilerplate idéal en 10 minutes

En résumé, voici le workflow optimisé que nous enseignons en formation :

1. Ouvrez Devin Desktop → générez la structure de projet avec Devin Local
2. Ajoutez votre .cursorrules → standardisez les conventions
3. Générez la configuration (ESLint, Prettier, tests) avec un prompt
4. Créez vos composants de base via Claude Code en une commande
5. Versionnez le template → votre équipe clonera ce starter kit

Résultat mesurable : le démarrage d’un nouveau projet passe de 4 heures à 10 minutes. Sur 20 projets par an, c’est 78 heures économisées.

Le boilerplate ne devrait jamais être écrit à la main. Avec les IDE IA, il devient un artefact généré, versionné, et maintenu automatiquement.

Pour aller plus loin, découvrez notre formation IA pour développeurs où nous construisons ensemble votre starter kit personnalisé, adapté à votre stack et vos conventions d’équipe.