Skills et MCP dans Claude Code — Guide complet

Partie 1 : Les Skills

Définition

Un skill Claude Code est un module réutilisable qui étend les capacités de Claude avec des connaissances spécialisées, des workflows et des outils. C'est comme un "guide d'intégration" pour un domaine précis : il transforme Claude d'un agent généraliste en un agent spécialisé équipé de savoir-faire procédural.

Un skill peut embarquer :

• des instructions (dans SKILL.md),
• des scripts exécutables (Python, Bash...),
• des références (documentation, schémas, specs),
• des assets (templates, images, polices...).

L'idée : encapsuler une façon de travailler dans un module que Claude peut invoquer automatiquement selon le contexte.

Anatomie d'un skill

Tout skill a une structure simple :

skill-name/
├── SKILL.md              # Obligatoire : instructions + métadonnées
├── scripts/              # Optionnel : code exécutable
├── references/           # Optionnel : documentation de référence
└── assets/               # Optionnel : fichiers utilisés dans les outputs

SKILL.md (obligatoire)

C'est le cœur du skill. Il contient :

1. Un frontmatter YAML avec name et description — c'est ce que Claude lit pour décider quand utiliser le skill.
2. Un corps en Markdown — les instructions détaillées, chargées uniquement si le skill est déclenché.

Exemple :

---
name: frontend-design
description: Création d'interfaces web distinctives et production-ready. Utiliser quand l'utilisateur demande de créer des composants, pages ou applications web (sites, landing pages, dashboards, composants React, layouts HTML/CSS).
---

Le corps contient ensuite les instructions de travail.

scripts/ (optionnel)

Code exécutable pour les tâches qui demandent une fiabilité déterministe ou qui seraient réécrites à chaque fois.

• Quand l'utiliser : opérations répétitives (rotation de PDF, conversion d'images...), tâches fragiles où la cohérence est critique.
• Avantage : économie de tokens, exécution sans charger le code en contexte.

Exemple : scripts/rotate_pdf.py

references/ (optionnel)

Documentation que Claude charge en contexte selon ses besoins.

• Quand l'utiliser : schémas de base de données, specs d'API, documentation métier, politiques d'entreprise.
• Avantage : garde le SKILL.md léger, chargé uniquement à la demande.

Exemple : references/api_docs.md, references/brand_guidelines.md

assets/ (optionnel)

Fichiers utilisés dans les outputs, pas chargés en contexte.

• Quand l'utiliser : templates, images, polices, boilerplate de projet.
• Avantage : Claude peut utiliser ces fichiers sans les lire.

Exemple : assets/logo.png, assets/template.pptx, assets/starter-app/

Comment Claude utilise les skills

Le système fonctionne en trois niveaux de chargement progressif :

1. Métadonnées (name + description) — toujours en contexte (~100 mots)
2. Corps du SKILL.md — chargé si le skill est déclenché (moins de 5000 mots)
3. Ressources — chargées à la demande par Claude

Claude lit les métadonnées de tous les skills disponibles. Quand une requête correspond à la description d'un skill, il charge le corps du SKILL.md et travaille selon ses instructions.

Installer et utiliser un skill

Emplacement des skills

Les skills sont placés dans des dossiers sous /mnt/skills/ :

• /mnt/skills/public/ — skills publics fournis par Anthropic
• /mnt/skills/user/ — skills ajoutés par l'utilisateur
• /mnt/skills/examples/ — skills d'exemple

Utilisation

Pas besoin de commande spéciale. Claude détecte automatiquement quand un skill est pertinent grâce à sa description.

Tu peux aussi demander explicitement :

Utilise le skill frontend-design et crée un dashboard pour une app de trading.

Le skill frontend-design

Objectif

Le skill frontend-design guide Claude pour créer des interfaces web distinctives et production-ready, en évitant l'esthétique "IA générique" (dégradés violets, Inter partout, cards rondes...).

Ce qu'il fait

Il pousse Claude à :

• choisir une direction esthétique audacieuse et claire,
• utiliser des typographies avec du caractère (pas Arial, pas Inter),
• construire des palettes cohérentes avec des couleurs dominantes et des accents marqués,
• produire du code fonctionnel (HTML/CSS/JS, React, Vue...).

Directions esthétiques suggérées

Le skill encourage à choisir un ton extrême parmi (liste non exhaustive) :

