Claude Code Plugins

Community-maintained marketplace

Feedback

Édition de code par symboles avec Serena MCP. Utiliser pour modifier des fonctions, hooks, ou composants de manière précise sans réécrire des fichiers entiers.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name serena-edit
description Édition de code par symboles avec Serena MCP. Utiliser pour modifier des fonctions, hooks, ou composants de manière précise sans réécrire des fichiers entiers.
allowed-tools mcp__serena__find_symbol, mcp__serena__replace_symbol_body, mcp__serena__insert_after_symbol, mcp__serena__insert_before_symbol, mcp__serena__get_symbols_overview, mcp__serena__find_referencing_symbols

Serena Edit - Édition Symbolique

Objectif

Modifier le code du projet MyGGV GPS de manière précise en ciblant des symboles spécifiques plutôt que de réécrire des fichiers entiers.

Périmètre

Inclus

  • Remplacer le corps d'une fonction/hook
  • Renommer un symbole (avec mise à jour des références)
  • Ajouter un nouveau symbole
  • Supprimer un symbole

Exclus

  • Exploration de code → utiliser serena-explore
  • Mémoire projet → utiliser serena-memory
  • Création de nouveaux fichiers → utiliser Write

Outils Disponibles

1. replace_symbol_body

Remplacer le contenu d'une fonction :

mcp__serena__replace_symbol_body({
  symbol_name: "getPolygonCenter",
  file_path: "src/hooks/useMapConfig.js",
  new_body: `
    if (!coords || coords.length === 0) return [0, 0];
    const polygon = turf.polygon([coords]);
    const centroid = turf.centroid(polygon);
    return centroid.geometry.coordinates;
  `
})

2. rename_symbol

Renommer un symbole partout dans le projet :

mcp__serena__rename_symbol({
  old_name: "handleArrival",
  new_name: "onDestinationReached",
  scope: "project"  // ou "file" pour limiter
})

3. add_symbol

Ajouter une nouvelle fonction/constante :

mcp__serena__add_symbol({
  file_path: "src/utils/geoUtils.js",
  symbol_type: "function",
  symbol_name: "calculateMidpoint",
  body: `
    export function calculateMidpoint(coord1, coord2) {
      return [
        (coord1[0] + coord2[0]) / 2,
        (coord1[1] + coord2[1]) / 2
      ];
    }
  `,
  position: "end"  // ou "after:haversineDistance"
})

4. delete_symbol

Supprimer un symbole :

mcp__serena__delete_symbol({
  symbol_name: "unusedHelper",
  file_path: "src/utils/geoUtils.js"
})

Workflow d'Édition

Modifier une fonction existante

1. find_symbol → Vérifier la signature actuelle
2. replace_symbol_body → Appliquer les changements
3. Vérifier le build (npm run build)

Refactoring avec renommage

1. get_symbol_references → Voir l'impact
2. rename_symbol → Renommer partout
3. Vérifier les imports

Ajouter une nouvelle fonctionnalité

1. get_symbols_overview → Voir la structure du fichier
2. add_symbol → Ajouter le nouveau code
3. Mettre à jour les exports si nécessaire

Exemples Pratiques

Exemple 1 : Corriger un calcul

// Trouver la fonction
mcp__serena__find_symbol({ symbol_name: "haversineDistance" })

// Modifier le corps
mcp__serena__replace_symbol_body({
  symbol_name: "haversineDistance",
  file_path: "src/utils/geoUtils.js",
  new_body: `
    const R = 6371e3; // Rayon Terre en mètres
    const φ1 = lat1 * Math.PI / 180;
    const φ2 = lat2 * Math.PI / 180;
    const Δφ = (lat2 - lat1) * Math.PI / 180;
    const Δλ = (lon2 - lon1) * Math.PI / 180;

    const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
              Math.cos(φ1) * Math.cos(φ2) *
              Math.sin(Δλ/2) * Math.sin(Δλ/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

    return R * c;
  `
})

Exemple 2 : Ajouter un hook

mcp__serena__add_symbol({
  file_path: "src/hooks/useOfflineStatus.js",
  symbol_type: "function",
  symbol_name: "useOfflineStatus",
  body: `
    import { useState, useEffect } from 'react';

    export function useOfflineStatus() {
      const [isOffline, setIsOffline] = useState(!navigator.onLine);

      useEffect(() => {
        const handleOnline = () => setIsOffline(false);
        const handleOffline = () => setIsOffline(true);

        window.addEventListener('online', handleOnline);
        window.addEventListener('offline', handleOffline);

        return () => {
          window.removeEventListener('online', handleOnline);
          window.removeEventListener('offline', handleOffline);
        };
      }, []);

      return isOffline;
    }
  `,
  position: "start"
})

Bonnes Pratiques

  1. Toujours find_symbol avant replace pour vérifier la version actuelle
  2. Tester après chaque modification avec npm run build
  3. Utiliser rename_symbol plutôt que rechercher-remplacer manuel
  4. Préserver les exports lors de modifications

Précautions

Avant de modifier

  • Vérifier que le symbole existe : find_symbol
  • Vérifier les dépendances : get_related_symbols
  • Vérifier les usages : get_symbol_references

Après modification

  • Vérifier la syntaxe : npm run build
  • Vérifier les tests : npm test (si disponible)
  • Vérifier le lint : npm run lint

Anti-Patterns

Ne pas faire :

// Réécrire tout le fichier pour changer une fonction
Write({
  file_path: "src/utils/geoUtils.js",
  content: "... 200 lignes ..."
})

Faire :

// Cibler précisément
mcp__serena__replace_symbol_body({
  symbol_name: "targetFunction",
  new_body: "... juste le nouveau corps ..."
})