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/commands.html CHANGED Viewed

@@ -1,9 +1,14 @@
 <!DOCTYPE html>
+<!--
+  AUTO-GENERATED by scripts/generate-docs — do not edit by hand.
+  Edit docs-src/commands.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>Commandes - SmartStack CLI</title>
+    <title>Commandes Claude — toutes les skills - SmartStack CLI</title>
     <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
@@ -12,22 +17,9 @@
         <header class="global-header">
             <div class="logo">SS</div>
             <span class="site-title">SmartStack CLI</span>
-            <span class="version-badge">v4.32.0</span>
+            <span class="version-badge">v5.0.0</span>
             <div class="header-divider"></div>
-            <span class="page-title" data-lang="fr">Référence des commandes</span>
-            <span class="page-title" data-lang="en">Command Reference</span>
-            <nav class="breadcrumb">
-                <a href="index.html">
-                    <span data-lang="fr">Accueil</span>
-                    <span data-lang="en">Home</span>
-                </a>
-                <span class="breadcrumb-separator">&#8250;</span>
-                <span data-lang="fr">Outils</span>
-                <span data-lang="en">Tools</span>
-                <span class="breadcrumb-separator">&#8250;</span>
-                <span class="breadcrumb-current" data-lang="fr">Commandes</span>
-                <span class="breadcrumb-current" data-lang="en">Commands</span>
-            </nav>
+            <span class="page-title">Commandes Claude</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>
@@ -44,1414 +36,986 @@
             </div>
         </header>
-        <!-- App Body -->
         <div class="app-body">
             <!-- Sidebar -->
             <aside class="sidebar">
                 <button class="sidebar-toggle" title="Toggle sidebar">
-                    <span class="toggle-icon-collapse">&#171;</span>
-                    <span class="toggle-icon-expand">&#187;</span>
+                    <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">Demarrage</span>
-                        <span data-lang="en">Getting Started</span>
+<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">&#127968;</span>
-                        <span class="nav-text" data-lang="fr">Accueil</span>
-                        <span class="nav-text" data-lang="en">Home</span>
+                        <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">&#128230;</span>
-                        <span class="nav-text">Installation</span>
-                    </a>
-                    <a href="license.html" class="nav-item">
-                        <span class="icon">&#128274;</span>
-                        <span class="nav-text" data-lang="fr">Licence</span>
-                        <span class="nav-text" data-lang="en">License</span>
+                        <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">&#128640;</span>
-                        <span class="nav-text">Projet Client</span>
+                        <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">Workflows</div>
+                    <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">&#128256;</span>
-                        <span class="nav-text">GitFlow</span>
+                        <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">&#128452;</span>
-                        <span class="nav-text">EF Core</span>
+                        <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">&#128202;</span>
-                        <span class="nav-text">Business Analyse</span>
+                        <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="ralph-loop.html" class="nav-item">
-                        <span class="icon">&#128260;</span>
-                        <span class="nav-text">Ralph Loop</span>
+                    <a href="ba-develop.html" class="nav-item nav-item-child">
+                        <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="apex.html" class="nav-item">
-                        <span class="icon">&#9881;</span>
-                        <span class="nav-text">APEX</span>
+                    <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">Outils</span>
-                        <span data-lang="en">Tools</span>
+<span data-lang="fr">Annuaire</span><span data-lang="en">Directory</span>
                     </div>
+                    <a href="commands.html" class="nav-item active">
+                        <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">&#128187;</span>
-                        <span class="nav-text" data-lang="fr">CLI SmartStack</span>
-                        <span class="nav-text" data-lang="en">SmartStack CLI</span>
+                        <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="agents.html" class="nav-item">
-                        <span class="icon">&#129302;</span>
-                        <span class="nav-text">Agents</span>
+                    <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="commands.html" class="nav-item active">
-                        <span class="icon">&#9889;</span>
-                        <span class="nav-text" data-lang="fr">Commandes Claude</span>
-                        <span class="nav-text" data-lang="en">Claude Commands</span>
+                    <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">&#128279;</span>
-                        <span class="nav-text">Hooks</span>
-                    </a>
-                    <a href="test-web.html" class="nav-item">
-                        <span class="icon">&#127760;</span>
-                        <span class="nav-text">Test Web</span>
+                        <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 Content -->
             <main class="main-content">
                 <div class="content content-wide">
