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

@@ -1,322 +1,29 @@
 <!DOCTYPE html>
+<!--
+  AUTO-GENERATED by scripts/generate-docs — do not edit by hand.
+  Edit docs-src/installation.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>Installation - SmartStack CLI</title>
     <link rel="stylesheet" href="css/styles.css">
-    <style>
-        /* Installation-specific styles */
-        .platform-selector {
-            display: flex;
-            gap: 1rem;
-            margin-bottom: 2rem;
-        }
-        .platform-btn {
-            flex: 1;
-            padding: 0.875rem 1rem;
-            border: 2px solid var(--border);
-            border-radius: 8px;
-            background: var(--bg-card);
-            color: var(--text);
-            cursor: pointer;
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-            font-size: 0.95rem;
-            font-weight: 500;
-            min-height: 52px;
-        }
-        .platform-btn:hover {
-            border-color: var(--primary);
-            background: var(--bg-hover);
-        }
-        .platform-btn.active {
-            border-color: var(--primary);
-            background: rgba(59, 130, 246, 0.1);
-        }
-        .platform-btn .platform-icon {
-            font-size: 1.25rem;
-        }
-        .platform-content {
-            display: none;
-        }
-        .platform-content.active {
-            display: block;
-        }
-        /* OS Selector */
-        .os-selector {
-            display: flex;
-            gap: 0.75rem;
-        }
-        .os-btn {
-            flex: 1;
-            padding: 0.875rem 1rem;
-            border: 2px solid var(--border);
-            border-radius: 8px;
-            background: var(--bg-card);
-            color: var(--text);
-            cursor: pointer;
-            transition: all 0.2s ease;
-            font-size: 0.95rem;
-            font-weight: 500;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-            min-height: 52px;
-        }
-        .os-btn:hover {
-            border-color: var(--primary);
-            background: var(--bg-hover);
-        }
-        .os-btn.active {
-            border-color: var(--primary);
-            background: rgba(59, 130, 246, 0.1);
-        }
-        .os-btn .os-icon {
-            font-size: 1.25rem;
-        }
-        .os-content {
-            display: none;
-        }
-        .os-content.active {
-            display: block;
-        }
-        /* Settings panel */
-        .settings-panel {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 1.5rem;
-            margin-bottom: 2rem;
-        }
-        .settings-row {
-            display: flex;
-            gap: 2rem;
-            flex-wrap: wrap;
-        }
-        .settings-group {
-            flex: 1;
-            min-width: 280px;
-        }
-        .settings-label {
-            font-weight: 600;
-            color: var(--text);
-            margin-bottom: 0.75rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .settings-label .label-icon {
-            font-size: 1.1rem;
-        }
-        /* Tutorial section */
-        .tutorial-section {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-        }
-        .tutorial-section h4 {
-            color: var(--text);
-            margin: 0 0 1rem 0;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .tutorial-section h4 .step-badge {
-            background: var(--primary);
-            color: white;
-            padding: 0.25rem 0.75rem;
-            border-radius: 4px;
-            font-size: 0.8rem;
-        }
-        .tutorial-note {
-            background: rgba(59, 130, 246, 0.1);
-            border-left: 3px solid var(--primary);
-            padding: 1rem;
-            margin: 1rem 0;
-            border-radius: 0 4px 4px 0;
-        }
-        .tutorial-note p {
-            margin: 0;
-            color: var(--text);
-        }
-        /* Progress bar */
-        .progress-container {
-            margin: 2rem 0;
-            padding: 1.5rem;
-            background: var(--bg-card);
-            border-radius: 8px;
-            border: 1px solid var(--border);
-        }
-        .progress-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1rem;
-        }
-        .progress-title {
-            font-weight: 600;
-            color: var(--text);
-        }
-        .progress-count {
-            color: var(--text-muted);
-            font-size: 0.9rem;
-        }
-        .progress-bar {
-            height: 8px;
-            background: var(--bg-hover);
-            border-radius: 4px;
-            overflow: hidden;
-        }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--primary), var(--success));
-            border-radius: 4px;
-            transition: width 0.3s ease;
-        }
-        /* Checklist */
-        .checklist {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        .checklist-item {
-            display: flex;
-            align-items: flex-start;
-            gap: 1rem;
-            padding: 1.5rem;
-            margin-bottom: 1rem;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            transition: all 0.2s ease;
-        }
-        .checklist-item:hover {
-            border-color: var(--primary);
-        }
-        .checklist-item.completed {
-            border-color: var(--success);
-            background: rgba(34, 197, 94, 0.05);
-        }
-        .checklist-checkbox {
-            width: 24px;
-            height: 24px;
-            min-width: 24px;
-            border: 2px solid var(--border);
-            border-radius: 50%;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
-            margin-top: 0.2rem;
-        }
-        .checklist-checkbox:hover {
-            border-color: var(--primary);
-        }
-        .checklist-item.completed .checklist-checkbox {
-            background: var(--success);
-            border-color: var(--success);
-        }
-        .checklist-checkbox::after {
-            content: '';
-            display: none;
-        }
-        .checklist-item.completed .checklist-checkbox::after {
-            content: '\2713';
-            display: block;
-            color: white;
-            font-weight: bold;
-        }
-        .checklist-content {
-            flex: 1;
-        }
-        .checklist-title {
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            color: var(--text);
-        }
-        .checklist-description {
-            color: var(--text-muted);
-            font-size: 0.9rem;
-            line-height: 1.5;
-        }
-        .checklist-number {
-            width: 28px;
-            height: 28px;
-            min-width: 28px;
-            background: var(--primary);
-            color: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 600;
-            font-size: 0.85rem;
-        }
-        .checklist-item.completed .checklist-number {
-            background: var(--success);
-        }
-        /* Dynamic command display */
-        .dynamic-command {
-            transition: all 0.2s ease;
-        }
-        .command-highlight {
-            background: rgba(59, 130, 246, 0.2);
-            padding: 0 2px;
-            border-radius: 2px;
-        }
-        /* Reset button */
-        .reset-progress-btn {
-            margin-top: 1rem;
-            padding: 0.5rem 1rem;
-            background: transparent;
-            color: var(--text-muted);
-            border: 1px solid var(--border);
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 0.85rem;
-        }
-        .reset-progress-btn:hover {
-            background: var(--bg-hover);
-            color: var(--text);
-        }
-    </style>
 </head>
 <body>
     <div class="app-container">
-        <!-- Global Header -->
+        <!-- Global Header (single unified element) -->
         <header class="global-header">
             <div class="logo">SS</div>
             <span class="site-title">SmartStack CLI</span>
-            <span class="version-badge">v3.34.0</span>
+            <span class="version-badge">v5.0.0</span>
             <div class="header-divider"></div>
             <span class="page-title">Installation</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 class="breadcrumb-current">Installation</span>
-            </nav>
             <!-- Language Select -->
             <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
-                <option value="fr">&#127467;&#127479; FR</option>
-                <option value="en">&#127468;&#127463; EN</option>
+                <option value="fr">🇫🇷 FR</option>
+                <option value="en">🇬🇧 EN</option>
             </select>
             <!-- Search -->
             <div class="header-search">
@@ -329,1223 +36,167 @@
             </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 active">
-                        <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">
+                        <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">
-                        <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">
+<nav class="breadcrumb">
+    <span class="breadcrumb-item"><span data-lang="fr">Démarrage</span><span data-lang="en">Getting Started</span></span>
+    <span class="breadcrumb-sep">›</span>
+    <span class="breadcrumb-item current">Installation</span>
+</nav>
+<h1><span data-lang="fr">Installation de SmartStack CLI</span><span data-lang="en">Installing SmartStack CLI</span></h1>
+<p><span data-lang="fr">SmartStack CLI s&#39;installe via npm et déploie son contenu dans <code><del>/.claude/</code> (installation globale) ou <code>./.claude/</code> (installation locale projet).</span>
+<span data-lang="en">SmartStack CLI is installed via npm and deploys its content to <code></del>/.claude/</code> (global install) or <code>./.claude/</code> (project-local install).</span></p>
+<h2><span data-lang="fr">Prérequis</span><span data-lang="en">Prerequisites</span></h2>
+<table>
+<thead>
+<tr>
+<th><span data-lang="fr">Composant</span><span data-lang="en">Component</span></th>
+<th><span data-lang="fr">Version minimale</span><span data-lang="en">Minimum version</span></th>
+</tr>
+</thead>
+<tbody><tr>
+<td>Node.js</td>
+<td>18+</td>
+</tr>
+<tr>
+<td>npm</td>
+<td>9+</td>
+</tr>
+<tr>
+<td>Claude Code</td>
+<td><span data-lang="fr">dernière version stable</span><span data-lang="en">latest stable release</span></td>
+</tr>
+<tr>
+<td>Git</td>
+<td>2.40+</td>
+</tr>
+<tr>
+<td>.NET SDK</td>
+<td>8.0+ <span data-lang="fr">(pour les projets backend SmartStack)</span><span data-lang="en">(for SmartStack backend projects)</span></td>
+</tr>
+</tbody></table>
+<h2><span data-lang="fr">Installation globale</span><span data-lang="en">Global install</span></h2>
+<pre><code class="language-bash">npm install -g @atlashub/smartstack-cli
+</code></pre>
+<p><span data-lang="fr">Vérifiez l&#39;installation :</span>
+<span data-lang="en">Verify the installation:</span></p>
+<pre><code class="language-bash">ss --version
+ss doctor
+</code></pre>
+<h2><span data-lang="fr">Installation des skills</span><span data-lang="en">Installing the skills</span></h2>
+<p><span data-lang="fr">Pour déployer tous les skills, agents et hooks dans <code><del>/.claude/</code> :</span>
+<span data-lang="en">To deploy all skills, agents and hooks to <code></del>/.claude/</code>:</span></p>
+<pre><code class="language-bash">ss install
+</code></pre>
+<p><span data-lang="fr">Pour une installation locale (limitée au projet courant, dans <code>./.claude/</code>) :</span>
+<span data-lang="en">For a project-local install (only in the current project, in <code>./.claude/</code>):</span></p>
+<pre><code class="language-bash">ss install --local
+</code></pre>
+<h2><span data-lang="fr">Configuration des hooks</span><span data-lang="en">Hook configuration</span></h2>
+<p><span data-lang="fr">Les hooks de sécurité (gardes-fous Claude Code) sont configurés automatiquement par <code>ss install</code>. Voyez la <a href="hooks.html">page Hooks</a> pour le détail.</span>
+<span data-lang="en">Security hooks (Claude Code guard rails) are configured automatically by <code>ss install</code>. See the <a href="hooks.html">Hooks page</a> for details.</span></p>
+<h2><span data-lang="fr">Mise à jour</span><span data-lang="en">Updates</span></h2>
+<pre><code class="language-bash">npm update -g @atlashub/smartstack-cli
+ss upgrade
+</code></pre>
+<p><span data-lang="fr"><code>ss upgrade</code> remplace les fichiers déployés par les nouvelles versions tout en préservant vos personnalisations marquées <code>@customised</code>.</span>
+<span data-lang="en"><code>ss upgrade</code> replaces deployed files with the new versions while preserving your customisations marked <code>@customised</code>.</span></p>
+<h2><span data-lang="fr">Désinstallation</span><span data-lang="en">Uninstallation</span></h2>
+<pre><code class="language-bash">ss uninstall          # nettoie ~/.claude/
+npm uninstall -g @atlashub/smartstack-cli
+</code></pre>
-                <!-- Introduction -->
-                <section id="introduction">
-                    <h2>
-                        <span data-lang="fr">Installation de SmartStack CLI</span>
-                        <span data-lang="en">SmartStack CLI Installation</span>
-                    </h2>
-                    <p data-lang="fr">
-                        Suivez cette checklist interactive pour installer SmartStack CLI et configurer votre environnement de developpement.
-                        Votre progression est automatiquement sauvegardee.
-                    </p>
-                    <p data-lang="en">
-                        Follow this interactive checklist to install SmartStack CLI and configure your development environment.
-                        Your progress is automatically saved.
-                    </p>
-                </section>
-                <!-- Progress Bar -->
-                <div class="progress-container">
-                    <div class="progress-header">
-                        <span class="progress-title">
-                            <span data-lang="fr">Progression</span>
-                            <span data-lang="en">Progress</span>
-                        </span>
-                        <span class="progress-count" id="progress-count">0/10</span>
-                    </div>
-                    <div class="progress-bar">
-                        <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
-                    </div>
-                    <button class="reset-progress-btn" onclick="resetProgress()">
-                        <span data-lang="fr">Reinitialiser la progression</span>
-                        <span data-lang="en">Reset progress</span>
-                    </button>
-                </div>
-                <!-- Configuration Panel -->
-                <section id="config-panel">
-                    <h3>
-                        <span data-lang="fr">Configuration</span>
-                        <span data-lang="en">Configuration</span>
-                    </h3>
-                    <p data-lang="fr">Selectionnez votre environnement pour afficher les commandes adaptees :</p>
-                    <p data-lang="en">Select your environment to display adapted commands:</p>
-                    <div class="settings-panel">
-                        <div class="settings-row">
-                            <div class="settings-group">
-                                <span class="settings-label">
-                                    <span class="label-icon">&#128187;</span>
-                                    <span data-lang="fr">Systeme d'exploitation</span>
-                                    <span data-lang="en">Operating System</span>
-                                </span>
-                                <div class="os-selector">
-                                    <button class="os-btn active" data-os="windows" onclick="setOS('windows')">
-                                        <span class="os-icon">&#129695;</span>
-                                        <span>Windows</span>
-                                    </button>
-                                    <button class="os-btn" data-os="macos" onclick="setOS('macos')">
-                                        <span class="os-icon">&#127822;</span>
-                                        <span>macOS</span>
-                                    </button>
-                                    <button class="os-btn" data-os="linux" onclick="setOS('linux')">
-                                        <span class="os-icon">&#128039;</span>
-                                        <span>Linux</span>
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="settings-group">
-                                <span class="settings-label">
-                                    <span class="label-icon">&#128256;</span>
-                                    <span data-lang="fr">Plateforme Git</span>
-                                    <span data-lang="en">Git Platform</span>
-                                </span>
-                                <div class="platform-selector">
-                                    <button class="platform-btn active" data-platform="github" onclick="setPlatform('github')">
-                                        <span class="platform-icon">&#128025;</span>
-                                        <span>GitHub</span>
-                                    </button>
-                                    <button class="platform-btn" data-platform="azure" onclick="setPlatform('azure')">
-                                        <span class="platform-icon">&#9729;</span>
-                                        <span>Azure DevOps</span>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                <!-- Installation Checklist -->
-                <section id="checklist">
-                    <h3>
-                        <span data-lang="fr">Checklist d'installation</span>
-                        <span data-lang="en">Installation Checklist</span>
-                    </h3>
-                    <ul class="checklist" id="installation-checklist">
-                        <!-- Step 1: Node.js -->
-                        <li class="checklist-item" data-step="1">
-                            <span class="checklist-number">1</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(1)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Installer Node.js</span>
-                                    <span data-lang="en">Install Node.js</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <p data-lang="fr">Telechargez et installez Node.js (version 18 ou superieure recommandee).</p>
-                                    <p data-lang="en">Download and install Node.js (version 18 or higher recommended).</p>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code>node --version  # Verifier l'installation</code></pre>
-                                    </div>
-                                    <p><a href="https://nodejs.org/" target="_blank">https://nodejs.org/</a></p>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 2: .NET SDK -->
-                        <li class="checklist-item" data-step="2">
-                            <span class="checklist-number">2</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(2)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Installer .NET SDK 10.0</span>
-                                    <span data-lang="en">Install .NET SDK 10.0</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <p data-lang="fr">Telechargez et installez le SDK .NET 10.0 ou superieur (requis pour les projets SmartStack).</p>
-                                    <p data-lang="en">Download and install .NET SDK 10.0 or higher (required for SmartStack projects).</p>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code>dotnet --version  # Verifier l'installation (doit afficher 10.x.x)</code></pre>
-                                    </div>
-                                    <p><a href="https://dotnet.microsoft.com/download/dotnet/10.0" target="_blank">https://dotnet.microsoft.com/download/dotnet/10.0</a></p>
-                                    <div class="tutorial-note" style="margin-top: 0.5rem;">
-                                        <p data-lang="fr"><strong>Windows :</strong> Vous pouvez aussi installer via <code>winget install Microsoft.DotNet.SDK.10</code></p>
-                                        <p data-lang="en"><strong>Windows:</strong> You can also install via <code>winget install Microsoft.DotNet.SDK.10</code></p>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 3: Git -->
-                        <li class="checklist-item" data-step="3">
-                            <span class="checklist-number">3</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(3)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Configurer Git</span>
-                                    <span data-lang="en">Configure Git</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <!-- GitHub content -->
-                                    <div class="platform-content github-content active">
-                                        <p data-lang="fr">Configurez Git avec SSH pour GitHub. Ajoutez votre cle SSH dans les parametres GitHub.</p>
-                                        <p data-lang="en">Configure Git with SSH for GitHub. Add your SSH key in GitHub settings.</p>
-                                        <!-- Windows -->
-                                        <div class="os-content windows-content active">
-                                            <div class="code-block">
-                                                <button class="copy-btn">Copy</button>
-                                                <pre><code># Generer une cle SSH (PowerShell)
-ssh-keygen -t ed25519 -C "your_email@example.com"
-# Demarrer le service SSH Agent
-Get-Service ssh-agent | Set-Service -StartupType Automatic
-Start-Service ssh-agent
-ssh-add $env:USERPROFILE\.ssh\id_ed25519
-# Afficher la cle publique a copier
-Get-Content $env:USERPROFILE\.ssh\id_ed25519.pub</code></pre>
-                                            </div>
-                                        </div>
-                                        <!-- macOS -->
-                                        <div class="os-content macos-content">
-                                            <div class="code-block">
-                                                <button class="copy-btn">Copy</button>
-                                                <pre><code># Generer une cle SSH
-ssh-keygen -t ed25519 -C "your_email@example.com"
-# Ajouter au Keychain
-ssh-add --apple-use-keychain ~/.ssh/id_ed25519
-# Afficher la cle publique a copier
-cat ~/.ssh/id_ed25519.pub | pbcopy  # Copie directement</code></pre>
-                                            </div>
-                                        </div>
-                                        <!-- Linux -->
-                                        <div class="os-content linux-content">
-                                            <div class="code-block">
-                                                <button class="copy-btn">Copy</button>
-                                                <pre><code># Generer une cle SSH
-ssh-keygen -t ed25519 -C "your_email@example.com"
-# Demarrer l'agent SSH
-eval "$(ssh-agent -s)"
-ssh-add ~/.ssh/id_ed25519
-# Afficher la cle publique a copier
-cat ~/.ssh/id_ed25519.pub</code></pre>
-                                            </div>
-                                        </div>
-                                        <p data-lang="fr">Ajoutez votre cle SSH ici : <a href="https://github.com/settings/keys" target="_blank">https://github.com/settings/keys</a></p>
-                                        <p data-lang="en">Add your SSH key here: <a href="https://github.com/settings/keys" target="_blank">https://github.com/settings/keys</a></p>
-                                    </div>
-                                    <!-- Azure DevOps content -->
-                                    <div class="platform-content azure-content">
-                                        <p data-lang="fr">Configurez Git avec HTTPS et Git Credential Manager pour Azure DevOps.</p>
-                                        <p data-lang="en">Configure Git with HTTPS and Git Credential Manager for Azure DevOps.</p>
-                                        <!-- Windows -->
-                                        <div class="os-content windows-content active">
-                                            <div class="code-block">
-                                                <button class="copy-btn">Copy</button>
-                                                <pre><code># Git Credential Manager est inclus avec Git for Windows
-# Verifiez qu'il est configure :
-git config --global credential.helper manager</code></pre>
-                                            </div>
-                                            <p data-lang="fr" style="margin-top: 0.5rem; color: var(--text-muted);">Git Credential Manager est installe automatiquement avec Git for Windows.</p>
-                                            <p data-lang="en" style="margin-top: 0.5rem; color: var(--text-muted);">Git Credential Manager is installed automatically with Git for Windows.</p>
-                                        </div>
-                                        <!-- macOS -->
-                                        <div class="os-content macos-content">
-                                            <div class="code-block">
-                                                <button class="copy-btn">Copy</button>
-                                                <pre><code># Installer Git Credential Manager via Homebrew
-brew install --cask git-credential-manager
-# Configurer le credential helper
-git config --global credential.helper manager</code></pre>
-                                            </div>
-                                        </div>
-                                        <!-- Linux -->
-                                        <div class="os-content linux-content">
-                                            <div class="code-block">
-                                                <button class="copy-btn">Copy</button>
-                                                <pre><code># Installer Git Credential Manager
-# Telechargez le .deb depuis: https://github.com/git-ecosystem/git-credential-manager/releases
-sudo dpkg -i gcm-linux_amd64.deb
-# Configurer le credential helper
-git config --global credential.helper manager</code></pre>
-                                            </div>
-                                        </div>
-                                        <div class="tutorial-note" style="margin-top: 1rem;">
-                                            <p data-lang="fr"><strong>Pas besoin de <code>az login</code></strong> - Git Credential Manager ouvrira automatiquement votre navigateur pour vous authentifier avec votre compte Azure AD lors de la premiere operation Git (clone, push, etc.).</p>
-                                            <p data-lang="en"><strong>No need for <code>az login</code></strong> - Git Credential Manager will automatically open your browser to authenticate with your Azure AD account on the first Git operation (clone, push, etc.).</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 4: Claude Code -->
-                        <li class="checklist-item" data-step="4">
-                            <span class="checklist-number">4</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(4)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Installer Claude Code</span>
-                                    <span data-lang="en">Install Claude Code</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <p data-lang="fr">Installez Claude Code CLI et l'extension VS Code :</p>
-                                    <p data-lang="en">Install Claude Code CLI and the VS Code extension:</p>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code># 1. Installer Claude Code CLI (native install - recommandé)
-# Windows PowerShell:
-irm https://claude.ai/install.ps1 | iex
-# macOS / Linux / WSL:
-# curl -fsSL https://claude.ai/install.sh | bash
-# WinGet:
-# winget install Anthropic.ClaudeCode
-# 2. Installer l'extension VS Code
-code --install-extension anthropic.claude-code</code></pre>
-                                    </div>
-                                    <p data-lang="fr" style="margin-top: 1rem;"><strong>3. Activer le mode bypass permissions</strong> (recommande pour SmartStack) :</p>
-                                    <p data-lang="en" style="margin-top: 1rem;"><strong>3. Enable bypass permissions mode</strong> (recommended for SmartStack):</p>
-                                    <ol style="margin: 0.5rem 0 0 1.5rem; color: var(--text-muted);">
-                                        <li data-lang="fr">Dans VS Code : <kbd>Ctrl+Shift+P</kbd> → "Preferences: Open User Settings (JSON)"</li>
-                                        <li data-lang="en">In VS Code: <kbd>Ctrl+Shift+P</kbd> → "Preferences: Open User Settings (JSON)"</li>
-                                        <li data-lang="fr">Ajouter cette ligne dans le fichier JSON :</li>
-                                        <li data-lang="en">Add this line in the JSON file:</li>
-                                    </ol>
-                                    <div class="code-block" style="margin-top: 0.5rem;">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code>"claude-code.dangerouslySkipPermissions": true</code></pre>
-                                    </div>
-                                    <div class="tutorial-note" style="margin-top: 0.5rem;">
-                                        <p data-lang="fr"><strong>Note :</strong> Le mode bypass permissions permet a Claude d'executer des commandes sans confirmation manuelle. Recommande pour une utilisation fluide avec SmartStack.</p>
-                                        <p data-lang="en"><strong>Note:</strong> Bypass permissions mode allows Claude to execute commands without manual confirmation. Recommended for a smooth experience with SmartStack.</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 5: SmartStack CLI -->
-                        <li class="checklist-item" data-step="5">
-                            <span class="checklist-number">5</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(5)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Installer SmartStack CLI</span>
-                                    <span data-lang="en">Install SmartStack CLI</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <p data-lang="fr">Installez SmartStack CLI et configurez le PATH :</p>
-                                    <p data-lang="en">Install SmartStack CLI and configure PATH:</p>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code># 1. Installer SmartStack CLI
-npm install -g @atlashub/smartstack-cli
-# 2. Ajouter npm au PATH (permanent)
-$npmPath = "$env:APPDATA\npm"
-[Environment]::SetEnvironmentVariable("PATH", $env:PATH + ";$npmPath", "User")
-# 3. Recharger le PATH dans cette session
-$env:PATH += ";$npmPath"
-# 4. Deployer les skills, agents et hooks
-smartstack install</code></pre>
-                                    </div>
-                                    <div class="tutorial-note" style="margin-top: 0.5rem;">
-                                        <p data-lang="fr"><strong>Alias disponible :</strong> Vous pouvez utiliser <code>ss</code> au lieu de <code>smartstack</code> (ex: <code>ss --version</code>).</p>
-                                        <p data-lang="en"><strong>Alias available:</strong> You can use <code>ss</code> instead of <code>smartstack</code> (e.g., <code>ss --version</code>).</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 6: SmartStack MCP Server (bundled) -->
-                        <li class="checklist-item" data-step="6">
-                            <span class="checklist-number">6</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(6)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">SmartStack MCP Server (inclus dans la CLI)</span>
-                                    <span data-lang="en">SmartStack MCP Server (bundled in CLI)</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <p data-lang="fr">Le serveur MCP SmartStack est <strong>inclus dans la CLI</strong>. Il est enregistre automatiquement lors du <code>smartstack install</code>. Si besoin d'un enregistrement manuel :</p>
-                                    <p data-lang="en">The SmartStack MCP server is <strong>bundled in the CLI</strong>. It is automatically registered during <code>smartstack install</code>. For manual registration if needed:</p>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code># Enregistrement automatique (recommande)
-smartstack install --force
-# Enregistrement manuel (si necessaire)
-claude mcp add smartstack -- npx --package @atlashub/smartstack-cli smartstack-mcp</code></pre>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 7: Context7 MCP Server -->
-                        <li class="checklist-item" data-step="7">
-                            <span class="checklist-number">7</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(7)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Installer Context7 MCP Server (optionnel)</span>
-                                    <span data-lang="en">Install Context7 MCP Server (optional)</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <p data-lang="fr">Installez le serveur MCP Context7 pour acceder a la documentation des bibliotheques.</p>
-                                    <p data-lang="en">Install the Context7 MCP server to access library documentation.</p>
-                                    <p data-lang="fr">Obtenez une cle API sur <a href="https://context7.com" target="_blank">context7.com</a>, puis entrez-la ci-dessous :</p>
-                                    <p data-lang="en">Get an API key at <a href="https://context7.com" target="_blank">context7.com</a>, then enter it below:</p>
-                                    <div class="api-key-input" style="margin: 1rem 0;">
-                                        <label style="display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">
-                                            <span data-lang="fr">Votre cle API Context7 :</span>
-                                            <span data-lang="en">Your Context7 API key:</span>
-                                        </label>
-                                        <input type="text"
-                                               id="context7-api-key"
-                                               placeholder="ctx7_xxxxxxxxxxxxxxxx"
-                                               style="width: 100%; max-width: 400px; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-family: monospace; font-size: 0.9rem;"
-                                               oninput="updateContext7Commands()">
-                                    </div>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code id="context7-commands"># 1. Definir la cle API
-$env:CONTEXT7_API_KEY = "<span class="context7-key-placeholder" style="color: var(--text-muted);">votre-cle-api</span>"
-# 2. Installer le package
-npm install -g @upstash/context7-mcp
-# 3. Enregistrer dans Claude
-claude mcp add context7 -- npx @upstash/context7-mcp</code></pre>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 8: Azure DevOps MCP Server -->
-                        <li class="checklist-item" data-step="8">
-                            <span class="checklist-number">8</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(8)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Installer Azure DevOps MCP Server (optionnel)</span>
-                                    <span data-lang="en">Install Azure DevOps MCP Server (optional)</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <p data-lang="fr">Si vous utilisez Azure DevOps, installez ce serveur MCP pour interagir avec vos repos, PRs et pipelines.</p>
-                                    <p data-lang="en">If you use Azure DevOps, install this MCP server to interact with your repos, PRs, and pipelines.</p>
-                                    <p data-lang="fr">Vous aurez besoin d'un <strong>Personal Access Token (PAT)</strong> Azure DevOps avec les permissions adequates.</p>
-                                    <p data-lang="en">You'll need an Azure DevOps <strong>Personal Access Token (PAT)</strong> with the appropriate permissions.</p>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code># 1. Definir votre PAT Azure DevOps
-$env:AZURE_DEVOPS_AUTH_METHOD = "pat"
-$env:AZURE_DEVOPS_PAT = "votre-pat-token"
-# 2. Enregistrer dans Claude (remplacez votre-org par votre organisation)
-claude mcp add azure-devops -- npx -y @azure-devops/mcp votre-org</code></pre>
-                                    </div>
-                                    <div class="tutorial-note" style="margin-top: 0.5rem;">
-                                        <p data-lang="fr"><strong>Creer un PAT :</strong> Azure DevOps → User Settings → Personal Access Tokens → New Token. Permissions recommandees : Code (Read & Write), Work Items (Read & Write), Build (Read).</p>
-                                        <p data-lang="en"><strong>Create a PAT:</strong> Azure DevOps → User Settings → Personal Access Tokens → New Token. Recommended permissions: Code (Read & Write), Work Items (Read & Write), Build (Read).</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 9: Restart VS Code -->
-                        <li class="checklist-item" data-step="9">
-                            <span class="checklist-number">9</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(9)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Redemarrer VS Code</span>
-                                    <span data-lang="en">Restart VS Code</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <div class="alert alert-warning" style="margin-bottom: 1rem;">
-                                        <span class="alert-icon">&#9888;</span>
-                                        <div class="alert-content">
-                                            <p data-lang="fr"><strong>Important :</strong> Apres l'installation des serveurs MCP, vous devez redemarrer VS Code pour que les changements soient pris en compte.</p>
-                                            <p data-lang="en"><strong>Important:</strong> After installing MCP servers, you must restart VS Code for the changes to take effect.</p>
-                                        </div>
-                                    </div>
-                                    <p data-lang="fr">Fermez completement VS Code et rouvrez-le. Cela permet a Claude Code de detecter les nouveaux serveurs MCP.</p>
-                                    <p data-lang="en">Close VS Code completely and reopen it. This allows Claude Code to detect the new MCP servers.</p>
-                                </div>
-                            </div>
-                        </li>
-                        <!-- Step 10: Verification -->
-                        <li class="checklist-item" data-step="10">
-                            <span class="checklist-number">10</span>
-                            <div class="checklist-checkbox" onclick="toggleStep(10)"></div>
-                            <div class="checklist-content">
-                                <div class="checklist-title">
-                                    <span data-lang="fr">Verifier l'installation</span>
-                                    <span data-lang="en">Verify Installation</span>
-                                </div>
-                                <div class="checklist-description">
-                                    <p data-lang="fr">Verifiez que tout est correctement installe :</p>
-                                    <p data-lang="en">Verify that everything is correctly installed:</p>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code># Verifier les versions
-node --version
-claude --version
-smartstack --version
-# Verifier les serveurs MCP enregistres
-claude mcp list</code></pre>
-                                    </div>
-                                    <p data-lang="fr" style="margin-top: 1rem;">Dans Claude Code, verifiez que les MCP fonctionnent :</p>
-                                    <p data-lang="en" style="margin-top: 1rem;">In Claude Code, verify that MCPs are working:</p>
-                                    <div class="code-block">
-                                        <button class="copy-btn">Copy</button>
-                                        <pre><code># Verifier le statut des serveurs MCP
-/mcp healthcheck</code></pre>
-                                    </div>
-                                    <div class="alert alert-success" style="margin-top: 1rem;">
-                                        <span class="alert-icon">&#9989;</span>
-                                        <div class="alert-content">
-                                            <p data-lang="fr">Felicitations ! Vous pouvez maintenant :</p>
-                                            <p data-lang="en">Congratulations! You can now:</p>
-                                            <ul style="margin: 0.5rem 0 0 1rem;">
-                                                <li data-lang="fr">Creer un nouveau projet : <code>smartstack init MyProject</code></li>
-                                                <li data-lang="en">Create a new project: <code>smartstack init MyProject</code></li>
-                                                <li data-lang="fr">Ou initialiser sur un projet existant : <code>smartstack init</code></li>
-                                                <li data-lang="en">Or initialize on an existing project: <code>smartstack init</code></li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                    <!-- Troubleshooting Section -->
-                    <div class="alert alert-info" style="margin-top: 2rem;">
-                        <span class="alert-icon">&#128736;</span>
-                        <div class="alert-content">
-                            <h4 data-lang="fr" style="margin-top: 0;">Problemes courants</h4>
-                            <h4 data-lang="en" style="margin-top: 0;">Common Issues</h4>
-                            <ul style="margin: 0.5rem 0 0 1rem;">
-                                <li data-lang="fr"><strong>MCP non detecte :</strong> Redemarrez VS Code completement (File → Exit, pas juste fermer la fenetre)</li>
-                                <li data-lang="en"><strong>MCP not detected:</strong> Restart VS Code completely (File → Exit, not just closing the window)</li>
-                                <li data-lang="fr"><strong>Erreur "command not found" :</strong> Fermez et rouvrez votre terminal PowerShell pour recharger le PATH</li>
-                                <li data-lang="en"><strong>"command not found" error:</strong> Close and reopen your PowerShell terminal to reload the PATH</li>
-                                <li data-lang="fr"><strong>Permissions refusees :</strong> Executez PowerShell en tant qu'administrateur</li>
-                                <li data-lang="en"><strong>Permission denied:</strong> Run PowerShell as administrator</li>
-                                <li data-lang="fr"><strong>MCP healthcheck echoue :</strong> Verifiez vos cles API et tokens dans les variables d'environnement</li>
-                                <li data-lang="en"><strong>MCP healthcheck fails:</strong> Check your API keys and tokens in environment variables</li>
-                            </ul>
-                        </div>
-                    </div>
-                </section>
-                <!-- Useful Commands Section -->
-                <section id="useful-commands">
-                    <h3>
-                        <span data-lang="fr">Commandes utiles</span>
-                        <span data-lang="en">Useful Commands</span>
-                    </h3>
-                    <p data-lang="fr">Voici les commandes essentielles a connaitre apres l'installation :</p>
-                    <p data-lang="en">Here are the essential commands to know after installation:</p>
-                    <!-- Terminal Commands -->
-                    <h4 style="margin-top: 1.5rem;">
-                        <span data-lang="fr">Dans le terminal PowerShell</span>
-                        <span data-lang="en">In PowerShell terminal</span>
-                    </h4>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th data-lang="fr">Commande</th>
-                                    <th data-lang="en">Command</th>
-                                    <th data-lang="fr">Description</th>
-                                    <th data-lang="en">Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>ss --version</code></td>
-                                    <td data-lang="fr">Afficher la version installee</td>
-                                    <td data-lang="en">Show installed version</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss install</code></td>
-                                    <td data-lang="fr">Deployer skills, agents et hooks</td>
-                                    <td data-lang="en">Deploy skills, agents and hooks</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss install --force</code></td>
-                                    <td data-lang="fr">Forcer la reinstallation (ecrase les fichiers existants)</td>
-                                    <td data-lang="en">Force reinstall (overwrites existing files)</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss install --local</code></td>
-                                    <td data-lang="fr">Installer en local dans le projet (au lieu de global)</td>
-                                    <td data-lang="en">Install locally in the project (instead of global)</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss init</code></td>
-                                    <td data-lang="fr">Initialiser SmartStack dans le projet actuel</td>
-                                    <td data-lang="en">Initialize SmartStack in current project</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss init &lt;ProjectName&gt;</code></td>
-                                    <td data-lang="fr">Creer un nouveau projet SmartStack</td>
-                                    <td data-lang="en">Create a new SmartStack project</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss update</code></td>
-                                    <td data-lang="fr">Mettre a jour la CLI SmartStack elle-meme</td>
-                                    <td data-lang="en">Update the SmartStack CLI itself</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss upgrade</code></td>
-                                    <td data-lang="fr">Mettre a jour les packages SmartStack (NuGet + npm) vers la derniere version stable</td>
-                                    <td data-lang="en">Upgrade SmartStack packages (NuGet + npm) to the latest stable version</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss upgrade --preview</code></td>
-                                    <td data-lang="fr">Mettre a jour vers la derniere version preview/prerelease</td>
-                                    <td data-lang="en">Upgrade to the latest preview/prerelease version</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss upgrade --dry-run</code></td>
-                                    <td data-lang="fr">Afficher les mises a jour disponibles sans les appliquer</td>
-                                    <td data-lang="en">Show available upgrades without applying them</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss doctor</code></td>
-                                    <td data-lang="fr">Diagnostiquer l'installation (versions, MCP, config)</td>
-                                    <td data-lang="en">Diagnose the installation (versions, MCP, config)</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss docs</code></td>
-                                    <td data-lang="fr">Ouvrir cette documentation dans le navigateur</td>
-                                    <td data-lang="en">Open this documentation in the browser</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss docs --list</code></td>
-                                    <td data-lang="fr">Lister toutes les pages de documentation disponibles</td>
-                                    <td data-lang="en">List all available documentation pages</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss status</code></td>
-                                    <td data-lang="fr">Afficher le statut de l'installation SmartStack</td>
-                                    <td data-lang="en">Show SmartStack installation status</td>
-                                </tr>
-                                <tr>
-                                    <td><code>ss uninstall</code></td>
-                                    <td data-lang="fr">Desinstaller les fichiers SmartStack</td>
-                                    <td data-lang="en">Uninstall SmartStack files</td>
-                                </tr>
-                                <tr>
-                                    <td><code>claude mcp list</code></td>
-                                    <td data-lang="fr">Lister les serveurs MCP enregistres</td>
-                                    <td data-lang="en">List registered MCP servers</td>
-                                </tr>
-                                <tr>
-                                    <td><code>claude mcp remove &lt;name&gt;</code></td>
-                                    <td data-lang="fr">Supprimer un serveur MCP</td>
-                                    <td data-lang="en">Remove an MCP server</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <!-- Claude Code Commands -->
-                    <h4 style="margin-top: 1.5rem;">
-                        <span data-lang="fr">Dans Claude Code (VS Code)</span>
-                        <span data-lang="en">In Claude Code (VS Code)</span>
-                    </h4>
-                    <div class="table-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th data-lang="fr">Commande</th>
-                                    <th data-lang="en">Command</th>
-                                    <th data-lang="fr">Description</th>
-                                    <th data-lang="en">Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td><code>/mcp healthcheck</code></td>
-                                    <td data-lang="fr">Verifier le statut de tous les serveurs MCP</td>
-                                    <td data-lang="en">Check status of all MCP servers</td>
-                                </tr>
-                                <tr>
-                                    <td><code>/mcp tools</code></td>
-                                    <td data-lang="fr">Lister les outils disponibles dans les MCP</td>
-                                    <td data-lang="en">List available tools in MCPs</td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow init</code></td>
-                                    <td data-lang="fr">Initialiser GitFlow dans le projet</td>
-                                    <td data-lang="en">Initialize GitFlow in project</td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow status</code></td>
-                                    <td data-lang="fr">Voir le statut GitFlow</td>
-                                    <td data-lang="en">View GitFlow status</td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow start feature &lt;nom&gt;</code></td>
-                                    <td data-lang="fr">Demarrer une nouvelle feature</td>
-                                    <td data-lang="en">Start a new feature</td>
-                                </tr>
-                                <tr>
-                                    <td><code>/gitflow commit</code></td>
-                                    <td data-lang="fr">Commit intelligent avec validation</td>
-                                    <td data-lang="en">Smart commit with validation</td>
-                                </tr>
-                                <tr>
-                                    <td><code>/validate</code></td>
-                                    <td data-lang="fr">Valider les conventions SmartStack</td>
-                                    <td data-lang="en">Validate SmartStack conventions</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="tutorial-note" style="margin-top: 1rem;">
-                        <p data-lang="fr"><strong>Astuce :</strong> Tapez <code>/</code> dans Claude Code pour voir toutes les commandes (skills) disponibles.</p>
-                        <p data-lang="en"><strong>Tip:</strong> Type <code>/</code> in Claude Code to see all available commands (skills).</p>
-                    </div>
-                </section>
-                <!-- Next Steps - Tutorial -->
-                <section id="next-steps">
-                    <h3>
-                        <span data-lang="fr">Demarrer votre premier projet</span>
-                        <span data-lang="en">Start your first project</span>
-                    </h3>
-                    <div class="alert alert-success" style="margin-bottom: 1.5rem;">
-                        <span class="alert-icon">&#9989;</span>
-                        <div class="alert-content">
-                            <p data-lang="fr"><strong>Vous lisez cette doc dans votre projet ?</strong> Vous etes deja pret ! Les etapes A, B, C sont deja faites. <a href="#step-d" style="color: var(--success); font-weight: 600;">Passez directement a l'etape D &rarr;</a></p>
-                            <p data-lang="en"><strong>Reading this doc in your project?</strong> You're already set! Steps A, B, C are done. <a href="#step-d" style="color: var(--success); font-weight: 600;">Skip to step D &rarr;</a></p>
-                        </div>
-                    </div>
-                    <p data-lang="fr" style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem;">Les etapes A, B, C ci-dessous sont pour reference si vous devez configurer un nouveau projet.</p>
-                    <p data-lang="en" style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem;">Steps A, B, C below are for reference if you need to set up a new project.</p>
-                    <!-- Step A: Create repo -->
-                    <div class="tutorial-section">
-                        <h4>
-                            <span class="step-badge">A</span>
-                            <span data-lang="fr">Creer le repository Git</span>
-                            <span data-lang="en">Create the Git repository</span>
-                        </h4>
-                        <p data-lang="fr">Avant d'initialiser SmartStack, vous devez creer un repository sur votre plateforme Git.</p>
-                        <p data-lang="en">Before initializing SmartStack, you need to create a repository on your Git platform.</p>
-                        <div class="platform-content github-content active">
-                            <ol style="margin: 1rem 0 1rem 1.5rem; color: var(--text-muted);">
-                                <li data-lang="fr">Allez sur <a href="https://github.com/new" target="_blank">github.com/new</a></li>
-                                <li data-lang="en">Go to <a href="https://github.com/new" target="_blank">github.com/new</a></li>
-                                <li data-lang="fr">Nommez votre repository (ex: <code>MonProjet</code>)</li>
-                                <li data-lang="en">Name your repository (e.g., <code>MyProject</code>)</li>
-                                <li data-lang="fr">Laissez-le <strong>vide</strong> (pas de README, .gitignore, ou license)</li>
-                                <li data-lang="en">Leave it <strong>empty</strong> (no README, .gitignore, or license)</li>
-                                <li data-lang="fr">Cliquez sur "Create repository"</li>
-                                <li data-lang="en">Click "Create repository"</li>
-                            </ol>
-                        </div>
-                        <div class="platform-content azure-content">
-                            <ol style="margin: 1rem 0 1rem 1.5rem; color: var(--text-muted);">
-                                <li data-lang="fr">Allez dans votre projet Azure DevOps</li>
-                                <li data-lang="en">Go to your Azure DevOps project</li>
-                                <li data-lang="fr">Repos &gt; "New repository"</li>
-                                <li data-lang="en">Repos &gt; "New repository"</li>
-                                <li data-lang="fr">Nommez votre repository (ex: <code>MonProjet</code>)</li>
-                                <li data-lang="en">Name your repository (e.g., <code>MyProject</code>)</li>
-                                <li data-lang="fr">Decochez "Add a README"</li>
-                                <li data-lang="en">Uncheck "Add a README"</li>
-                                <li data-lang="fr">Cliquez sur "Create"</li>
-                                <li data-lang="en">Click "Create"</li>
-                            </ol>
-                        </div>
-                        <div class="tutorial-note">
-                            <p data-lang="fr"><strong>Pourquoi un repo vide ?</strong> SmartStack va initialiser la structure du projet avec les bons fichiers. Un repo pre-rempli pourrait creer des conflits.</p>
-                            <p data-lang="en"><strong>Why an empty repo?</strong> SmartStack will initialize the project structure with the correct files. A pre-filled repo could create conflicts.</p>
-                        </div>
-                    </div>
-                    <!-- Step B: Initialize GitFlow -->
-                    <div class="tutorial-section">
-                        <h4>
-                            <span class="step-badge">B</span>
-                            <span data-lang="fr">Initialiser GitFlow</span>
-                            <span data-lang="en">Initialize GitFlow</span>
-                        </h4>
-                        <p data-lang="fr">Naviguez vers votre dossier de travail, puis ouvrez Claude Code :</p>
-                        <p data-lang="en">Navigate to your work folder, then open Claude Code:</p>
-                        <div class="code-block">
-                            <button class="copy-btn">Copy</button>
-                            <pre><code># 1. Naviguez vers votre dossier de travail (exemple)
-cd C:\dev
-# 2. Ouvrez Claude Code dans VS Code
-code .</code></pre>
-                        </div>
-                        <p data-lang="fr" style="margin-top: 1rem;">Puis dans Claude Code, lancez l'initialisation GitFlow :</p>
-                        <p data-lang="en" style="margin-top: 1rem;">Then in Claude Code, launch GitFlow initialization:</p>
-                        <div class="code-block">
-                            <button class="copy-btn">Copy</button>
-                            <pre><code># Dans Claude Code, tapez :
-/gitflow init</code></pre>
-                        </div>
-                        <p data-lang="fr" style="margin-top: 1rem;">L'assistant vous guidera pour :</p>
-                        <p data-lang="en" style="margin-top: 1rem;">The assistant will guide you to:</p>
-                        <ul style="margin: 0.5rem 0 1rem 1.5rem; color: var(--text-muted);">
-                            <li data-lang="fr">Cloner votre repository</li>
-                            <li data-lang="en">Clone your repository</li>
-                            <li data-lang="fr">Configurer les branches (main, develop)</li>
-                            <li data-lang="en">Configure branches (main, develop)</li>
-                            <li data-lang="fr">Definir les conventions de versioning</li>
-                            <li data-lang="en">Define versioning conventions</li>
-                        </ul>
-                        <div class="tutorial-note">
-                            <p data-lang="fr"><strong>Conseil :</strong> Repondez aux questions de l'assistant. Il adaptera la configuration a vos besoins.</p>
-                            <p data-lang="en"><strong>Tip:</strong> Answer the assistant's questions. It will adapt the configuration to your needs.</p>
-                        </div>
-                    </div>
-                    <!-- Step C: Initialize SmartStack -->
-                    <div class="tutorial-section">
-                        <h4>
-                            <span class="step-badge">C</span>
-                            <span data-lang="fr">Installer les outils SmartStack</span>
-                            <span data-lang="en">Install SmartStack tools</span>
-                        </h4>
-                        <p data-lang="fr">Vous etes maintenant dans votre projet clone. Installez les outils SmartStack :</p>
-                        <p data-lang="en">You are now in your cloned project. Install SmartStack tools:</p>
-                        <div class="code-block">
-                            <button class="copy-btn">Copy</button>
-                            <pre><code># Depuis la racine de votre projet clone
-smartstack init</code></pre>
-                        </div>
-                        <p data-lang="fr" style="margin-top: 1rem;">Cette commande va :</p>
-                        <p data-lang="en" style="margin-top: 1rem;">This command will:</p>
-                        <ul style="margin: 0.5rem 0 1rem 1.5rem; color: var(--text-muted);">
-                            <li data-lang="fr">Installer les skills et agents SmartStack</li>
-                            <li data-lang="en">Install SmartStack skills and agents</li>
-                            <li data-lang="fr">Configurer les hooks Claude Code</li>
-                            <li data-lang="en">Configure Claude Code hooks</li>
-                            <li data-lang="fr">Generer le fichier <code>CLAUDE.md</code> avec les regles du projet</li>
-                            <li data-lang="en">Generate the <code>CLAUDE.md</code> file with project rules</li>
-                            <li data-lang="fr">Generer cette documentation (<code>.documentation/</code>)</li>
-                            <li data-lang="en">Generate this documentation (<code>.documentation/</code>)</li>
-                            <li data-lang="fr">Verifier les serveurs MCP</li>
-                            <li data-lang="en">Verify MCP servers</li>
-                        </ul>
-                        <div class="tutorial-note">
-                            <p data-lang="fr"><strong>Nouveau projet .NET ?</strong> Si vous partez de zero et voulez creer la structure Clean Architecture, utilisez plutot <code>smartstack init MonProjet</code> avant l'etape A (sans creer de repo au prealable).</p>
-                            <p data-lang="en"><strong>New .NET project?</strong> If you're starting from scratch and want to create the Clean Architecture structure, use <code>smartstack init MyProject</code> before step A (without creating a repo beforehand).</p>
-                        </div>
-                    </div>
-                    <!-- Step D: Start working -->
-                    <div class="tutorial-section" id="step-d">
-                        <h4>
-                            <span class="step-badge">D</span>
-                            <span data-lang="fr">Commencer a travailler</span>
-                            <span data-lang="en">Start working</span>
-                        </h4>
-                        <p data-lang="fr">Votre environnement est pret ! Le workflow GitFlow vous guide selon votre objectif :</p>
-                        <p data-lang="en">Your environment is ready! The GitFlow workflow guides you based on your goal:</p>
-                        <!-- Mini decision guide -->
-                        <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0;">
-                            <div style="flex: 1; min-width: 200px; padding: 1rem; background: rgba(34, 197, 94, 0.1); border: 1px solid #22c55e; border-radius: 8px;">
-                                <div style="font-weight: 600; color: #22c55e; margin-bottom: 0.5rem;">
-                                    <span data-lang="fr">Nouvelle fonctionnalite</span>
-                                    <span data-lang="en">New feature</span>
-                                </div>
-                                <code style="font-size: 0.85rem;">/gitflow start feature {nom}</code>
-                            </div>
-                            <div style="flex: 1; min-width: 200px; padding: 1rem; background: rgba(234, 179, 8, 0.1); border: 1px solid #eab308; border-radius: 8px;">
-                                <div style="font-weight: 600; color: #eab308; margin-bottom: 0.5rem;">
-                                    <span data-lang="fr">Deployer en prod</span>
-                                    <span data-lang="en">Deploy to prod</span>
-                                </div>
-                                <code style="font-size: 0.85rem;">/gitflow start release</code>
-                            </div>
-                            <div style="flex: 1; min-width: 200px; padding: 1rem; background: rgba(236, 72, 153, 0.1); border: 1px solid #ec4899; border-radius: 8px;">
-                                <div style="font-weight: 600; color: #ec4899; margin-bottom: 0.5rem;">
-                                    <span data-lang="fr">Bug urgent prod</span>
-                                    <span data-lang="en">Urgent prod bug</span>
-                                </div>
-                                <code style="font-size: 0.85rem;">/gitflow start hotfix {nom}</code>
-                            </div>
-                        </div>
-                        <p data-lang="fr" style="margin-top: 1rem;">Cycle de travail type :</p>
-                        <p data-lang="en" style="margin-top: 1rem;">Typical work cycle:</p>
-                        <div class="code-block">
-                            <button class="copy-btn">Copy</button>
-                            <pre><code># 1. Demarrer une branche
-/gitflow start feature ma-fonctionnalite
-# 2. Coder... puis commiter regulierement
-/gitflow commit
-# 3. Creer une Pull Request quand c'est pret
-/gitflow pr
-# 4. Finaliser apres le merge
-/gitflow finish</code></pre>
-                        </div>
-                        <div class="alert alert-info" style="margin-top: 1rem;">
-                            <span class="alert-icon">&#128218;</span>
-                            <div class="alert-content">
-                                <p data-lang="fr"><strong>Guide complet :</strong> Consultez le <a href="gitflow.html#workflow-decision" style="color: var(--primary);">schema decisonnel GitFlow</a> pour visualiser le workflow complet et choisir la bonne commande selon votre situation.</p>
-                                <p data-lang="en"><strong>Complete guide:</strong> See the <a href="gitflow.html#workflow-decision" style="color: var(--primary);">GitFlow decision diagram</a> to visualize the complete workflow and choose the right command for your situation.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- Links to documentation -->
-                    <h4 style="margin-top: 2rem;">
-                        <span data-lang="fr">Documentation complementaire</span>
-                        <span data-lang="en">Additional documentation</span>
-                    </h4>
-                    <div class="feature-grid">
-                        <a href="init.html" class="feature-item" style="text-decoration: none;">
-                            <span class="feature-icon">&#128640;</span>
-                            <span class="feature-text">
-                                <span data-lang="fr">Commande Init</span>
-                                <span data-lang="en">Init Command</span>
-                            </span>
-                        </a>
-                        <a href="gitflow.html" class="feature-item" style="text-decoration: none;">
-                            <span class="feature-icon">&#128256;</span>
-                            <span class="feature-text">
-                                <span data-lang="fr">Guide GitFlow</span>
-                                <span data-lang="en">GitFlow Guide</span>
-                            </span>
-                        </a>
-                        <a href="efcore.html" class="feature-item" style="text-decoration: none;">
-                            <span class="feature-icon">&#128452;</span>
-                            <span class="feature-text">
-                                <span data-lang="fr">Migrations EF Core</span>
-                                <span data-lang="en">EF Core Migrations</span>
-                            </span>
-                        </a>
-                    </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>
-    <script>
-        // Installation page specific scripts
-        var STORAGE_KEY = 'smartstack-install-progress';
-        var completedSteps = [];
-        // Initialize on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            loadProgress();
-            loadPlatform();
-            loadOS();
-            updateProgressBar();
-        });
-        // OS switching
-        function setOS(os) {
-            // Update buttons
-            var buttons = document.querySelectorAll('.os-btn');
-            buttons.forEach(function(btn) {
-                btn.classList.remove('active');
-                if (btn.dataset.os === os) {
-                    btn.classList.add('active');
-                }
-            });
-            // Update content visibility
-            var windowsContent = document.querySelectorAll('.windows-content');
-            var macosContent = document.querySelectorAll('.macos-content');
-            var linuxContent = document.querySelectorAll('.linux-content');
-            windowsContent.forEach(function(el) {
-                el.classList.toggle('active', os === 'windows');
-            });
-            macosContent.forEach(function(el) {
-                el.classList.toggle('active', os === 'macos');
-            });
-            linuxContent.forEach(function(el) {
-                el.classList.toggle('active', os === 'linux');
-            });
-            // Save preference
-            localStorage.setItem('smartstack-os', os);
-        }
-        function loadOS() {
-            // Try to detect OS
-            var detectedOS = 'windows';
-            var userAgent = navigator.userAgent.toLowerCase();
-            if (userAgent.indexOf('mac') !== -1) {
-                detectedOS = 'macos';
-            } else if (userAgent.indexOf('linux') !== -1) {
-                detectedOS = 'linux';
-            }
-            var savedOS = localStorage.getItem('smartstack-os') || detectedOS;
-            setOS(savedOS);
-        }
-        // Platform switching
-        function setPlatform(platform) {
-            // Update buttons
-            var buttons = document.querySelectorAll('.platform-btn');
-            buttons.forEach(function(btn) {
-                btn.classList.remove('active');
-                if (btn.dataset.platform === platform) {
-                    btn.classList.add('active');
-                }
-            });
-            // Update content visibility
-            var githubContent = document.querySelectorAll('.github-content');
-            var azureContent = document.querySelectorAll('.azure-content');
-            githubContent.forEach(function(el) {
-                el.classList.toggle('active', platform === 'github');
-            });
-            azureContent.forEach(function(el) {
-                el.classList.toggle('active', platform === 'azure');
-            });
-            // Save preference
-            localStorage.setItem('smartstack-platform', platform);
-        }
-        function loadPlatform() {
-            var platform = localStorage.getItem('smartstack-platform') || 'github';
-            setPlatform(platform);
-        }
-        // Checklist management
-        function toggleStep(stepNumber) {
-            var index = completedSteps.indexOf(stepNumber);
-            if (index === -1) {
-                completedSteps.push(stepNumber);
-            } else {
-                completedSteps.splice(index, 1);
-            }
-            saveProgress();
-            updateUI();
-        }
-        function saveProgress() {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(completedSteps));
-        }
-        function loadProgress() {
-            var saved = localStorage.getItem(STORAGE_KEY);
-            if (saved) {
-                try {
-                    completedSteps = JSON.parse(saved);
-                } catch (e) {
-                    completedSteps = [];
-                }
-            }
-            updateUI();
-        }
-        function resetProgress() {
-            completedSteps = [];
-            saveProgress();
-            updateUI();
-        }
-        function updateUI() {
-            var items = document.querySelectorAll('.checklist-item');
-            items.forEach(function(item) {
-                var step = parseInt(item.dataset.step);
-                if (completedSteps.indexOf(step) !== -1) {
-                    item.classList.add('completed');
-                } else {
-                    item.classList.remove('completed');
-                }
-            });
-            updateProgressBar();
-        }
-        function updateProgressBar() {
-            var total = 10;
-            var completed = completedSteps.length;
-            var percentage = (completed / total) * 100;
-            var progressFill = document.getElementById('progress-fill');
-            var progressCount = document.getElementById('progress-count');
-            if (progressFill) {
-                progressFill.style.width = percentage + '%';
-            }
-            if (progressCount) {
-                progressCount.textContent = completed + '/' + total;
-            }
-        }
-        // Context7 API key dynamic update
-        function updateContext7Commands() {
-            var input = document.getElementById('context7-api-key');
-            var placeholder = document.querySelector('.context7-key-placeholder');
-            var value = input.value.trim();
-            if (value) {
-                placeholder.textContent = value;
-                placeholder.style.color = 'var(--success)';
-            } else {
-                placeholder.textContent = 'votre-cle-api';
-                placeholder.style.color = 'var(--text-muted)';
-            }
-        }
-    </script>
 </body>
 </html>