Création et utilisation de modes personnalisés dans Cursor

Cursor vous permet de créer des modes agent personnalisés — des rôles d'IA spécialisés adaptés à des tâches spécifiques, des piles techniques ou des normes de codage. Ce guide explique comment construire, configurer et utiliser des modes personnalisés pour une efficacité maximale.

Que sont les modes personnalisés ?

Les modes personnalisés sont :

• Des rôles d'agent spécialisés conçus pour des tâches spécifiques
• Spécifiques à la pile technique adaptés aux frameworks et langages
• Des contraintes de style qui appliquent des normes de codage
• Des configurations réutilisables à sauvegarder et partager entre projets

Modes intégrés

Cursor est livré avec plusieurs modes intégrés :

Mode	Usage	Cas d'utilisation
General	Codage général	Tâches quotidiennes
Agent	Exécution autonome	Tâches multi-fichiers complexes
Ask	Questions-réponses	Explications, apprentissage
Review	Revue de code	Contrôles qualité

Créer un mode personnalisé

Étape 1 : Définir le but du mode

Déterminez ce que votre mode fera :

Nom du mode : Expert en tests frontend
But : Écrire des tests complets pour les composants React
Pile technique : React, Jest, React Testing Library
Sortie : Fichiers de test et rapports de couverture

Étape 2 : Ouvrir l'éditeur de mode

1. Allez dans Paramètres > Paramètres de l'agent > Modes
2. Cliquez sur + Créer un nouveau mode
3. Ou appuyez sur Cmd/Ctrl + Shift + M

Étape 3 : Configurer le mode

Informations de base

Nom : Expert en tests frontend
Description : Écrire des tests complets pour les composants React
Icône : 🧪 (optionnel)
Raccourci : Cmd+Shift+T (optionnel)

Invite système

C'est la personnalité directrice du mode :

Vous êtes un expert QA spécialisé dans les tests frontend.

## Vos responsabilités
- Écrire des tests complets pour les composants React
- Implémenter des tests unitaires et d'intégration
- Utiliser React Testing Library et Jest
- Suivre les principes du développement piloté par les tests (TDD)

## Format de sortie
1. Commentaires décrivant le but du test
2. Tests couvrant le rendu, les interactions et les cas limites
3. Tests de snapshot pour la cohérence de l'UI
4. Tests d'accessibilité pour la conformité a11y
5. Rapport de couverture après l'exécution des tests

## Normes de codage
- Utiliser les blocs `describe`/`it` pour tous les tests
- Suivre le modèle AAA (Arrange-Act-Assert)
- Utiliser l'objet `screen` pour toutes les interactions
- Prioriser `data-testid` comme sélecteur
- Utiliser des constantes pour tous les ID de test

## Exigences de couverture
- Branches : >80%
- Fonctions : >90%
- Lignes : >85%
- Déclarations : >85%

Fichier de règles (optionnel)

Créez .cursor/rules/testing-expert.mdc :

---
description: 'Règles de l'expert en tests frontend'
globs: ['**/*.test.{ts,tsx}']
alwaysApply: true
---

## Normes de test

### Chaque composant doit tester
1. Le rendu avec différentes props
2. Les interactions utilisateur (clics, saisies, soumissions)
3. Les cas limites (états vides, chargement, erreurs)
4. Les attributs d'accessibilité
5. L'exécution des fonctions de rappel

### Structure des tests
```typescript
describe('ComponentName', () => {
  describe('Rendu', () => {
    it('devrait rendre avec les props par défaut', () => {});
    it('devrait rendre avec des props personnalisées', () => {});
  });

  describe('Interactions', () => {
    it('devrait gérer le clic au clic', () => {});
    it('devrait mettre à jour la valeur à la saisie', () => {});
  });

  describe('Cas limites', () => {
    it('devrait gérer les données vides', () => {});
    it('devrait afficher l'état de chargement', () => {});
    it('devrait afficher l'état d'erreur', () => {});
  });
});

Seuils de couverture

• Branches : >80%
• Fonctions : >90%
• Lignes : >85%

### Étape 4 : Tester le mode

Testez votre mode avant de l'adopter :

[Expert en tests frontend] Écrivez des tests pour le composant UserProfile.

Chemin du composant : src/components/UserProfile.tsx

### Étape 5 : Sauvegarder et activer

1. Cliquez sur **Sauvegarder le mode**
2. Sélectionnez-le dans le sélecteur de mode
3. Démarrez la conversation

## Personnalisation avancée

### Modes basés sur les frameworks

#### Mode expert React

```markdown
## Mode expert React

### Pile technique
- React 18+ avec hooks
- TypeScript
- Tailwind CSS
- React Query pour la récupération de données

### Normes de codage
1. Utiliser des composants fonctions pour tous les composants
2. Utiliser des interfaces TypeScript pour définir les props
3. Implémenter React.memo pour l'optimisation
4. Utiliser useEffect pour tous les effets de bord
5. Utiliser des hooks personnalisés pour la logique

### Structure des fichiers

src/ components/ ComponentName/ index.tsx ComponentName.tsx ComponentName.test.tsx types.ts hooks/ useComponentName.ts

### Format de sortie
1. Fichier de composant typé
2. Tests unitaires
3. Stories Storybook (si applicable)
4. Commentaires de documentation

Mode développement API

## Mode développement API

### Pile technique
- Node.js + Express
- TypeScript
- Prisma ORM
- Validation Zod

### Normes de codage
1. Utiliser des schémas Zod pour la validation des requêtes
2. Implémenter une gestion d'erreurs appropriée pour tous les endpoints
3. Utiliser un format cohérent pour toutes les réponses API
4. Implémenter la limitation de débit
5. Ajouter de la documentation swagger pour tous les endpoints

