Aller au contenu principal

Système de Plugins

Qu'est-ce que les Plugins Claude Code ?​

Les Plugins sont des collections personnalisées d'outils de développement qui étendent les capacités de Claude Code. Considérez-les comme des power-ups pour votre flux de travail de développement - vous pouvez installer tout ce dont vous avez besoin avec une seule commande.

Un Plugin peut contenir quatre composants principaux :

  • Slash Commands : Raccourcis rapides pour les opérations courantes
  • Subagents : Agents IA spécialisés pour des tâches spécifiques
  • MCP Servers : Connexions à des outils et sources de données externes
  • Hooks : Comportements personnalisés à des moments spécifiques du workflow

L'innovation clé : tous ces composants sont regroupés ensemble, ce qui rend la configuration d'environnements de développement complexes simple et rapide.

Pourquoi utiliser les Plugins ?​

Problèmes traditionnels de gestion d'outils​

Sans Plugins, les équipes de développement font face à :

  • 🔄 Outils dispersés : Chaque membre de l'équipe configure ses propres outils différemment
  • 📚 Courbe d'apprentissage abrupte : Les nouveaux membres passent des jours à configurer leur environnement
  • 🔧 Enfer de configuration : Chacun maintient ses propres scripts et configurations
  • 🐛 Standards incohérents : Aucun moyen unifié d'appliquer les bonnes pratiques

Solution avec les Plugins​

Les Plugins résolvent ces problèmes grâce à :

  • ✅ Installation en une commande : Chaîne d'outils complète installée instantanément
  • 🎯 Standardisation : Tout le monde utilise les mêmes outils et workflows
  • 🚀 Intégration rapide : Nouveaux membres productifs dès le premier jour
  • 🔄 Gestion facile : Activez/désactivez les plugins selon les besoins

Comprendre les quatre composants​

1. Slash Commands​

Les Slash Commands sont des points d'entrée pour les opérations rapides. Ils encapsulent des tâches complexes en commandes simples.

Patterns courants :

/test          # Exécuter la suite de tests
/deploy        # Déployer en production
/review        # Démarrer le processus de revue de code
/docs          # Générer la documentation
/build         # Exécuter le build optimisé

Comment ils fonctionnent :

Quand vous tapez /test, Claude Code :

  1. Lit la définition de la commande depuis .claude/commands/test.md
  2. Exécute le workflow défini
  3. Vous retourne les résultats

Créer votre premier Slash Command :

<!-- .claude/commands/hello.md -->
Say hello to the user and show the current project structure.

Maintenant taper /hello exécutera cette commande.

2. Subagents​

Les Subagents sont des agents IA spécialisés avec une expertise approfondie dans un domaine. C'est comme avoir des consultants experts dans votre équipe.

Exemples concrets :

Agent DevOps :

  • Automatise les processus de déploiement
  • Surveille la santé du système
  • Gère les tâches d'infrastructure
> Use DevOps agent to set up CI/CD pipeline for this project

Agent Testing :

  • Génère des cas de test intelligents
  • Identifie les cas limites
  • Optimise la couverture de tests
> Use Testing agent to create comprehensive tests for the authentication module

Agent Security :

  • Scanne le code pour les vulnérabilités
  • Suggère des améliorations de sécurité
  • Valide les patterns de sécurité
> Use Security agent to audit this API endpoint

3. MCP Servers​

Les MCP Servers (Model Context Protocol) fournissent une connectivité aux outils et sources de données externes.

Capacités de connexion :

Outils de développement :

- Git: Opérations de contrôle de version
- Docker: Gestion de conteneurs
- Kubernetes: Orchestration et déploiement

Bases de données :

- PostgreSQL: Données relationnelles
- MongoDB: Stockage de documents
- Redis: Cache et sessions

Services cloud :

- AWS: Infrastructure cloud
- Azure: Cloud Microsoft
- GCP: Plateforme cloud Google

Services API :

- Microservices internes
- APIs tierces
- Intégrations webhook

Exemple de configuration MCP Server :

{
  "mcpServers": {
    "database": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "POSTGRES_CONNECTION": "postgresql://localhost/mydb"
      }
    }
  }
}

4. Hooks​

Les Hooks personnalisent le comportement de Claude Code à des moments spécifiques du workflow.

