Skip to content

slides.md

Latest commit

 

History

History
1190 lines (779 loc) · 24.1 KB

slides.md

File metadata and controls

1190 lines (779 loc) · 24.1 KB
Raw
theme default
background https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920
class text-center
highlighter shiki
lineNumbers false
info ## Claude Code Présentation des fonctionnalités avancées de Claude Code
drawings
persist
transition slide-left
title Claude Code - Guide Complet
mdc true

Claude Code

Guide complet des fonctionnalités avancées

Commencer

layout: center

Claude.md

Configuration globale et par projet

Claude.md - Configuration Globale

Fichier de configuration utilisateur : ~/.claude/CLAUDE.md

Avantages :

  • Instructions qui s'appliquent à tous vos projets
  • Vos préférences personnelles de développement
  • Standards de code que vous souhaitez toujours respecter

Exemples d'utilisation :

  • Standards de nommage préférés
  • Conventions de commits
  • Règles générales de développement
  • Préférences linguistiques

Mon CLAUDE.md Global

Exemple concret de configuration personnelle

# Master Rules
- **NEVER** add "Generated with Claude Code" to pull requests
- **NEVER** add Claude as co-authors to commits
- **NEVER** work directly on main - always create a feature branch
- Act and code with senior developer standards

## File Operations Strategy
**MCP JetBrains Priority**: Always attempt MCP JetBrains first

## Environment Setup
**PHP Execution**: Use Docker Compose for PHP commands
- `docker compose exec <container> php <command>`

## Git & Version Control
- **Create feature branches**: Never commit directly to main
- **Preserve commit history**: No amend, create new commits

## Code Modification Scope
**CRITICAL**: Only modify code related to the initial request
Fichier complet : ~/.claude/CLAUDE.md

Claude.md - Configuration Projet

Fichier de configuration projet : .claude/CLAUDE.md

Comment le créer ?

/init

Claude génère automatiquement un fichier .claude/CLAUDE.md adapté à votre projet

Avantages :

  • Instructions spécifiques au projet
  • Partageable avec l'équipe via git
  • Architecture et conventions du projet
  • Contexte métier

Exemples : Structure et architecture, conventions spécifiques, règles métier

Hiérarchie des Configurations

graph TD
    A[Claude.md Global ~/.claude/] --> C[Configuration finale]
    B[Claude.md Projet .claude/] --> C
    B -.->|Prioritaire| C

    style B fill:#16a34a,stroke:#22c55e,stroke-width:3px,color:#fff
    style A fill:#2563eb,stroke:#3b82f6,stroke-width:3px,color:#fff
    style C fill:#ea580c,stroke:#f97316,stroke-width:3px,color:#fff
Loading

La configuration projet a la priorité sur la configuration globale

layout: center

Modes d'édition

Plan Mode & Accept Edit

Modes d'édition

Plan Mode

Planification avant exécution

  • Tâches complexes
  • Todo list multi-étapes
  • Validation d'approche

Accept Edit

Auto-approve

  • Application automatique
  • Workflow rapide
  • Tâches simples

Mode par défaut

Révision manuelle

  • Accept / Reject / Edit
  • Contrôle total
  • Vérification avant application

Raccourci : [SHIFT] + [TAB]

Plan Mode en action

Questions de clarification

layout: center

Extended Thinking

Raisonnement approfondi pour tâches complexes

Extended Thinking

Comment l'activer ? Appuyer sur [TAB] pour toggle ON/OFF

Ce qui se passe :

  • Affiche le processus de réflexion en texte gris italique
  • Raisonnement plus approfondi avant de répondre
  • Intensité variable selon le prompt ("think", "think hard", "think longer")

Quand l'utiliser ? Planification architecturale complexe, debugging d'issues compliquées, évaluation de tradeoffs, compréhension de codebases

layout: center

Commandes Slash

Contrôle de la conversation

/compact

Nettoyer et réduire la taille du contexte

Usage :

/compact
/compact [instructions de focus optionnelles]

