Les Skills : Enseignez de nouveaux talents
a Claude Code

mkdir -p ~/.claude/commands

touch ~/.claude/commands/react-component.md

# React Component Generator

## Objectif
Generer un composant React TypeScript standardise avec les bonnes
pratiques de l'equipe.

## Regles
- Toujours utiliser TypeScript strict (pas de `any`)
- Composant fonctionnel avec export nomme
- Props definies dans une interface dediee
- Utiliser Tailwind CSS pour le styling
- Inclure les attributs d'accessibilite (aria-*)
- Fichier < 200 lignes, sinon decomposer

## Etapes
1. Creer l'interface des props avec JSDoc
2. Creer le composant fonctionnel
3. Ajouter les classes Tailwind responsive (mobile-first)
4. Ajouter les attributs d'accessibilite
5. Exporter le composant (export nomme, pas default)
6. Creer le fichier de test unitaire associe

## Structure attendue
```
components/
  MonComposant/
    MonComposant.tsx       # Le composant
    MonComposant.test.tsx  # Les tests
    index.ts              # Re-export
```

## Exemple de sortie
```tsx
interface ButtonProps {
  /** Le texte affiche dans le bouton */
  label: string;
  /** Variante visuelle du bouton */
  variant?: "primary" | "secondary" | "ghost";
  /** Callback au clic */
  onClick?: () => void;
  /** Desactiver le bouton */
  disabled?: boolean;
}

export function Button({
  label,
  variant = "primary",
  onClick,
  disabled = false,
}: ButtonProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      aria-disabled={disabled}
      className={cn(
        "rounded-lg px-4 py-2 font-medium transition-colors",
        variants[variant]
      )}
    >
      {label}
    </button>
  );
}
```

# Lancer Claude Code
$ claude

# Invoquer votre Skill personnalise
> /react-component Cree un composant Avatar avec image, fallback
> initiales et indicateur de statut en ligne

# Claude va suivre toutes les regles definies dans votre Skill :
# - Interface TypeScript stricte
# - Tailwind CSS responsive
# - Attributs d'accessibilite
# - Fichier de test associe
# - Structure de dossier standardisee