@atlashub/smartstack-cli 1.1.0

package/templates/commands/documentation/templates.md

@@ -0,0 +1,432 @@
+# Templates de Documentation
+
+## Template User Module
+
+```tsx
+// web/smartstack-web/src/pages/docs/user/{context}/{ModuleName}DocPage.tsx
+
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ArrowRight, ChevronRight, CheckCircle, AlertTriangle } from 'lucide-react';
+
+// MOCK DATA - Données fictives pour illustrer l'interface
+const mockData = {
+  items: [
+    { id: 1, name: 'Item 1', status: 'active', value: 125 },
+    { id: 2, name: 'Item 2', status: 'pending', value: 89 },
+  ],
+  stats: { total: 256, active: 180, pending: 52, warning: 24 },
+};
+
+export function {ModuleName}DocPage() {
+  const { t } = useTranslation('docs');
+
+  return (
+    <div className="space-y-8">
+      {/* 1. BREADCRUMB */}
+      <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+        <Link to="/docs" className="hover:text-[var(--color-primary-600)]">
+          {t('breadcrumb.documentation')}
+        </Link>
+        <span>/</span>
+        <Link to="/docs/user" className="hover:text-[var(--color-primary-600)]">
+          {t('breadcrumb.user')}
+        </Link>
+        <span>/</span>
+        <span>{t('breadcrumb.moduleName')}</span>
+      </div>
+
+      {/* 2. HEADER */}
+      <div>
+        <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
+          <IconName className="w-8 h-8 text-[var(--color-primary-600)]" />
+          {t('module.moduleName.title')}
+        </h1>
+        <p className="text-lg text-[var(--text-secondary)]">
+          {t('module.moduleName.subtitle')}
+        </p>
+      </div>
+
+      {/* 3. TABLE DES MATIÈRES */}
+      <div className="card p-4">
+        <h2 className="font-semibold mb-3">{t('common.tableOfContents')}</h2>
+        <nav className="grid grid-cols-2 md:grid-cols-3 gap-2">
+          {['introduction', 'access', 'overview', 'features', 'faq', 'api'].map((section) => (
+            <a key={section} href={`#${section}`} className="flex items-center gap-2 p-2 rounded hover:bg-[var(--bg-secondary)]">
+              <ChevronRight className="w-4 h-4 text-[var(--color-primary-600)]" />
+              {t(`module.moduleName.sections.${section}.title`)}
+            </a>
+          ))}
+        </nav>
+      </div>
+
+      {/* 4. SECTIONS NUMÉROTÉES */}
+      <section id="introduction" className="scroll-mt-4">
+        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">1</span>
+          {t('module.moduleName.sections.introduction.title')}
+        </h2>
+        <div className="card p-6">
+          {/* Contenu de la section */}
+        </div>
+      </section>
+
+      {/* 5. MAQUETTE UI AVEC MOCK DATA */}
+      <section id="overview" className="scroll-mt-4">
+        <div className="card p-6">
+          <div className="border-2 border-dashed border-[var(--border-color)] rounded-lg p-4">
+            <div className="text-xs text-[var(--text-tertiary)] mb-4 text-center">
+              {t('common.mockupPreview')}
+            </div>
+            {/* Stats Cards */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
+                <div className="text-2xl font-bold text-[var(--color-primary-600)]">{mockData.stats.total}</div>
+                <div className="text-sm text-[var(--text-secondary)]">{t('common.total')}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 6. FAQ */}
+      <section id="faq" className="scroll-mt-4">
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="card p-4">
+              <h3 className="font-medium mb-2">{t(`module.moduleName.faq.q${i}.question`)}</h3>
+              <p className="text-sm text-[var(--text-secondary)]">{t(`module.moduleName.faq.q${i}.answer`)}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 7. NAVIGATION FOOTER */}
+      <div className="flex justify-between pt-6 border-t border-[var(--border-color)]">
+        <Link to="/docs/user/previous" className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]">
+          <ArrowRight className="w-4 h-4 rotate-180" />
+          {t('nav.previous')}
+        </Link>
+        <Link to="/docs/user/next" className="flex items-center gap-2 text-[var(--color-primary-600)]">
+          {t('nav.next')}
+          <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    </div>
+  );
+}
+```
+
+## Template Developer Tool
+
+```tsx
+// web/smartstack-web/src/pages/docs/developer/tools/{ToolName}Page.tsx
+
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Terminal, CheckCircle, Copy, ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+
+function CodeBlock({ code, language = 'bash' }: { code: string; language?: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative group">
+      <pre className="bg-[var(--bg-tertiary)] p-4 rounded-lg overflow-x-auto text-sm font-mono">
+        <code>{code}</code>
+      </pre>
+      <button onClick={handleCopy} className="absolute top-2 right-2 p-2 rounded bg-[var(--bg-secondary)] opacity-0 group-hover:opacity-100">
+        {copied ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+      </button>
+    </div>
+  );
+}
+
+export function {ToolName}Page() {
+  const { t } = useTranslation('docs');
+
+  return (
+    <div className="space-y-8">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+        <Link to="/docs">Documentation</Link>
+        <span>/</span>
+        <Link to="/docs/developer">Developer</Link>
+        <span>/</span>
+        <Link to="/docs/developer/tools">Tools</Link>
+        <span>/</span>
+        <span>{t('developer.tools.toolName.title')}</span>
+      </div>
+
+      {/* Header avec badges */}
+      <div>
+        <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
+          <Terminal className="w-8 h-8 text-[var(--color-primary-600)]" />
+          {t('developer.tools.toolName.title')}
+        </h1>
+        <div className="flex gap-2 mt-4">
+          <span className="px-3 py-1 rounded-full bg-green-500/10 text-green-600 text-sm">Gratuit</span>
+          <span className="px-3 py-1 rounded-full bg-blue-500/10 text-blue-600 text-sm">.NET</span>
+        </div>
+      </div>
+
+      {/* Sections: Prérequis, Installation, Configuration, Usage, CI/CD */}
+      <section id="installation">
+        <h2 className="text-xl font-semibold mb-4">Installation</h2>
+        <CodeBlock code="dotnet add package ToolName" />
+      </section>
+
+      {/* Liens externes */}
+      <div className="card p-4 bg-blue-500/5 border border-blue-500/20">
+        <div className="flex items-center gap-2 mb-2">
+          <ExternalLink className="w-4 h-4 text-blue-600" />
+          <span className="font-medium">Ressources</span>
+        </div>
+        <div className="flex gap-4">
+          <a href="#" className="text-blue-600 hover:underline text-sm">Documentation officielle</a>
+          <a href="#" className="text-blue-600 hover:underline text-sm">GitHub</a>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## Template Database Schema (avec MCD en HTML)
+
+```tsx
+// web/smartstack-web/src/pages/docs/developer/database/{SchemaName}SchemaPage.tsx
+
+import { Link } from 'react-router-dom';
+import { Database, Table, Key, Link2, ArrowRight } from 'lucide-react';
+
+const schemaData = {
+  name: 'schema_name',
+  tables: [
+    {
+      name: 'TableName',
+      columns: [
+        { name: 'Id', type: 'UNIQUEIDENTIFIER', isPK: true, isFK: false, required: true, description: 'Identifiant unique' },
+        { name: 'ForeignId', type: 'UNIQUEIDENTIFIER', isPK: false, isFK: true, fkTable: 'OtherTable', required: true, description: 'Référence vers OtherTable' },
+      ],
+      relations: [
+        { type: '1:N', target: 'ChildTable', description: 'Une entrée a plusieurs enfants' },
+      ]
+    },
+  ]
+};
+
+// Composant pour afficher une table dans le diagramme MCD
+function McdTableCard({ table, schema }: { table: typeof schemaData.tables[0]; schema: string }) {
+  return (
+    <div className="card p-4 min-w-[200px]">
+      <div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--border-color)]">
+        <Table className="w-4 h-4 text-[var(--color-primary-600)]" />
+        <span className="font-semibold">{schema}.{table.name}</span>
+      </div>
+      <div className="space-y-1 text-sm">
+        {table.columns.map((col) => (
+          <div key={col.name} className="flex items-center gap-2">
+            {col.isPK && <Key className="w-3 h-3 text-amber-500" />}
+            {col.isFK && <Link2 className="w-3 h-3 text-blue-500" />}
+            {!col.isPK && !col.isFK && <span className="w-3" />}
+            <span className={`font-mono text-xs ${col.isPK ? 'font-bold' : ''}`}>
+              {col.name}
+            </span>
+            {col.required && <span className="text-red-500">*</span>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Composant pour afficher une relation entre tables
+function McdRelation({ from, to, type, description }: { from: string; to: string; type: string; description: string }) {
+  return (
+    <div className="flex items-center gap-4 py-2">
+      <span className="font-mono text-sm bg-[var(--bg-secondary)] px-2 py-1 rounded">{from}</span>
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-0.5 bg-[var(--border-color)]" />
+        <span className="px-2 py-0.5 rounded bg-purple-500/10 text-purple-600 text-xs font-medium">{type}</span>
+        <ArrowRight className="w-4 h-4 text-[var(--text-tertiary)]" />
+      </div>
+      <span className="font-mono text-sm bg-[var(--bg-secondary)] px-2 py-1 rounded">{to}</span>
+      <span className="text-sm text-[var(--text-secondary)]">{description}</span>
+    </div>
+  );
+}
+
+export function {SchemaName}SchemaPage() {
+  return (
+    <div className="space-y-8">
+      {/* Section MCD - Diagramme HTML */}
+      <section id="mcd">
+        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">1</span>
+          Modèle Conceptuel de Données (MCD)
+        </h2>
+        <div className="card p-6">
+          {/* Diagramme visuel des tables */}
+          <div className="flex flex-wrap gap-6 justify-center mb-8">
+            {schemaData.tables.map((table) => (
+              <McdTableCard key={table.name} table={table} schema={schemaData.name} />
+            ))}
+          </div>
+
+          {/* Relations entre tables */}
+          <div className="border-t border-[var(--border-color)] pt-4">
+            <h4 className="font-medium mb-3 text-sm text-[var(--text-secondary)]">Relations</h4>
+            <div className="space-y-2">
+              {schemaData.tables.flatMap((table) =>
+                table.relations.map((rel, idx) => (
+                  <McdRelation
+                    key={`${table.name}-${idx}`}
+                    from={table.name}
+                    to={rel.target}
+                    type={rel.type}
+                    description={rel.description}
+                  />
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* Légende */}
+          <div className="mt-6 pt-4 border-t border-[var(--border-color)] flex flex-wrap gap-4 text-xs text-[var(--text-secondary)]">
+            <div className="flex items-center gap-1">
+              <Key className="w-3 h-3 text-amber-500" /> PK = Clé primaire
+            </div>
+            <div className="flex items-center gap-1">
+              <Link2 className="w-3 h-3 text-blue-500" /> FK = Clé étrangère
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="text-red-500">*</span> = Obligatoire
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Section Tables détaillées */}
+      <section id="tables">
+        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">2</span>
+          Tables détaillées
+        </h2>
+        {schemaData.tables.map((table) => (
+          <div key={table.name} className="card p-6 mb-4">
+            <h3 className="font-semibold flex items-center gap-2 mb-4">
+              <Table className="w-5 h-5 text-[var(--color-primary-600)]" />
+              {schemaData.name}.{table.name}
+            </h3>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-[var(--bg-secondary)]">
+                    <th className="text-left py-2 px-3 rounded-tl-lg">Colonne</th>
+                    <th className="text-left py-2 px-3">Type SQL</th>
+                    <th className="text-left py-2 px-3">Clés</th>
+                    <th className="text-left py-2 px-3 rounded-tr-lg">Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.columns.map((col, idx) => (
+                    <tr key={col.name} className={idx % 2 === 1 ? 'bg-[var(--bg-secondary)]/50' : ''}>
+                      <td className="py-2 px-3 font-mono text-sm">
+                        {col.name}
+                        {col.required && <span className="text-red-500 ml-1">*</span>}
+                      </td>
+                      <td className="py-2 px-3 text-[var(--text-secondary)]">{col.type}</td>
+                      <td className="py-2 px-3">
+                        {col.isPK && (
+                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-500/10 text-amber-600 text-xs mr-1">
+                            <Key className="w-3 h-3" /> PK
+                          </span>
+                        )}
+                        {col.isFK && (
+                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-500/10 text-blue-600 text-xs">
+                            <Link2 className="w-3 h-3" /> FK
+                          </span>
+                        )}
+                      </td>
+                      <td className="py-2 px-3 text-[var(--text-secondary)]">{col.description}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Relations de cette table */}
+            {table.relations.length > 0 && (
+              <div className="mt-4 pt-4 border-t border-[var(--border-color)]">
+                <h4 className="font-medium mb-2 text-sm">Relations</h4>
+                <div className="flex flex-wrap gap-2">
+                  {table.relations.map((rel, idx) => (
+                    <div key={idx} className="flex items-center gap-2 px-3 py-1 rounded-lg bg-[var(--bg-secondary)] text-sm">
+                      <span className="font-mono text-[var(--color-primary-600)]">{rel.type}</span>
+                      <ArrowRight className="w-4 h-4 text-[var(--text-tertiary)]" />
+                      <span>{rel.target}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+}
+```
+
+## Patterns Réutilisables
+
+### Stats Cards
+```tsx
+<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+  <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
+    <div className="text-2xl font-bold text-[var(--color-primary-600)]">{value}</div>
+    <div className="text-sm text-[var(--text-secondary)]">{label}</div>
+  </div>
+</div>
+```
+
+### Badges de statut
+```tsx
+const statusColors = {
+  active: 'bg-green-500/10 text-green-600',
+  pending: 'bg-yellow-500/10 text-yellow-600',
+  error: 'bg-red-500/10 text-red-600',
+};
+
+<span className={`px-2 py-1 rounded text-xs ${statusColors[status]}`}>{status}</span>
+```
+
+### Section numérotée
+```tsx
+<section id="section-id" className="scroll-mt-4">
+  <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+    <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">
+      {number}
+    </span>
+    {title}
+  </h2>
+  <div className="card p-6">{children}</div>
+</section>
+```
+
+### Alert/Info Box
+```tsx
+<div className="p-4 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-start gap-3">
+  <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0" />
+  <div>
+    <div className="font-medium text-amber-600">Attention</div>
+    <p className="text-sm text-[var(--text-secondary)]">{message}</p>
+  </div>
+</div>
+```

package/templates/commands/documentation.md

@@ -0,0 +1,190 @@
+# /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)