-                <!-- Project Guide -->
-                <section id="project-guide">
-                    <h2>
-                        <span data-lang="fr">Guide Projet : quoi utiliser et quand ?</span>
-                        <span data-lang="en">Project Guide: what to use and when?</span>
-                    </h2>
-                    <p style="margin-bottom: 1.5rem;">
-                        <span data-lang="fr">Choisissez votre situation pour decouvrir le parcours recommande.</span>
-                        <span data-lang="en">Choose your situation to discover the recommended path.</span>
-                    </p>
-                    <!-- Scenario 1: New Project -->
-                    <h3 id="scenario-new-project" style="margin-top: 2rem;">
-                        <span data-lang="fr">&#127968; Scenario 1 &mdash; Nouveau projet, partir de zero</span>
-                        <span data-lang="en">&#127968; Scenario 1 &mdash; New project, starting from scratch</span>
-                    </h3>
-                    <div class="alert alert-info" style="margin-bottom: 1rem;">
-                        <span class="alert-icon">&#128172;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><em>&laquo; On demarre un nouveau projet de gestion RH, je veux tout faire dans les regles. &raquo;</em></p>
-                            <p data-lang="en"><em>&laquo; We're starting a new HR management project, I want to do it by the book. &raquo;</em></p>
+<nav class="breadcrumb">
+    <span class="breadcrumb-item"><span data-lang="fr">Outils</span><span data-lang="en">Tools</span></span>
+    <span class="breadcrumb-sep">›</span>
+    <span class="breadcrumb-item current"><span data-lang="fr">Commandes Claude</span><span data-lang="en">Claude Commands</span></span>
+</nav>
+<h1><span data-lang="fr">Catalogue complet des skills</span><span data-lang="en">Complete skill catalogue</span></h1>
+<p><span data-lang="fr">SmartStack CLI déploie 84 skills dans <code><del>/.claude/skills/</code>, chacune invocable par Claude Code via <code>/&lt;nom&gt;</code>. La liste ci-dessous est générée automatiquement à partir du frontmatter <code>SKILL.md</code> de chaque skill — elle est donc toujours synchronisée avec ce qui est réellement déployé.</span>
+<span data-lang="en">SmartStack CLI deploys 84 skills to <code></del>/.claude/skills/</code>, each invocable from Claude Code via <code>/&lt;name&gt;</code>. The list below is auto-generated from each skill&#39;s <code>SKILL.md</code> frontmatter — always in sync with what is actually deployed.</span></p>
+<h2><span data-lang="fr">Comment lire les cartes</span><span data-lang="en">How to read the cards</span></h2>
+<ul>
+<li><span data-lang="fr"><strong><code>/slug</code></strong> : nom de la slash-command à taper dans Claude Code.</span><span data-lang="en"><strong><code>/slug</code></strong>: slash-command name to type in Claude Code.</span></li>
+<li><span data-lang="fr"><strong>Description</strong> : objectif principal (extrait du frontmatter <code>description:</code>).</span><span data-lang="en"><strong>Description</strong>: primary objective (extracted from <code>description:</code> frontmatter).</span></li>
+<li><span data-lang="fr"><strong>args</strong> : argument-hint indicatif quand la skill en attend.</span><span data-lang="en"><strong>args</strong>: argument hint when the skill expects parameters.</span></li>
+<li><span data-lang="fr"><strong>Tags d&#39;outils</strong> : <code>allowed-tools</code> qui contraignent l&#39;exécution.</span><span data-lang="en"><strong>Tool tags</strong>: <code>allowed-tools</code> that constrain execution.</span></li>
+</ul>
+                <section class="skills-section">
+                    <h2 data-lang="fr">Table complète des skills</h2>
+                    <h2 data-lang="en">Complete skill table</h2>
+                    <p data-lang="fr">Toutes les commandes <code>/&lt;nom&gt;</code> déployées par <code>ss install</code>, groupées par phase.</p>
+                    <p data-lang="en">All <code>/&lt;name&gt;</code> commands deployed by <code>ss install</code>, grouped by phase.</p>
+                    <h3 id="phase-business-analyse">business-analyse <span class="skill-count">(23)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-ba-audit-actors">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-actors</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the actors of a &#x60;.smartstack/ba/&#x60; project — existence, duplicate names (case-insensitive), missing type (ACT-001..006). Actors are PROJECT-scoped, so it reads every &#x60;&lt;APP&gt;/acteur.md&#x60; plus the menu tree, applies the rules, and writes a verdict to &#x60;_audit/actors.md&#x60; at the project root. Run after &#x60;/ba-create-actors&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <ol class="steps-list">
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/gitflow init</code> + <code>/gitflow -f my-project</code></h5>
-                                <p data-lang="fr">Initialiser le repository GitFlow et creer la branche feature.</p>
-                                <p data-lang="en">Initialize GitFlow repository and create the feature branch.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/business-analyse</code> <span class="badge badge-purple">steps 00-04</span></h5>
-                                <p data-lang="fr">Analyser le besoin : cadrage, structure App/Module/Section/Resource, specification par module, consolidation cross-module.</p>
-                                <p data-lang="en">Analyze requirements: framing, App/Module/Section/Resource structure, per-module specification, cross-module consolidation.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/ba-design-ui</code> &rarr; <code>/business-analyse-html</code> &rarr; <code>/ba-review</code></h5>
-                                <p data-lang="fr">Designer les ecrans, generer le livrable HTML interactif, iterer avec le client jusqu'a validation.</p>
-                                <p data-lang="en">Design screens, generate interactive HTML deliverable, iterate with client until validation.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/derive-prd</code></h5>
-                                <p data-lang="fr">Transformer la BA validee en PRD (Product Requirement Documents) pour le developpement.</p>
-                                <p data-lang="en">Transform validated BA into PRD (Product Requirement Documents) for development.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/ralph-loop</code></h5>
-                                <p data-lang="fr">Lancer la boucle de developpement autonome : lit les PRDs, orchestre les taches, genere tout le code (entites, migrations, API, frontend).</p>
-                                <p data-lang="en">Launch autonomous development loop: reads PRDs, orchestrates tasks, generates all code (entities, migrations, API, frontend).</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/validate-feature</code> + <code>/review-code</code></h5>
-                                <p data-lang="fr">Valider la compilation, les tests, le smoke test API. Puis revue de code securite/architecture.</p>
-                                <p data-lang="en">Validate compilation, tests, API smoke test. Then security/architecture code review.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/gitflow commit</code> &rarr; <code>/gitflow pr</code> &rarr; <code>/gitflow merge</code></h5>
-                                <p data-lang="fr">Commiter, creer la PR, merger apres review.</p>
-                                <p data-lang="en">Commit, create PR, merge after review.</p>
-                            </div>
-                        </li>
-                    </ol>
-                    <!-- Scenario 2: Add Feature to Existing -->
-                    <h3 id="scenario-add-feature" style="margin-top: 2rem;">
-                        <span data-lang="fr">&#9881; Scenario 2 &mdash; Ajouter une feature a un projet existant</span>
-                        <span data-lang="en">&#9881; Scenario 2 &mdash; Add a feature to an existing project</span>
-                    </h3>
-                    <div class="alert alert-info" style="margin-bottom: 1rem;">
-                        <span class="alert-icon">&#128172;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><em>&laquo; J'ai deja un module RH, je veux ajouter la gestion des absences. &raquo;</em></p>
-                            <p data-lang="en"><em>&laquo; I already have an HR module, I want to add absence management. &raquo;</em></p>
+                    <div class="skill-card" id="skill-ba-audit-cross-dimension">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-cross-dimension</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Cross-dimension coherence audit of one &#x60;.smartstack/ba/&#x60; module — verifies that data-model fields with state semantics have matching business rules, use cases and screens, that use-case actors exist in RBAC, and that screen entity refs resolve (XD-001..005). Reads the module&#x27;s &#x60;entité.md&#x60;, &#x60;règles-métier.md&#x60;, &#x60;use-case.md&#x60;, &#x60;rbac.md&#x60; and its section &#x60;screen.md&#x60; files together, writes a verdict to &#x60;_audit/cross-dimension.md&#x60;. Run after the per-dimension audits or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <ol class="steps-list">
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/gitflow -f add-absences</code></h5>
-                                <p data-lang="fr">Creer la branche feature dans un worktree isole.</p>
-                                <p data-lang="en">Create the feature branch in an isolated worktree.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/apex</code></h5>
-                                <p data-lang="fr">Developpement incremental : analyse le code existant, planifie les fichiers, genere couche par couche (domain, seed, backend, frontend, devdata).</p>
-                                <p data-lang="en">Incremental development: analyze existing code, plan files, generate layer by layer (domain, seed, backend, frontend, devdata).</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/validate-feature</code></h5>
-                                <p data-lang="fr">Verifier que tout compile, que les tests passent et que l'API repond.</p>
-                                <p data-lang="en">Verify compilation, passing tests, and API responses.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/gitflow commit</code> &rarr; <code>/gitflow pr</code></h5>
-                                <p data-lang="fr">Commiter et creer la PR.</p>
-                                <p data-lang="en">Commit and create the PR.</p>
-                            </div>
-                        </li>
-                    </ol>
-                    <!-- Scenario 3: Create a Complete Module -->
-                    <h3 id="scenario-new-module" style="margin-top: 2rem;">
-                        <span data-lang="fr">&#128230; Scenario 3 &mdash; Creer un module complet rapidement</span>
-                        <span data-lang="en">&#128230; Scenario 3 &mdash; Create a complete module quickly</span>
-                    </h3>
-                    <div class="alert alert-info" style="margin-bottom: 1rem;">
-                        <span class="alert-icon">&#128172;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><em>&laquo; Je connais deja le besoin, je veux generer le module Produits avec navigation, permissions, API et pages React. &raquo;</em></p>
-                            <p data-lang="en"><em>&laquo; I already know the requirements, I want to generate the Products module with navigation, permissions, API and React pages. &raquo;</em></p>
+                    <div class="skill-card" id="skill-ba-audit-cross-ref-code">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-cross-ref-code</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Cross-references the BA data model of a module against the EXISTING project code — detects entities that extend an existing class, reference a Core/existing entity as FK, or duplicate one (CODE-001..004). Reads the module&#x27;s &#x60;entité.md&#x60;, scans &#x60;src/*.Domain/**/*.cs&#x60;, writes a verdict to &#x60;_audit/cross-ref-code.md&#x60;. Run after &#x60;/ba-create-data-model&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">Bash</span>
                         </div>
                     </div>
