@atlashub/smartstack-cli 1.23.0 → 1.24.0

package/templates/skills/ui-components/responsive-guidelines.md

@@ -0,0 +1,278 @@
+# SmartStack Responsive Design Guidelines
+
+> **Objectif:** Toutes les pages SmartStack DOIVENT etre 100% responsives.
+> Strategy: Progressive degradation (Desktop → Tablet → Mobile)
+
+---
+
+## REGLE ABSOLUE
+
+```
+Toute page avec un tableau DOIT implementer:
+1. Desktop (lg+)  → Tableau complet avec toutes les colonnes
+2. Tablette (md)  → Tableau avec colonnes secondaires masquees
+3. Mobile (<md)   → Vue carte (cards), pas de tableau
+```
+
+---
+
+## Pattern: Table Responsive + Cards Mobile
+
+### Structure JSX
+
+```tsx
+// ============================================================
+// CONTENU RESPONSIVE
+// ============================================================
+
+{/* Mobile: Toujours afficher les cartes */}
+<div className="md:hidden">
+  {renderCardsView()}
+</div>
+
+{/* Tablette+: Afficher la vue selectionnee */}
+<div className="hidden md:block">
+  {viewMode === 'table' && renderTableView()}
+  {viewMode === 'cards' && renderCardsView()}
+  {viewMode === 'kanban' && renderKanbanView()}
+</div>
+```
+
+### ViewToggle (masquer sur mobile)
+
+```tsx
+{/* View Toggle - masque sur mobile (toujours cartes sur mobile) */}
+<div className="hidden md:block">
+  <ViewToggle
+    viewMode={viewMode}
+    onChange={setViewMode}
+    tableLabel="Table"
+    cardsLabel="Cards"
+    kanbanLabel="Kanban"
+  />
+</div>
+```
+
+---
+
+## Pattern: Colonnes Responsives dans Table
+
+### Priorite des colonnes
+
+| Priorite | Breakpoint | Exemple colonnes |
+|----------|------------|------------------|
+| 1 - Critique | Toujours visible | Nom, Status, Actions |
+| 2 - Important | `md:table-cell` | Email, Role |
+| 3 - Secondaire | `lg:table-cell` | Date creation |
+| 4 - Optionnel | `xl:table-cell` | Source, Groupe, Audit |
+
+### Implementation
+
+```tsx
+<thead>
+  <tr className="bg-[var(--bg-secondary)]">
+    {/* Toujours visible */}
+    <th className="px-4 py-3">Nom</th>
+
+    {/* Visible md+ (tablette) */}
+    <th className="px-4 py-3 hidden md:table-cell">Email</th>
+
+    {/* Visible lg+ (desktop) */}
+    <th className="px-4 py-3 hidden lg:table-cell">Role</th>
+
+    {/* Toujours visible */}
+    <th className="px-4 py-3">Status</th>
+
+    {/* Visible xl+ (grand ecran) */}
+    <th className="px-4 py-3 hidden xl:table-cell">Source</th>
+    <th className="px-4 py-3 hidden xl:table-cell">Groupe</th>
+
+    {/* Toujours visible */}
+    <th className="px-4 py-3">Actions</th>
+  </tr>
+</thead>
+
+<tbody>
+  {items.map(item => (
+    <tr key={item.id}>
+      <td className="px-4 py-3">{item.name}</td>
+      <td className="px-4 py-3 hidden md:table-cell">{item.email}</td>
+      <td className="px-4 py-3 hidden lg:table-cell">{item.role}</td>
+      <td className="px-4 py-3">{item.status}</td>
+      <td className="px-4 py-3 hidden xl:table-cell">{item.source}</td>
+      <td className="px-4 py-3 hidden xl:table-cell">{item.group}</td>
+      <td className="px-4 py-3">{/* Actions */}</td>
+    </tr>
+  ))}
+</tbody>
+```
+
+### Afficher info masquee sur petits ecrans
+
+```tsx
+{/* Dans la cellule Nom, afficher l'email sur mobile */}
+<td className="px-4 py-3">
+  <div className="font-medium">{item.name}</div>
+  {/* Email visible uniquement sur mobile (quand colonne email masquee) */}
+  <div className="text-sm text-[var(--text-tertiary)] md:hidden">
+    {item.email}
+  </div>
+</td>
+```
+
+---
+
+## Pattern: Cards View
+
+### Grid responsive
+
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+  {items.map(item => (
+    <div key={item.id} className="card p-4">
+      {/* Header avec avatar et status */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-3">
+          <Avatar name={item.name} />
+          <div>
+            <div className="font-medium">{item.name}</div>
+            <div className="text-sm text-[var(--text-tertiary)]">{item.email}</div>
+          </div>
+        </div>
+        <StatusBadge status={item.status} />
+      </div>
+
+      {/* Corps avec infos supplementaires */}
+      <div className="space-y-2 mb-4">
+        <div className="flex items-center gap-2 text-sm">
+          <Shield className="w-4 h-4 text-[var(--text-tertiary)]" />
+          <span>{item.role}</span>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-end gap-1 pt-3 border-t border-[var(--border-color)]">
+        <button className="btn btn-ghost p-2">
+          <Eye className="w-4 h-4" />
+        </button>
+        <button className="btn btn-ghost p-2">
+          <Edit2 className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  ))}
+</div>
+```
+
+---
+
+## Pattern: Header Responsive
+
+```tsx
+<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+  <div>
+    <h1 className="text-2xl font-bold">{title}</h1>
+    <p className="text-sm text-[var(--text-tertiary)] mt-1">
+      {count} elements
+    </p>
+  </div>
+  <div className="flex items-center gap-2">
+    <button className="btn btn-primary">
+      <Plus className="w-4 h-4" />
+      <span className="hidden sm:inline">Creer</span>
+    </button>
+  </div>
+</div>
+```
+
+---
+
+## Pattern: Filters Responsive
+
+```tsx
+{/* Barre de recherche + filtres */}
+<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+  {/* Recherche - pleine largeur sur mobile */}
+  <div className="flex items-center gap-3 flex-1">
+    <div className="relative flex-1 max-w-md">
+      <input type="text" className="input w-full" />
+    </div>
+    <button className="btn btn-secondary">
+      <Filter className="w-4 h-4" />
+      <span className="hidden sm:inline">Filtres</span>
+    </button>
+  </div>
+
+  {/* View Toggle - masque sur mobile */}
+  <div className="hidden md:block">
+    <ViewToggle viewMode={viewMode} onChange={setViewMode} />
+  </div>
+</div>
+
+{/* Panel filtres avances */}
+{showFilters && (
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    {/* Chaque filtre */}
+  </div>
+)}
+```
+
+---
+
+## Breakpoints Tailwind Reference
+
+| Breakpoint | Min Width | Usage |
+|------------|-----------|-------|
+| `sm:` | 640px | Petit mobile → Grand mobile |
+| `md:` | 768px | Mobile → Tablette |
+| `lg:` | 1024px | Tablette → Desktop |
+| `xl:` | 1280px | Desktop → Grand ecran |
+| `2xl:` | 1536px | Grand ecran |
+
+---
+
+## Checklist Responsive
+
+Avant de valider une page, verifier:
+
+- [ ] **Mobile** : Vue carte fonctionne (pas de tableau)
+- [ ] **Tablette** : Colonnes secondaires masquees
+- [ ] **Desktop** : Toutes les colonnes visibles
+- [ ] **ViewToggle** : Masque sur mobile
+- [ ] **Boutons** : Texte masque sur petit ecran (`hidden sm:inline`)
+- [ ] **Header** : Stack vertical sur mobile (`flex-col sm:flex-row`)
+- [ ] **Filtres** : Grid responsive (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`)
+- [ ] **Cards** : Grid responsive (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`)
+
+---
+
+## Anti-Patterns a Eviter
+
+```tsx
+// ❌ MAUVAIS: Pas de breakpoint
+<th>Email</th>
+
+// ✅ BON: Avec breakpoint responsive
+<th className="hidden md:table-cell">Email</th>
+```
+
+```tsx
+// ❌ MAUVAIS: Meme vue partout
+{viewMode === 'table' && renderTableView()}
+
+// ✅ BON: Cards forces sur mobile
+<div className="md:hidden">{renderCardsView()}</div>
+<div className="hidden md:block">
+  {viewMode === 'table' && renderTableView()}
+</div>
+```
+
+```tsx
+// ❌ MAUVAIS: ViewToggle visible sur mobile
+<ViewToggle viewMode={viewMode} onChange={setViewMode} />
+
+// ✅ BON: Masque sur mobile
+<div className="hidden md:block">
+  <ViewToggle viewMode={viewMode} onChange={setViewMode} />
+</div>
+```

package/templates/skills/utils/SKILL.md

@@ -0,0 +1,37 @@
+---
+name: utils
+description: Utility skills for SmartStack CLI development
+argument-hint: "<subcommand> [options]"
+---
+
+<objective>
+Collection of utility skills for SmartStack CLI development and testing.
+</objective>
+
+<quick_start>
+```bash
+/utils:test-web --quick       # Quick web accessibility test
+/utils:test-web --chrome      # E2E tests with Claude for Chrome
+/utils:test-web-config        # Configure test targets
+```
+</quick_start>
+
+<subcommands>
+
+| Command | Description |
+|---------|-------------|
+| `/utils:test-web` | Test web accessibility and content validation |
+| `/utils:test-web-config` | Configure test-web targets from external file |
+
+</subcommands>
+
+<entry_point>
+
+Route to subcommand file:
+
+| Subcommand | File |
+|------------|------|
+| `test-web` | `subcommands/test-web.md` |
+| `test-web-config` | `subcommands/test-web-config.md` |
+
+</entry_point>

package/templates/{commands/utils → skills/utils/subcommands}/test-web-config.md

@@ -1,43 +1,43 @@
 ---
+name: test-web-config
 description: Configure test-web targets from external config file
-argument-hint: [path/to/config.json]
+argument-hint: "[path/to/config.json]"
 allowed-tools: Read, Write, AskUserQuestion, Glob
 model: haiku
 ---
 
-# /test-web:config - Web test configuration
+# Test Web Configuration
 
 Updates web test configuration from external file.
 
-> **CLAUDE INSTRUCTION:** The `AskUserQuestion({...})` blocks are instructions to use the `AskUserQuestion` tool **interactively**. You MUST execute the tool with these parameters to get user response BEFORE continuing.
-
 ## Usage
 
-```
-/test-web:config                     # Ask for file interactively
-/test-web:config path/to/config.json # Load file directly
+```bash
+/utils:test-web-config                     # Ask for file interactively
+/utils:test-web-config path/to/config.json # Load file directly
 ```
 
 ## Workflow
 
-### 1. Get source file
+### 1. Get Source File
 
 **If argument provided**: Use given path
 
 **Otherwise**: Ask user
 
-```
-AskUserQuestion:
-  question: "Which configuration file do you want to load?"
-  header: "Config file"
-  options:
-    - label: "Search in project"
-      description: "Glob to find *test-web*.json files"
-    - label: "Enter path"
-      description: "Manually specify file path"
+```yaml
+questions:
+  - header: "Config file"
+    question: "Which configuration file do you want to load?"
+    options:
+      - label: "Search in project"
+        description: "Glob to find *test-web*.json files"
+      - label: "Enter path"
+        description: "Manually specify file path"
+    multiSelect: false
 ```
 
-### 2. Validate file
+### 2. Validate File
 
 1. Check file exists
 2. Read JSON content
@@ -72,22 +72,23 @@ AskUserQuestion:
 }
 ```
 
-### 3. Merge or replace
-
-```
-AskUserQuestion:
-  question: "How to apply new configuration?"
-  header: "Mode"
-  options:
-    - label: "Replace"
-      description: "Completely replace existing config"
-    - label: "Merge (add)"
-      description: "Add new targets to existing"
+### 3. Merge or Replace
+
+```yaml
+questions:
+  - header: "Mode"
+    question: "How to apply new configuration?"
+    options:
+      - label: "Replace"
+        description: "Completely replace existing config"
+      - label: "Merge (add)"
+        description: "Add new targets to existing"
+    multiSelect: false
 ```
 
 ### 4. Apply
 
-1. Read existing [.claude/test-web/config.json](.claude/test-web/config.json)
+1. Read existing `.claude/test-web/config.json`
 2. Apply chosen mode (replace or merge)
 3. Write result
 
@@ -95,17 +96,17 @@ AskUserQuestion:
 
 ```
 CONFIG UPDATED
-────────────────────────────────
+------------------------------------
 Source:  {source_file_path}
 Mode:    {replace|merge}
 Targets: {total_count}
-────────────────────────────────
+------------------------------------
 
 Test now:
-/test-web --quick
+/utils:test-web --quick
 ```
 
-## Example source files
+## Example Source Files
 
 ### Minimal
 
@@ -149,12 +150,3 @@ Test now:
   }
 }
 ```
-
-## Available templates
-
-Configuration templates are available in:
-[templates/test-web/](templates/test-web/)
-
----
-
-User: $ARGUMENTS

package/templates/{commands/utils → skills/utils/subcommands}/test-web.md

@@ -1,11 +1,12 @@
 ---
+name: test-web
 description: Test web accessibility and content validation
 argument-hint: --quick|--chrome|--report|<url>
 allowed-tools: WebFetch, WebSearch, Read, Write, Bash
 model: sonnet
 ---
 
-# /test-web - Web testing agent
+# Test Web Accessibility
 
 Tests accessibility and content of project web resources.
 
@@ -20,7 +21,7 @@ Tests accessibility and content of project web resources.
 
 ## Configuration
 
-Reads configuration from: [.claude/test-web/config.json](.claude/test-web/config.json)
+Reads configuration from: `.claude/test-web/config.json`
 
 ## Workflow
 
@@ -59,7 +60,7 @@ Reads configuration from: [.claude/test-web/config.json](.claude/test-web/config
 
 ### Report Mode (--report)
 
-Generates markdown file in [.claude/test-web/reports/](.claude/test-web/reports/):
+Generates markdown file in `.claude/test-web/reports/`:
 
 ```markdown
 # Test Web Report - YYYY-MM-DD HH:mm
@@ -77,75 +78,46 @@ Generates markdown file in [.claude/test-web/reports/](.claude/test-web/reports/
 - Screenshot: (if chrome mode)
 ```
 
-## Examples
-
-### Quick test of all configured URLs
-
-```
-/test-web --quick
-```
-
-### E2E test with browser
-
-```bash
-# First launch Claude Code with Chrome
-claude --chrome
-
-# Then execute tests
-/test-web --chrome
-```
-
-### Test specific URL
-
-```
-/test-web https://github.com/SIMON-Atlashub/atlashub-claudecode-cli
-```
-
-### Generate detailed report
-
-```
-/test-web --report
-```
-
 ## Output Format
 
 ### Success
 
 ```
 TEST WEB RESULTS
-────────────────────────────────
-✅ GitHub Repository     200 OK    "README" found
-✅ npm Package           200 OK    "claude-tools" found
-✅ Google Indexation     Results   Found in search
+------------------------------------
+OK GitHub Repository     200 OK    "README" found
+OK npm Package           200 OK    "claude-tools" found
+OK Google Indexation     Results   Found in search
 
 Status: 3/3 PASS
-────────────────────────────────
+------------------------------------
 ```
 
 ### Failure
 
 ```
 TEST WEB RESULTS
-────────────────────────────────
-✅ GitHub Repository     200 OK    "README" found
-❌ npm Package           404       Package not found
-⚠️ Google Indexation     Results   No relevant results
+------------------------------------
+OK GitHub Repository     200 OK    "README" found
+FAIL npm Package         404       Package not found
+WARN Google Indexation   Results   No relevant results
 
 Status: 1/3 PASS, 1 FAIL, 1 WARNING
-────────────────────────────────
+------------------------------------
 ```
 
-## BA/EPCT Integration
-
-This command can be called automatically in:
-- Phase T (Test) of BA workflow: `/ba:5-verify`
-- Phase T of EPCT workflow
+## Examples
 
-## Sources
+```bash
+# Quick test of all configured URLs
+/utils:test-web --quick
 
-- [Anthropic - Claude for Chrome](https://www.anthropic.com/news/claude-for-chrome)
-- [Claude Help Center](https://support.claude.com/en/articles/12012173-getting-started-with-claude-in-chrome)
+# E2E test with browser (requires claude --chrome)
+/utils:test-web --chrome
 
----
+# Test specific URL
+/utils:test-web https://github.com/example/repo
 
-User: $ARGUMENTS
+# Generate detailed report
+/utils:test-web --report
+```