Types de Hooks disponibles :

Hook Pre-commit :

// .claude/hooks/pre-commit.js
// S'exécute avant les commits de code
module.exports = async (context) => {
  // Exécuter les linters
  // Vérifier le formatage
  // Valider les tests
  return { allow: true };
};

Hook Post-analysis :

// .claude/hooks/post-analysis.js
// S'exécute après l'analyse de code
module.exports = async (context) => {
  // Générer des rapports
  // Mettre à jour la documentation
  // Notifier l'équipe
};

Hook Error :

// .claude/hooks/error.js
// S'exécute quand des erreurs surviennent
module.exports = async (error, context) => {
  // Logger les détails de l'erreur
  // Tenter une récupération
  // Notifier les systèmes de monitoring
};

Installer et utiliser les Plugins​

Installation basique​

La façon la plus simple d'installer un plugin :

/plugin install organization/plugin-name

Exemple :

/plugin install danavila/devops-toolkit

Claude va :

  1. Télécharger le plugin depuis le dépôt
  2. Installer toutes les dépendances
  3. Configurer tous les composants
  4. Le rendre immédiatement disponible

Gérer les Plugins​

Les Plugins sont conçus pour être légers et activables/désactivables :

# Activer un plugin
/plugin enable plugin-name

# Désactiver un plugin
/plugin disable plugin-name

# Lister tous les plugins installés
/plugin list

# Voir les détails d'un plugin
/plugin info plugin-name

# Désinstaller un plugin
/plugin uninstall plugin-name

Cycle de vie d'un Plugin​

Install → Configure → Enable → Use → Disable/Uninstall

Installation : Télécharge et configure le plugin Configuration : Personnalise les paramètres du plugin pour votre projet Enable : Active les fonctionnalités du plugin Use : Accède aux slash commands, subagents et hooks Disable : Désactive temporairement sans désinstaller Uninstall : Supprime complètement le plugin

Places de marché de Plugins​

Qu'est-ce que les Marketplaces ?​

Les Marketplaces sont des dépôts où les développeurs partagent des plugins. N'importe qui peut créer et héberger sa propre marketplace.

Créer une Marketplace​

Étape 1 : Créer le fichier de configuration

// .claude-plugin/marketplace.json
{
  "name": "My Marketplace",
  "description": "Custom plugins for our team",
  "plugins": [
    {
      "name": "team-standards",
      "description": "Enforce team coding standards",
      "version": "1.0.0",
      "repository": "github.com/myteam/team-standards"
    }
  ]
}

Étape 2 : Héberger sur GitHub

git init
git add .claude-plugin/
git commit -m "Initialize plugin marketplace"
git push origin main

Étape 3 : Partager avec l'équipe

/plugin marketplace add myteam/plugin-marketplace

Marketplaces communautaires​

Marketplace de Dan Ávila :

/plugin marketplace add danavila/plugins

Contient :

  • Outils d'automation DevOps
  • Générateurs de documentation
  • Intégrations de gestion de projet

Dépôt de Seth Hobson :

/plugin marketplace add sethhobson/agents

Offre plus de 80 subagents spécialisés :

  • Développement frontend (React, Vue, Angular)
  • Développement backend (Node.js, Python, Java)
  • Data science et machine learning
  • Développement mobile (iOS, Android)

Workflows Plugins en situation réelle​

Scénario 1 : Standardisation d'équipe Frontend​

Problème : Les membres de l'équipe utilisent différentes règles de linting et standards de formatage

Solution : Créer un Plugin de standards d'équipe

# Installer le plugin de standards d'équipe
/plugin install company/frontend-standards

Le Plugin inclut :

  • /lint - Exécute ESLint avec la config d'équipe
  • /format - Applique les règles Prettier de l'équipe
  • /test - Exécute Jest avec les exigences de couverture
  • Agent React - Applique les patterns de composants
  • Agent Accessibility - Assure la conformité WCAG

Résultat :

  • Style de code cohérent dans toute l'équipe
  • Vérifications qualité automatisées
  • Temps de revue de code réduit

Scénario 2 : Boost de productivité Full-Stack​

Problème : Le code boilerplate répétitif ralentit le développement

Solution : Installer un Plugin de productivité

/plugin install awesome-dev/fullstack-boost