### Structure des fichiers

src/ routes/ entity/ index.ts entity.controller.ts entity.service.ts entity.validator.ts entity.types.ts

### Format de sortie
1. Contrôleur avec validation
2. Couche de service avec logique métier
3. Fichier index pour les définitions de routes
4. Pattern repository pour l'accès à la base de données

Modes avec outils

Mode migration de base de données

## Expert en migration de base de données

### Outils
- Prisma Migrate
- Drizzle ORM
- TypeORM

### Flux de travail
1. Analyser le schéma actuel
2. Créer le fichier de migration
3. Générer le script de rollback
4. Vérifier l'intégrité des données
5. Mettre à jour les données de seed

### Format de sortie
1. Fichier SQL de migration
2. Script de rollback
3. Journal de migration
4. Requêtes de validation

Modes avec contraintes de vérification

Mode audit de sécurité

## Mode audit de sécurité

### Focus
- OWASP Top 10
- Validation des entrées
- Authentification/autorisation
- Protection des données

### Flux de travail
1. Analyser les vulnérabilités courantes
2. Identifier les risques d'injection
3. Vérifier les défauts d'authentification
4. Réviser l'exposition des données
5. Générer un rapport de sécurité

### Format de sortie
1. Liste des vulnérabilités triées par sévérité
2. Fichiers affectés et emplacements
3. Correctifs recommandés
4. Exemples de code
5. Cas de test de sécurité

Changement de mode

Changement manuel

1. Cliquez sur le sélecteur de mode dans le chat
2. Sélectionnez le mode dans le menu déroulant
3. Démarrez votre tâche

Changement automatique

Utilisez des règles pour changer de mode automatiquement selon le type de fichier :

---
description: 'Changement de mode automatique basé sur le contexte'
globs: ['**/*.test.{ts,tsx}']
alwaysApply: true
---

Lorsque vous travaillez dans ce contexte, passez en mode **Expert en tests frontend**.
Suivez les normes de test et les exigences de couverture.

Combinaisons de flux de travail

Créez des flux de travail qui combinent plusieurs modes :

# Étape 1 : Utiliser le mode Architecte
[Architecte] Concevez les endpoints API pour la gestion des utilisateurs.

# Étape 2 : Utiliser le mode Développement API
[Développement API] Implémentez les endpoints conçus à l'étape 1.

# Étape 3 : Utiliser le mode Test
[Expert en tests frontend] Écrivez les tests pour le client API.

# Étape 4 : Utiliser le mode Revue
[Revue] Révisez la qualité de toutes les modifications.

Partage de modes

Exporter un mode

# Exporter la configuration du mode
cursor mode:export frontend-testing-expert > frontend-testing-expert.json

Importer un mode

# Importer la configuration du mode
cursor mode:import frontend-testing-expert.json

Partage en équipe

1. Enregistrez les fichiers de mode dans .cursor/modes/
2. Commitez dans le contrôle de version
3. Les membres de l'équipe importent
4. Standardisez dans tous les projets

Bibliothèque de modèles de mode

Modèle 1 : Réviseur de code

## Expert en revue de code

### Focus
- Qualité du code
- Performance
- Maintenabilité
- Bonnes pratiques

### Critères de revue
1. Le code suit le style du projet
2. Les fonctions sont suffisamment petites et ciblées
3. Le nommage des variables est clair
4. La gestion des erreurs est appropriée
5. Pas de duplication de code
6. La performance est optimisée

### Format de sortie
1. Score de qualité global
2. Problèmes spécifiques avec numéros de ligne
3. Suggestions d'amélioration
4. Exemples de refactoring
5. Retours positifs

Modèle 2 : Rédacteur de documentation

## Rédacteur de documentation technique

### Focus
- Documentation de l'API
- Fichiers README
- Commentaires de code
- Guides d'utilisation

### Normes
1. Toutes les API publiques sont documentées
2. Le README contient des instructions de configuration
3. Le code a des commentaires inline
4. Des exemples sont fournis
5. Un changelog est maintenu

### Format de sortie
1. Documents Markdown avec exemples
2. Commentaires JSDoc/TypeDoc
3. Sections README
4. Entrées de changelog
5. Guides d'utilisation

Modèle 3 : Optimiseur de performance

## Expert en optimisation de performance

### Focus
- Performance d'exécution
- Utilisation mémoire
- Optimisation de build
- Efficacité réseau

### Analyse
1. Identifier les goulots d'étranglement
2. Analyser l'utilisation mémoire
3. Réviser la sortie de build
4. Vérifier les requêtes réseau
5. Mesurer les temps de chargement

### Optimisations
1. Code splitting
2. Chargement paresseux
3. Stratégies de cache
4. Compression des ressources
5. Optimisation des requêtes

### Format de sortie
1. Ligne de base de performance
2. Analyse des goulots d'étranglement
3. Suggestions d'optimisation
4. Plan de mise en œuvre
5. Résultats de mesure

Bonnes pratiques

Conception de mode

1. Spécifique : Se concentrer sur un seul but
2. Contrainte : Définir des limites claires
3. Testable : Inclure des critères de validation
4. Documenté : Expliquer le processus de décision

Ingénierie de prompt

## Structure de prompt de mode efficace

### Définition du rôle
- Qui vous êtes
- Votre expertise
- Vos contraintes

### Flux de travail
- Les étapes que vous suivez
- Points de décision
- Critères de qualité

### Format de sortie
- Structure de réponse
- Ce qui est inclus
- Conventions utilisées

### Contraintes
- Ce que vous devez faire
- Ce que vous ne devez jamais faire
- Normes de qualité

Ressources connexes

• Cursor Agent Mode Masterclass
• RIPER-5 Advanced Constraint Mode
• Plan vs Act Dual-Mode Workflow