-                    <ol class="steps-list">
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/application</code></h5>
-                                <p data-lang="fr">Genere tout le module full-stack : navigation, permissions, roles, entity, service, controller, DTOs, pages React, routes, migration, tests, i18n (4 langues).</p>
-                                <p data-lang="en">Generates the complete full-stack module: navigation, permissions, roles, entity, service, controller, DTOs, React pages, routes, migration, tests, i18n (4 languages).</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/efcore db-deploy</code></h5>
-                                <p data-lang="fr">Appliquer la migration generee en base de donnees.</p>
-                                <p data-lang="en">Apply the generated migration to the database.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/validate-feature</code></h5>
-                                <p data-lang="fr">Verifier que le module fonctionne de bout en bout.</p>
-                                <p data-lang="en">Verify the module works end-to-end.</p>
-                            </div>
-                        </li>
-                    </ol>
-                    <!-- Scenario 4: Fix a Bug -->
-                    <h3 id="scenario-debug" style="margin-top: 2rem;">
-                        <span data-lang="fr">&#128027; Scenario 4 &mdash; Corriger un bug</span>
-                        <span data-lang="en">&#128027; Scenario 4 &mdash; Fix a bug</span>
-                    </h3>
-                    <div class="alert alert-info" style="margin-bottom: 1rem;">
-                        <span class="alert-icon">&#128172;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><em>&laquo; L'API des commandes retourne une erreur 500 quand on filtre par date. &raquo;</em></p>
-                            <p data-lang="en"><em>&laquo; The orders API returns a 500 error when filtering by date. &raquo;</em></p>
+                    <div class="skill-card" id="skill-ba-audit-data-model">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-data-model</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the conceptual data model (MCD) of a &#x60;.smartstack/ba/&#x60; module — attributes, FK integrity, cycles, naming, orphans, traceability, indexes, implicit FKs, unreferenced lookups, classification conventions, code-pattern numbering (DM-001..017). Reads the module&#x27;s &#x60;entité.md&#x60; + &#x60;use-case.md&#x60; + &#x60;règles-métier.md&#x60;, writes a verdict to &#x60;&lt;MODULE&gt;/_audit/entité.md&#x60;. Run after &#x60;/ba-create-data-model&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <ol class="steps-list">
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/gitflow -h fix-order-filter</code></h5>
-                                <p data-lang="fr">Creer une branche hotfix (ou <code>-f</code> pour feature si non-urgent).</p>
-                                <p data-lang="en">Create a hotfix branch (or <code>-f</code> for feature if non-urgent).</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/debug</code></h5>
-                                <p data-lang="fr">Investigation systematique : analyse les logs, le code, les tests. Propose et applique le correctif.</p>
-                                <p data-lang="en">Systematic investigation: analyze logs, code, tests. Proposes and applies the fix.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/review-code</code></h5>
-                                <p data-lang="fr">Verifier que le fix n'introduit pas de regression ou de faille de securite.</p>
-                                <p data-lang="en">Verify the fix doesn't introduce regressions or security vulnerabilities.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/gitflow commit</code> &rarr; <code>/gitflow pr</code> &rarr; <code>/gitflow finish</code></h5>
-                                <p data-lang="fr">Commiter, PR, puis finaliser le hotfix (tag + merge dans main + develop).</p>
-                                <p data-lang="en">Commit, PR, then finalize the hotfix (tag + merge into main + develop).</p>
-                            </div>
-                        </li>
-                    </ol>
-                    <!-- Scenario 5: Release -->
-                    <h3 id="scenario-release" style="margin-top: 2rem;">
-                        <span data-lang="fr">&#128640; Scenario 5 &mdash; Preparer une release</span>
-                        <span data-lang="en">&#128640; Scenario 5 &mdash; Prepare a release</span>
-                    </h3>
-                    <div class="alert alert-info" style="margin-bottom: 1rem;">
-                        <span class="alert-icon">&#128172;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><em>&laquo; On est prets pour la v2.0.0, je veux tout valider et publier. &raquo;</em></p>
-                            <p data-lang="en"><em>&laquo; We're ready for v2.0.0, I want to validate everything and publish. &raquo;</em></p>
+                    <div class="skill-card" id="skill-ba-audit-menu">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-menu</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the menu (Application / Module) of a &#x60;.smartstack/ba/&#x60; project — module semantics, cross-app duplicates, SmartStack Core collisions, orphans/empty, out-of-scope coherence (MENU-001..005). Reads the tree, writes a verdict to &#x60;_audit/menu.md&#x60;. Run after &#x60;/ba-create-menu&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <ol class="steps-list">
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/gitflow -r 2.0.0</code></h5>
-                                <p data-lang="fr">Creer la branche release avec bump de version.</p>
-                                <p data-lang="en">Create the release branch with version bump.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/validate-feature</code> + <code>/review-code</code></h5>
-                                <p data-lang="fr">Validation complete et revue de securite avant release.</p>
-                                <p data-lang="en">Full validation and security review before release.</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/efcore squash</code></h5>
-                                <p data-lang="fr">Consolider les migrations de la feature en une seule migration propre (si necessaire).</p>
-                                <p data-lang="en">Consolidate feature migrations into a single clean migration (if needed).</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/gitflow finish</code></h5>
-                                <p data-lang="fr">Finaliser : merge dans main, tag, merge-back dans develop, cleanup.</p>
-                                <p data-lang="en">Finalize: merge into main, tag, merge-back into develop, cleanup.</p>
-                            </div>
-                        </li>
-                    </ol>
-                    <!-- Scenario 6: Database Operations -->
-                    <h3 id="scenario-database" style="margin-top: 2rem;">
-                        <span data-lang="fr">&#128452; Scenario 6 &mdash; Gerer la base de donnees</span>
-                        <span data-lang="en">&#128452; Scenario 6 &mdash; Manage the database</span>
-                    </h3>
-                    <div class="alert alert-info" style="margin-bottom: 1rem;">
-                        <span class="alert-icon">&#128172;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><em>&laquo; J'ai modifie une entite, je veux creer la migration et l'appliquer. &raquo;</em></p>
-                            <p data-lang="en"><em>&laquo; I modified an entity, I want to create the migration and apply it. &raquo;</em></p>
+                    <div class="skill-card" id="skill-ba-audit-prd">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-prd</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the on-disk PRD of ONE module in a &#x60;.smartstack/ba/&#x60; project — the largest audit (70 checks across 7 dimensions: structure, completeness, clarity, consistency, traceability, feasibility, slices + per-page contract + custom-action contract). Reads &#x60;prd.md&#x60;, the three &#x60;prd.*.md&#x60; slices and the &#x60;pagespecs/*.md&#x60; blocks against the upstream BA docs, then writes a verdict to &#x60;_audit/prd.md&#x60; carrying the dev-readiness gate (&#x60;GO|NO-GO&#x60;). GO is the gate &#x60;/ba-develop&#x60; reads. Run after &#x60;/ba-create-prd&#x60;.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <ol class="steps-list">
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/efcore migration</code></h5>
-                                <p data-lang="fr">Creer la migration avec nommage automatique via MCP (convention respectee).</p>
-                                <p data-lang="en">Create the migration with automatic naming via MCP (convention enforced).</p>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="step-content">
-                                <h5><code>/efcore db-deploy</code></h5>
-                                <p data-lang="fr">Appliquer les migrations en attente sur la base locale.</p>
-                                <p data-lang="en">Apply pending migrations to the local database.</p>
-                            </div>
-                        </li>
-                    </ol>
-                    <div class="alert alert-warning" style="margin-top: 0.5rem;">
-                        <span class="alert-icon">&#9888;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr">
-                                <strong>Conflits de migrations ?</strong> Utilisez <code>/efcore scan</code> pour detecter les conflits cross-branches, puis <code>/efcore rebase-snapshot</code> pour resynchroniser.
-                            </p>
-                            <p data-lang="en">
-                                <strong>Migration conflicts?</strong> Use <code>/efcore scan</code> to detect cross-branch conflicts, then <code>/efcore rebase-snapshot</code> to resync.
-                            </p>
+                    <div class="skill-card" id="skill-ba-audit-pre-dev">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-pre-dev</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Pre-development readiness orchestrator for a &#x60;.smartstack/ba/&#x60; project. Does NOT re-run any dimension&#x27;s rules — it reads the per-dimension verdicts already written under &#x60;_audit/*.md&#x60;, aggregates them across every module and the 8 dimensions, and writes a project-readiness summary with an overall GO / NO-GO. Run after the &#x60;/ba-audit-*&#x60; dimension audits, before &#x60;/ba-create-prd&#x60; + development.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <!-- Scenario 7: Run / Stop Application -->
-                    <h3 id="scenario-run-app" style="margin-top: 2rem;">
-                        <span data-lang="fr">&#9654; Scenario 7 &mdash; Lancer ou arreter l'application</span>
-                        <span data-lang="en">&#9654; Scenario 7 &mdash; Run or stop the application</span>
-                    </h3>
-                    <div class="alert alert-info" style="margin-bottom: 1rem;">
-                        <span class="alert-icon">&#128172;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><em>&laquo; Je veux lancer le backend et le frontend pour tester en local. &raquo;</em></p>
-                            <p data-lang="en"><em>&laquo; I want to launch the backend and frontend to test locally. &raquo;</em></p>
+                    <div class="skill-card" id="skill-ba-audit-rbac">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-rbac</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the RBAC permission matrix of a &#x60;.smartstack/ba/&#x60; module — minimum permissions, segregation of duties, actor coverage and reference integrity (RBAC-001..005). Reads the module &#x60;rbac.md&#x60;, the app &#x60;acteur.md&#x60; and the section &#x60;use-case.md&#x60;, writes a verdict to &#x60;_audit/rbac.md&#x60;. Run after &#x60;/ba-create-rbac&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/dev-start</code></td>
-                                    <td>
-                                        <span data-lang="fr">Lancer tout (backend + frontend). Idempotent : detecte les processus deja en cours.</span>
-                                        <span data-lang="en">Launch everything (backend + frontend). Idempotent: detects already-running processes.</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/dev-start --stop</code></td>
-                                    <td>
-                                        <span data-lang="fr">Arreter le backend et le frontend.</span>
-                                        <span data-lang="en">Stop backend and frontend.</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/dev-start --backend-only</code></td>
-                                    <td>
-                                        <span data-lang="fr">Lancer uniquement le backend (.NET).</span>
-                                        <span data-lang="en">Launch only the backend (.NET).</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/dev-start --frontend-only</code></td>
-                                    <td>
-                                        <span data-lang="fr">Lancer uniquement le frontend (Vite/React).</span>
-                                        <span data-lang="en">Launch only the frontend (Vite/React).</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/dev-start --reset</code></td>
-                                    <td>
-                                        <span data-lang="fr">Forcer le reset du mot de passe admin.</span>
-                                        <span data-lang="en">Force admin password reset.</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="skill-card" id="skill-ba-audit-rules">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-rules</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the business rules of a &#x60;.smartstack/ba/&#x60; module — completeness, conflicts, redundancy, example quality, entity/UC references, per-ruleType edge-case coverage (BR-001..010). Reads &#x60;règles-métier.md&#x60; plus the module&#x27;s &#x60;use-case.md&#x60; and &#x60;entité.md&#x60;, writes a verdict to &#x60;_audit/règles-métier.md&#x60;. Run after &#x60;/ba-create-business-rules&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                        </div>
                     </div>