• Brutally minimal : épuré, peu de couleurs, beaucoup d'espace
• Maximalist : dense, typographie expressive, animations riches
• Retro-futuristic : néons, géométrie, vibe années 80
• Luxury / Refined : palette sombre, accents dorés, serif élégantes
• Playful / Toy-like : couleurs vives, arrondis, micro-animations ludiques
• Editorial / Magazine : layouts asymétriques, typo éditoriale
• Brutalist / Raw : brut, sans fioritures, impact visuel

Exemple d'utilisation

Utilise le skill frontend-design.
Crée une landing page pour une app de méditation, style "Luxury / Refined", 
avec un hero animé et une section témoignages.

Principes appliqués

• Typographie : polices distinctives, pas de fonts génériques.
• Couleurs : palette restreinte (2-3 dominantes) + accents ciblés, variables CSS.
• Mouvement : animations soignées sur les moments clés (chargement, hover, scroll).
• Composition : layouts asymétriques, overlap, grilles cassées, espace négatif généreux.
• Détails visuels : textures, gradients mesh, ombres dramatiques, grain...

Créer ton propre skill

Étape 1 : Initialiser le skill

Utilise le script d'initialisation :

python /mnt/skills/examples/skill-creator/scripts/init_skill.py mon-skill --path /home/claude/

Ça crée la structure de base avec des exemples.

Étape 2 : Écrire le SKILL.md

Frontmatter : écris un name et une description claire. La description est cruciale — c'est ce qui déclenche le skill.

---
name: mon-skill-custom
description: Description claire de ce que fait le skill et QUAND l'utiliser. Inclure des exemples de requêtes qui devraient déclencher ce skill.
---

Corps : instructions concises. Claude est intelligent — n'explique que ce qu'il ne sait pas déjà.

Étape 3 : Ajouter les ressources

