# /documentation - Skill Documentation SmartStack

> **Synergie Skill/Commande:**
> - **Skill** (`.claude/skills/documentation/`) → Invocation automatique par Claude
> - **Commande** (`/documentation:module`) → Invocation manuelle par l'utilisateur
> - Templates partagés dans `.claude/skills/documentation/templates.md`

---

## ARGUMENTS

```
/documentation:module <type> <target>
```

| Variable | Extraction | Valeurs |
|----------|------------|---------|
| `$TYPE` | Premier mot | `user` \| `developer` \| `database` \| `testing` |
| `$TARGET` | Reste de la ligne | Nom du module, outil, ou schéma |

---

## QUAND CE SKILL S'ACTIVE

Claude invoque automatiquement ce skill quand il détecte :

| Déclencheur | Exemple |
|-------------|---------|
| Demande explicite | "Documente le module CRM" |
| Mention de documentation | "Il faudrait créer la doc pour..." |
| Après implémentation | "La feature est terminée, génère la doc" |
| Question sur structure | "Comment est organisée la documentation ?" |
| Mots-clés | "MCD", "schéma", "diagramme", "documenter" |

---

## TYPES DE DOCUMENTATION

| Type | Description | Sortie |
|------|-------------|--------|
| `user` | Module utilisateur avec maquettes UI | `docs/user/{context}/{Module}DocPage.tsx` |
| `developer` | Guide d'outil de développement | `docs/developer/tools/{Tool}Page.tsx` |
| `database` | Schéma avec diagramme MCD | `docs/developer/database/{Schema}SchemaPage.tsx` |
| `testing` | Outil de test | `docs/developer/testing/{Tool}TestingPage.tsx` |

---

## RÈGLES ABSOLUES

1. **JAMAIS** de texte en dur → `useTranslation('docs')`
2. **JAMAIS** d'ASCII art → composants React/HTML pour MCD
3. **TOUJOURS** lire les sources existantes avant de générer
4. **TOUJOURS** demander confirmation avant de créer les fichiers
5. **TOUJOURS** mettre à jour App.tsx et les index parents

---

## WORKFLOW

### ÉTAPE 1: PARSING DES ARGUMENTS

```
EXTRAIRE $TYPE = premier mot des arguments
EXTRAIRE $TARGET = reste des arguments

SI $TYPE absent OU non reconnu → AskUserQuestion
SI $TARGET absent → AskUserQuestion
```

### ÉTAPE 2: ANALYSE (selon $TYPE)

#### SI $TYPE == "user"

| Action | Commande |
|--------|----------|
| Trouver le module | `Grep "code.*$TARGET" src/.../Navigation/` |
| Composants React | `Glob "web/.../pages/**/*$TARGET*"` |
| Permissions | `Grep "$TARGET" src/.../Permissions.cs` |
| Endpoints API | `Grep "$TARGET" src/.../Controllers/` |

#### SI $TYPE == "database"

| Action | Commande |
|--------|----------|
| Tables du schéma | `Read ApplicationDbContextModelSnapshot.cs` |
| Configurations | `Glob "Persistence/Configurations/$TARGET/*.cs"` |
| Entités Domain | `Glob "Domain/Entities/$TARGET/*.cs"` |

#### SI $TYPE == "developer" ou "testing"

| Action | Commande |
|--------|----------|
| Doc existante | `Glob "pages/docs/developer/**/*$TARGET*"` |
| Fichiers config | `Glob "**/$TARGET*.{json,yaml}"` |
| Doc officielle | `WebSearch` |

### ÉTAPE 3: CONFIRMATION UTILISATEUR

```typescript
AskUserQuestion({
  questions: [{
    header: "Détail",
    question: "Quel niveau de détail pour '$TARGET' ?",
    options: [
      { label: "Complet (Recommended)", description: "Toutes sections" },
      { label: "Standard", description: "Sections principales" },
      { label: "Minimal", description: "Référence rapide" }
    ]
  }]
})
```

### ÉTAPE 4: GÉNÉRATION

| $TYPE | Fichier | Chemin |
|-------|---------|--------|
| `user` | `{Module}DocPage.tsx` | `pages/docs/user/{context}/` |
| `developer` | `{Tool}Page.tsx` | `pages/docs/developer/tools/` |
| `database` | `{Schema}SchemaPage.tsx` | `pages/docs/developer/database/` |
| `testing` | `{Tool}TestingPage.tsx` | `pages/docs/developer/testing/` |

**Fichiers à créer/modifier:**
1. Page React (utiliser template de `templates.md`)
2. Traductions EN → `i18n/locales/en/docs.json`
3. Traductions FR → `i18n/locales/fr/docs.json`
4. Route → `App.tsx`
5. Index parent → lien de navigation

### ÉTAPE 5: INTÉGRATION

```typescript
// App.tsx
import { {Name}DocPage } from '@/pages/docs/{path}/{Name}DocPage';
<Route path="{slug}" element={<{Name}DocPage />} />
```

### ÉTAPE 6: RÉSUMÉ FINAL

Afficher:
- ✅ Fichiers créés (chemins cliquables)
- 🔗 URL: `/docs/{path}/{slug}`
- 📝 Prochaines étapes

---

## OUTILS DEVELOPER DISPONIBLES

| Catégorie | Outils |
|-----------|--------|
| Environnement Local | Docker Compose, MailDev, VS Code, Variables d'env |
| Tests API | Postman, REST Client, Swagger/OpenAPI |
| Tests E2E | Microsoft Playwright, Inspector, Trace Viewer |
| Tests Charge | NBomber (.NET), k6, Azure Load Testing |
| Tests Sécurité | OWASP ZAP, Security Code Scan, Snyk, OWASP ASVS |

---

## SOURCES DE DONNÉES

| Donnée | Source |
|--------|--------|
| Tables DB | `ApplicationDbContextModelSnapshot.cs` |
| Configurations | `Persistence/Configurations/{schema}/*.cs` |
| Permissions | `Domain/Authorization/Permissions.cs` |
| Routes | `App.tsx` |
| Traductions | `i18n/locales/*/docs.json` |
| Doc outils | WebSearch |

---

## STRUCTURE i18n

```json
{
  "breadcrumb": { "documentation": "...", "user": "...", "developer": "..." },
  "common": { "tableOfContents": "...", "externalResources": "..." },
  "user": { "{module}": { "title": "...", "sections": {...} } },
  "developer": { "tools": {...}, "database": {...} }
}
```

---

## CONTRAINTES

- Variables CSS: `var(--text-primary)`, `var(--bg-secondary)`, `var(--color-primary-600)`
- Responsive: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
- Icônes: `lucide-react` uniquement
- Liens externes: avec `<ExternalLink />` icon
- MCD: composants React/HTML (JAMAIS ASCII)