-                    <div class="alert alert-success" style="margin-top: 0.5rem;">
-                        <span class="alert-icon">&#128161;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr">
-                                <code>/dev-start</code> detecte automatiquement le profil (<strong>Local</strong> ou <strong>Development</strong>), valide la coherence des ports entre backend et frontend, et affiche les credentials admin.
-                            </p>
-                            <p data-lang="en">
-                                <code>/dev-start</code> automatically detects the profile (<strong>Local</strong> or <strong>Development</strong>), validates port coherence between backend and frontend, and displays admin credentials.
-                            </p>
+                    <div class="skill-card" id="skill-ba-audit-screens">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-screens</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the screen specs of a &#x60;.smartstack/ba/&#x60; section — coverage, entity refs, SmartComponent coherence, navigation integrity, related-tabs, home-page hierarchy, UC traceability, custom-actions structure (SCR-001..013). Reads the section &#x60;screen.md&#x60; plus the module &#x60;entité.md&#x60;/&#x60;rbac.md&#x60; and the section &#x60;use-case.md&#x60;, writes a verdict to &#x60;_audit/screen.md&#x60;. Run after &#x60;/ba-create-screen&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <!-- Scenario 8: Understand Code -->
-                    <h3 id="scenario-understand" style="margin-top: 2rem;">
-                        <span data-lang="fr">&#128270; Scenario 8 &mdash; Comprendre le code existant</span>
-                        <span data-lang="en">&#128270; Scenario 8 &mdash; Understand existing code</span>
-                    </h3>
-                    <div class="alert alert-info" style="margin-bottom: 1rem;">
-                        <span class="alert-icon">&#128172;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><em>&laquo; Je debarque sur le projet, comment fonctionne le systeme de permissions ? &raquo;</em></p>
-                            <p data-lang="en"><em>&laquo; I'm new to the project, how does the permission system work? &raquo;</em></p>
+                    <div class="skill-card" id="skill-ba-audit-sections">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-sections</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the menu sections of a &#x60;.smartstack/ba/&#x60; project — module-section coverage, duplicate/ambiguous/empty sections, cross-module and cross-app duplication (SEC-001..006, XAPP-001..003). Reads the section nodes under a module, writes a verdict to &#x60;_audit/sections.md&#x60;. Run after &#x60;/ba-create-menu&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <div class="card-grid">
-                        <div class="card">
-                            <div class="card-header">
-                                <span class="card-icon">&#128269;</span>
-                                <h4 class="card-title"><code>/quick-search</code></h4>
-                            </div>
-                            <div class="card-body">
-                                <p data-lang="fr">Question simple, reponse rapide. <em>&laquo; Ou est defini le PermissionService ? &raquo;</em></p>
-                                <p data-lang="en">Simple question, fast answer. <em>&laquo; Where is PermissionService defined? &raquo;</em></p>
-                            </div>
-                        </div>
-                        <div class="card">
-                            <div class="card-header">
-                                <span class="card-icon">&#128300;</span>
-                                <h4 class="card-title"><code>/explore</code></h4>
-                            </div>
-                            <div class="card-body">
-                                <p data-lang="fr">Analyse approfondie d'un mecanisme. <em>&laquo; Comment fonctionne l'isolation multi-tenant ? &raquo;</em></p>
-                                <p data-lang="en">Deep analysis of a mechanism. <em>&laquo; How does multi-tenant isolation work? &raquo;</em></p>
-                            </div>
-                        </div>
-                        <div class="card">
-                            <div class="card-header">
-                                <span class="card-icon">&#128202;</span>
-                                <h4 class="card-title"><code>/documentation</code></h4>
-                            </div>
-                            <div class="card-body">
-                                <p data-lang="fr">Generer la doc technique d'un module existant (ERD, guides, schemas).</p>
-                                <p data-lang="en">Generate technical docs for an existing module (ERD, guides, schemas).</p>
-                            </div>
+                    <div class="skill-card" id="skill-ba-audit-use-cases">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-audit-use-cases</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Audits the use cases of a &#x60;.smartstack/ba/&#x60; module — completeness, step quality, vague language, scope respect, actor references, redundancy (UC-001..012). Reads the section &#x60;use-case.md&#x60; files + the app &#x60;acteur.md&#x60;, writes a verdict to &#x60;&lt;MODULE&gt;/_audit/use-case.md&#x60;. Run after &#x60;/ba-create-use-case&#x60; or as part of pre-dev readiness.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
                         </div>
                     </div>
-                    <!-- Decision Tree -->
-                    <h3 id="decision-tree" style="margin-top: 2.5rem;">
-                        <span data-lang="fr">&#127795; Arbre de decision rapide</span>
-                        <span data-lang="en">&#127795; Quick decision tree</span>
-                    </h3>
-                    <div class="code-block" style="margin-top: 1rem;">
-                        <button class="copy-btn">Copy</button>
-                        <pre><code data-lang="fr">Que voulez-vous faire ?
-│
-├─ Nouveau projet complet
-│  └─ /business-analyse → /ba-design-ui → /business-analyse-html
-│     → /ba-review → /derive-prd → /ralph-loop
-│
-├─ Ajouter une feature a un projet existant
-│  ├─ Feature simple (1 entite)  → /application
-│  ├─ Feature complexe (multi)   → /apex
-│  └─ Feature avec IA/notif/wf   → /apex (orchestre /ai-prompt, /notification, /workflow)
-│
-├─ Generer du code specifique
-│  ├─ API controller + DTOs      → /controller
-│  ├─ Composants React           → /ui-components
-│  ├─ Notifications              → /notification
-│  ├─ Workflows automatises      → /workflow
-│  └─ Integration IA             → /ai-prompt
-│
-├─ Base de donnees
-│  ├─ Creer une migration        → /efcore migration
-│  ├─ Appliquer les migrations   → /efcore db-deploy
-│  ├─ Reset complet              → /efcore db-reset
-│  └─ Conflits de migrations     → /efcore scan + /efcore rebase-snapshot
-│
-├─ Qualite et validation
-│  ├─ Valider une feature E2E    → /validate-feature
-│  ├─ Revue de code/securite     → /review-code
-│  ├─ Valider les conventions    → /validate
-│  └─ Refactoring                → /refactor
-│
-├─ Corriger un bug               → /debug
-│
-├─ Lancer / arreter l'app
-│  ├─ Tout lancer                → /dev-start
-│  ├─ Tout arreter              → /dev-start --stop
-│  ├─ Backend seul               → /dev-start --backend-only
-│  └─ Frontend seul              → /dev-start --frontend-only
-│
-├─ Comprendre le code
-│  ├─ Question rapide            → /quick-search
-│  └─ Analyse approfondie        → /explore
-│
-└─ Gestion des branches
-   ├─ Nouvelle feature           → /gitflow -f &lt;name&gt;
-   ├─ Release                    → /gitflow -r &lt;version&gt;
-   ├─ Hotfix                     → /gitflow -h &lt;name&gt;
-   ├─ Commit                     → /gitflow commit
-   ├─ Pull Request               → /gitflow pr
-   └─ Finaliser                  → /gitflow finish</code><code data-lang="en">What do you want to do?
-│
-├─ New complete project
-│  └─ /business-analyse → /ba-design-ui → /business-analyse-html
-│     → /ba-review → /derive-prd → /ralph-loop
-│
-├─ Add a feature to an existing project
-│  ├─ Simple feature (1 entity)  → /application
-│  ├─ Complex feature (multi)    → /apex
-│  └─ Feature with AI/notif/wf   → /apex (orchestrates /ai-prompt, /notification, /workflow)
-│
-├─ Generate specific code
-│  ├─ API controller + DTOs      → /controller
-│  ├─ React components           → /ui-components
-│  ├─ Notifications              → /notification
-│  ├─ Automated workflows        → /workflow
-│  └─ AI integration             → /ai-prompt
-│
-├─ Database
-│  ├─ Create a migration         → /efcore migration
-│  ├─ Apply migrations           → /efcore db-deploy
-│  ├─ Full reset                 → /efcore db-reset
-│  └─ Migration conflicts        → /efcore scan + /efcore rebase-snapshot
-│
-├─ Quality &amp; validation
-│  ├─ Validate feature E2E       → /validate-feature
-│  ├─ Code/security review       → /review-code
-│  ├─ Validate conventions       → /validate
-│  └─ Refactoring                → /refactor
-│
-├─ Fix a bug                     → /debug
-│
-├─ Run / stop the app
-│  ├─ Launch all                 → /dev-start
-│  ├─ Stop all                   → /dev-start --stop
-│  ├─ Backend only               → /dev-start --backend-only
-│  └─ Frontend only              → /dev-start --frontend-only
-│
-├─ Understand code
-│  ├─ Quick question             → /quick-search
-│  └─ Deep analysis              → /explore
-│
-└─ Branch management
-   ├─ New feature                → /gitflow -f &lt;name&gt;
-   ├─ Release                    → /gitflow -r &lt;version&gt;
-   ├─ Hotfix                     → /gitflow -h &lt;name&gt;
-   ├─ Commit                     → /gitflow commit
-   ├─ Pull Request               → /gitflow pr
-   └─ Finalize                   → /gitflow finish</code></pre>
+                    <div class="skill-card" id="skill-ba-create-actors">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-actors</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Phase 2 of business analysis. Defines the project&#x27;s actors (roles) that interact with the applications, and writes them to &#x60;acteur.md&#x60; at the Application level under &#x60;.smartstack/ba/&#x60;. Conversational: reads the menu tree and existing actors, proposes coverage per app, asks the user to validate, then writes the file. Run after the menu (&#x60;/ba-create-menu&#x60;), before use cases.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">AskUserQuestion</span>
+                        </div>
                     </div>