Le Plugin fournit :

  • /api - Génère une API REST avec les bonnes pratiques
  • /component - Crée des composants UI avec tests
  • /db-migrate - Assistant de migration de base de données
  • Agent Backend - Suggestions d'optimisation d'API
  • Agent Database - Conseils de performance des requêtes

Résultat :

  • Développement de fonctionnalités 3x plus rapide
  • Patterns d'architecture cohérents
  • Conseils d'optimisation intégrés

Scénario 3 : Conformité sécurité en entreprise​

Problème : Doit respecter les standards de sécurité avant le déploiement

Solution : Plugin de conformité sécurité

/plugin install enterprise/security-compliance

Le Plugin applique :

  • /security-scan - Vérifications de sécurité automatisées
  • /compliance-check - Validation de conformité réglementaire
  • /audit-log - Générer la trace d'audit
  • Agent Security - Détection et correction de vulnérabilités
  • Hook Compliance - Validation de sécurité pré-commit

Résultat :

  • Application automatisée de la sécurité
  • Documentation de conformité générée automatiquement
  • Incidents de sécurité réduits

Créer votre premier Plugin​

Structure d'un Plugin​

my-plugin/
├── .claude-plugin/
│   ├── manifest.json          # Métadonnées du plugin
│   ├── commands/               # Slash commands
│   │   ├── test.md
│   │   └── deploy.md
│   ├── agents/                 # Subagents
│   │   ├── testing-agent.md
│   │   └── deploy-agent.md
│   ├── mcp-servers/            # Configs MCP server
│   │   └── custom-tools.json
│   └── hooks/                  # Configuration des hooks
│       ├── pre-commit.js
│       └── post-analysis.js
└── README.md

Étape 1 : Créer le Manifest​

{
  "name": "my-first-plugin",
  "version": "1.0.0",
  "description": "My custom development tools",
  "author": "Your Name",
  "components": {
    "commands": ["test", "deploy"],
    "agents": ["testing-agent"],
    "hooks": ["pre-commit"]
  }
}

Étape 2 : Ajouter un Slash Command​

<!-- .claude-plugin/commands/test.md -->
# Test Command

Run the project test suite with coverage reporting.

## Steps:
1. Check for test files
2. Run Jest with coverage
3. Generate HTML report
4. Open report in browser

Étape 3 : Créer un Subagent​

<!-- .claude-plugin/agents/testing-agent.md -->
# Testing Agent

You are a testing expert specializing in comprehensive test coverage.

## Capabilities:
- Generate unit tests for functions and classes
- Create integration tests for APIs
- Design end-to-end test scenarios
- Identify edge cases and test coverage gaps
- Suggest test data and mocking strategies

## Guidelines:
- Follow AAA pattern (Arrange, Act, Assert)
- Aim for 80%+ code coverage
- Include positive and negative test cases
- Mock external dependencies appropriately

Étape 4 : Ajouter un Hook​

// .claude-plugin/hooks/pre-commit.js
module.exports = async (context) => {
  console.log('Running pre-commit checks...');

  // Run linter
  const lintResult = await context.exec('npm run lint');
  if (lintResult.exitCode !== 0) {
    return {
      allow: false,
      message: 'Linting failed. Please fix errors before committing.'
    };
  }

  // Run tests
  const testResult = await context.exec('npm test');
  if (testResult.exitCode !== 0) {
    return {
      allow: false,
      message: 'Tests failed. Please fix failing tests before committing.'
    };
  }

  return { allow: true };
};

Étape 5 : Tester votre Plugin​

# Charger le plugin localement
/plugin install ./my-plugin

# Tester la slash command
/test

# Utiliser le subagent
> Use Testing agent to create tests for UserService

# Vérifier le hook (essayer de commiter)
git add .
git commit -m "test commit"

Bonnes pratiques​

1. Responsabilité unique​

Chaque plugin devrait se concentrer sur un domaine :

✅ Bon :