• scripts/ : code à exécuter (tester avant d'inclure !)
• references/ : documentation à consulter
• assets/ : fichiers à utiliser dans les outputs

Étape 4 : Valider et packager

python /mnt/skills/examples/skill-creator/scripts/package_skill.py /home/claude/mon-skill

Le script valide la structure et crée un fichier .skill distribuable.

Bonnes pratiques pour les skills

Concision

Le contexte est une ressource partagée. Chaque token compte. Préfère les exemples concis aux explications verbeuses.

Progressive disclosure

• Garde le SKILL.md sous 500 lignes.
• Déplace les détails dans references/.
• Référence clairement les fichiers depuis le SKILL.md.

Ne pas inclure

• README.md, CHANGELOG.md, guides d'installation — le skill est pour Claude, pas pour des humains.
• Documentation du processus de création.
• Fichiers qui ne servent pas directement à l'exécution.

Partie 2 : MCP (Model Context Protocol)

C'est quoi MCP ?

MCP est un protocole open-source qui permet à Claude de se connecter à des outils externes : bases de données, APIs, services cloud, outils de développement... C'est comme un port USB-C universel pour l'IA : une façon standardisée de connecter Claude à n'importe quelle source de données ou outil.

MCP fonctionne via des serveurs MCP qui exposent des capacités à Claude :

• Tools : fonctions que Claude peut appeler (avec approbation utilisateur)
• Resources : données que Claude peut lire (comme des réponses API ou du contenu de fichiers)
• Prompts : templates pré-écrits disponibles comme commandes slash

Ce que tu peux faire avec MCP

Avec des serveurs MCP connectés, tu peux demander à Claude :

• "Implémente la feature décrite dans le ticket JIRA ENG-4521 et crée une PR sur GitHub."
• "Vérifie Sentry pour voir les erreurs récentes sur la feature ENG-4521."
• "Trouve les emails de 10 utilisateurs aléatoires dans notre base Postgres."
• "Mets à jour notre template email avec les nouveaux designs Figma."
• "Crée des brouillons Gmail pour inviter ces utilisateurs à une session feedback."

Serveurs MCP populaires

Développement & Monitoring

Gestion de projet & Documentation

Bases de données & Data

Paiements & Commerce

Design & Media

Infrastructure & DevOps

Filesystem & Recherche

Installer un serveur MCP

Il existe trois types de serveurs MCP :

1. Serveurs HTTP (recommandé pour le cloud)

claude mcp add --transport http <nom> <url>

Exemple :

claude mcp add --transport http notion https://mcp.notion.com/mcp

2. Serveurs SSE (Server-Sent Events)

claude mcp add --transport sse <nom> <url>

Exemple :

claude mcp add --transport sse asana https://mcp.asana.com/sse

3. Serveurs stdio (locaux)

Ces serveurs tournent comme des processus locaux sur ta machine.

claude mcp add <nom> -- <commande>

Le -- sépare les options de Claude de la commande à exécuter.

Exemples :

# GitHub avec token
claude mcp add github --env GITHUB_TOKEN=ghp_xxx -- npx -y @modelcontextprotocol/server-github
 
# PostgreSQL avec URL de connexion
claude mcp add postgres --env DATABASE_URL=postgresql://user:pass@host/db -- npx -y @modelcontextprotocol/server-postgres
 
# Filesystem avec accès à des dossiers spécifiques
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem ~/Documents ~/Projects

Note Windows : Sur Windows natif (pas WSL), ajoute cmd /c devant les commandes npx :

claude mcp add github -- cmd /c npx -y @modelcontextprotocol/server-github

Gérer les serveurs MCP

# Lister tous les serveurs configurés
claude mcp list
 
# Voir les détails d'un serveur
claude mcp get <nom>
 
# Supprimer un serveur
claude mcp remove <nom>

Dans Claude Code, tape /mcp pour voir et gérer les serveurs, notamment pour l'authentification OAuth.

Scopes : où stocker la config ?

Chaque serveur MCP peut être configuré à différents niveaux :

# Ajouter en scope user (disponible partout)
claude mcp add github -s user --env GITHUB_TOKEN=xxx -- npx -y @modelcontextprotocol/server-github
 
# Ajouter en scope project (partagé avec l'équipe via .mcp.json)
claude mcp add shared-tools -s project -- npx -y @your-team/mcp-tools

Authentification OAuth

Beaucoup de serveurs cloud nécessitent une authentification :

1. Ajoute le serveur :

claude mcp add --transport http notion https://mcp.notion.com/mcp

2. Dans Claude Code, tape /mcp et suis les étapes dans ton navigateur.

Les tokens sont stockés de façon sécurisée et rafraîchis automatiquement.

Importer depuis Claude Desktop

Si tu as déjà configuré des serveurs MCP dans Claude Desktop :

claude mcp import-from-claude-desktop

Un dialogue interactif te permet de choisir quels serveurs importer.

Variables d'environnement dans .mcp.json

Pour les configs d'équipe, tu peux utiliser des variables d'environnement :

{
  "mcpServers": {
    "database": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${DATABASE_URL}"
      }
    },
    "custom-server": {
      "command": "${HOME}/scripts/my-server.py",
      "args": ["--config", "${CONFIG_PATH:-/default/path}"]
    }
  }
}

Syntaxe supportée :

• ${VAR} — valeur de la variable
• ${VAR:-default} — valeur ou défaut si non définie

Exemple concret : monitoring avec Sentry

# 1. Ajouter Sentry
claude mcp add --transport http sentry https://mcp.sentry.dev/mcp
 
# 2. S'authentifier
# Dans Claude Code : /mcp → Sentry → Login
 
# 3. Utiliser
# "Montre-moi les erreurs récentes sur le projet frontend"
# "Quels sont les bugs les plus fréquents cette semaine ?"

Ressources et Prompts MCP

Utiliser les ressources

Les serveurs MCP peuvent exposer des ressources référençables avec @ :

@notion://page/12345 Résume cette page Notion

Tape @ pour voir les ressources disponibles.

Utiliser les prompts

Les serveurs peuvent exposer des prompts comme commandes slash :

/mcp__sentry__recent_errors
/mcp__github__create_pr feature-branch "Add new feature"

Tape / pour voir les commandes disponibles.

Trouver plus de serveurs MCP

• Galerie officielle : https://github.com/modelcontextprotocol/servers
• Créer le tien : https://modelcontextprotocol.io/quickstart/server

⚠️ Attention : les serveurs tiers ne sont pas vérifiés par Anthropic. Utilise-les à tes risques.

En résumé

Les skills encapsulent une expertise (frontend, docs, data...) dans un format que Claude active automatiquement.

MCP connecte Claude au monde extérieur : GitHub, Notion, bases de données, APIs, services cloud...

Les deux sont complémentaires : un skill peut s'appuyer sur des serveurs MCP configurés dans l'environnement pour accomplir des tâches complexes.