-                </section>
-                <hr style="border-color: var(--border); margin: 2.5rem 0;">
-                <!-- GitFlow Commands -->
-                <section id="gitflow">
-                    <h2>GitFlow Workflow</h2>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                    <th>Page</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/gitflow</code></td>
-                                    <td>
-                                        <span data-lang="fr">Orchestrateur principal GitFlow</span>
-                                        <span data-lang="en">Main GitFlow orchestrator</span>
-                                    </td>
-                                    <td><a href="gitflow.html">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow init</code></td>
-                                    <td>
-                                        <span data-lang="fr">Initialiser la structure GitFlow (bare clone + worktrees)</span>
-                                        <span data-lang="en">Initialize GitFlow structure (bare clone + worktrees)</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow start</code></td>
-                                    <td>
-                                        <span data-lang="fr">Demarrer une branche + worktree (feature/release/hotfix)</span>
-                                        <span data-lang="en">Start a branch + worktree (feature/release/hotfix)</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow commit</code></td>
-                                    <td>
-                                        <span data-lang="fr">Commit intelligent avec validation EF Core</span>
-                                        <span data-lang="en">Smart commit with EF Core validation</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow sync</code></td>
-                                    <td>
-                                        <span data-lang="fr">Synchroniser et rebaser avec le distant</span>
-                                        <span data-lang="en">Sync and rebase with remote</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow plan</code></td>
-                                    <td>
-                                        <span data-lang="fr">Creer un plan d'integration avec analyse EF Core</span>
-                                        <span data-lang="en">Create integration plan with EF Core analysis</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow pr</code></td>
-                                    <td>
-                                        <span data-lang="fr">Creer une Pull Request avec description automatique</span>
-                                        <span data-lang="en">Create Pull Request with auto-description</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow merge</code></td>
-                                    <td>
-                                        <span data-lang="fr">Merger la PR apres review</span>
-                                        <span data-lang="en">Merge PR after review</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow finish</code></td>
-                                    <td>
-                                        <span data-lang="fr">Finaliser une branche (tag + cleanup)</span>
-                                        <span data-lang="en">Finalize a branch (tag + cleanup)</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow status</code></td>
-                                    <td>
-                                        <span data-lang="fr">Afficher l'etat complet du repository</span>
-                                        <span data-lang="en">Show complete repository state</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow abort</code></td>
-                                    <td>
-                                        <span data-lang="fr">Rollback et recuperation</span>
-                                        <span data-lang="en">Rollback and recovery</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow cleanup</code></td>
-                                    <td>
-                                        <span data-lang="fr">Auditer et nettoyer les worktrees orphelins</span>
-                                        <span data-lang="en">Audit and clean orphan worktrees</span>
-                                    </td>
-                                    <td><a href="gitflow.html#commands">GitFlow</a></td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="skill-card" id="skill-ba-create-business-rules">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-business-rules</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Phase 4 of business analysis. Captures, classifies and elaborates structured business rules (with concrete valid + invalid examples) and writes them to &#x60;règles-métier.md&#x60; under &#x60;.smartstack/ba/&#x60;. Conversational: reads the menu tree, actors and use cases, proposes rules, asks the user to validate, then writes the file. Run after use cases (&#x60;/ba-create-use-case&#x60;), before RBAC.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">AskUserQuestion</span>
+                        </div>
                     </div>
-                    <div class="alert alert-info" style="margin-top: 1rem;">
-                        <span class="alert-icon">&#128161;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr">
-                                <strong>Mode auto</strong> : Sans <code>-a</code>, chaque commande execute UNIQUEMENT son etape puis s'arrete. Avec <code>-a</code>, toutes les etapes s'enchainent automatiquement.
-                            </p>
-                            <p data-lang="en">
-                                <strong>Auto mode</strong>: Without <code>-a</code>, each command executes ONLY its own step then stops. With <code>-a</code>, all steps chain automatically.
-                            </p>
+                    <div class="skill-card" id="skill-ba-create-data-model">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-data-model</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Phase 6 of business analysis. Builds the conceptual data model (MCD) of each business module — entities, attributes, computed formulas, relationships and indexes — and writes it to &#x60;entité.md&#x60; at the Module level under &#x60;.smartstack/ba/&#x60;. Conversational: reads the menu tree plus the module&#x27;s use cases and business rules, deduces the entities, asks the user to validate, then writes the file. Run after RBAC (&#x60;/ba-create-rbac&#x60;), before screens (&#x60;/ba-create-screen&#x60;).</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">AskUserQuestion</span>
                         </div>
                     </div>
-                </section>
-                <!-- Business Analyse Pipeline -->
-                <section id="business-analyse">
-                    <h2>
-                        <span data-lang="fr">Pipeline Business Analyse</span>
-                        <span data-lang="en">Business Analysis Pipeline</span>
-                    </h2>
-                    <h3>
-                        <span data-lang="fr">Phase 1 - Macro (Identification + Challenge)</span>
-                        <span data-lang="en">Phase 1 - Macro (Identification + Challenge)</span>
-                    </h3>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Modele</span>
-                                        <span data-lang="en">Model</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                    <th>Page</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr style="background: rgba(34, 197, 94, 0.1);">
-                                    <td><code>/business-analyse</code> (step 00)</td>
-                                    <td><span class="badge badge-green">Sonnet</span></td>
-                                    <td>
-                                        <span data-lang="fr">Initialisation : detection nouveau/existant, scan, creation index.json</span>
-                                        <span data-lang="en">Init: detect new/existing, scan, create index.json</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                                <tr style="background: rgba(139, 92, 246, 0.1);">
-                                    <td><code>/business-analyse</code> (step 01)</td>
-                                    <td><span class="badge badge-purple">Opus</span></td>
-                                    <td>
-                                        <span data-lang="fr">Cadrage : contexte, parties prenantes, perimetre, risques (~40 questions)</span>
-                                        <span data-lang="en">Framing: context, stakeholders, scope, risks (~40 questions)</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                                <tr style="background: rgba(139, 92, 246, 0.1);">
-                                    <td><code>/business-analyse</code> (step 02)</td>
-                                    <td><span class="badge badge-purple">Opus</span></td>
-                                    <td>
-                                        <span data-lang="fr">Structure : hierarchie App > Module > Section > Resource avec challenge</span>
-                                        <span data-lang="en">Structure: App > Module > Section > Resource hierarchy with challenge</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="skill-card" id="skill-ba-create-menu">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-menu</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Phase 1 of business analysis. Builds the Application → Module → Section → Resource menu hierarchy for a project as a folder tree of &#x60;index.md&#x60; files under &#x60;.smartstack/ba/&#x60;. Conversational: reads the current tree, proposes the next level, asks the user to validate, then writes the files. Run this first, before defining actors, use cases, rules, RBAC, data model, or screens.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">Bash</span>
+                            <span class="skill-tool-tag">AskUserQuestion</span>
+                        </div>
                     </div>
-                    <h3>
-                        <span data-lang="fr">Phase 2 - Specification (Deep dive + Consolidation)</span>
-                        <span data-lang="en">Phase 2 - Specification (Deep dive + Consolidation)</span>
-                    </h3>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Modele</span>
-                                        <span data-lang="en">Model</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                    <th>Page</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr style="background: rgba(139, 92, 246, 0.1);">
-                                    <td><code>/business-analyse</code> (step 03)</td>
-                                    <td><span class="badge badge-purple">Opus</span></td>
-                                    <td>
-                                        <span data-lang="fr">Specification : entites, regles metier, cas d'usage, permissions par module</span>
-                                        <span data-lang="en">Specification: entities, business rules, use cases, permissions per module</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                                <tr style="background: rgba(139, 92, 246, 0.1);">
-                                    <td><code>/business-analyse</code> (step 04)</td>
-                                    <td><span class="badge badge-purple">Opus</span></td>
-                                    <td>
-                                        <span data-lang="fr">Consolidation : validation cross-module, modele de donnees, coherence permissions</span>
-                                        <span data-lang="en">Consolidation: cross-module validation, data model, permission coherence</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <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>
-                    <h3>
-                        <span data-lang="fr">Post-BA : Design, HTML, Review, PRD</span>
-                        <span data-lang="en">Post-BA: Design, HTML, Review, PRD</span>
-                    </h3>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                    <th>Page</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/ba-design-ui</code></td>
-                                    <td>
-                                        <span data-lang="fr">Designer les interfaces (ecrans, wireframes, arbre de navigation)</span>
-                                        <span data-lang="en">Design interfaces (screens, wireframes, navigation tree)</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/business-analyse-html</code></td>
-                                    <td>
-                                        <span data-lang="fr">Generer le document HTML interactif (mockups, ERD, permissions)</span>
-                                        <span data-lang="en">Generate interactive HTML document (mockups, ERD, permissions)</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/ba-review</code></td>
-                                    <td>
-                                        <span data-lang="fr">Appliquer les corrections client et regenerer le HTML</span>
-                                        <span data-lang="en">Apply client corrections and regenerate HTML</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/derive-prd</code></td>
-                                    <td>
-                                        <span data-lang="fr">Transformer la BA consolidee en PRD pour /ralph-loop</span>
-                                        <span data-lang="en">Transform consolidated BA into PRD for /ralph-loop</span>
-                                    </td>
-                                    <td><a href="business-analyse.html">BA</a></td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="skill-card" id="skill-ba-create-prd">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-prd</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Synthesises the upstream BA &#x60;.md&#x60; tree of ONE module (menu, actors, use cases, business rules, RBAC, data model, screens) into a Product Requirements Document on disk: &#x60;prd.md&#x60; (framing + user stories), three phase slices, per-screen &#x60;pagespecs/*.md&#x60; (each carrying a machine spec block), and &#x60;claude.md&#x60;. The output drives development through &#x60;/ba-develop&#x60;. Run after the BA phases (and &#x60;/ba-audit-pre-dev&#x60; GO), before development.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                        </div>
                     </div>