- authentication-plugin (gère uniquement l'auth)
- testing-plugin (gère uniquement les tests)
- deployment-plugin (gère uniquement le déploiement)

❌ Mauvais :

- everything-plugin (essaie de tout faire)

2. Composabilité​

Concevez les plugins pour qu'ils fonctionnent bien ensemble :

# Les plugins devraient se compléter
/plugin enable testing-plugin
/plugin enable quality-plugin
/plugin enable deployment-plugin

# Ils ne devraient pas entrer en conflit

3. Documentation claire​

Chaque plugin a besoin de :

# Nom du Plugin

## Description
Explication claire de ce qu'il fait

## Installation
Guide d'installation étape par étape

## Utilisation
Exemples de toutes les commandes et fonctionnalités

## Configuration
Options et paramètres disponibles

## Dépannage
Problèmes courants et solutions

4. Gestion des versions​

Utilisez le versionnage sémantique :

{
  "version": "1.2.3"
  // 1 = Majeur (changements cassants)
  // 2 = Mineur (nouvelles fonctionnalités)
  // 3 = Patch (corrections de bugs)
}

5. Optimisation des performances​

Lazy Loading :

// Charger uniquement quand nécessaire
if (command === '/heavy-operation') {
  const module = await import('./heavy-module');
  module.execute();
}

Mise en cache :

// Mettre en cache les opérations coûteuses
const cache = new Map();
if (cache.has(key)) {
  return cache.get(key);
}
const result = await expensiveOperation();
cache.set(key, result);

Dépannage​

Le Plugin ne s'installe pas​

Problème : L'installation du plugin échoue

Solutions :

# Vérifier la connexion réseau
ping github.com

# Vérifier que le dépôt du plugin existe
git ls-remote https://github.com/org/plugin-name

# Essayer avec le logging verbeux
/plugin install org/plugin-name --verbose

# Vérifier les plugins en conflit
/plugin list

Slash Command non trouvé​

Problème : /mycommand dit "command not found"

Solutions :

# Vérifier que le plugin est activé
/plugin list

# Activer si désactivé
/plugin enable plugin-name

# Recharger les plugins
/plugin reload

# Vérifier que la définition de commande existe
ls .claude-plugin/commands/

Le Hook ne se déclenche pas​

Problème : Le hook pre-commit ne s'exécute pas

Solutions :

// Vérifier que le hook est enregistré
/plugin info plugin-name

// Vérifier que le fichier de hook existe et a le bon nom
ls .claude-plugin/hooks/

// Vérifier la syntaxe du hook
node .claude-plugin/hooks/pre-commit.js

// Activer le débogage des hooks
/plugin config plugin-name --debug-hooks

Sujets avancés​

Chargement conditionnel de Plugin​

// Charger uniquement dans des environnements spécifiques
if (process.env.NODE_ENV === 'production') {
  await loadPlugin('production-monitoring');
}

Dépendances de Plugin​

{
  "name": "advanced-plugin",
  "dependencies": {
    "base-plugin": "^1.0.0",
    "utils-plugin": "^2.1.0"
  }
}

Configuration personnalisée de Plugin​

{
  "plugins": {
    "my-plugin": {
      "enabled": true,
      "config": {
        "apiKey": "your-key",
        "timeout": 5000,
        "retries": 3
      }
    }
  }
}

Sécurité des Plugins​

Bonnes pratiques​

1. Revue de code : Toujours examiner le code du plugin avant l'installation 2. Sources de confiance : Installer uniquement depuis des marketplaces vérifiées 3. Permissions : Comprendre quels accès les plugins demandent 4. Mises à jour régulières : Garder les plugins à jour pour les correctifs de sécurité

Signaux d'alerte​

⚠️ Signes d'avertissement :

  • Demande des permissions excessives
  • Contient du code obfusqué
  • Pas de code source disponible
  • Développeur inconnu
  • Pas de documentation

Prochaines étapes​

Maintenant que vous comprenez les Plugins, vous pouvez :

  1. Explorer les Marketplaces : Parcourir les plugins disponibles

    /plugin marketplace add danavila/plugins
    /plugin browse

  2. Installer des Plugins utiles : Commencer avec les favoris de la communauté

    /plugin install danavila/devops-toolkit

  3. Créer votre Plugin : Construire des outils pour votre workflow

    mkdir my-plugin
    cd my-plugin
    # Suivre la structure ci-dessus

  4. Partager avec la communauté : Publier votre plugin

    git push origin main
    # Partager l'URL du dépôt

Continuer la lecture : Dynamic Memory pour apprendre comment Claude Code maintient le contexte à travers les sessions.