Ce que ça fait :

  • Résume et condense l'historique de conversation
  • Réduit l'utilisation de tokens
  • Préserve le contexte important
  • Permet de spécifier un focus pour la compaction

Quand l'utiliser : Conversation longue qui consomme trop de tokens

/resume

Reprendre une conversation précédente

Usage :

/resume [conversation-id]

Cas d'usage :

  • Continuer un travail interrompu
  • Revenir sur un contexte précédent
  • Reprendre après une pause
  • Historique de sessions

/clear

Nettoyer la conversation

Usage :

/clear

Utilité :

  • Nouveau départ avec contexte vide
  • Résoudre des problèmes de contexte
  • Commencer une nouvelle tâche
  • Libérer la mémoire

/rewind

Revenir en arrière dans la conversation

Usage :

/rewind [n]

Avantages :

  • Annuler des actions non souhaitées
  • Revenir à un état précédent
  • Tester différentes approches
  • Corriger une mauvaise direction

Exemple :

/rewind 3  # Revient 3 messages en arrière

layout: center

Référencement de fichiers

Utilisation du symbole @

@ - Référencer des fichiers

Spécifier précisément les fichiers à traiter

Syntaxe :

Modifie @src/components/Header.tsx pour ajouter...

Avantages :

  • Ciblage précis des fichiers
  • Évite les ambiguïtés
  • Autocomplete intelligent
  • Support des patterns (glob)

Exemples :

@package.json
@src/**/*.ts
@*.config.js

layout: center

MCP

Model Context Protocol

MCP - Configuration

Fichier mcp.json :

{
  "mcpServers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": {"CONTEXT7_API_KEY": "xxx"}
    },
    "jetbrains": {
      "type": "sse",
      "url": "http://localhost:64342/sse",
      "headers": {"IJ_MCP_SERVER_PROJECT_PATH": "/path"}
    }
  }
}

Configuration MCP JetBrains

Ajout CLI :

claude mcp add <name> <cmd> [params]

claude mcp add filesystem -s user -- \
  npx -y @modelcontextprotocol/server-filesystem

claude mcp list / remove

Commande /mcp : Liste les serveurs MCP disponibles

MCP - Serveurs Utiles

Liste de serveurs MCP recommandés

Développement
  • Serena : Analyse sémantique de code et édition avancée (IDE-like)
  • Figma : Accès aux designs Figma via API pour générer du code
Automatisation & Debugging
  • Chrome DevTools : Contrôle et inspection d'un navigateur Chrome en live
  • Browser : Automatisation de navigateur cloud (screenshots, scraping)

💡 Tip : Créez vos propres MCP

Demandez à Claude d'analyser vos besoins et de créer des MCP personnalisés :

"Analyse nos conversations et identifie les MCP qui amélioreraient ta fluidité et précision"

Exemples créés : docker-compose-mcp, gotenberg-mcp, graphql-mcp

layout: center

Custom Commands

Créer vos propres commandes

Custom Commands - Exemple /review-pr

Automatiser la review de Pull Requests

Fonctionnement :

  1. Claude récupère la PR depuis GitHub
  2. Analyse les commentaires de review
  3. Lit le code modifié
  4. Applique les corrections demandées

Usage :

/review-pr 123

Custom Commands - Création

Créer vos propres commandes slash

Structure :

.claude/
└── commands/
    └── review-pr.md

Métadonnées disponibles :

  • description : Description de la commande
  • allowed-tools : Outils autorisés sans confirmation
  • argument-hint : Indice pour les arguments

💡 Tip : Laissez Claude créer vos commandes

"Crée une commande /review-pr qui lit les commentaires d'une PR GitHub et applique les corrections demandées"

Claude générera la commande complète avec toute la logique nécessaire !

Exemple complet - .claude/commands/review-pr.md :

---
description: "Read PR comments and update code"
allowed-tools: Bash(gh:*), Bash(git:*)
argument-hint: "[pr-number]"
---

# Analyze Pull Request Comments

Read all comments from the current PR
(or specified PR number), identify unresolved
feedback, and implement the requested changes.