-                    <div class="alert alert-info" style="margin-top: 1rem;">
-                        <span class="alert-icon">&#128161;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr">
-                                <strong>Pipeline complet</strong> : /business-analyse (steps 00-04) &rarr; /ba-design-ui &rarr; /business-analyse-html &rarr; /ba-review &rarr; /derive-prd &rarr; /ralph-loop
-                            </p>
-                            <p data-lang="en">
-                                <strong>Full pipeline</strong>: /business-analyse (steps 00-04) &rarr; /ba-design-ui &rarr; /business-analyse-html &rarr; /ba-review &rarr; /derive-prd &rarr; /ralph-loop
-                            </p>
+                    <div class="skill-card" id="skill-ba-create-rbac">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-rbac</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Phase 5 of business analysis. Defines the RBAC permission matrix (who can do what) for each module and writes it to &#x60;rbac.md&#x60; at the Module level under &#x60;.smartstack/ba/&#x60;. Conversational: reads the menu tree, actors, use cases and rules, proposes coverage per actor × action, asks the user to validate, then writes the file. Run after business rules (&#x60;/ba-create-business-rules&#x60;), before the data model (&#x60;/ba-create-data-model&#x60;).</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">AskUserQuestion</span>
                         </div>
                     </div>
-                </section>
-                <!-- Development Pipeline -->
-                <section id="development-pipeline">
-                    <h2>
-                        <span data-lang="fr">Pipeline de developpement</span>
-                        <span data-lang="en">Development Pipeline</span>
-                    </h2>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                    <th>Page</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/ralph-loop</code></td>
-                                    <td>
-                                        <span data-lang="fr">Boucle de developpement iterative IA : lit les PRDs et orchestre les taches</span>
-                                        <span data-lang="en">Iterative AI development loop: reads PRDs and orchestrates tasks</span>
-                                    </td>
-                                    <td><a href="ralph-loop.html">Ralph Loop</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/apex</code></td>
-                                    <td>
-                                        <span data-lang="fr">Developpement incremental APEX (Analyze-Plan-Execute-eXamine)</span>
-                                        <span data-lang="en">APEX incremental development (Analyze-Plan-Execute-eXamine)</span>
-                                    </td>
-                                    <td><a href="apex.html">APEX</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/dev-start</code></td>
-                                    <td>
-                                        <span data-lang="fr">Lancer l'environnement de dev (backend + frontend + credentials admin)</span>
-                                        <span data-lang="en">Launch dev environment (backend + frontend + admin credentials)</span>
-                                    </td>
-                                    <td>-</td>
-                                </tr>
-                                <tr>
-                                    <td><code>/dev-start --stop</code></td>
-                                    <td>
-                                        <span data-lang="fr">Arreter le backend et le frontend</span>
-                                        <span data-lang="en">Stop backend and frontend</span>
-                                    </td>
-                                    <td>-</td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="skill-card" id="skill-ba-create-screen">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-screen</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Phase 7 of business analysis (the LAST BA phase). Designs the UI screens of each section as SmartComponents (SmartListView, SmartForm, SmartDashboard, SmartKanban, SmartSectionHome, …) and writes them to &#x60;screen.md&#x60;, authoritative at the Section (and Resource) level under &#x60;.smartstack/ba/&#x60;. Each screen binds one entity, a permission and the use cases it serves. Conversational: reads the section&#x27;s data model / RBAC / use cases, proposes screens, asks the user to validate, then writes the file. Run after the data model (&#x60;/ba-create-data-model&#x60;); hands off to PRD generation (&#x60;/ba-create-prd&#x60;).</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">AskUserQuestion</span>
+                        </div>
                     </div>
-                </section>
-                <!-- Code Generation Commands -->
-                <section id="code-generation">
-                    <h2>
-                        <span data-lang="fr">Generation de code</span>
-                        <span data-lang="en">Code Generation</span>
-                    </h2>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/application</code></td>
-                                    <td>
-                                        <span data-lang="fr">Creer une application/module full-stack (Application &rarr; Module &rarr; Section &rarr; Resource)</span>
-                                        <span data-lang="en">Create full-stack application/module (Application &rarr; Module &rarr; Section &rarr; Resource)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/controller</code></td>
-                                    <td>
-                                        <span data-lang="fr">Generer un controleur API avec CRUD, DTOs, permissions et tests Postman</span>
-                                        <span data-lang="en">Generate API controller with CRUD, DTOs, permissions and Postman tests</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/ui-components</code></td>
-                                    <td>
-                                        <span data-lang="fr">Generer des composants UI standardises (EntityCard, DataTable, Kanban, Dashboard, Charts)</span>
-                                        <span data-lang="en">Generate standardized UI components (EntityCard, DataTable, Kanban, Dashboard, Charts)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/ai-prompt</code></td>
-                                    <td>
-                                        <span data-lang="fr">Integrer des capacites IA dans une feature (prompts, schemas, providers)</span>
-                                        <span data-lang="en">Integrate AI capabilities into a feature (prompts, schemas, providers)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/notification</code></td>
-                                    <td>
-                                        <span data-lang="fr">Integrer le systeme de notifications (in-app DB + SignalR, email via workflows)</span>
-                                        <span data-lang="en">Integrate notification system (in-app DB + SignalR, email via workflows)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/workflow</code></td>
-                                    <td>
-                                        <span data-lang="fr">Creer des workflows automatises (SendEmail, Wait, Condition, Webhook)</span>
-                                        <span data-lang="en">Create automated workflows (SendEmail, Wait, Condition, Webhook)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/documentation</code></td>
-                                    <td>
-                                        <span data-lang="fr">Generer la documentation technique (guides, ERD, outils dev)</span>
-                                        <span data-lang="en">Generate technical documentation (guides, ERD, dev tools)</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="skill-card" id="skill-ba-create-use-case">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-create-use-case</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Phase 3 of business analysis. Turns each section&#x27;s scope into Cockburn-style business use cases (primary actor, preconditions, main / alternative / exception flows, postconditions), written to &#x60;use-case.md&#x60; at the Section level under &#x60;.smartstack/ba/&#x60;. Conversational: first has the user choose the application → module → section to work on, then reads that section&#x27;s actors and existing use cases, proposes use cases, asks the user to validate, then writes the file. Run after actors (&#x60;/ba-create-actors&#x60;), before business rules (&#x60;/ba-create-business-rules&#x60;).</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">AskUserQuestion</span>
+                        </div>
                     </div>
-                </section>
-                <!-- Quality & Analysis Commands -->
-                <section id="quality">
-                    <h2>
-                        <span data-lang="fr">Qualite et analyse</span>
-                        <span data-lang="en">Quality &amp; Analysis</span>
-                    </h2>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/review-code</code></td>
-                                    <td>
-                                        <span data-lang="fr">Revue de code experte : securite (OWASP), architecture, clean code (SOLID), performance</span>
-                                        <span data-lang="en">Expert code review: security (OWASP), architecture, clean code (SOLID), performance</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/validate</code></td>
-                                    <td>
-                                        <span data-lang="fr">Valider les conventions SmartStack via MCP (tables, migrations, services, namespaces)</span>
-                                        <span data-lang="en">Validate SmartStack conventions via MCP (tables, migrations, services, namespaces)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/validate-feature</code></td>
-                                    <td>
-                                        <span data-lang="fr">Valider une feature de bout en bout (compile, test, API smoke test, DB)</span>
-                                        <span data-lang="en">Validate a feature end-to-end (compile, test, API smoke test, DB)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/debug</code></td>
-                                    <td>
-                                        <span data-lang="fr">Debugging systematique avec analyse approfondie et resolution</span>
-                                        <span data-lang="en">Systematic debugging with deep analysis and resolution</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/explore</code></td>
-                                    <td>
-                                        <span data-lang="fr">Exploration profonde du codebase pour repondre a des questions specifiques</span>
-                                        <span data-lang="en">Deep codebase exploration to answer specific questions</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/quick-search</code></td>
-                                    <td>
-                                        <span data-lang="fr">Recherche ultra-rapide optimisee pour la vitesse</span>
-                                        <span data-lang="en">Lightning-fast search optimized for speed</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/refactor</code></td>
-                                    <td>
-                                        <span data-lang="fr">Refactoring de code avec agents paralleles pour la vitesse</span>
-                                        <span data-lang="en">Code refactoring with parallel agents for speed</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="skill-card" id="skill-ba-modeling-detail">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-modeling-detail</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Pass 2 of the optional Two-Pass fast-modeling path. Take a SINGLE inventory item flagged &#x60;moderate&#x60; or &#x60;complex&#x60; (from a scope&#x27;s &#x60;_inventory.md&#x60;) and expand it into a fully-detailed use case (Cockburn flows, pre/postconditions) or business rule (expression + concrete valid/invalid examples), then write it into the authoritative doc (&#x60;use-case.md&#x60; for a UC at its section, &#x60;règles-métier.md&#x60; for a rule at its scope) under &#x60;.smartstack/ba/&#x60;. Reads the inventory + the authoritative doc + &#x60;acteur.md&#x60;; writes by appending/Editing the doc while preserving every existing item.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                        </div>
                     </div>
