@atlashub/smartstack-cli 1.14.1 → 1.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlashub/smartstack-cli",
-  "version": "1.14.1",
+  "version": "1.14.3",
   "description": "SmartStack Claude Code automation toolkit - GitFlow, APEX, EF Core migrations, prompts and more",
   "author": {
     "name": "SmartStack",

package/templates/skills/_shared.md

@@ -109,9 +109,32 @@ if (entity.UserType == UserType.System || entity.UserType == UserType.LocalAdmin
 
 ## MCP Tools References
 
-| Tool | Usage |
-|------|-------|
-| `mcp__smartstack__validate_conventions` | Validate conventions |
-| `mcp__smartstack__scaffold_extension` | Code generation |
-| `mcp__smartstack__check_migrations` | Check migrations |
-| `mcp__smartstack__scaffold_tests` | Generate tests |
+### Outils Core
+
+| Tool | Usage | Step APEX |
+|------|-------|-----------|
+| `mcp__smartstack__validate_conventions` | Valider conventions SmartStack (tables, migrations, services, namespaces, entities, tenants, controllers) | step-04-validate |
+| `mcp__smartstack__scaffold_extension` | Génération code (feature, entity, service, controller, component, dto, validator, repository) | step-03-execute |
+| `mcp__smartstack__check_migrations` | Analyser migrations EF Core (conflits, ordre, ModelSnapshot) | step-04-validate |
+| `mcp__smartstack__api_docs` | Documentation API depuis Swagger/OpenAPI ou controllers | step-01-analyze |
+| `mcp__smartstack__suggest_migration` | Suggérer nom migration ({context}_v{version}_{sequence}_{Description}) | step-03-execute |
+| `mcp__smartstack__generate_permissions` | Générer permissions RBAC depuis NavRoute | step-03-execute |
+
+### Outils Tests
+
+| Tool | Usage | Step APEX |
+|------|-------|-----------|
+| `mcp__smartstack__scaffold_tests` | Générer tests unitaires/intégration/sécurité | step-07-tests |
+| `mcp__smartstack__analyze_test_coverage` | Analyser couverture de tests du projet | step-07-tests |
+| `mcp__smartstack__validate_test_conventions` | Valider conventions de nommage des tests | step-07-tests |
+| `mcp__smartstack__suggest_test_scenarios` | Suggérer scénarios de test basés sur le code | step-07-tests |
+
+### Outils Frontend
+
+| Tool | Usage | Step APEX |
+|------|-------|-----------|
+| `mcp__smartstack__scaffold_api_client` | Générer client TypeScript avec NavRoute | step-03-execute |
+| `mcp__smartstack__scaffold_routes` | Générer React Router depuis NavRoute backend | step-03-execute |
+| `mcp__smartstack__validate_frontend_routes` | Valider synchronisation routes frontend/backend | step-04-validate |
+| `mcp__smartstack__scaffold_frontend_extension` | Générer infrastructure extension frontend | step-03-execute |
+| `mcp__smartstack__analyze_extension_points` | Analyser points d'extension dans les pages React | step-01-analyze |

package/templates/skills/apex/SKILL.md

@@ -225,6 +225,62 @@ When provided, step-00 will:
 - **Use parallel agents** for independent exploration tasks (unless economy_mode)
 </execution_rules>
 
+<mcp_requirements>
+**SmartStack MCP Integration:**
+
+APEX est fortement couplé au développement SmartStack via les outils MCP.
+Référence complète dans `_shared.md` section "MCP Tools References".
+
+### Outils obligatoires (chaque exécution APEX)
+
+| Tool | Quand | Step |
+|------|-------|------|
+| `mcp__smartstack__api_docs` | Analyse contexte API existant | step-01-analyze |
+| `mcp__smartstack__validate_conventions` | Validation finale du code généré | step-04-validate |
+
+### Outils conditionnels (step-03-execute)
+
+| Tool | Condition |
+|------|-----------|
+| `mcp__smartstack__scaffold_extension` | Génération entités/services/controllers |
+| `mcp__smartstack__suggest_migration` | Création nouvelle migration EF Core |
+| `mcp__smartstack__generate_permissions` | Génération permissions RBAC |
+| `mcp__smartstack__scaffold_api_client` | Génération client TypeScript |
+| `mcp__smartstack__scaffold_routes` | Génération routes React Router |
+
+### Outils conditionnels (step-04-validate)
+
+| Tool | Condition |
+|------|-----------|
+| `mcp__smartstack__check_migrations` | Si modifications EF Core détectées |
+| `mcp__smartstack__validate_frontend_routes` | Si code frontend généré |
+
+### Outils tests (step-07-tests, si `-t`)
+
+| Tool | Usage |
+|------|-------|
+| `mcp__smartstack__scaffold_tests` | Générer tests unitaires/intégration |
+| `mcp__smartstack__suggest_test_scenarios` | Suggérer scénarios de test |
+| `mcp__smartstack__analyze_test_coverage` | Analyser couverture existante |
+
+### Outils analyse (step-01-analyze)
+
+| Tool | Usage |
+|------|-------|
+| `mcp__smartstack__analyze_extension_points` | Identifier points d'extension React |
+
+### Vérification MCP (step-00)
+
+Au démarrage, vérifier la disponibilité du MCP SmartStack :
+- Si disponible : utiliser les outils MCP pour génération et validation
+- Si indisponible : avertir l'utilisateur, continuer en mode dégradé (outils manuels)
+
+### Mode économie (`-e`)
+
+En mode économie, les outils MCP restent disponibles mais les subagents sont désactivés.
+Privilégier les outils MCP (`scaffold_*`) pour la génération plutôt que l'écriture manuelle.
+</mcp_requirements>
+
 <success_criteria>
 
 - Each step loaded progressively

package/templates/skills/apex/steps/step-01-analyze.md

@@ -50,7 +50,24 @@ From the task description, identify:
 
 These keywords guide exploration - NOT planning.
 
-### 2. Explore Codebase
+### 2. SmartStack MCP Context (if available)
+
+**Use MCP tools for SmartStack-specific context:**
+
+```
+mcp__smartstack__api_docs:
+  format: "markdown"
+  # Récupère la documentation API existante
+  # Identifie les endpoints, DTOs, et patterns utilisés
+```
+
+This provides:
+- Existing API endpoints and their structure
+- DTOs and request/response models
+- Controller patterns and conventions
+- NavRoute hierarchy
+
+### 3. Explore Codebase
 
 **If `{economy_mode}` = true:**
 
@@ -98,7 +115,7 @@ Find:
 3. Known pitfalls or gotchas
 ```
 
-### 3. Synthesize Findings
+### 4. Synthesize Findings
 
 Combine results into structured context:
 
@@ -140,7 +157,7 @@ Combine results into structured context:
 - Use httpOnly cookies for tokens
 ```
 
-### 4. Infer Acceptance Criteria
+### 5. Infer Acceptance Criteria
 
 Based on task and context, infer success criteria:
 
@@ -156,7 +173,7 @@ Based on "{task_description}" and existing patterns:
 _These will be refined in the planning step._
 ```
 
-### 5. Save Output (if save_mode)
+### 6. Save Output (if save_mode)
 
 **If `{save_mode}` = true:**
 
@@ -165,7 +182,7 @@ Write findings to `{output_dir}/01-analyze.md`:
 - Add timestamp at the end
 - Update 00-context.md Progress table: 01-analyze -> Complete
 
-### 6. Present Context Summary
+### 7. Present Context Summary
 
 ```
 **Context Gathering Complete**

package/templates/skills/apex/steps/step-04-validate.md

@@ -85,7 +85,33 @@ pnpm run test
 3. Fix the root cause
 4. Re-run until passing
 
-### 3. Self-Audit Checklist
+### 3. SmartStack Convention Validation (if MCP available)
+
+**Use MCP to validate SmartStack conventions:**
+
+```
+mcp__smartstack__validate_conventions:
+  checks: ["all"]
+  # Valide: tables, migrations, services, namespaces, entities, tenants, controllers
+```
+
+**If EF Core changes detected, also run:**
+
+```
+mcp__smartstack__check_migrations:
+  # Vérifie conflits, ordre chronologique, ModelSnapshot
+```
+
+**MCP validation checks:**
+- [ ] Table naming (domain prefixes: auth_, nav_, cfg_, etc.)
+- [ ] Migration naming ({context}_v{version}_{sequence}_{Description})
+- [ ] Service interfaces (I*Service pattern)
+- [ ] Namespace structure (Domain → Application → Infrastructure → API)
+- [ ] Entity conventions (base classes, soft delete, audit)
+- [ ] Tenant isolation (ITenantEntity where required)
+- [ ] Controller routes (NavRoute attributes)
+
+### 4. Self-Audit Checklist
 
 Verify each item:
 
@@ -109,14 +135,14 @@ Verify each item:
 - [ ] Error handling consistent
 - [ ] Naming conventions match
 
-### 4. Format Code
+### 5. Format Code
 
 If format command available:
 ```bash
 pnpm run format
 ```
 
-### 5. Final Verification
+### 6. Final Verification
 
 Re-run all checks:
 ```bash
@@ -125,7 +151,7 @@ pnpm run typecheck && pnpm run lint
 
 Both MUST pass.
 
-### 6. Present Validation Results
+### 7. Present Validation Results
 
 ```
 **Validation Complete**
@@ -144,7 +170,7 @@ Both MUST pass.
 **Summary:** All checks passing, ready for next step.
 ```
 
-### 7. Save Output (if save_mode)
+### 8. Save Output (if save_mode)
 
 **If `{save_mode}` = true:**
 
@@ -154,7 +180,7 @@ Write to `{output_dir}/04-validate.md`:
 - Timestamp
 - Update 00-context.md Progress table: 04-validate -> Complete
 
-### 8. Determine Next Step
+### 9. Determine Next Step
 
 **Decision tree:**
 

package/templates/skills/ui-components/SKILL.md

@@ -70,12 +70,12 @@ import { EntityCard, ProviderCard, TemplateCard } from '@/components/ui/EntityCa
 | `links` | `Array<{ icon, label, href?, onClick? }>` |
 | `actions` | `Array<{ label, href?, onClick?, variant, icon?, disabled? }>` |
 
-### Action Variants
+### Action Variants (EntityCard)
 | Variant | Style |
 |---------|-------|
-| `primary` | `bg-accent-500 text-white` |
-| `secondary` | `bg-accent-700 text-white` |
-| `ghost` | `border bg-transparent` |
+| `primary` | `bg-[var(--color-accent-600)] text-white` |
+| `secondary` | `bg-[var(--bg-secondary)] text-[var(--text-secondary)]` |
+| `ghost` | `text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]` (NO border!) |
 
 ## RESPONSIVE GRID
 
@@ -159,12 +159,174 @@ const canExecute = hasPermission('module.action.execute');
 | Catalogs | Cards with complex interactive states |
 | Clickable grids | Cards with integrated forms |
 
+## CRITICAL: CSS VARIABLES (NEVER HARDCODE COLORS)
+
+**NEVER use hardcoded Tailwind colors.** ALWAYS use CSS variables for theme compliance.
+
+### Status Colors
+| Status | Background | Text | Border | Dot (solid) |
+|--------|------------|------|--------|-------------|
+| **Info** (Pending, Business) | `--info-bg` | `--info-text` | `--info-border` | `--info-dot` |
+| **Success** (Active) | `--success-bg` | `--success-text` | `--success-border` | `--success-dot` |
+| **Warning** (Suspended, Owner) | `--warning-bg` | `--warning-text` | `--warning-border` | `--warning-dot` |
+| **Error** (Danger, Archive) | `--error-bg` | `--error-text` | `--error-border` | `--error-dot` |
+| **Accent** (Personal, Primary) | `--accent-bg` | `--accent-text` | `--accent-border` | `--color-accent-500` |
+
+### Badge Pattern
+```tsx
+// ✅ CORRECT - Uses CSS variables
+<span className="px-2 py-0.5 text-xs rounded-[var(--radius-badge)] bg-[var(--info-bg)] text-[var(--info-text)]">
+  Info Badge
+</span>
+
+// ❌ WRONG - Hardcoded Tailwind colors
+<span className="bg-blue-500/10 text-blue-500">Info Badge</span>
+```
+
+### Status Config Pattern
+```tsx
+// ✅ CORRECT
+const STATUS_CONFIG = {
+  Pending: { bgColor: 'bg-[var(--info-bg)]', color: 'text-[var(--info-text)]', borderColor: 'border-[var(--info-border)]' },
+  Active: { bgColor: 'bg-[var(--success-bg)]', color: 'text-[var(--success-text)]', borderColor: 'border-[var(--success-border)]' },
+  Suspended: { bgColor: 'bg-[var(--warning-bg)]', color: 'text-[var(--warning-text)]', borderColor: 'border-[var(--warning-border)]' },
+  Archived: { bgColor: 'bg-[var(--bg-tertiary)]', color: 'text-[var(--text-tertiary)]', borderColor: 'border-[var(--border-color)]' }
+};
+
+// ❌ WRONG - dark: variants are obsolete
+const STATUS_CONFIG = {
+  Active: { bgColor: 'bg-emerald-50 dark:bg-emerald-900/20', ... }
+};
+```
+
+## BUTTON VARIANTS
+
+### Action Buttons (Status changes)
+```tsx
+// Success action (Activate)
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--success-dot)] text-white hover:opacity-90">
+  Activate
+</button>
+
+// Warning action (Suspend)
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--warning-dot)] text-white hover:opacity-90">
+  Suspend
+</button>
+
+// Danger action (Archive/Delete)
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--error-dot)] text-white hover:opacity-90">
+  Archive
+</button>
+
+// Primary action
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] text-white hover:bg-[var(--color-accent-700)]">
+  Save
+</button>
+
+// Ghost action (NO BORDER!)
+<button className="px-4 py-2 rounded-[var(--radius-button)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]">
+  Refresh
+</button>
+
+// Secondary action
+<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]">
+  Cancel
+</button>
+```
+
+### Button Rules
+| Variant | Background | Text | Border | Hover |
+|---------|------------|------|--------|-------|
+| **Primary** | `--color-accent-600` | `white` | none | `--color-accent-700` |
+| **Success** | `--success-dot` | `white` | none | `opacity-90` |
+| **Warning** | `--warning-dot` | `white` | none | `opacity-90` |
+| **Danger** | `--error-dot` | `white` | none | `opacity-90` |
+| **Secondary** | `--bg-secondary` | `--text-secondary` | none | `--bg-hover` |
+| **Ghost** | transparent | `--text-secondary` | **NONE** | `--bg-hover` |
+
+## DETAIL PAGE TEMPLATE
+
+### Structure
+```tsx
+<div className="container mx-auto px-4 py-6 max-w-7xl space-y-6">
+  {/* Header */}
+  <div className="flex items-center gap-4">
+    <button onClick={() => navigate(-1)} className="p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)]">
+      <ArrowLeft className="w-5 h-5 text-[var(--text-secondary)]" />
+    </button>
+    <div className="flex-1">
+      <h1 className="text-xl sm:text-2xl font-bold text-[var(--text-primary)]">{title}</h1>
+      <p className="text-sm text-[var(--text-secondary)]">{subtitle}</p>
+    </div>
+    <div className="flex items-center gap-2">
+      {/* Status badges */}
+    </div>
+  </div>
+
+  {/* Pill Tabs */}
+  <div className="flex gap-1 p-1 bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)]">
+    {tabs.map(tab => (
+      <button
+        key={tab.id}
+        className={`px-4 py-2 rounded-[var(--radius-button)] font-medium ${
+          activeTab === tab.id
+            ? 'bg-[var(--color-accent-600)] text-white'
+            : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]'
+        }`}
+      >
+        {tab.label}
+      </button>
+    ))}
+  </div>
+
+  {/* Tab Content */}
+  <div className="min-h-[400px]">{/* ... */}</div>
+</div>
+```
+
+### Info Card Pattern
+```tsx
+<div className="p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]">
+  <div className="flex items-center justify-between mb-4">
+    <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center gap-2">
+      <Icon className="w-5 h-5" />
+      {title}
+    </h3>
+    <button className="flex items-center gap-1 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]">
+      <Edit3 className="w-4 h-4" />
+      {t('common:edit')}
+    </button>
+  </div>
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    <div className="p-3 rounded-lg bg-[var(--bg-secondary)]">
+      <p className="text-xs text-[var(--text-tertiary)] uppercase tracking-wider mb-1">{label}</p>
+      <p className="text-sm text-[var(--text-primary)] font-medium">{value}</p>
+    </div>
+  </div>
+</div>
+```
+
+### Error Display Pattern
+```tsx
+{error && (
+  <div className="p-4 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)]">
+    <div className="flex items-center gap-2 text-[var(--error-text)]">
+      <AlertTriangle className="w-5 h-5" />
+      <span>{error}</span>
+    </div>
+  </div>
+)}
+```
+
 ## ABSOLUTE RULES
 
 | DO | DON'T |
 |----|-------|
+| CSS variables for ALL colors | Hardcoded Tailwind colors (`bg-blue-500`) |
+| `--success-dot`, `--warning-dot`, `--error-dot` for action buttons | `bg-emerald-500`, `bg-amber-500`, `bg-red-500` |
+| `--info-bg`, `--success-bg`, etc. for badges | `bg-blue-500/10 dark:bg-blue-900/20` |
+| Ghost buttons WITHOUT border | `border border-[var(--border-color)]` on ghost |
 | EntityCard for entities | Custom cards with manual divs |
-| Distinct colored header | rounded-full for avatar (that's table) |
 | Responsive grid 1→2→3→4 | Fixed non-responsive grid |
 | h-full + flex-1 + mt-auto | Unaligned buttons in grid |
 | Empty and loading states | Native HTML tooltip |