npm - @atlashub/smartstack-cli - Versions diffs - 4.80.0 → 5.0.0 - Mend

@atlashub/smartstack-cli 4.80.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1008) hide show

package/.documentation/ba-develop.html ADDED Viewed

@@ -0,0 +1,852 @@
+<!DOCTYPE html>
+<!--
+  AUTO-GENERATED by scripts/generate-docs — do not edit by hand.
+  Edit docs-src/ba-develop.md (or templates/skills/<skill>/SKILL.md for skill data)
+  and run `npm run build:docs`. CI enforces drift via `npm run docs:check`.
+-->
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BA Develop — pipeline de génération de code - SmartStack CLI</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Global Header (single unified element) -->
+        <header class="global-header">
+            <div class="logo">SS</div>
+            <span class="site-title">SmartStack CLI</span>
+            <span class="version-badge">v5.0.0</span>
+            <div class="header-divider"></div>
+            <span class="page-title">BA Develop</span>
+            <!-- Language Select -->
+            <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
+                <option value="fr">🇫🇷 FR</option>
+                <option value="en">🇬🇧 EN</option>
+            </select>
+            <!-- Search -->
+            <div class="header-search">
+                <div class="search-input-wrapper">
+                    <span class="search-icon">&#128269;</span>
+                    <input type="text" id="search-input" class="search-input" placeholder="Rechercher..." data-placeholder-fr="Rechercher..." data-placeholder-en="Search..." autocomplete="off">
+                    <span class="search-shortcut">Ctrl+K</span>
+                </div>
+                <div id="search-results" class="search-results"></div>
+            </div>
+        </header>
+        <div class="app-body">
+            <!-- Sidebar -->
+            <aside class="sidebar">
+                <button class="sidebar-toggle" title="Toggle sidebar">
+                    <span class="toggle-icon-collapse">«</span>
+                    <span class="toggle-icon-expand">»</span>
+                </button>
+                <nav class="sidebar-nav">
+                <div class="nav-section">
+                    <div class="nav-section-title">
+<span data-lang="fr">Démarrage</span><span data-lang="en">Getting Started</span>
+                    </div>
+                    <a href="index.html" class="nav-item">
+                        <span class="icon">🏠</span>
+<span class="nav-text" data-lang="fr">Accueil</span><span class="nav-text" data-lang="en">Home</span>
+                    </a>
+                    <a href="installation.html" class="nav-item">
+                        <span class="icon">📦</span>
+<span class="nav-text" data-lang="fr">Installation</span><span class="nav-text" data-lang="en">Installation</span>
+                    </a>
+                    <a href="init.html" class="nav-item">
+                        <span class="icon">🚀</span>
+<span class="nav-text" data-lang="fr">Projet Client</span><span class="nav-text" data-lang="en">Client Project</span>
+                    </a>
+                    <a href="license.html" class="nav-item">
+                        <span class="icon">🔐</span>
+<span class="nav-text" data-lang="fr">Licence</span><span class="nav-text" data-lang="en">License</span>
+                    </a>
+                </div>
+                <div class="nav-section">
+                    <div class="nav-section-title">
+<span data-lang="fr">Workflows</span><span data-lang="en">Workflows</span>
+                    </div>
+                    <a href="gitflow.html" class="nav-item">
+                        <span class="icon">🔀</span>
+<span class="nav-text" data-lang="fr">GitFlow</span><span class="nav-text" data-lang="en">GitFlow</span>
+                    </a>
+                    <a href="efcore.html" class="nav-item">
+                        <span class="icon">🗄️</span>
+<span class="nav-text" data-lang="fr">EF Core</span><span class="nav-text" data-lang="en">EF Core</span>
+                    </a>
+                    <a href="business-analyse.html" class="nav-item">
+                        <span class="icon">📊</span>
+<span class="nav-text" data-lang="fr">Business Analyse</span><span class="nav-text" data-lang="en">Business Analysis</span>
+                    </a>
+                    <a href="ba-develop.html" class="nav-item nav-item-child active">
+                        <span class="icon">⚙️</span>
+<span class="nav-text" data-lang="fr">BA Develop</span><span class="nav-text" data-lang="en">BA Develop</span>
+                    </a>
+                    <a href="ralph-loop.html" class="nav-item">
+                        <span class="icon">🔄</span>
+<span class="nav-text" data-lang="fr">Ralph Loop</span><span class="nav-text" data-lang="en">Ralph Loop</span>
+                    </a>
+                </div>
+                <div class="nav-section">
+                    <div class="nav-section-title">
+<span data-lang="fr">Annuaire</span><span data-lang="en">Directory</span>
+                    </div>
+                    <a href="commands.html" class="nav-item">
+                        <span class="icon">⚡</span>
+<span class="nav-text" data-lang="fr">Commandes Claude</span><span class="nav-text" data-lang="en">Claude Commands</span>
+                    </a>
+                    <a href="cli-commands.html" class="nav-item">
+                        <span class="icon">💻</span>
+<span class="nav-text" data-lang="fr">CLI SmartStack</span><span class="nav-text" data-lang="en">SmartStack CLI</span>
+                    </a>
+                    <a href="ba-skills.html" class="nav-item">
+                        <span class="icon">📋</span>
+<span class="nav-text" data-lang="fr">Skills BA</span><span class="nav-text" data-lang="en">BA Skills</span>
+                    </a>
+                    <a href="agents.html" class="nav-item">
+                        <span class="icon">🤖</span>
+<span class="nav-text" data-lang="fr">Agents</span><span class="nav-text" data-lang="en">Agents</span>
+                    </a>
+                    <a href="hooks.html" class="nav-item">
+                        <span class="icon">🔗</span>
+<span class="nav-text" data-lang="fr">Hooks</span><span class="nav-text" data-lang="en">Hooks</span>
+                    </a>
+                </div>
+            </nav>
+            </aside>
+            <main class="main-content">
+                <div class="content content-wide">
+<nav class="breadcrumb">
+    <span class="breadcrumb-item"><span data-lang="fr">Workflows</span><span data-lang="en">Workflows</span></span>
+    <span class="breadcrumb-sep">›</span>
+    <span class="breadcrumb-item current">BA Develop</span>
+</nav>
+<h1><span data-lang="fr"><code>/ba-develop</code> — Du PRD au code</span><span data-lang="en"><code>/ba-develop</code> — From PRD to code</span></h1>
+<p><span data-lang="fr">Une fois qu&#39;une PRD a passé l&#39;audit (score GO ≥ 80), <code>/ba-develop</code> orchestre 4 phases séquentielles pour générer le code complet d&#39;un module. <strong>C&#39;est la dernière commande que vous tapez</strong> : à sa sortie, le module est compilé, testé, et fonctionnel — aucune action manuelle requise derrière.</span>
+<span data-lang="en">Once a PRD passes audit (GO score ≥ 80), <code>/ba-develop</code> orchestrates 4 sequential phases to generate the full module code. <strong>It is the last command you type</strong>: when it returns, the module compiles, passes tests, and is functional — no manual action required afterwards.</span></p>
+<h2><span data-lang="fr">Vue d&#39;ensemble du pipeline</span><span data-lang="en">Pipeline at a glance</span></h2>
+<p><span data-lang="fr">4 phases séquentielles, chacune isolée dans son propre subagent, séparées par des <strong>gates bloquants</strong> qui interdisent toute progression sur un drift détecté. Les deux audits symétriques (<code>audit-dev-api</code> en sortie de Phase 2 et <code>audit-dev-frontend</code> en sortie de Phase 3) verrouillent l&#39;alignement entre le pagespec (source de vérité métier) et le code généré.</span>
+<span data-lang="en">4 sequential phases, each isolated in its own subagent, separated by <strong>blocking gates</strong> that forbid progression on any detected drift. The two symmetric audits (<code>audit-dev-api</code> exiting Phase 2 and <code>audit-dev-frontend</code> exiting Phase 3) lock the alignment between the pagespec (business source of truth) and the generated code.</span></p>
+<div class="svg-diagram">
+<svg viewBox="0 0 820 320" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ba-develop pipeline overview">
+  <defs>
+    <marker id="ba-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+      <path d="M0,0 L10,5 L0,10 z" fill="#475569"/>
+    </marker>
+    <marker id="ba-arrow-block" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+      <path d="M0,0 L10,5 L0,10 z" fill="#06b6d4"/>
+    </marker>
+  </defs>
+  <!-- Input -->
+  <rect x="10" y="120" width="120" height="60" rx="8" fill="#1e293b" stroke="#f97316" stroke-width="2"/>
+  <text x="70" y="148" text-anchor="middle" fill="#f97316" font-family="Inter,sans-serif" font-size="13" font-weight="600">PRD GO</text>
+  <text x="70" y="166" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="11">score ≥ 80</text>
+  <line x1="130" y1="150" x2="170" y2="150" stroke="#475569" stroke-width="2" marker-end="url(#ba-arrow)"/>
+  <!-- Phase 0 -->
+  <rect x="170" y="120" width="120" height="60" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
+  <text x="230" y="142" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="12" font-weight="600">Phase 0</text>
+  <text x="230" y="160" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="11">Core Seed</text>
+  <text x="230" y="174" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">nav · roles · perms</text>
+  <line x1="290" y1="150" x2="310" y2="150" stroke="#475569" stroke-width="2" marker-end="url(#ba-arrow)"/>
+  <!-- Phase 1 -->
+  <rect x="310" y="120" width="120" height="60" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
+  <text x="370" y="142" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="12" font-weight="600">Phase 1</text>
+  <text x="370" y="160" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="11">Domain + Data</text>
+  <text x="370" y="174" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">entities · EF · seed</text>
+  <line x1="430" y1="150" x2="450" y2="150" stroke="#475569" stroke-width="2" marker-end="url(#ba-arrow)"/>
+  <!-- Phase 2 -->
+  <rect x="450" y="120" width="120" height="60" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
+  <text x="510" y="142" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="12" font-weight="600">Phase 2</text>
+  <text x="510" y="160" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="11">Business + API</text>
+  <text x="510" y="174" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">CQRS · controllers</text>
+  <!-- Gate Phase 2 (down) -->
+  <line x1="510" y1="180" x2="510" y2="220" stroke="#06b6d4" stroke-width="2" marker-end="url(#ba-arrow-block)"/>
+  <rect x="430" y="220" width="160" height="50" rx="6" fill="#0f172a" stroke="#06b6d4" stroke-width="1.5"/>
+  <text x="510" y="240" text-anchor="middle" fill="#06b6d4" font-family="Inter,sans-serif" font-size="11" font-weight="600">Gate Phase 2</text>
+  <text x="510" y="256" text-anchor="middle" fill="#c8d0dc" font-family="Fira Code,monospace" font-size="10">audit-dev-api</text>
+  <text x="510" y="268" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">DEV-API-010 · 011</text>
+  <line x1="570" y1="150" x2="590" y2="150" stroke="#475569" stroke-width="2" marker-end="url(#ba-arrow)"/>
+  <!-- Phase 3 -->
+  <rect x="590" y="120" width="120" height="60" rx="8" fill="#1e293b" stroke="#6366f1" stroke-width="2"/>
+  <text x="650" y="142" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="12" font-weight="600">Phase 3</text>
+  <text x="650" y="160" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="11">Frontend</text>
+  <text x="650" y="174" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">pages · hooks · btns</text>
+  <!-- Gate Phase 3 (down) -->
+  <line x1="650" y1="180" x2="650" y2="220" stroke="#06b6d4" stroke-width="2" marker-end="url(#ba-arrow-block)"/>
+  <rect x="570" y="220" width="160" height="50" rx="6" fill="#0f172a" stroke="#06b6d4" stroke-width="1.5"/>
+  <text x="650" y="240" text-anchor="middle" fill="#06b6d4" font-family="Inter,sans-serif" font-size="11" font-weight="600">Gate Phase 3</text>
+  <text x="650" y="256" text-anchor="middle" fill="#c8d0dc" font-family="Fira Code,monospace" font-size="10">audit-dev-frontend</text>
+  <text x="650" y="268" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">DEV-UI-019 · 020 · 021</text>
+  <line x1="710" y1="150" x2="740" y2="150" stroke="#475569" stroke-width="2" marker-end="url(#ba-arrow)"/>
+  <!-- Output -->
+  <rect x="740" y="120" width="70" height="60" rx="8" fill="#1e293b" stroke="#22c55e" stroke-width="2"/>
+  <text x="775" y="148" text-anchor="middle" fill="#22c55e" font-family="Inter,sans-serif" font-size="12" font-weight="600">Module</text>
+  <text x="775" y="164" text-anchor="middle" fill="#22c55e" font-family="Inter,sans-serif" font-size="12" font-weight="600">ready</text>
+  <text x="775" y="180" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">200 OK</text>
+  <!-- Legend bar -->
+  <rect x="10" y="30" width="800" height="50" rx="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
+  <text x="30" y="50" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="11" font-weight="600">Symmetric blocking gates</text>
+  <text x="30" y="68" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">Every <tspan font-family="Fira Code,monospace" fill="#06b6d4">err</tspan> finding at a gate stops the pipeline with a precise message — no manual fix-up step is hidden after <tspan font-family="Fira Code,monospace" fill="#f97316">/ba-develop</tspan>.</text>
+  <circle cx="660" cy="50" r="6" fill="#6366f1"/>
+  <text x="675" y="54" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="10">Phase (subagent)</text>
+  <circle cx="660" cy="68" r="6" fill="#06b6d4"/>
+  <text x="675" y="72" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="10">Audit gate (CLI)</text>
+</svg>
+</div>
+<h2><span data-lang="fr">Détail des 4 phases</span><span data-lang="en">The 4 phases in detail</span></h2>
+<p><span data-lang="fr">Chaque phase est un subagent isolé qui reçoit UNE slice du PRD. Une porte (gate) vérifie compilation + tests + audit dédié avant d&#39;autoriser la phase suivante.</span>
+<span data-lang="en">Each phase runs as an isolated subagent that receives ONE PRD slice. A gate verifies compile + tests + dedicated audit before allowing the next phase to start.</span></p>
+<table>
+<thead>
+<tr>
+<th><span data-lang="fr">Phase</span><span data-lang="en">Phase</span></th>
+<th><span data-lang="fr">Nom</span><span data-lang="en">Name</span></th>
+<th><span data-lang="fr">Skills mobilisées</span><span data-lang="en">Mobilised skills</span></th>
+<th><span data-lang="fr">Sortie</span><span data-lang="en">Output</span></th>
+<th><span data-lang="fr">Gate</span><span data-lang="en">Gate</span></th>
+</tr>
+</thead>
+<tbody><tr>
+<td>0</td>
+<td><span data-lang="fr">Core Foundation Seed</span><span data-lang="en">Core Foundation Seed</span></td>
+<td><code>backend-core-seed</code></td>
+<td><span data-lang="fr">Navigation, rôles, permissions de l&#39;app</span><span data-lang="en">App navigation, roles, permissions</span></td>
+<td>build + tests</td>
+</tr>
+<tr>
+<td>1</td>
+<td><span data-lang="fr">Domain + Data</span><span data-lang="en">Domain + Data</span></td>
+<td><code>backend-data-layer</code>, <code>backend-seed-data</code></td>
+<td><span data-lang="fr">Entités, EF configs, migrations, seed</span><span data-lang="en">Entities, EF configs, migrations, seed</span></td>
+<td>build + tests</td>
+</tr>
+<tr>
+<td>2</td>
+<td><span data-lang="fr">Business + API</span><span data-lang="en">Business + API</span></td>
+<td><code>backend-business-layer</code>, <code>backend-controller</code></td>
+<td><span data-lang="fr">CQRS, validators, controllers RBAC, actions custom alignées sur le pagespec</span><span data-lang="en">CQRS, validators, RBAC controllers, custom actions aligned with the pagespec</span></td>
+<td>build + tests + <code>/audit-dev-api</code> (DEV-API-010/011)</td>
+</tr>
+<tr>
+<td>3</td>
+<td><span data-lang="fr">Frontend</span><span data-lang="en">Frontend</span></td>
+<td><code>scaffold-theme</code>, <code>scaffold-layout</code>, <code>frontend-component</code>, <code>frontend-api-client</code>, <code>frontend-auth</code></td>
+<td><span data-lang="fr">Pages, routes, API client, hooks d&#39;auth, boutons custom (kind:api → hook, kind:navigate → <code>navigate()</code>)</span><span data-lang="en">Pages, routes, API client, auth hooks, custom buttons (kind:api → hook, kind:navigate → <code>navigate()</code>)</span></td>
+<td>build + tests + <code>/audit-dev-frontend</code> (DEV-UI-019..021) + smoke-test</td>
+</tr>
+</tbody></table>
+<p><span data-lang="fr">À la sortie de la phase 3, le module est livré et fonctionnel (compilation + tests OK, smoke-test HTTP vert sur toutes les routes).</span>
+<span data-lang="en">At the end of phase 3, the module is delivered and functional (compile + tests OK, HTTP smoke-test green on all routes).</span></p>
+<h2><span data-lang="fr">Garanties</span><span data-lang="en">Guarantees</span></h2>
+<ul>
+<li><span data-lang="fr"><strong>Aucun stub</strong> : règles métier et use cases sont implémentés, pas laissés vides.</span><span data-lang="en"><strong>No stubs</strong>: business rules and use cases are implemented, not left empty.</span></li>
+<li><span data-lang="fr"><strong>FK réelles</strong> : <code>relations[]</code> du PRD se traduit en <code>HasForeignKey()</code> + navigation + <code>OnDelete</code>.</span><span data-lang="en"><strong>Real FKs</strong>: PRD <code>relations[]</code> map to <code>HasForeignKey()</code> + navigation + <code>OnDelete</code>.</span></li>
+<li><span data-lang="fr"><strong>Phase 0 déterministe</strong> : la navigation + les rôles + les permissions sont écrites en un seul shot.</span><span data-lang="en"><strong>Deterministic Phase 0</strong>: navigation + roles + permissions are written in a single shot.</span></li>
+<li><span data-lang="fr"><strong>Gates entre phases</strong> : compile + tests + coverage avant de passer à la suivante.</span><span data-lang="en"><strong>Gates between phases</strong>: compile + tests + coverage before moving to the next.</span></li>
+</ul>
+<h2><span data-lang="fr">Propagation des actions custom</span><span data-lang="en">Custom-action propagation</span></h2>
+<p><span data-lang="fr">Quand un pagespec déclare des actions au-delà des CRUD standard (par exemple <code>syncFromPce</code> kind:api ou <code>openHistory</code> kind:navigate), <code>/ba-develop</code> les propage <strong>verbatim</strong> à toutes les couches qui doivent les voir. Le champ <code>endpoint</code> du pagespec est l&#39;unique source de vérité — il est compilé sans transformation dans le route attribute du Controller et dans l&#39;URL axios du service.</span>
+<span data-lang="en">When a pagespec declares actions beyond the standard CRUD (e.g. <code>syncFromPce</code> kind:api or <code>openHistory</code> kind:navigate), <code>/ba-develop</code> propagates them <strong>verbatim</strong> to every layer that must see them. The pagespec&#39;s <code>endpoint</code> field is the single source of truth — it is compiled without transformation into the Controller route attribute and into the service&#39;s axios URL.</span></p>
+<div class="svg-diagram">
+<svg viewBox="0 0 820 420" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Custom action verbatim propagation">
+  <defs>
+    <marker id="ca-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+      <path d="M0,0 L10,5 L0,10 z" fill="#475569"/>
+    </marker>
+    <marker id="ca-arrow-ok" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+      <path d="M0,0 L10,5 L0,10 z" fill="#22c55e"/>
+    </marker>
+  </defs>
+  <!-- Source of truth -->
+  <rect x="220" y="20" width="380" height="80" rx="8" fill="#1e293b" stroke="#f97316" stroke-width="2"/>
+  <text x="410" y="45" text-anchor="middle" fill="#f97316" font-family="Inter,sans-serif" font-size="13" font-weight="600">pagespec.actions[]</text>
+  <text x="410" y="63" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="11">single source of truth (written by /ba-create-prd from screen.md)</text>
+  <rect x="240" y="72" width="340" height="20" rx="3" fill="#0d1117" stroke="#334155"/>
+  <text x="410" y="86" text-anchor="middle" fill="#06b6d4" font-family="Fira Code,monospace" font-size="11">endpoint: "sync-from-proconcept"  ·  httpMethod: POST  ·  kind: api</text>
+  <!-- Split -->
+  <line x1="320" y1="100" x2="170" y2="155" stroke="#475569" stroke-width="2" marker-end="url(#ca-arrow)"/>
+  <line x1="500" y1="100" x2="650" y2="155" stroke="#475569" stroke-width="2" marker-end="url(#ca-arrow)"/>
+  <text x="220" y="125" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10" font-style="italic">kind: api → 2 sides</text>
+  <text x="560" y="125" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10" font-style="italic">kind: api → 2 sides</text>
+  <!-- Backend column -->
+  <rect x="40" y="160" width="260" height="80" rx="8" fill="#0f172a" stroke="#6366f1" stroke-width="1.5"/>
+  <text x="170" y="180" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="12" font-weight="600">Phase 2 — Backend (C#)</text>
+  <rect x="55" y="190" width="230" height="20" rx="3" fill="#0d1117" stroke="#334155"/>
+  <text x="170" y="204" text-anchor="middle" fill="#22c55e" font-family="Fira Code,monospace" font-size="10">[HttpPost("sync-from-proconcept")]</text>
+  <text x="170" y="226" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="10">Controller method + Business service stub</text>
+  <!-- Frontend column -->
+  <rect x="520" y="160" width="260" height="80" rx="8" fill="#0f172a" stroke="#6366f1" stroke-width="1.5"/>
+  <text x="650" y="180" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="12" font-weight="600">Phase 3 — Frontend (TS)</text>
+  <rect x="535" y="190" width="230" height="20" rx="3" fill="#0d1117" stroke="#334155"/>
+  <text x="650" y="204" text-anchor="middle" fill="#22c55e" font-family="Fira Code,monospace" font-size="10">apiClient.post(".../sync-from-proconcept")</text>
+  <text x="650" y="226" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="10">service.ts method + useMutation hook + button</text>
+  <!-- Gate 2 -->
+  <line x1="170" y1="240" x2="170" y2="275" stroke="#06b6d4" stroke-width="2" marker-end="url(#ca-arrow-ok)"/>
+  <rect x="80" y="275" width="180" height="40" rx="6" fill="#0f172a" stroke="#06b6d4" stroke-width="1.5"/>
+  <text x="170" y="290" text-anchor="middle" fill="#06b6d4" font-family="Inter,sans-serif" font-size="11" font-weight="600">audit-dev-api</text>
+  <text x="170" y="305" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">DEV-API-010 / 011</text>
+  <!-- Gate 3 -->
+  <line x1="650" y1="240" x2="650" y2="275" stroke="#06b6d4" stroke-width="2" marker-end="url(#ca-arrow-ok)"/>
+  <rect x="560" y="275" width="180" height="40" rx="6" fill="#0f172a" stroke="#06b6d4" stroke-width="1.5"/>
+  <text x="650" y="290" text-anchor="middle" fill="#06b6d4" font-family="Inter,sans-serif" font-size="11" font-weight="600">audit-dev-frontend</text>
+  <text x="650" y="305" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">DEV-UI-019 / 020 / 021</text>
+  <!-- Navigate branch -->
+  <line x1="410" y1="100" x2="410" y2="335" stroke="#475569" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#ca-arrow)"/>
+  <text x="425" y="220" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10" font-style="italic">kind: navigate</text>
+  <text x="425" y="234" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10" font-style="italic">→ frontend only</text>
+  <rect x="290" y="335" width="240" height="60" rx="8" fill="#0f172a" stroke="#eab308" stroke-width="1.5"/>
+  <text x="410" y="355" text-anchor="middle" fill="#eab308" font-family="Inter,sans-serif" font-size="12" font-weight="600">navigate(targetRoute)</text>
+  <text x="410" y="372" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="10">no axios · no hook · no Controller</text>
+  <text x="410" y="386" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">router-only button (e.g. "Open detail")</text>
+</svg>
+</div>
+<table>
+<thead>
+<tr>
+<th><span data-lang="fr">Phase</span><span data-lang="en">Phase</span></th>
+<th><span data-lang="fr">Pour <code>kind: api</code></span><span data-lang="en">For <code>kind: api</code></span></th>
+<th><span data-lang="fr">Pour <code>kind: navigate</code></span><span data-lang="en">For <code>kind: navigate</code></span></th>
+</tr>
+</thead>
+<tbody><tr>
+<td>2 (Business)</td>
+<td><span data-lang="fr">Recette canonique ou stub <code>NotImplementedException</code> avec <code>// TODO[UC-…]</code></span><span data-lang="en">Canonical recipe or <code>NotImplementedException</code> stub with <code>// TODO[UC-…]</code></span></td>
+<td>—</td>
+</tr>
+<tr>
+<td>2 (Controller)</td>
+<td><code>[HttpVerb(&quot;&lt;endpoint&gt;&quot;)]</code> + <code>[RequirePermission(&quot;…&quot;)]</code></td>
+<td>—</td>
+</tr>
+<tr>
+<td>3 (Service.ts)</td>
+<td><code>apiClient.&lt;verb&gt;(&#39;/api/.../&lt;endpoint&gt;&#39;)</code> + <span data-lang="fr">hook React Query</span><span data-lang="en">React Query hook</span></td>
+<td>—</td>
+</tr>
+<tr>
+<td>3 (Bouton)</td>
+<td><span data-lang="fr">Importe le hook + appelle <code>.mutate()</code> au clic</span><span data-lang="en">Imports the hook + calls <code>.mutate()</code> on click</span></td>
+<td><span data-lang="fr">Importe <code>useNavigate</code> + appelle <code>navigate(targetRoute)</code>. <strong>Aucun hook, aucun appel axios.</strong></span><span data-lang="en">Imports <code>useNavigate</code> + calls <code>navigate(targetRoute)</code>. <strong>No hook, no axios call.</strong></span></td>
+</tr>
+<tr>
+<td><span data-lang="fr">Gate Phase 2</span><span data-lang="en">Phase 2 gate</span></td>
+<td><span data-lang="fr">Cross-check : chaque <code>kind:api</code> du pagespec doit avoir un <code>[HttpVerb("&lt;endpoint&gt;")]</code> matching côté Controller, sinon la phase échoue.</span><span data-lang="en">Cross-check: every pagespec <code>kind:api</code> action must have a matching <code>[HttpVerb("&lt;endpoint&gt;")]</code> on the Controller, otherwise the phase fails.</span></td>
+<td></td>
+</tr>
+</tbody></table>
+<p><span data-lang="fr">Les audits dev <strong>symétriques</strong> verrouillent l&#39;alignement après génération :</span>
+<span data-lang="en">The <strong>symmetric</strong> dev audits lock the alignment after generation:</span></p>
+<table>
+<thead>
+<tr>
+<th><span data-lang="fr">Phase</span><span data-lang="en">Phase</span></th>
+<th><span data-lang="fr">Audit exécuté automatiquement</span><span data-lang="en">Audit invoked automatically</span></th>
+<th><span data-lang="fr">Règles bloquantes</span><span data-lang="en">Blocking rules</span></th>
+</tr>
+</thead>
+<tbody><tr>
+<td>2 (Backend)</td>
+<td><code>audit-dev-api --mode audit</code></td>
+<td>DEV-API-010 (pagespec → controller), DEV-API-011 (warn)</td>
+</tr>
+<tr>
+<td>3 (Frontend)</td>
+<td><code>audit-dev-frontend --mode audit</code></td>
+<td>DEV-UI-019 / DEV-UI-020 / DEV-UI-021</td>
+</tr>
+</tbody></table>
+<p><span data-lang="fr"><strong>Garantie de fin de pipeline</strong> — un drift entre pagespec et Controller (cas classique Gesa : <code>POST /sync-from-pce</code> côté frontend, <code>[HttpPost("sync-from-proconcept")]</code> côté backend → 405 garanti) est <strong>bloqué au gate</strong> avant Phase 3, avec un message précis (« Controller manquant pour action <code>&lt;endpoint&gt;</code> du pagespec <code>&lt;file&gt;</code> »). <strong>Aucune commande utilisateur n&#39;est requise après <code>/ba-develop</code></strong> — quand la commande retourne avec succès, le module est 100 % opérationnel.</span>
+<span data-lang="en"><strong>End-of-pipeline guarantee</strong> — any drift between pagespec and Controller (classic Gesa case: <code>POST /sync-from-pce</code> on the frontend, <code>[HttpPost("sync-from-proconcept")]</code> on the backend → guaranteed 405) is <strong>blocked at the gate</strong> before Phase 3, with a precise message (&quot;Controller missing for action <code>&lt;endpoint&gt;</code> from pagespec <code>&lt;file&gt;</code>&quot;). <strong>No user command is required after <code>/ba-develop</code></strong> — when the command returns successfully, the module is 100 % operational.</span></p>
+<h2><span data-lang="fr">Trois niveaux d&#39;orchestration</span><span data-lang="en">Three orchestration levels</span></h2>
+<p><span data-lang="fr">Selon la portée du travail, trois entrées sont disponibles. Elles partagent toutes le même moteur (les 4 phases ci-dessus) mais varient en cardinalité.</span>
+<span data-lang="en">Depending on the scope of work, three entry points are available. They all share the same engine (the 4 phases above) but vary in cardinality.</span></p>
+<table>
+<thead>
+<tr>
+<th><span data-lang="fr">Portée</span><span data-lang="en">Scope</span></th>
+<th><span data-lang="fr">Skill</span><span data-lang="en">Skill</span></th>
+<th><span data-lang="fr">Lit</span><span data-lang="en">Reads</span></th>
+<th><span data-lang="fr">Effet</span><span data-lang="en">Effect</span></th>
+</tr>
+</thead>
+<tbody><tr>
+<td>1 <span data-lang="fr">module</span><span data-lang="en">module</span></td>
+<td><code>/ba-develop &lt;APP&gt;/&lt;MODULE&gt;</code></td>
+<td><code>prd.md</code> + slices + <code>pagespecs/*.md</code></td>
+<td><span data-lang="fr">4 phases séquentielles sur ce module</span><span data-lang="en">4 sequential phases on that module</span></td>
+</tr>
+<tr>
+<td>1+ <span data-lang="fr">applications</span><span data-lang="en">applications</span></td>
+<td><code>/ba-create-plan-development &lt;APP1&gt; [APP2]…</code></td>
+<td><code>entité.md</code> <span data-lang="fr">des apps</span><span data-lang="en">of the apps</span></td>
+<td><span data-lang="fr">Construit le graphe FK cross-module + tri topologique → <code>dev-plan.md</code></span><span data-lang="en">Builds cross-module FK graph + topological sort → <code>dev-plan.md</code></span></td>
+</tr>
+<tr>
+<td><span data-lang="fr">Exécution du plan</span><span data-lang="en">Plan execution</span></td>
+<td><code>/ba-develop-plan [--waves 1,2]</code></td>
+<td><code>dev-plan.json</code></td>
+<td><span data-lang="fr">Lance une vague à la fois ; dans chaque vague, un <code>/ba-develop</code> par module en parallèle ; gate entre vagues</span><span data-lang="en">Runs one wave at a time; within a wave, one <code>/ba-develop</code> per module in parallel; gate between waves</span></td>
+</tr>
+</tbody></table>
+<h3><span data-lang="fr">Cycle multi-module — comment ça marche</span><span data-lang="en">Multi-module cycle — how it works</span></h3>
+<p><span data-lang="fr">Le multi-module fonctionne en deux temps :</span>
+<span data-lang="en">Multi-module works in two steps:</span></p>
+<ol>
+<li><span data-lang="fr"><strong>Génération du plan</strong> : <code>/ba-create-plan-development APP_A APP_B</code> lit chaque <code>entité.md</code>, détecte les FK cross-module, trie les modules par dépendance en <strong>vagues parallélisables</strong>, et écrit <code>dev-plan.json</code>.</span><span data-lang="en"><strong>Plan generation</strong>: <code>/ba-create-plan-development APP_A APP_B</code> reads every <code>entité.md</code>, detects cross-module FKs, sorts modules by dependency into <strong>parallelisable waves</strong>, and writes <code>dev-plan.json</code>.</span></li>
+<li><span data-lang="fr"><strong>Exécution du plan</strong> : <code>/ba-develop-plan</code> traite une vague à la fois. Dans chaque vague, il lance un subagent <code>/ba-develop</code> par module en parallèle ; une fois les N modules terminés, un gate compile + tests sur l&#39;ensemble doit passer avant la vague suivante.</span><span data-lang="en"><strong>Plan execution</strong>: <code>/ba-develop-plan</code> processes one wave at a time. Within each wave it launches one <code>/ba-develop</code> subagent per module in parallel; once the N modules complete, a compile + tests gate over the whole set must pass before the next wave starts.</span></li>
+</ol>
+<p><span data-lang="fr">Exemple : un plan à 3 vagues sur 2 applications.</span>
+<span data-lang="en">Example: a 3-wave plan over 2 applications.</span></p>
+<div class="svg-diagram">
+<svg viewBox="0 0 820 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Multi-module waves execution">
+  <defs>
+    <marker id="w-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+      <path d="M0,0 L10,5 L0,10 z" fill="#475569"/>
+    </marker>
+    <marker id="w-arrow-gate" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+      <path d="M0,0 L10,5 L0,10 z" fill="#06b6d4"/>
+    </marker>
+  </defs>
+  <!-- Wave 1 column -->
+  <text x="120" y="30" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="13" font-weight="600">Wave 1</text>
+  <text x="120" y="46" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">3 modules in parallel</text>
+  <rect x="20" y="60" width="200" height="40" rx="6" fill="#1e293b" stroke="#6366f1"/>
+  <text x="120" y="78" text-anchor="middle" fill="#c8d0dc" font-family="Fira Code,monospace" font-size="11">APP_A/Module_A1</text>
+  <text x="120" y="92" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">/ba-develop subagent</text>
+  <rect x="20" y="110" width="200" height="40" rx="6" fill="#1e293b" stroke="#6366f1"/>
+  <text x="120" y="128" text-anchor="middle" fill="#c8d0dc" font-family="Fira Code,monospace" font-size="11">APP_A/Module_A2</text>
+  <text x="120" y="142" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">/ba-develop subagent</text>
+  <rect x="20" y="160" width="200" height="40" rx="6" fill="#1e293b" stroke="#6366f1"/>
+  <text x="120" y="178" text-anchor="middle" fill="#c8d0dc" font-family="Fira Code,monospace" font-size="11">APP_B/Module_B1</text>
+  <text x="120" y="192" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">/ba-develop subagent</text>
+  <!-- Wave 1 gate -->
+  <line x1="220" y1="130" x2="265" y2="130" stroke="#06b6d4" stroke-width="2" marker-end="url(#w-arrow-gate)"/>
+  <rect x="265" y="105" width="60" height="50" rx="6" fill="#0f172a" stroke="#06b6d4"/>
+  <text x="295" y="125" text-anchor="middle" fill="#06b6d4" font-family="Inter,sans-serif" font-size="10" font-weight="600">Gate</text>
+  <text x="295" y="140" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="9">compile</text>
+  <text x="295" y="152" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="9">tests</text>
+  <line x1="325" y1="130" x2="370" y2="130" stroke="#06b6d4" stroke-width="2" marker-end="url(#w-arrow-gate)"/>
+  <!-- Wave 2 column -->
+  <text x="470" y="30" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="13" font-weight="600">Wave 2</text>
+  <text x="470" y="46" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">2 modules in parallel</text>
+  <rect x="370" y="85" width="200" height="40" rx="6" fill="#1e293b" stroke="#6366f1"/>
+  <text x="470" y="103" text-anchor="middle" fill="#c8d0dc" font-family="Fira Code,monospace" font-size="11">APP_A/Module_A3</text>
+  <text x="470" y="117" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">depends on A1</text>
+  <rect x="370" y="135" width="200" height="40" rx="6" fill="#1e293b" stroke="#6366f1"/>
+  <text x="470" y="153" text-anchor="middle" fill="#c8d0dc" font-family="Fira Code,monospace" font-size="11">APP_B/Module_B2</text>
+  <text x="470" y="167" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">depends on A2, B1</text>
+  <!-- Wave 2 gate -->
+  <line x1="570" y1="130" x2="615" y2="130" stroke="#06b6d4" stroke-width="2" marker-end="url(#w-arrow-gate)"/>
+  <rect x="615" y="105" width="60" height="50" rx="6" fill="#0f172a" stroke="#06b6d4"/>
+  <text x="645" y="125" text-anchor="middle" fill="#06b6d4" font-family="Inter,sans-serif" font-size="10" font-weight="600">Gate</text>
+  <text x="645" y="140" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="9">compile</text>
+  <text x="645" y="152" text-anchor="middle" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="9">tests</text>
+  <line x1="675" y1="130" x2="720" y2="130" stroke="#06b6d4" stroke-width="2" marker-end="url(#w-arrow-gate)"/>
+  <!-- Wave 3 column -->
+  <text x="760" y="30" text-anchor="middle" fill="#818cf8" font-family="Inter,sans-serif" font-size="13" font-weight="600">Wave 3</text>
+  <text x="760" y="46" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="10">1 module</text>
+  <rect x="720" y="110" width="90" height="40" rx="6" fill="#1e293b" stroke="#6366f1"/>
+  <text x="765" y="128" text-anchor="middle" fill="#c8d0dc" font-family="Fira Code,monospace" font-size="11">B/B3</text>
+  <text x="765" y="142" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">depends on B2</text>
+  <!-- Final output -->
+  <line x1="765" y1="150" x2="765" y2="180" stroke="#22c55e" stroke-width="2" marker-end="url(#w-arrow)"/>
+  <rect x="690" y="180" width="150" height="40" rx="6" fill="#1e293b" stroke="#22c55e" stroke-width="2"/>
+  <text x="765" y="200" text-anchor="middle" fill="#22c55e" font-family="Inter,sans-serif" font-size="11" font-weight="600">Final smoke-test</text>
+  <text x="765" y="214" text-anchor="middle" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="9">all apps green</text>
+  <!-- Caption -->
+  <rect x="20" y="260" width="790" height="80" rx="6" fill="#0f172a" stroke="#334155"/>
+  <text x="40" y="282" fill="#c8d0dc" font-family="Inter,sans-serif" font-size="12" font-weight="600">Why waves?</text>
+  <text x="40" y="302" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="11">A module whose entity is referenced as a foreign key by another module must ship before its dependents.</text>
+  <text x="40" y="318" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="11">Waves encode that ordering (topological sort on the FK graph) while letting independent modules run in parallel.</text>
+  <text x="40" y="334" fill="#8a9bb0" font-family="Inter,sans-serif" font-size="11">A gate between waves verifies the whole set compiles and passes its tests before unlocking the next wave.</text>
+</svg>
+</div>
+<table>
+<thead>
+<tr>
+<th><span data-lang="fr">Vague</span><span data-lang="en">Wave</span></th>
+<th><span data-lang="fr">Modules développés en parallèle</span><span data-lang="en">Modules developed in parallel</span></th>
+<th><span data-lang="fr">Gate de sortie</span><span data-lang="en">Exit gate</span></th>
+</tr>
+</thead>
+<tbody><tr>
+<td>1</td>
+<td><code>APP_A/Module_A1</code>, <code>APP_A/Module_A2</code>, <code>APP_B/Module_B1</code></td>
+<td><span data-lang="fr">compile + tests des 3 modules</span><span data-lang="en">compile + tests of the 3 modules</span></td>
+</tr>
+<tr>
+<td>2</td>
+<td><code>APP_A/Module_A3</code>, <code>APP_B/Module_B2</code></td>
+<td><span data-lang="fr">compile + tests des 2 modules</span><span data-lang="en">compile + tests of the 2 modules</span></td>
+</tr>
+<tr>
+<td>3</td>
+<td><code>APP_B/Module_B3</code></td>
+<td><span data-lang="fr">smoke-test final</span><span data-lang="en">final smoke-test</span></td>
+</tr>
+</tbody></table>
+<p><span data-lang="fr"><strong>Pourquoi des vagues ?</strong> Un module qui possède une entité référencée comme FK par un autre module doit être livré avant ses dépendants. Les vagues encodent cet ordre tout en autorisant le maximum de parallélisme.</span>
+<span data-lang="en"><strong>Why waves?</strong> A module whose entity is referenced as an FK by another module must ship before its dependents. Waves encode that ordering while allowing maximum parallelism.</span></p>
+<h2><span data-lang="fr">Outil de remédiation — projets legacy</span><span data-lang="en">Remediation tool — legacy projects</span></h2>
+<p><span data-lang="fr">Pour les projets qui ont été développés <strong>avant</strong> la propagation typée des actions (custom actions en texte libre dans <code>screen.md</code>, drifts <code>pagespec / Controller / service.ts</code> accumulés), un CLI standalone cartographie les désalignements sans rien modifier par défaut :</span>
+<span data-lang="en">For projects developed <strong>before</strong> typed action propagation existed (free-text custom actions in <code>screen.md</code>, accumulated <code>pagespec / Controller / service.ts</code> drifts), a standalone CLI maps the misalignments without modifying anything by default:</span></p>
+<pre><code class="language-pwsh">npx tsx templates/skills/development/audit-dev-frontend/cli/audit-dev-actions-alignment/index.ts `
+  --project-path &quot;&lt;chemin&gt;/web/&lt;app&gt;-web&quot; `
+  --backend-path &quot;&lt;chemin&gt;&quot; `
+  --module-path  &quot;&lt;chemin&gt;/.smartstack/ba/&lt;APP&gt;/&lt;MODULE&gt;&quot; `
+  --mode report-only
+</code></pre>
+<p><span data-lang="fr">Sortie : <code>_audit/actions-alignment.md</code> listant les drifts par catégorie (<code>ACTION-DRIFT-001..005</code>) avec, pour chaque drift, le pagespec / Controller / service concerné et la commande de correction. Le mode <code>--mode apply</code> existe (opt-in) avec <code>--source-of-truth pagespec|controller</code> pour choisir qui gagne — toujours à utiliser avec un commit propre derrière.</span>
+<span data-lang="en">Output: <code>_audit/actions-alignment.md</code> listing drifts per category (<code>ACTION-DRIFT-001..005</code>) with, for each, the affected pagespec / Controller / service and the fix command. The <code>--mode apply</code> mode exists (opt-in) with <code>--source-of-truth pagespec|controller</code> to choose who wins — always use it with a clean commit behind.</span></p>
+<p><span data-lang="fr"><strong>Quand l&#39;utiliser :</strong> on hérite d&#39;un projet ancien ; on observe un bug HTTP 405 / 404 sur un bouton ; on veut auditer un module avant de le migrer au format custom actions typé.</span>
+<span data-lang="en"><strong>When to use it:</strong> inheriting an old project; observing a 405 / 404 HTTP bug on a button; auditing a module before migrating it to typed custom actions.</span></p>
+<h2><span data-lang="fr">Skills orchestrées</span><span data-lang="en">Orchestrated skills</span></h2>
+<p><span data-lang="fr">La table ci-dessous liste toutes les skills mobilisées (planification, backend, frontend, audits, tests) :</span>
+<span data-lang="en">The table below lists every mobilised skill (planning, backend, frontend, audits, tests):</span></p>
+                <section class="skills-section">
+                    <h2 data-lang="fr">Skills orchestrées par <code>/ba-develop</code></h2>
+                    <h2 data-lang="en">Skills orchestrated by <code>/ba-develop</code></h2>
+                    <h3 id="phase-business-analyse">business-analyse <span class="skill-count">(1)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-ba-create-plan-development">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-plan-development</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Generates a phased development plan ordering modules by their cross-module data-model dependencies. Reads entité.md across selected applications, builds a dependency graph, topological-sorts into parallel development waves, and writes dev-plan.md. Invoke between the BA audit phase and /ba-develop.</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>&lt;APP1&gt; [APP2] …</code></div>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Bash</span>
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Glob</span>
+                        </div>
+                    </div>
+                    </div>
+                    <h3 id="phase-devapi">devApi <span class="skill-count">(1)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-audit-dev-api">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/audit-dev-api</code>
+                            <span class="skill-badge skill-badge-phase">devApi</span>
+                        </div>
+                        <p class="skill-description">Audit code generated by the API phase against the PRD slice — controllers, routes, HTTP actions, RBAC attributes, DTOs, integration tests</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-devcore">devCore <span class="skill-count">(1)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-audit-dev-core">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/audit-dev-core</code>
+                            <span class="skill-badge skill-badge-phase">devCore</span>
+                        </div>
+                        <p class="skill-description">Audit code generated by Phase 0 (Core Foundation Seed) — every PRD module must have nav + roles + permissions in the 5 Core providers, DI registration must be in place, and the providers must be deterministic (no hand-edits).</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-devdata">devData <span class="skill-count">(1)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-audit-dev-data">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/audit-dev-data</code>
+                            <span class="skill-badge skill-badge-phase">devData</span>
+                        </div>
+                        <p class="skill-description">Audit code generated by the Data phase against the PRD slice — migrations, seed providers, navigation/permissions coverage, FK constraints, drift detection</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-devdomain">devDomain <span class="skill-count">(1)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-audit-dev-domain">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/audit-dev-domain</code>
+                            <span class="skill-badge skill-badge-phase">devDomain</span>
+                        </div>
+                        <p class="skill-description">Audit code generated by the Domain phase against the PRD slice — entity files, FK pairing, naming, traceability, drift detection</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-development-audit">development/audit <span class="skill-count">(2)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-audit">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/audit</code>
+                            <span class="skill-badge skill-badge-phase">development/audit</span>
+                        </div>
+                        <p class="skill-description">Audit du code genere contre les conventions SmartStack (i18n, React, structure, routing dynamique, RBAC, securite)</p>
+                    </div>
+                    <div class="skill-card" id="skill-audit-routing-dynamic">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/audit-routing-dynamic</code>
+                            <span class="skill-badge skill-badge-phase">development/audit</span>
+                        </div>
+                        <p class="skill-description">Audit READ-ONLY des skills de developpement SmartStack pour verifier leur conformite a l&#x27;architecture de routing dynamique DB-driven (PageRegistry + componentRegistry + DynamicRouter). Produit un rapport textuel sans modifier aucun skill.</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-development-backend">development/backend <span class="skill-count">(6)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-backend-business-layer">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/backend-business-layer</code>
+                            <span class="skill-badge skill-badge-phase">development/backend</span>
+                        </div>
+                        <p class="skill-description">Generates full CQRS stack — Commands, Queries, Handlers, DTOs, Validators, Service interface + implementation — on SmartStack NuGet abstractions (ICoreDbContext, MediatR, FluentValidation).</p>
+                    </div>
+                    <div class="skill-card" id="skill-backend-controller">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/backend-controller</code>
+                            <span class="skill-badge skill-badge-phase">development/backend</span>
+                        </div>
+                        <p class="skill-description">Generates API controllers with NavRoute, RequirePermission, auto-mapped DTO → Command conversions, and module-scoped permission classes, consuming NuGet packages (SmartStack.Core, SmartStack.Api, MediatR).</p>
+                    </div>
+                    <div class="skill-card" id="skill-backend-core-seed">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/backend-core-seed</code>
+                            <span class="skill-badge skill-badge-phase">development/backend</span>
+                        </div>
+                        <p class="skill-description">Phase 0 of /ba-develop — generates one Core Foundation Seed bundle per declared application (5 IClientSeedDataProvider classes per app covering navigation + roles + permissions + role-permission mappings + dev test users) by invoking the deterministic &#x60;scaffold-core-seed&#x60; CLI. Zero creative work for the agent: the spec is built by the Studio backend (&#x60;prepareCoreSeedContext&#x60;) from the BA menu / actors / permissions and dropped to a temp file before this skill runs.</p>
+                    </div>
+                    <div class="skill-card" id="skill-backend-data-layer">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/backend-data-layer</code>
+                            <span class="skill-badge skill-badge-phase">development/backend</span>
+                        </div>
+                        <p class="skill-description">Generates Domain entities with BaseEntity (SmartStack.Core.Domain NuGet), domain events, soft-delete, EF Core configurations with schema targeting, and migrations.</p>
+                    </div>
+                    <div class="skill-card" id="skill-backend-seed-data">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/backend-seed-data</code>
+                            <span class="skill-badge skill-badge-phase">development/backend</span>
+                        </div>
+                        <p class="skill-description">Generates module-scoped IClientSeedDataProvider implementations for reference data (lookup tables, enum codes) and per-module overrides. Cross-app navigation, roles, permissions, and role-permission mappings are NOT this skill&#x27;s job — they live in scaffold-core-seed (Phase 0). Output goes under Persistence/Seeding/Applications/{AppPascal}/Modules/{ModuleCode}/ to mirror the per-application module layout.</p>
+                    </div>
+                    <div class="skill-card" id="skill-dotnet-structure">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/dotnet-structure</code>
+                            <span class="skill-badge skill-badge-phase">development/backend</span>
+                        </div>
+                        <p class="skill-description">.NET Clean Architecture 4-layer SmartStack</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-development-debug">development/debug <span class="skill-count">(6)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-audit-bug">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/audit-bug</code>
+                            <span class="skill-badge skill-badge-phase">development/debug</span>
+                        </div>
+                        <p class="skill-description">Refine a user-reported bug — rephrase, classify, and cross-reference the code in the current worktree.</p>
+                    </div>
+                    <div class="skill-card" id="skill-debug">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/debug</code>
+                            <span class="skill-badge skill-badge-phase">development/debug</span>
+                        </div>
+                        <p class="skill-description">Diagnose and auto-fix SmartStack dev-runner issues (backend + frontend)</p>
+                    </div>
+                    <div class="skill-card" id="skill-debug-backend">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/debug-backend</code>
+                            <span class="skill-badge skill-badge-phase">development/debug</span>
+                        </div>
+                        <p class="skill-description">Diagnose and auto-fix SmartStack .NET backend failures</p>
+                    </div>
+                    <div class="skill-card" id="skill-debug-frontend">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/debug-frontend</code>
+                            <span class="skill-badge skill-badge-phase">development/debug</span>
+                        </div>
+                        <p class="skill-description">Diagnose and auto-fix SmartStack React+Vite frontend failures</p>
+                    </div>
+                    <div class="skill-card" id="skill-discuss-bug">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/discuss-bug</code>
+                            <span class="skill-badge skill-badge-phase">development/debug</span>
+                        </div>
+                        <p class="skill-description">Conversational triage on a tracked bug — answer the user, decide whether to reopen the fix or re-audit, never modify code directly.</p>
+                    </div>
+                    <div class="skill-card" id="skill-fix-bug">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/fix-bug</code>
+                            <span class="skill-badge skill-badge-phase">development/debug</span>
+                        </div>
+                        <p class="skill-description">Implement a fix for a user-reported bug — edit code, verify, commit atomically with a traceable message.</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-development-frontend">development/frontend <span class="skill-count">(7)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-frontend-api-client">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/frontend-api-client</code>
+                            <span class="skill-badge skill-badge-phase">development/frontend</span>
+                        </div>
+                        <p class="skill-description">Generates TypeScript service clients + React Query hooks using smartstackClient (shared axios instance from @atlashub/smartstack npm package) and direct REST paths (/api/{module}/{plural}).</p>
+                    </div>
+                    <div class="skill-card" id="skill-frontend-auth">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/frontend-auth</code>
+                            <span class="skill-badge skill-badge-phase">development/frontend</span>
+                        </div>
+                        <p class="skill-description">Scaffold the per-project useAuth hook + PermissionGuard component</p>
+                    </div>
+                    <div class="skill-card" id="skill-frontend-component">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/frontend-component</code>
+                            <span class="skill-badge skill-badge-phase">development/frontend</span>
+                        </div>
+                        <p class="skill-description">Generates React page components (list, detail, form) consuming @atlashub/smartstack npm package: PermissionGuard, Slot, SmartStackProvider. i18n keys are split per entity to prevent concurrent-generation overwrites.</p>
+                    </div>
+                    <div class="skill-card" id="skill-frontend-extension-config">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/frontend-extension-config</code>
+                            <span class="skill-badge skill-badge-phase">development/frontend</span>
+                        </div>
+                        <p class="skill-description">Generates ExtensionConfig (@atlashub/smartstack) with slot definitions that mirror the &lt;Slot name&#x3D;&quot;...&quot;&gt; calls emitted by frontend/component.</p>
+                    </div>
+                    <div class="skill-card" id="skill-frontend-routes">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/frontend-routes</code>
+                            <span class="skill-badge skill-badge-phase">development/frontend</span>
+                        </div>
+                        <p class="skill-description">Generates PageRegistry registrations for SmartStack&#x27;s DB-driven routing (DynamicRouter). Validates componentKey format before emission and fails loud on bad specs rather than producing silent-spinner registries.</p>
+                    </div>
+                    <div class="skill-card" id="skill-frontend-structure">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/frontend-structure</code>
+                            <span class="skill-badge skill-badge-phase">development/frontend</span>
+                        </div>
+                        <p class="skill-description">React + Vite + Tailwind + SmartStack frontend structure (npm consumer of @atlashub/smartstack)</p>
+                    </div>
+                    <div class="skill-card" id="skill-ui-polish">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ui-polish</code>
+                            <span class="skill-badge skill-badge-phase">development/frontend</span>
+                        </div>
+                        <p class="skill-description">Audits and auto-fixes React pages in a generated SmartStack frontend against the customisation-ui design system standards (CSS variable tokens, PageTemplate wrapper, DataTable/EntityCard components, lucide-react icons, semantic badges, permission keys, i18n namespaces). Produces a violation report (audit mode) or applies mechanical fixes (apply mode) based on tokens.json. Invoked after Phase 4 of ba-develop to guarantee visual consistency with the reference app.</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-development-run">development/run <span class="skill-count">(3)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-run">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/run</code>
+                            <span class="skill-badge skill-badge-phase">development/run</span>
+                        </div>
+                        <p class="skill-description">Kill orphans + launch backend + frontend, auto-retry on failure</p>
+                    </div>
+                    <div class="skill-card" id="skill-run-backend">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/run-backend</code>
+                            <span class="skill-badge skill-badge-phase">development/run</span>
+                        </div>
+                        <p class="skill-description">Kill stale .Api processes, launch dotnet run, verify /health — retry loop</p>
+                    </div>
+                    <div class="skill-card" id="skill-run-frontend">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/run-frontend</code>
+                            <span class="skill-badge skill-badge-phase">development/run</span>
+                        </div>
+                        <p class="skill-description">Kill stale Vite, npm run dev, verify /, retry loop</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-development-smoke-test">development/smoke-test <span class="skill-count">(1)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-smoke-test">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/smoke-test</code>
+                            <span class="skill-badge skill-badge-phase">development/smoke-test</span>
+                        </div>
+                        <p class="skill-description">Runtime smoke-test for a freshly-generated SmartStack.app project. Starts the backend (&#x60;dotnet run&#x60;) and the frontend (&#x60;npm run dev&#x60;) in the background, waits for both to become reachable, then probes every page route and every API endpoint scaffolded by the pipeline. Fails the run if ANY endpoint returns a 4xx/5xx status code or if any page is missing from disk. Designed to be the final gate of &#x60;ba-develop&#x60; so cross-stack drift surfaces in CI rather than at the user&#x27;s first manual &#x60;npm run dev&#x60;.</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-development-testing">development/testing <span class="skill-count">(3)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-development-testing-fix-build">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/development-testing-fix-build</code>
+                            <span class="skill-badge skill-badge-phase">development/testing</span>
+                        </div>
+                        <p class="skill-description">Auto-correct a SINGLE compilation error surfaced by the Studio&#x27;s Dev Runner (dotnet CS####, tsc TS####, vite resolve). The caller provides one &#x60;BuildError&#x60; with file/line/column/code/message. Your job is to apply the MINIMUM patch to make that specific error go away, without refactoring surrounding code. Invoked by &#x60;build-fix-runner.ts&#x60; in a retry loop (max 15 iterations, convergence guard, rebuild-and-reparse after each attempt).</p>
+                    </div>
+                    <div class="skill-card" id="skill-development-testing-ui-test">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/development-testing-ui-test</code>
+                            <span class="skill-badge skill-badge-phase">development/testing</span>
+                        </div>
+                        <p class="skill-description">Phase 5 UI tests — drives dev-browser to navigate every scaffolded page, submit forms with role-based seeded users, and auto-correct failures via the existing fix-bug skill loop (max 50 iterations per test). Runs after the frontend scaffolders complete (routes + component + api-client + extension-config) and verifies the full backend ↔ frontend round-trip.</p>
+                    </div>
+                    <div class="skill-card" id="skill-smoke-http">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/smoke-http</code>
+                            <span class="skill-badge skill-badge-phase">development/testing</span>
+                        </div>
+                        <p class="skill-description">HTTP smoke prober for generated SmartStack applications. Given a list of URLs (frontend routes + backend API endpoints), fetches each one, follows redirects, applies retry-on-startup, and returns a JSON report of 200/non-200 results. Invoked after Phase 4 of ba-develop to detect broken routes and missing API endpoints before the user ever sees a 404 in the browser.</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-devfrontend">devFrontend <span class="skill-count">(3)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-audit-dev-frontend">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/audit-dev-frontend</code>
+                            <span class="skill-badge skill-badge-phase">devFrontend</span>
+                        </div>
+                        <p class="skill-description">Audit code generated by the Frontend phase against the PRD slice — page coverage, registry wiring, lazy-import integrity, i18n namespaces, drift detection</p>
+                    </div>
+                    <div class="skill-card" id="skill-scaffold-layout">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/scaffold-layout</code>
+                            <span class="skill-badge skill-badge-phase">devFrontend</span>
+                        </div>
+                        <p class="skill-description">Scaffold the app-level layout shell (PageTemplate + AppShell) reading nav from /api/navigation/menu, honoring per-app branding via @customised marker.</p>
+                    </div>
+                    <div class="skill-card" id="skill-scaffold-theme">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/scaffold-theme</code>
+                            <span class="skill-badge skill-badge-phase">devFrontend</span>
+                        </div>
+                        <p class="skill-description">Bootstrap src/index.css with Tailwind v4 + Shoelace token overrides + design tokens from the PRD theme slice (or SmartStack defaults). Idempotent overwrite.</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-infrastructure">infrastructure <span class="skill-count">(2)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-ba-develop">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-develop</code>
+                            <span class="skill-badge skill-badge-phase">infrastructure</span>
+                        </div>
+                        <p class="skill-description">Consumes a module&#x27;s PRD on disk (&#x60;prd.md&#x60; + 3 phase slices + &#x60;pagespecs/*.md&#x60; under &#x60;.smartstack/ba/&lt;APP&gt;/&lt;MODULE&gt;/&#x60;) and drives development through 4 sequential phases (Core Foundation Seed → Entities → API → Frontend), each running as a subagent. Phase 0 is deterministic — the agent invokes scaffold-core-seed to write the per-app navigation + roles + permissions in one shot, eliminating the silent empty-module regression. Gates between phases verify compile + tests + per-module coverage before advancing. Invoked after &#x60;/ba-create-prd&#x60; + &#x60;/ba-audit-prd&#x60; (dev-ready GO, score ≥ 80).</p>
+                    </div>
+                    <div class="skill-card" id="skill-ba-develop-plan">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-develop-plan</code>
+                            <span class="skill-badge skill-badge-phase">infrastructure</span>
+                        </div>
+                        <p class="skill-description">Orchestrates multi-module development across applications by executing the phased plan from /ba-create-plan-development. Reads dev-plan.json, runs a preflight check, then drives wave-by-wave execution: for each wave, launches one /ba-develop subagent per module (parallel within a wave), gates between waves (compile + tests for all modules), and reports unified results.</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>[--waves 1,2]</code></div>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Agent</span>
+                            <span class="skill-tool-tag">Bash</span>
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">Skill</span>
+                        </div>
+                    </div>
+                    </div>
+                </section>
+                </div>
+            </main>
+        </div>
+    </div>
+    <script src="js/app.js"></script>
+</body>
+</html>