-                </section>
-                <!-- EF Core Commands -->
-                <section id="efcore">
-                    <h2>EF Core</h2>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                    <th>Page</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/efcore db-status</code></td>
-                                    <td>
-                                        <span data-lang="fr">Verification rapide de l'etat des migrations</span>
-                                        <span data-lang="en">Fast migration state check</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/efcore db-deploy</code></td>
-                                    <td>
-                                        <span data-lang="fr">Appliquer les migrations en attente</span>
-                                        <span data-lang="en">Apply pending migrations</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/efcore db-reset</code></td>
-                                    <td>
-                                        <span data-lang="fr">Supprimer et recreer la base de donnees</span>
-                                        <span data-lang="en">Drop and recreate database</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/efcore db-seed</code></td>
-                                    <td>
-                                        <span data-lang="fr">Peupler la base avec des donnees de test</span>
-                                        <span data-lang="en">Populate with test data</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/efcore migration</code></td>
-                                    <td>
-                                        <span data-lang="fr">Creer/recreer une migration (nommage via MCP)</span>
-                                        <span data-lang="en">Create/recreate a migration (naming via MCP)</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/efcore squash</code></td>
-                                    <td>
-                                        <span data-lang="fr">Consolider les migrations en une seule</span>
-                                        <span data-lang="en">Consolidate migrations into one</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/efcore rebase-snapshot</code></td>
-                                    <td>
-                                        <span data-lang="fr">Synchroniser le snapshot avec la branche parente</span>
-                                        <span data-lang="en">Sync snapshot with parent branch</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/efcore scan</code></td>
-                                    <td>
-                                        <span data-lang="fr">Scanner les conflits de migrations cross-branches</span>
-                                        <span data-lang="en">Scan cross-branch migration conflicts</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                                <tr>
-                                    <td><code>/efcore conflicts</code></td>
-                                    <td>
-                                        <span data-lang="fr">Analyser les conflits de migrations (bloquant si detecte)</span>
-                                        <span data-lang="en">Analyze migration conflicts (blocking if detected)</span>
-                                    </td>
-                                    <td><a href="efcore.html">EF Core</a></td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <div class="skill-card" id="skill-ba-modeling-inventory">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ba-modeling-inventory</code>
+                            <span class="skill-badge skill-badge-phase">business-analyse</span>
+                        </div>
+                        <p class="skill-description">Pass 1 of the optional Two-Pass fast-modeling path. In ONE fast pass, emit a lightweight inventory of ALL candidate use cases + business rules for a scope (application / module / section), each flagged &#x60;simple | moderate | complex&#x60; so a detail pass can route effort. Reads the &#x60;.smartstack/ba/&#x60; menu tree + actors for context and writes a planning checklist to &#x60;.smartstack/ba/&lt;scope&gt;/_inventory.md&#x60;. Hands off to &#x60;/ba-modeling-detail&#x60;.</p>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Write</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Grep</span>
+                        </div>
                     </div>
-                </section>
-                <!-- Infrastructure Commands -->
-                <section id="infrastructure">
-                    <h2>
-                        <span data-lang="fr">Infrastructure et outils</span>
-                        <span data-lang="en">Infrastructure &amp; Tools</span>
-                    </h2>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/mcp</code></td>
-                                    <td>
-                                        <span data-lang="fr">Gestion du serveur MCP : healthcheck et liste des outils</span>
-                                        <span data-lang="en">MCP server management: healthcheck and tools list</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/utils</code></td>
-                                    <td>
-                                        <span data-lang="fr">Utilitaires SmartStack (test-web, test-web-config)</span>
-                                        <span data-lang="en">SmartStack utilities (test-web, test-web-config)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/check-version</code></td>
-                                    <td>
-                                        <span data-lang="fr">Verifier l'alignement des versions (package.json vs documentation)</span>
-                                        <span data-lang="en">Verify version alignment (package.json vs documentation)</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>/cli-app-sync</code></td>
-                                    <td>
-                                        <span data-lang="fr">Detecter et corriger le drift entre SmartStack.app et les templates CLI</span>
-                                        <span data-lang="en">Detect and fix drift between SmartStack.app and CLI templates</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
                     </div>