## Context Commands
- Current branch: !`git branch --show-current`
- PR info: !`gh pr view $ARGUMENTS --json number`

## Instructions

### Step 1: Fetch PR Information
1. If no PR number in $ARGUMENTS, determine it:
   ```bash
   gh pr list --head $(git branch --show-current)
   ```
2. Otherwise use provided number

layout: center

Sub-Agents

Agents spécialisés pour des tâches complexes

Sub-Agents

Déléguer à des agents spécialisés

⚠️ ATTENTION : Isolation des Sub-Agents

Les sub-agents n'ont PAS accès au contexte global de la conversation principale.

Le thread principal agit comme orchestrateur, mais chaque agent est complètement isolé.

Qu'est-ce qu'un sub-agent ?

  • Agent Claude autonome avec une spécialisation
  • Exécution en parallèle possible (3-5 agents simultanés)
  • Contexte et objectif focalisés
  • Rapport de résultats structuré à l'orchestrateur

Quand utiliser un sub-agent ?

  • Tâches complexes nécessitant une expertise spécifique
  • Analyse de multiples fichiers en parallèle

 

  • Recherche approfondie dans le codebase
  • Génération de documentation ou tests

layout: center

Skills

Compétences spécialisées et réutilisables

Le problème avec les approches classiques

Tout dans CLAUDE.md

Problèmes :

  • Fichier énorme (1500+ lignes)
  • Claude charge tout à chaque conversation
  • Consomme beaucoup de tokens inutilement
  • Difficile à maintenir
  • Tout est mélangé

Exemple : Guidelines frontend chargées même quand vous codez du backend

Fichiers séparés

Problèmes :

  • Claude doit penser à les lire
  • Rappel manuel nécessaire
  • Inconsistant
  • Claude les oublie régulièrement

→ Vous devez dire : "Vérifie BEST_PRACTICES.md"

Il nous faut une solution intelligente et contextuelle

Skills - La solution

Qu'est-ce qu'un skill ?

  • Instructions chargées uniquement quand nécessaires
  • Contexte spécialisé (frontend, backend, tests, etc.)
  • Réutilisable entre projets
  • Activation automatique (via hooks)

Comparaison avec CLAUDE.md :

CLAUDE.md classique

  • 1500 lignes chargées
  • Tout le temps
  • Tokens gaspillés : 40-60%

Avec Skills

  • 300-400 lignes chargées
  • Uniquement si pertinent
  • Économie : 40-60% de tokens

Chargement sélectif et progressif

Exemple concret :

Travail sur contrôleur backend :

✅ Skill "backend-dev-guidelines" (300 lignes)
   → Se charge automatiquement

❌ Frontend guidelines (1200 lignes)
   → Ne se charge PAS

Tokens consommés : 300 au lieu de 1500

Travail sur composant React :

✅ Skill "frontend-dev-guidelines" (400 lignes)
   → Se charge automatiquement

❌ Backend guidelines (1100 lignes)
   → Ne se charge PAS

Tokens consommés : 400 au lieu de 1500

Économie de tokens : 40-60% selon le contexte

Structure d'un skill

Structure avec ressources :

.claude/skills/
└── frontend-dev-guidelines/
    ├── SKILL.md (398 lignes - toujours chargé)
    └── resources/
        ├── react-hooks.md
        ├── tanstack-query.md
        └── mui-patterns.md

SKILL.md : Résumé et règles critiques

resources/ : Détails techniques chargés uniquement si nécessaire

Exemple SKILL.md :

# Frontend Development Guidelines

## React Best Practices
- Utiliser hooks personnalisés pour logique réutilisable
- Préférer composition over inheritance
- [Détails complets](./resources/react-hooks.md)

## TanStack Query
- Toutes les requêtes API via TanStack Query
- [Guide complet](./resources/tanstack-query.md)

## Material-UI
- Design tokens via theme
- [Patterns MUI](./resources/mui-patterns.md)

## Règles critiques
- TypeScript strict mode obligatoire
- Tests unitaires pour composants critiques

Auto-activation des Skills

Le problème : Skills inutiles si Claude ne pense pas à les utiliser