-                </section>
-                <!-- CLI Commands -->
-                <section id="cli">
-                    <h2>CLI (smartstack)</h2>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>
-                                        <span data-lang="fr">Commande</span>
-                                        <span data-lang="en">Command</span>
-                                    </th>
-                                    <th>Alias</th>
-                                    <th>
-                                        <span data-lang="fr">Description</span>
-                                        <span data-lang="en">Description</span>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>smartstack activate &lt;key&gt;</code></td>
-                                    <td><code>a</code></td>
-                                    <td>
-                                        <span data-lang="fr">Activer la licence</span>
-                                        <span data-lang="en">Activate license</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>smartstack install</code></td>
-                                    <td><code>i</code></td>
-                                    <td>
-                                        <span data-lang="fr">Installer les commandes et agents</span>
-                                        <span data-lang="en">Install commands and agents</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>smartstack uninstall</code></td>
-                                    <td><code>u</code></td>
-                                    <td>
-                                        <span data-lang="fr">Desinstaller les commandes et agents</span>
-                                        <span data-lang="en">Uninstall commands and agents</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>smartstack status</code></td>
-                                    <td><code>s</code></td>
-                                    <td>
-                                        <span data-lang="fr">Afficher le statut d'installation</span>
-                                        <span data-lang="en">Show installation status</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>smartstack update</code></td>
-                                    <td>-</td>
-                                    <td>
-                                        <span data-lang="fr">Mettre a jour les commandes</span>
-                                        <span data-lang="en">Update commands</span>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td><code>smartstack docs [page]</code></td>
-                                    <td><code>d</code></td>
-                                    <td>
-                                        <span data-lang="fr">Ouvrir la documentation dans le navigateur</span>
-                                        <span data-lang="en">Open documentation in browser</span>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                    <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">development <span class="skill-count">(2)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-development-testing">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/development-testing</code>
+                            <span class="skill-badge skill-badge-phase">development</span>
+                        </div>
+                        <p class="skill-description">Generates real test suites per architectural layer with business rule coverage, consuming NuGet (xUnit, FluentAssertions, Moq, FluentValidation.TestHelper) and npm (Vitest, Testing Library, React Query) packages.</p>
+                    </div>
+                    <div class="skill-card" id="skill-development-workflow">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/development-workflow</code>
+                            <span class="skill-badge skill-badge-phase">development</span>
+                        </div>
+                        <p class="skill-description">Development workflow index — drives module development from PDR to production-ready SmartStack extension (NuGet + npm) with mandatory tests at every layer.</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">(6)</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 class="skill-card" id="skill-context7">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/context7</code>
+                            <span class="skill-badge skill-badge-phase">infrastructure</span>
+                        </div>
+                        <p class="skill-description">Fetches up-to-date library, framework, SDK and API documentation via the ctx7 CLI (Upstash Context7). Prefer this over web search whenever the user asks about a library, framework, SDK, API, CLI tool or cloud service — even well-known ones like React, Next.js, Prisma, Express, Tailwind, EF Core — because training data may lag behind recent releases. Keywords: library, framework, docs, documentation, SDK, API, package, npm, nuget, version, changelog, migration guide.</p>
+                    </div>
+                    <div class="skill-card" id="skill-dev-browser">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/dev-browser</code>
+                            <span class="skill-badge skill-badge-phase">infrastructure</span>
+                        </div>
+                        <p class="skill-description">Drives a real Chromium browser from Claude Code and from Bash CLI — navigate pages, click elements, read DOM, take screenshots, run end-to-end checks. The SmartStack Studio uses this skill as the test engine for Phase 5 UI tests. Activate when the user asks to open a URL, click a button, test a web page, verify a rendered layout, reproduce a UI bug, submit a form, or script any browser interaction. Keywords: browser, navigate, click, screenshot, DOM, Chromium, Chrome, webpage, URL, visual test, UI verification, E2E.</p>
+                    </div>
+                    <div class="skill-card" id="skill-efcore">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/efcore</code>
+                            <span class="skill-badge skill-badge-phase">infrastructure</span>
+                        </div>
+                        <p class="skill-description">EF Core migration workflow — create, squash, rebase-snapshot, apply, list, status. Applies the best practices of the global /efcore agents without MCP or external dependencies. Works against a single-assembly generated app (CoreDbContext + ExtensionsDbContext) or the multi-assembly Studio (StudioDbContext with Sqlite / Postgres / SqlServer migration projects).</p>
+                    </div>
+                    <div class="skill-card" id="skill-gitflow">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/gitflow</code>
+                            <span class="skill-badge skill-badge-phase">infrastructure</span>
+                        </div>
+                        <p class="skill-description">GitFlow workflow — routes to colocated CLI commands (skills/gitflow/cli/) for deterministic execution</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>[-f|-r|-h] &lt;action&gt; [name]</code></div>
+                    </div>
+                    </div>
+                    <h3 id="phase-lifecycle">lifecycle <span class="skill-count">(13)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-check-version">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/check-version</code>
+                            <span class="skill-badge skill-badge-model">haiku</span>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Verify version alignment between package.json and documentation</p>
+                        <div class="skill-tools">
+                            <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">Bash</span>
+                        </div>
+                    </div>
+                    <div class="skill-card" id="skill-cli-app-sync">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/cli-app-sync</code>
+                            <span class="skill-badge skill-badge-model">sonnet</span>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Detect and fix template drift between SmartStack.app (source of truth) and CLI templates</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>[report|fix|check &lt;file&gt;]</code></div>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Bash</span>
+                            <span class="skill-tool-tag">Edit</span>
+                            <span class="skill-tool-tag">Write</span>
+                        </div>
+                    </div>
+                    <div class="skill-card" id="skill-conventions">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/conventions</code>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">SmartStack global conventions — DB schemas, prefixes, namespaces</p>
+                    </div>
+                    <div class="skill-card" id="skill-dev-start">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/dev-start</code>
+                            <span class="skill-badge skill-badge-model">haiku</span>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Launch SmartStack dev environment (backend + frontend + admin credentials)</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>[--stop] [--restart] [--reset] [--backend-only] [--frontend-only]</code></div>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Bash</span>
+                            <span class="skill-tool-tag">BashOutput</span>
+                        </div>
+                    </div>
+                    <div class="skill-card" id="skill-documentation">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/documentation</code>
+                            <span class="skill-badge skill-badge-model">sonnet</span>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Automatically generates technical documentation for SmartStack. Use this skill when: - User asks to create/generate documentation - User mentions &quot;document&quot;, &quot;documentation&quot;, &quot;doc&quot;, &quot;ERD&quot;, &quot;schema&quot; - User wants to document a module, table, tool, or test - After implementing a feature to generate its documentation Types: user module, developer tools, database ERD, testing tools</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>&lt;module-name&gt; [--type user|developer|database|testing|update]</code></div>
+                    </div>
+                    <div class="skill-card" id="skill-init">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/init</code>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">SmartStack project initialization via smartstack-studio init</p>
+                    </div>
+                    <div class="skill-card" id="skill-quick-search">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/quick-search</code>
+                            <span class="skill-badge skill-badge-model">haiku</span>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Lightning-fast search to answer specific questions - optimized for speed</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>&lt;question&gt;</code></div>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Read</span>
+                        </div>
+                    </div>
+                    <div class="skill-card" id="skill-review">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/review</code>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Multi-category code review — security, architecture, performance</p>
+                    </div>
+                    <div class="skill-card" id="skill-smoke-generation">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/smoke-generation</code>
+                            <span class="skill-badge skill-badge-model">sonnet</span>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Validate CLI templates by checking that every imported component, type, and method signature documented in /templates/skills/ actually exists in SmartStack.app (IA-Workflow). Catches the &quot;EntityLookup paradox&quot; class of drift where docs reference things that don&#x27;t exist in the platform.</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>[--quick|--full] [--scope&#x3D;frontend|backend|all] [--app-path&#x3D;&lt;path&gt;] [--report-only]</code></div>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Bash</span>
+                            <span class="skill-tool-tag">Write</span>
+                        </div>
+                    </div>
+                    <div class="skill-card" id="skill-ui-components">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/ui-components</code>
+                            <span class="skill-badge skill-badge-model">sonnet</span>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Verify that a React page (or the whole generated app) respects the SmartStack theme — zero hardcoded colors — and auto-fix the violations. Thin orchestrator over the ui-polish engine: it does NOT reimplement any audit/fix logic, it runs the deterministic ui-polish CLI and then finishes the residual cases (neutral colors with no token) that the CLI cannot map mechanically.</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>[page-path] [--check|--fix] [--all-rules]</code></div>
+                        <div class="skill-tools">
+                            <span class="skill-tool-tag">Read</span>
+                            <span class="skill-tool-tag">Grep</span>
+                            <span class="skill-tool-tag">Glob</span>
+                            <span class="skill-tool-tag">Bash</span>
+                            <span class="skill-tool-tag">Edit</span>
+                        </div>
+                    </div>
+                    <div class="skill-card" id="skill-upgrade">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/upgrade</code>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">SmartStack project upgrade via smartstack-studio upgrade</p>
+                    </div>
+                    <div class="skill-card" id="skill-utils">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/utils</code>
+                            <span class="skill-badge skill-badge-model">haiku</span>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Utility skills for SmartStack CLI development</p>
+                        <div class="skill-args"><span class="skill-args-label">args:</span> <code>&lt;subcommand&gt; [options]</code></div>
+                    </div>
+                    <div class="skill-card" id="skill-validate-feature">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/validate-feature</code>
+                            <span class="skill-badge skill-badge-phase">lifecycle</span>
+                        </div>
+                        <p class="skill-description">Validate that a scaffolded feature works end-to-end (compile, test, API smoke test)</p>
+                    </div>
+                    </div>
+                    <h3 id="phase-validation">validation <span class="skill-count">(6)</span></h3>
+                    <div class="skill-grid">
+                    <div class="skill-card" id="skill-conventions">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/conventions</code>
+                            <span class="skill-badge skill-badge-phase">validation</span>
+                        </div>
+                        <p class="skill-description">Audits a SmartStack project for convention violations — namespace prefixes by Clean Architecture layer, entity patterns (BaseEntity + tenant interfaces + private ctor + factory), and controller routing (NavRoute vs hardcoded Route). Produces a structured JSON report of findings. Use when the user asks to audit, validate or check a project&#x27;s conformance with SmartStack conventions. Keywords: audit, conventions, conformance, check project, validate structure, namespace, NavRoute, entity compliance.</p>
+                    </div>
+                    <div class="skill-card" id="skill-cross-validate-stack">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/cross-validate-stack</code>
+                            <span class="skill-badge skill-badge-phase">validation</span>
+                        </div>
+                        <p class="skill-description">Cross-stack validation backend .NET / frontend React — 5 coherence checks</p>
+                    </div>
+                    <div class="skill-card" id="skill-eslint-validator">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/eslint-validator</code>
+                            <span class="skill-badge skill-badge-phase">validation</span>
+                        </div>
+                        <p class="skill-description">Static validation of SmartStack React conventions (5 architecture rules)</p>
+                    </div>
+                    <div class="skill-card" id="skill-project-inventory">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/project-inventory</code>
+                            <span class="skill-badge skill-badge-phase">validation</span>
+                        </div>
+                        <p class="skill-description">Deterministic scanner for a generated SmartStack project. Produces a structured JSON manifest of existing entities, migrations, seed providers, controllers, React pages, and extension registries. Consumed by each phase of ba-develop so the Claude subagent can distinguish &quot;already implemented&quot; from &quot;needs to be created&quot; before writing any file. Zero LLM — regex-based scan, runs under 2 seconds on a normal app.</p>
+                    </div>
+                    <div class="skill-card" id="skill-readiness-report">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/readiness-report</code>
+                            <span class="skill-badge skill-badge-phase">validation</span>
+                        </div>
+                        <p class="skill-description">SmartStack readiness report — score /100, aggregation roslyn + eslint + cross-validate</p>
+                    </div>
+                    <div class="skill-card" id="skill-roslyn-validator">
+                        <div class="skill-card-header">
+                            <code class="skill-slug">/roslyn-validator</code>
+                            <span class="skill-badge skill-badge-phase">validation</span>
+                        </div>
+                        <p class="skill-description">SmartStack C# static analysis — 10 rules (SS001-SS010) per layer</p>
                     </div>
-                    <h3 data-lang="fr">Options d'installation</h3>
-                    <h3 data-lang="en">Installation Options</h3>
-                    <div class="code-block">
-                        <button class="copy-btn">Copy</button>
-                        <pre><code># Installer tous les composants (defaut)
-smartstack install
-# Installer des composants specifiques
-smartstack install --commands-only
-smartstack install --agents-only
-smartstack install --hooks-only
-# Installer dans le projet (au lieu de ~/.claude)
-smartstack install --local
-# Forcer la reecriture des fichiers existants
-smartstack install --force
-# Ignorer la creation du fichier config
-smartstack install --no-config</code></pre>
                     </div>
                 </section>
-            </div>
+                </div>
             </main>
         </div>
     </div>
-    <!-- Mobile Menu Button -->
-    <button class="mobile-menu-btn">&#9776;</button>
-    <div class="overlay"></div>
     <script src="js/app.js"></script>
 </body>
 </html>