La solution : Hooks d'auto-activation

Comment ça marche ?

  1. Vous écrivez : "Crée un nouveau contrôleur pour gérer les notifications"
  2. Hook TypeScript analyse le prompt AVANT que Claude le lise
  3. Hook détecte le mot-clé "contrôleur"
  4. Injecte automatiquement le skill backend-dev-guidelines
  5. Claude reçoit le prompt + le skill actif
  6. Claude crée le contrôleur selon VOS patterns

Résultat : Code cohérent automatiquement, sans rappels manuels

Continuons avec la section Hooks pour voir comment configurer ce système...

layout: center

Hooks

Automatisation et contrôle qualité

Qu'est-ce qu'un hook ?

Définition :

Un hook est un script TypeScript qui s'exécute automatiquement en réponse à des événements Claude Code.

Événements disponibles :

  • user-prompt-submit : Avant que Claude lise votre prompt
  • assistant-response : Après chaque réponse de Claude
  • file-edit : Après modification de fichier
  • tool-call : Avant/après appel d'outil

Cas d'usage :

  • Auto-activation de skills
  • Vérification automatique du build
  • Formatage de code
  • Tracking des fichiers modifiés
  • Rappels de bonnes pratiques

Hook = Automatisation qui travaille en arrière-plan

Claude n'a pas besoin d'y penser, c'est automatique

Hooks principaux

File Edit Tracker

Trace tous les fichiers modifiés pendant la session

Utilité : Savoir exactement ce qui a changé, facilite les commits

Build Checker

Vérifie les erreurs TypeScript après chaque réponse

Utilité : Zéro erreur laissée derrière

Error Handling Reminder

Rappel gentil pour la gestion d'erreurs

Utilité : Code robuste et sans oubli

Skill Auto-Activator

Analyse prompt et injecte skills pertinents

Utilité : Skills toujours actifs au bon moment

⚠️ Note importante

Hooks consomment des tokens. Utilisez-les judicieusement sur les projets importants.

Pipeline complet avec Hooks

Workflow automatisé : #NoMessLeftBehind

graph LR
    A[Vous écrivez un prompt] --> B[Hook: Skill Auto-Activator]
    B --> C[Claude reçoit prompt + skill]
    C --> D[Claude modifie les fichiers]
    D --> E[Hook: File Edit Tracker]
    E --> F[Hook: Build Checker]
    F --> G{Erreurs ?}
    G -->|Oui| H[Hook: Error Reminder]
    G -->|Non| I[Succès]
    H --> J[Claude corrige automatiquement]
    J --> F

    style A fill:#3b82f6,stroke:#2563eb,stroke-width:2px,color:#fff
    style C fill:#8b5cf6,stroke:#7c3aed,stroke-width:2px,color:#fff
    style I fill:#16a34a,stroke:#22c55e,stroke-width:2px,color:#fff
    style H fill:#ea580c,stroke:#f97316,stroke-width:2px,color:#fff
Loading

Résultat : Code cohérent, zéro erreur, sans intervention manuelle

Configuration d'un hook

Fichier : .claude/hooks.json

{
  "hooks": [
    {
      "name": "build-checker",
      "event": "assistant-response",
      "script": "./hooks/build-checker.ts"
    },
    {
      "name": "skill-activator",
      "event": "user-prompt-submit",
      "script": "./hooks/skill-activator.ts",
      "config": {"rules": "./skill-rules.json"}
    }
  ]
}

Exemple hook TypeScript :

// hooks/build-checker.ts
export default async function buildChecker(context) {
  const { files } = context;
  const tsFiles = files.filter(f => f.endsWith('.ts'));
  if (tsFiles.length === 0) return;

  const result = await exec('pnpm tsc --noEmit');

  if (result.exitCode !== 0) {
    return {
      message: "Build errors detected.",
      errors: result.stderr
    };
  }
}

💡 Tip : Laissez Claude créer vos hooks

"Crée un hook qui vérifie le build après chaque modification TypeScript"

layout: end class: text-center

Merci !

Prêt à explorer Claude Code ?