@atlashub/smartstack-cli 2.7.3 → 2.8.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 (56) hide show
  1. package/.documentation/agents.html +0 -4
  2. package/.documentation/business-analyse.html +0 -4
  3. package/.documentation/cli-commands.html +0 -4
  4. package/.documentation/commands.html +0 -77
  5. package/.documentation/css/styles.css +0 -8
  6. package/.documentation/efcore.html +0 -4
  7. package/.documentation/gitflow.html +0 -4
  8. package/.documentation/hooks.html +0 -4
  9. package/.documentation/index.html +2 -28
  10. package/.documentation/init.html +8 -14
  11. package/.documentation/installation.html +0 -11
  12. package/.documentation/js/app.js +2 -16
  13. package/.documentation/ralph-loop.html +0 -4
  14. package/.documentation/test-web.html +0 -4
  15. package/README.md +0 -1
  16. package/dist/index.js +100 -23
  17. package/dist/index.js.map +1 -1
  18. package/package.json +2 -3
  19. package/templates/agents/docs-sync-checker.md +2 -2
  20. package/templates/hooks/docs-drift-check.md +4 -5
  21. package/templates/skills/_resources/context-digest-template.md +2 -2
  22. package/templates/skills/_resources/doc-context-cache.md +0 -2
  23. package/templates/skills/_resources/docs-manifest-schema.md +1 -3
  24. package/templates/skills/_resources/mcp-validate-documentation-spec.md +1 -3
  25. package/templates/skills/_shared.md +24 -25
  26. package/templates/skills/application/steps/step-04-backend.md +185 -11
  27. package/templates/skills/application/steps/step-06-migration.md +41 -2
  28. package/templates/skills/application/templates-seed.md +151 -0
  29. package/templates/skills/business-analyse/steps/step-05-handoff.md +59 -17
  30. package/templates/skills/controller/steps/step-01-analyze.md +1 -1
  31. package/templates/skills/ralph-loop/steps/step-01-task.md +21 -1
  32. package/templates/skills/ralph-loop/steps/step-02-execute.md +75 -3
  33. package/.documentation/apex.html +0 -1027
  34. package/templates/skills/apex/SKILL.md +0 -297
  35. package/templates/skills/apex/steps/step-00-init.md +0 -212
  36. package/templates/skills/apex/steps/step-01-analyze.md +0 -263
  37. package/templates/skills/apex/steps/step-02-plan.md +0 -255
  38. package/templates/skills/apex/steps/step-03-execute.md +0 -217
  39. package/templates/skills/apex/steps/step-04-validate.md +0 -273
  40. package/templates/skills/apex/steps/step-04b-doc-sync.md +0 -162
  41. package/templates/skills/apex/steps/step-05-examine.md +0 -214
  42. package/templates/skills/apex/steps/step-06-resolve.md +0 -181
  43. package/templates/skills/apex/steps/step-07-tests.md +0 -206
  44. package/templates/skills/apex/steps/step-08-run-tests.md +0 -207
  45. package/templates/skills/apex/templates/00-context.md +0 -46
  46. package/templates/skills/apex/templates/01-analyze.md +0 -63
  47. package/templates/skills/apex/templates/02-plan.md +0 -63
  48. package/templates/skills/apex/templates/03-execute.md +0 -34
  49. package/templates/skills/apex/templates/04-validate.md +0 -61
  50. package/templates/skills/apex/templates/04b-doc-sync.md +0 -31
  51. package/templates/skills/apex/templates/05-examine.md +0 -58
  52. package/templates/skills/apex/templates/06-resolve.md +0 -39
  53. package/templates/skills/apex/templates/07-tests.md +0 -56
  54. package/templates/skills/apex/templates/08-run-tests.md +0 -41
  55. package/templates/skills/apex/templates/README.md +0 -69
  56. package/templates/skills/apex/templates/context-digest.md +0 -35
@@ -1,1027 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="fr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>APEX Methodology - SmartStack CLI</title>
7
- <link rel="stylesheet" href="css/styles.css">
8
- </head>
9
- <body>
10
- <div class="app-container">
11
- <!-- Global Header (single unified element) -->
12
- <header class="global-header">
13
- <div class="logo">SS</div>
14
- <span class="site-title">SmartStack CLI</span>
15
- <span class="version-badge">v2.0.0</span>
16
- <div class="header-divider"></div>
17
- <span class="page-title">APEX Methodology</span>
18
- <nav class="breadcrumb">
19
- <a href="index.html">
20
- <span data-lang="fr">Accueil</span>
21
- <span data-lang="en">Home</span>
22
- </a>
23
- <span class="breadcrumb-separator">&#8250;</span>
24
- <span data-lang="fr">Workflows</span>
25
- <span data-lang="en">Workflows</span>
26
- <span class="breadcrumb-separator">&#8250;</span>
27
- <span class="breadcrumb-current">APEX</span>
28
- </nav>
29
- <!-- Language Select -->
30
- <select class="lang-select" id="lang-select" onchange="setLanguage(this.value); localStorage.setItem('doc-language', this.value);">
31
- <option value="fr">🇫🇷 FR</option>
32
- <option value="en">🇬🇧 EN</option>
33
- </select>
34
- <!-- Search -->
35
- <div class="header-search">
36
- <div class="search-input-wrapper">
37
- <span class="search-icon">&#128269;</span>
38
- <input type="text" id="search-input" class="search-input" placeholder="Rechercher..." data-placeholder-fr="Rechercher..." data-placeholder-en="Search..." autocomplete="off">
39
- <span class="search-shortcut">Ctrl+K</span>
40
- </div>
41
- <div id="search-results" class="search-results"></div>
42
- </div>
43
- </header>
44
-
45
- <!-- App Body -->
46
- <div class="app-body">
47
- <!-- Sidebar -->
48
- <aside class="sidebar">
49
- <button class="sidebar-toggle" title="Toggle sidebar">
50
- <span class="toggle-icon-collapse">&#171;</span>
51
- <span class="toggle-icon-expand">&#187;</span>
52
- </button>
53
-
54
- <nav class="sidebar-nav">
55
- <div class="nav-section">
56
- <div class="nav-section-title">
57
- <span data-lang="fr">Demarrage</span>
58
- <span data-lang="en">Getting Started</span>
59
- </div>
60
- <a href="index.html" class="nav-item">
61
- <span class="icon">&#127968;</span>
62
- <span class="nav-text" data-lang="fr">Accueil</span>
63
- <span class="nav-text" data-lang="en">Home</span>
64
- </a>
65
- <a href="installation.html" class="nav-item">
66
- <span class="icon">&#128230;</span>
67
- <span class="nav-text">Installation</span>
68
- </a>
69
- <a href="init.html" class="nav-item">
70
- <span class="icon">&#128640;</span>
71
- <span class="nav-text">Projet Client</span>
72
- </a>
73
- </div>
74
-
75
- <div class="nav-section">
76
- <div class="nav-section-title">Workflows</div>
77
- <a href="gitflow.html" class="nav-item">
78
- <span class="icon">&#128256;</span>
79
- <span class="nav-text">GitFlow</span>
80
- </a>
81
- <a href="efcore.html" class="nav-item">
82
- <span class="icon">&#128452;</span>
83
- <span class="nav-text">EF Core</span>
84
- </a>
85
- <div class="nav-item-with-toc">
86
- <a href="apex.html" class="active">
87
- <span class="icon">&#127919;</span>
88
- <span class="nav-text">APEX</span>
89
- <button class="toc-toggle">&#9654;</button>
90
- </a>
91
- <nav class="sidebar-toc">
92
- <a href="#introduction" class="sidebar-toc-link">Introduction</a>
93
- <a href="#workflow" class="sidebar-toc-link">Workflow</a>
94
- <a href="#analyze" class="sidebar-toc-link">1. Analyze</a>
95
- <a href="#plan" class="sidebar-toc-link">2. Plan</a>
96
- <a href="#execute" class="sidebar-toc-link">3. Execute</a>
97
- <a href="#examine" class="sidebar-toc-link">4. eXamine</a>
98
- <a href="#tasks" class="sidebar-toc-link">5. Tasks</a>
99
- <a href="#best-practices" class="sidebar-toc-link">
100
- <span data-lang="fr">Bonnes pratiques</span>
101
- <span data-lang="en">Best Practices</span>
102
- </a>
103
- </nav>
104
- </div>
105
- <a href="business-analyse.html" class="nav-item">
106
- <span class="icon">&#128202;</span>
107
- <span class="nav-text">Business Analyse</span>
108
- </a>
109
- <a href="ralph-loop.html" class="nav-item">
110
- <span class="icon">&#128260;</span>
111
- <span class="nav-text">Ralph Loop</span>
112
- </a>
113
- </div>
114
-
115
- <div class="nav-section">
116
- <div class="nav-section-title">
117
- <span data-lang="fr">Outils</span>
118
- <span data-lang="en">Tools</span>
119
- </div>
120
- <a href="cli-commands.html" class="nav-item">
121
- <span class="icon">&#128187;</span>
122
- <span class="nav-text" data-lang="fr">CLI SmartStack</span>
123
- <span class="nav-text" data-lang="en">SmartStack CLI</span>
124
- </a>
125
- <a href="agents.html" class="nav-item">
126
- <span class="icon">&#129302;</span>
127
- <span class="nav-text">Agents</span>
128
- </a>
129
- <a href="commands.html" class="nav-item">
130
- <span class="icon">&#9889;</span>
131
- <span class="nav-text" data-lang="fr">Commandes Claude</span>
132
- <span class="nav-text" data-lang="en">Claude Commands</span>
133
- </a>
134
- <a href="hooks.html" class="nav-item">
135
- <span class="icon">&#128279;</span>
136
- <span class="nav-text">Hooks</span>
137
- </a>
138
- <a href="test-web.html" class="nav-item">
139
- <span class="icon">&#127760;</span>
140
- <span class="nav-text">Test Web</span>
141
- </a>
142
- </div>
143
- </nav>
144
-
145
- </aside>
146
-
147
- <!-- Main Content -->
148
- <main class="main-content">
149
- <div class="content-full">
150
- <!-- Introduction -->
151
- <section id="introduction">
152
- <h2>Introduction</h2>
153
- <p data-lang="fr">
154
- APEX (Analyze-Plan-Execute-eXamine) est une methodologie systematique pour l'implementation de features complexes. Elle garantit une approche structuree avec une comprehension complete du contexte avant d'ecrire du code.
155
- </p>
156
- <p data-lang="en">
157
- APEX (Analyze-Plan-Execute-eXamine) is a systematic methodology for implementing complex features. It ensures a structured approach with complete context understanding before writing code.
158
- </p>
159
-
160
- <div class="alert alert-info">
161
- <span class="alert-icon">&#127919;</span>
162
- <div class="alert-content">
163
- <h5 data-lang="fr">Principe fondamental</h5>
164
- <h5 data-lang="en">Core Principle</h5>
165
- <p data-lang="fr">
166
- <strong>Context depth > Speed</strong>. Une analyse incomplete mene a des implementations defaillantes.
167
- </p>
168
- <p data-lang="en">
169
- <strong>Context depth > Speed</strong>. Incomplete analysis leads to failed implementations.
170
- </p>
171
- </div>
172
- </div>
173
- </section>
174
-
175
- <!-- Workflow Diagram -->
176
- <section id="workflow">
177
- <h2>Workflow</h2>
178
-
179
- <div class="svg-diagram">
180
- <svg viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Inter', system-ui, sans-serif;">
181
- <defs>
182
- <!-- Gradients for each phase -->
183
- <linearGradient id="analyzeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
184
- <stop offset="0%" style="stop-color:#3b82f6"/>
185
- <stop offset="100%" style="stop-color:#1d4ed8"/>
186
- </linearGradient>
187
- <linearGradient id="planGrad" x1="0%" y1="0%" x2="100%" y2="100%">
188
- <stop offset="0%" style="stop-color:#8b5cf6"/>
189
- <stop offset="100%" style="stop-color:#6d28d9"/>
190
- </linearGradient>
191
- <linearGradient id="executeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
192
- <stop offset="0%" style="stop-color:#22c55e"/>
193
- <stop offset="100%" style="stop-color:#15803d"/>
194
- </linearGradient>
195
- <linearGradient id="examineGrad" x1="0%" y1="0%" x2="100%" y2="100%">
196
- <stop offset="0%" style="stop-color:#f97316"/>
197
- <stop offset="100%" style="stop-color:#c2410c"/>
198
- </linearGradient>
199
- <!-- Glow filter -->
200
- <filter id="glow2" x="-20%" y="-20%" width="140%" height="140%">
201
- <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
202
- <feMerge>
203
- <feMergeNode in="coloredBlur"/>
204
- <feMergeNode in="SourceGraphic"/>
205
- </feMerge>
206
- </filter>
207
- <!-- Arrow marker -->
208
- <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
209
- <polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8"/>
210
- </marker>
211
- </defs>
212
-
213
- <!-- Center circle with APEX text -->
214
- <circle cx="250" cy="200" r="50" fill="#1e293b" stroke="#334155" stroke-width="2"/>
215
- <text x="250" y="195" text-anchor="middle" fill="#e2e8f0" font-size="20" font-weight="700">APEX</text>
216
- <text x="250" y="215" text-anchor="middle" fill="#94a3b8" font-size="10">Methodology</text>
217
-
218
- <!-- Connecting arrows (circular path) -->
219
- <path d="M 170 120 Q 80 200 170 280" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="5,5"/>
220
- <path d="M 170 280 Q 250 360 330 280" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="5,5"/>
221
- <path d="M 330 280 Q 420 200 330 120" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="5,5"/>
222
- <path d="M 330 120 Q 250 40 170 120" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="5,5"/>
223
-
224
- <!-- Phase 1: ANALYZE (top-left) -->
225
- <g transform="translate(100, 80)" filter="url(#glow2)">
226
- <rect x="0" y="0" width="140" height="70" rx="12" fill="url(#analyzeGrad)"/>
227
- <text x="70" y="30" text-anchor="middle" fill="white" font-size="11" font-weight="500">1. ANALYZE</text>
228
- <text x="70" y="50" text-anchor="middle" fill="rgba(255,255,255,0.7)" font-size="9">Gather context</text>
229
- <circle cx="12" cy="12" r="14" fill="#1d4ed8" stroke="white" stroke-width="2"/>
230
- <text x="12" y="17" text-anchor="middle" fill="white" font-size="12" font-weight="700">A</text>
231
- </g>
232
-
233
- <!-- Phase 2: PLAN (top-right) -->
234
- <g transform="translate(260, 80)" filter="url(#glow2)">
235
- <rect x="0" y="0" width="140" height="70" rx="12" fill="url(#planGrad)"/>
236
- <text x="70" y="30" text-anchor="middle" fill="white" font-size="11" font-weight="500">2. PLAN</text>
237
- <text x="70" y="50" text-anchor="middle" fill="rgba(255,255,255,0.7)" font-size="9">Design strategy</text>
238
- <circle cx="12" cy="12" r="14" fill="#6d28d9" stroke="white" stroke-width="2"/>
239
- <text x="12" y="17" text-anchor="middle" fill="white" font-size="12" font-weight="700">P</text>
240
- </g>
241
-
242
- <!-- Phase 3: EXECUTE (bottom-right) -->
243
- <g transform="translate(260, 250)" filter="url(#glow2)">
244
- <rect x="0" y="0" width="140" height="70" rx="12" fill="url(#executeGrad)"/>
245
- <text x="70" y="30" text-anchor="middle" fill="white" font-size="11" font-weight="500">3. EXECUTE</text>
246
- <text x="70" y="50" text-anchor="middle" fill="rgba(255,255,255,0.7)" font-size="9">Implement code</text>
247
- <circle cx="12" cy="12" r="14" fill="#15803d" stroke="white" stroke-width="2"/>
248
- <text x="12" y="17" text-anchor="middle" fill="white" font-size="12" font-weight="700">E</text>
249
- </g>
250
-
251
- <!-- Phase 4: eXAMINE (bottom-left) -->
252
- <g transform="translate(100, 250)" filter="url(#glow2)">
253
- <rect x="0" y="0" width="140" height="70" rx="12" fill="url(#examineGrad)"/>
254
- <text x="70" y="30" text-anchor="middle" fill="white" font-size="11" font-weight="500">4. eXAMINE</text>
255
- <text x="70" y="50" text-anchor="middle" fill="rgba(255,255,255,0.7)" font-size="9">Validate & test</text>
256
- <circle cx="12" cy="12" r="14" fill="#c2410c" stroke="white" stroke-width="2"/>
257
- <text x="12" y="17" text-anchor="middle" fill="white" font-size="12" font-weight="700">X</text>
258
- </g>
259
-
260
- <!-- Directional arrows between phases -->
261
- <polygon points="240,115 250,100 260,115" fill="#94a3b8"/>
262
- <polygon points="385,185 400,200 385,215" fill="#94a3b8"/>
263
- <polygon points="260,285 250,300 240,285" fill="#94a3b8"/>
264
- <polygon points="115,215 100,200 115,185" fill="#94a3b8"/>
265
- </svg>
266
- </div>
267
-
268
- <p data-lang="fr">Chaque phase produit un artefact qui sert d'input a la phase suivante :</p>
269
- <p data-lang="en">Each phase produces an artifact that serves as input for the next phase:</p>
270
-
271
- <div class="table-container">
272
- <table>
273
- <thead>
274
- <tr>
275
- <th>Phase</th>
276
- <th>
277
- <span data-lang="fr">Commande</span>
278
- <span data-lang="en">Command</span>
279
- </th>
280
- <th>
281
- <span data-lang="fr">Artefact</span>
282
- <span data-lang="en">Artifact</span>
283
- </th>
284
- </tr>
285
- </thead>
286
- <tbody>
287
- <tr>
288
- <td><strong>Analyze</strong></td>
289
- <td><code>/apex 1-analyze</code></td>
290
- <td><code>analyze.md</code></td>
291
- </tr>
292
- <tr>
293
- <td><strong>Plan</strong></td>
294
- <td><code>/apex 2-plan</code></td>
295
- <td><code>plan.md</code></td>
296
- </tr>
297
- <tr>
298
- <td><strong>Execute</strong></td>
299
- <td><code>/apex 3-execute</code></td>
300
- <td><code>implementation.md</code></td>
301
- </tr>
302
- <tr>
303
- <td><strong>eXamine</strong></td>
304
- <td><code>/apex 4-examine</code></td>
305
- <td><code>validation.md</code></td>
306
- </tr>
307
- <tr>
308
- <td><strong>Tasks</strong></td>
309
- <td><code>/apex 5-tasks</code></td>
310
- <td><code>task-*.md</code></td>
311
- </tr>
312
- </tbody>
313
- </table>
314
- </div>
315
- </section>
316
-
317
- <!-- Phase 1: Analyze -->
318
- <section id="analyze">
319
- <h2>
320
- <span style="color: var(--info);">1.</span> Analyze
321
- </h2>
322
-
323
- <p data-lang="fr">
324
- La phase d'analyse collecte tout le contexte necessaire avant l'implementation. Elle utilise des agents paralleles pour explorer le codebase, la documentation et le web.
325
- </p>
326
- <p data-lang="en">
327
- The analysis phase collects all necessary context before implementation. It uses parallel agents to explore the codebase, documentation, and web.
328
- </p>
329
-
330
- <div class="command-card">
331
- <div class="command-header">
332
- <code class="command-name">/apex 1-analyze</code>
333
- <span class="tag tag-command">Analysis</span>
334
- </div>
335
- <div class="command-body">
336
- <div class="code-block">
337
- <button class="copy-btn">Copy</button>
338
- <pre><code>/apex 1-analyze Add user authentication with JWT tokens</code></pre>
339
- </div>
340
-
341
- <details class="template-section">
342
- <summary>
343
- <h4 style="display: inline; margin: 0;">
344
- <span data-lang="fr">Template Prompt</span>
345
- <span data-lang="en">Prompt Template</span>
346
- </h4>
347
- <span class="template-badge">1-analyze.md</span>
348
- </summary>
349
- <div class="template-content">
350
- <p class="template-path">
351
- <code>templates/commands/apex/1-analyze.md</code>
352
- </p>
353
- <div class="code-block template-code">
354
- <button class="copy-btn">Copy</button>
355
- <pre><code>---
356
- description: Analyze phase - gather all context and create analysis report
357
- argument-hint: &lt;task-description&gt;
358
- ---
359
-
360
- You are an analysis specialist. Your mission is to gather ALL relevant context before implementation.
361
-
362
- **You need to ULTRA THINK before launching agents.**
363
-
364
- ## Workflow
365
-
366
- 1. **SETUP TASK FOLDER**: Create organized workspace in .claude/tasks
367
- - Find next task number: Check `.claude/tasks/` for existing folders
368
- - Parse task description to create kebab-case name
369
- - Create `.claude/tasks/nn-task-name/` folder structure
370
- - **EXAMPLE**: "Add user authentication" → `.claude/tasks/01-add-user-authentication/`
371
-
372
- 2. **ULTRA THINK**: Plan analysis strategy
373
- - **CRITICAL**: Know EXACTLY what to search for before launching agents
374
- - Identify key concepts, files, patterns to find
375
- - Determine which sources need analysis (codebase/docs/web)
376
-
377
- 3. **LAUNCH PARALLEL ANALYSIS**: Gather context from all sources
378
- - **Codebase exploration** (`explore-codebase` agent)
379
- - **Documentation exploration** (`explore-docs` agent)
380
- - **Web research** (`websearch` agent)
381
- - **CRITICAL**: Launch ALL agents in parallel
382
-
383
- 4. **SYNTHESIZE FINDINGS**: Create comprehensive analysis report
384
-
385
- 5. **SAVE ANALYSIS**: Write to `analyze.md`
386
- ```markdown
387
- # Task: [Description]
388
-
389
- ## Codebase Context
390
- [Findings from codebase exploration]
391
-
392
- ## Documentation Insights
393
- [Key information from docs]
394
-
395
- ## Key Files
396
- - `path/to/file.ts:line` - Purpose
397
-
398
- ## Patterns to Follow
399
- [Existing conventions]
400
- ```
401
-
402
- ## Priority
403
- Context depth > Speed. Missing context causes failed implementations.</code></pre>
404
- </div>
405
- </div>
406
- </details>
407
- </div>
408
- </div>
409
-
410
- <h3 data-lang="fr">Agents utilises</h3>
411
- <h3 data-lang="en">Agents used</h3>
412
-
413
- <div class="card-grid">
414
- <div class="card">
415
- <div class="card-header">
416
- <div class="card-icon">&#128269;</div>
417
- <div>
418
- <div class="card-title">explore-codebase</div>
419
- </div>
420
- </div>
421
- <div class="card-body">
422
- <p data-lang="fr">Explore le codebase pour trouver des implementations similaires, patterns et conventions.</p>
423
- <p data-lang="en">Explores codebase to find similar implementations, patterns and conventions.</p>
424
- </div>
425
- </div>
426
-
427
- <div class="card">
428
- <div class="card-header">
429
- <div class="card-icon">&#128214;</div>
430
- <div>
431
- <div class="card-title">explore-docs</div>
432
- </div>
433
- </div>
434
- <div class="card-body">
435
- <p data-lang="fr">Recherche dans la documentation des librairies pour les APIs et best practices.</p>
436
- <p data-lang="en">Searches library documentation for APIs and best practices.</p>
437
- </div>
438
- </div>
439
-
440
- <div class="card">
441
- <div class="card-header">
442
- <div class="card-icon">&#127760;</div>
443
- <div>
444
- <div class="card-title">websearch</div>
445
- </div>
446
- </div>
447
- <div class="card-body">
448
- <p data-lang="fr">Recherche sur le web les dernieres approches et solutions.</p>
449
- <p data-lang="en">Searches the web for latest approaches and solutions.</p>
450
- </div>
451
- </div>
452
- </div>
453
- </section>
454
-
455
- <!-- Phase 2: Plan -->
456
- <section id="plan">
457
- <h2>
458
- <span style="color: #8b5cf6;">2.</span> Plan
459
- </h2>
460
-
461
- <p data-lang="fr">
462
- La phase de planification transforme l'analyse en un plan d'implementation detaille, organise par fichier.
463
- </p>
464
- <p data-lang="en">
465
- The planning phase transforms the analysis into a detailed implementation plan, organized by file.
466
- </p>
467
-
468
- <div class="command-card">
469
- <div class="command-header">
470
- <code class="command-name">/apex 2-plan</code>
471
- <span class="tag tag-workflow">Planning</span>
472
- </div>
473
- <div class="command-body">
474
- <div class="code-block">
475
- <button class="copy-btn">Copy</button>
476
- <pre><code>/apex 2-plan 01-add-user-authentication</code></pre>
477
- </div>
478
-
479
- <details class="template-section">
480
- <summary>
481
- <h4 style="display: inline; margin: 0;">
482
- <span data-lang="fr">Template Prompt</span>
483
- <span data-lang="en">Prompt Template</span>
484
- </h4>
485
- <span class="template-badge">2-plan.md</span>
486
- </summary>
487
- <div class="template-content">
488
- <p class="template-path">
489
- <code>templates/commands/apex/2-plan.md</code>
490
- </p>
491
- <div class="code-block template-code">
492
- <button class="copy-btn">Copy</button>
493
- <pre><code>---
494
- description: Planning phase - create detailed implementation strategy from analysis
495
- argument-hint: &lt;task-folder-path&gt;
496
- ---
497
-
498
- You are a strategic planning specialist. Transform analysis findings into executable plans.
499
-
500
- **You need to ULTRA THINK about the complete implementation strategy.**
501
-
502
- ## Workflow
503
-
504
- 1. **VALIDATE INPUT**: Verify task folder exists
505
- - Check that `.claude/tasks/&lt;task-folder&gt;/` exists
506
- - Verify `analyze.md` file is present
507
-
508
- 2. **READ ANALYSIS**: Load all context
509
-
510
- 3. **ULTRA THINK PLANNING**: Design comprehensive strategy
511
- - **CRITICAL**: Think through ENTIRE implementation before writing
512
- - Consider all edge cases and dependencies
513
- - Plan file changes in logical dependency order
514
-
515
- 4. **ASK FOR CLARITY**: Resolve ambiguities
516
- - **STOP**: If anything is unclear about requirements
517
- - **NEVER ASSUME**: Always clarify before planning
518
-
519
- 5. **CREATE DETAILED PLAN**: Write file-by-file implementation guide
520
- - **Structure**: Group by file, NOT by feature
521
- - **Format**: Action-oriented, no code snippets
522
-
523
- ## Plan Quality Guidelines
524
-
525
- ### Good Plan Entry
526
- ```markdown
527
- ### `src/auth/middleware.ts`
528
- - Add validateToken function that checks JWT expiration
529
- - Extract token from Authorization header (follow pattern in `src/api/auth.ts:45`)
530
- - Return 401 if token invalid or expired
531
- ```
532
-
533
- ### Bad Plan Entry
534
- ```markdown
535
- ### `src/auth/middleware.ts`
536
- - Add authentication
537
- - Fix security issues
538
- ```
539
-
540
- ## Priority
541
- Clarity > Completeness. Every step must be unambiguous and executable.</code></pre>
542
- </div>
543
- </div>
544
- </details>
545
- </div>
546
- </div>
547
-
548
- <div class="alert alert-warning">
549
- <span class="alert-icon">&#9888;</span>
550
- <div class="alert-content">
551
- <h5 data-lang="fr">Pas de code dans le plan</h5>
552
- <h5 data-lang="en">No code in the plan</h5>
553
- <p data-lang="fr">
554
- Le plan decrit les <strong>actions</strong>, pas les implementations. Chaque item doit etre clair et executable sans montrer de code.
555
- </p>
556
- <p data-lang="en">
557
- The plan describes <strong>actions</strong>, not implementations. Each item must be clear and executable without showing code.
558
- </p>
559
- </div>
560
- </div>
561
- </section>
562
-
563
- <!-- Phase 3: Execute -->
564
- <section id="execute">
565
- <h2>
566
- <span style="color: var(--success);">3.</span> Execute
567
- </h2>
568
-
569
- <p data-lang="fr">
570
- La phase d'execution implemente le plan etape par etape, en suivant les patterns identifies lors de l'analyse.
571
- </p>
572
- <p data-lang="en">
573
- The execution phase implements the plan step by step, following patterns identified during analysis.
574
- </p>
575
-
576
- <div class="command-card">
577
- <div class="command-header">
578
- <code class="command-name">/apex 3-execute</code>
579
- <span class="tag tag-command">Implementation</span>
580
- </div>
581
- <div class="command-body">
582
- <div class="code-block">
583
- <button class="copy-btn">Copy</button>
584
- <pre><code>/apex 3-execute 01-add-user-authentication</code></pre>
585
- </div>
586
-
587
- <details class="template-section">
588
- <summary>
589
- <h4 style="display: inline; margin: 0;">
590
- <span data-lang="fr">Template Prompt</span>
591
- <span data-lang="en">Prompt Template</span>
592
- </h4>
593
- <span class="template-badge">3-execute.md</span>
594
- </summary>
595
- <div class="template-content">
596
- <p class="template-path">
597
- <code>templates/commands/apex/3-execute.md</code>
598
- </p>
599
- <div class="code-block template-code">
600
- <button class="copy-btn">Copy</button>
601
- <pre><code>---
602
- description: Execution phase - implement the plan step by step with ultra thinking
603
- argument-hint: &lt;task-folder-path&gt;
604
- ---
605
-
606
- You are an implementation specialist. Execute plans precisely while maintaining code quality.
607
-
608
- **You need to ULTRA THINK at every step.**
609
-
610
- ## Workflow
611
-
612
- 1. **VALIDATE INPUT**: Verify task folder is ready
613
- 2. **LOAD CONTEXT**: Read analyze.md and plan.md
614
-
615
- 3. **CREATE TODO LIST**: Track implementation progress
616
- - **CRITICAL**: Use TodoWrite to create todos from plan
617
- - Break down each file change into separate todo items
618
-
619
- 4. **ULTRA THINK BEFORE EACH CHANGE**: Plan every modification
620
- - **BEFORE** editing any file:
621
- - Think through the exact changes needed
622
- - Review analysis findings for patterns to follow
623
- - **NEVER** make changes without thinking first
624
-
625
- 5. **IMPLEMENT STEP BY STEP**: Execute plan methodically
626
- - **ONE TODO AT A TIME**: Mark in_progress, complete, then move to next
627
- - **Follow existing patterns**
628
- - **Stay strictly in scope**
629
-
630
- 6. **FORMAT AND LINT**: Clean up code
631
- 7. **TEST PHASE**: Verify implementation works
632
-
633
- ## Implementation Quality Rules
634
-
635
- ### Code Style
636
- - **NO COMMENTS**: Use clear names instead
637
- - **MATCH PATTERNS**: Follow existing codebase conventions exactly
638
- - **MINIMAL CHANGES**: Only touch what's needed
639
-
640
- ### Scope Management
641
- - **STRICTLY IN SCOPE**: Implement only what's in the plan
642
- - **NO REFACTORING**: Don't improve unrelated code
643
- - **NO EXTRAS**: Don't add unrequested features
644
-
645
- ## Priority
646
- Correctness > Completeness > Speed</code></pre>
647
- </div>
648
- </div>
649
- </details>
650
- </div>
651
- </div>
652
-
653
- <h3 data-lang="fr">Regles d'implementation</h3>
654
- <h3 data-lang="en">Implementation Rules</h3>
655
-
656
- <div class="best-practice">
657
- <h4>
658
- <span class="bp-icon">&#9989;</span>
659
- <span data-lang="fr">Ultra Think avant chaque modification</span>
660
- <span data-lang="en">Ultra Think before each modification</span>
661
- </h4>
662
- <p data-lang="fr">
663
- Avant d'editer un fichier, reflechir aux changements exacts necessaires, revoir les patterns de l'analyse, et considerer l'impact sur les autres fichiers.
664
- </p>
665
- <p data-lang="en">
666
- Before editing a file, think through the exact changes needed, review patterns from analysis, and consider impact on other files.
667
- </p>
668
- </div>
669
-
670
- <div class="best-practice">
671
- <h4>
672
- <span class="bp-icon">&#9989;</span>
673
- <span data-lang="fr">Un todo a la fois</span>
674
- <span data-lang="en">One todo at a time</span>
675
- </h4>
676
- <p data-lang="fr">
677
- Marquer le todo comme <code>in_progress</code>, completer la tache, puis marquer comme <code>completed</code> avant de passer au suivant.
678
- </p>
679
- <p data-lang="en">
680
- Mark the todo as <code>in_progress</code>, complete the task, then mark as <code>completed</code> before moving to the next.
681
- </p>
682
- </div>
683
-
684
- <div class="best-practice">
685
- <h4>
686
- <span class="bp-icon">&#9989;</span>
687
- <span data-lang="fr">Rester dans le scope</span>
688
- <span data-lang="en">Stay in scope</span>
689
- </h4>
690
- <p data-lang="fr">
691
- Implementer uniquement ce qui est dans le plan. Pas de refactoring non demande, pas de features supplementaires.
692
- </p>
693
- <p data-lang="en">
694
- Implement only what's in the plan. No unrequested refactoring, no extra features.
695
- </p>
696
- </div>
697
- </section>
698
-
699
- <!-- Phase 4: eXamine -->
700
- <section id="examine">
701
- <h2>
702
- <span style="color: var(--secondary);">4.</span> eXamine
703
- </h2>
704
-
705
- <p data-lang="fr">
706
- La phase d'examination valide l'implementation et s'assure que tout fonctionne correctement.
707
- </p>
708
- <p data-lang="en">
709
- The examination phase validates the implementation and ensures everything works correctly.
710
- </p>
711
-
712
- <div class="command-card">
713
- <div class="command-header">
714
- <code class="command-name">/apex 4-examine</code>
715
- <span class="tag tag-workflow">Validation</span>
716
- </div>
717
- <div class="command-body">
718
- <div class="code-block">
719
- <button class="copy-btn">Copy</button>
720
- <pre><code>/apex 4-examine 01-add-user-authentication</code></pre>
721
- </div>
722
-
723
- <details class="template-section">
724
- <summary>
725
- <h4 style="display: inline; margin: 0;">
726
- <span data-lang="fr">Template Prompt</span>
727
- <span data-lang="en">Prompt Template</span>
728
- </h4>
729
- <span class="template-badge">4-examine.md</span>
730
- </summary>
731
- <div class="template-content">
732
- <p class="template-path">
733
- <code>templates/commands/apex/4-examine.md</code>
734
- </p>
735
- <div class="code-block template-code">
736
- <button class="copy-btn">Copy</button>
737
- <pre><code>---
738
- description: Examine phase - validate and test application for deployment readiness
739
- allowed-tools: Bash(npm :*), Bash(pnpm :*), Read, Task, Grep
740
- ---
741
-
742
- You are a validation specialist. Ensure implementation is complete and correct.
743
-
744
- ## Workflow
745
-
746
- 1. **LOAD CONTEXT**: Read analyze.md, plan.md, and implementation.md
747
-
748
- 2. **RUN VALIDATION SUITE**: Execute all checks
749
- - Type checking: npm run typecheck
750
- - Linting: npm run lint
751
- - Unit tests: npm run test
752
- - Build: npm run build
753
- - E2E tests: npm run test:e2e (if applicable)
754
-
755
- 3. **VERIFY IMPLEMENTATION**: Cross-check against plan
756
- - Every plan item is implemented
757
- - No extra changes outside scope
758
- - Code follows identified patterns
759
-
760
- 4. **CREATE VALIDATION REPORT**: Write to validation.md
761
- ```markdown
762
- # Validation Report
763
-
764
- ## Checks Passed
765
- - [x] Type checking
766
- - [x] Linting
767
- - [x] Unit tests
768
- - [x] Build
769
-
770
- ## Implementation Verification
771
- - [x] All plan items implemented
772
- - [x] No scope creep
773
- - [x] Patterns followed
774
-
775
- ## Issues Found
776
- [List any issues or "None"]
777
-
778
- ## Status: PASSED/FAILED
779
- ```
780
-
781
- 5. **FIX ISSUES**: If validation fails, fix and re-run
782
-
783
- ## Priority
784
- Quality > Speed. Never approve a failing implementation.</code></pre>
785
- </div>
786
- </div>
787
- </details>
788
- </div>
789
- </div>
790
-
791
- <h3 data-lang="fr">Checklist de validation</h3>
792
- <h3 data-lang="en">Validation Checklist</h3>
793
-
794
- <div class="table-container">
795
- <table>
796
- <thead>
797
- <tr>
798
- <th>
799
- <span data-lang="fr">Verification</span>
800
- <span data-lang="en">Check</span>
801
- </th>
802
- <th>
803
- <span data-lang="fr">Commande</span>
804
- <span data-lang="en">Command</span>
805
- </th>
806
- </tr>
807
- </thead>
808
- <tbody>
809
- <tr>
810
- <td>
811
- <span data-lang="fr">Type checking</span>
812
- <span data-lang="en">Type checking</span>
813
- </td>
814
- <td><code>npm run typecheck</code></td>
815
- </tr>
816
- <tr>
817
- <td>Linting</td>
818
- <td><code>npm run lint</code></td>
819
- </tr>
820
- <tr>
821
- <td>
822
- <span data-lang="fr">Tests unitaires</span>
823
- <span data-lang="en">Unit tests</span>
824
- </td>
825
- <td><code>npm run test</code></td>
826
- </tr>
827
- <tr>
828
- <td>Build</td>
829
- <td><code>npm run build</code></td>
830
- </tr>
831
- <tr>
832
- <td>
833
- <span data-lang="fr">Tests E2E</span>
834
- <span data-lang="en">E2E tests</span>
835
- </td>
836
- <td><code>npm run test:e2e</code></td>
837
- </tr>
838
- </tbody>
839
- </table>
840
- </div>
841
- </section>
842
-
843
- <!-- Phase 5: Tasks -->
844
- <section id="tasks">
845
- <h2>
846
- <span style="color: var(--accent);">5.</span> Tasks
847
- </h2>
848
-
849
- <p data-lang="fr">
850
- La phase Tasks divise le plan en fichiers de taches individuels, utiles pour les grandes implementations ou le travail en equipe.
851
- </p>
852
- <p data-lang="en">
853
- The Tasks phase divides the plan into individual task files, useful for large implementations or team work.
854
- </p>
855
-
856
- <div class="command-card">
857
- <div class="command-header">
858
- <code class="command-name">/apex 5-tasks</code>
859
- <span class="tag tag-command">Division</span>
860
- </div>
861
- <div class="command-body">
862
- <div class="code-block">
863
- <button class="copy-btn">Copy</button>
864
- <pre><code>/apex 5-tasks 01-add-user-authentication</code></pre>
865
- </div>
866
-
867
- <details class="template-section">
868
- <summary>
869
- <h4 style="display: inline; margin: 0;">
870
- <span data-lang="fr">Template Prompt</span>
871
- <span data-lang="en">Prompt Template</span>
872
- </h4>
873
- <span class="template-badge">5-tasks.md</span>
874
- </summary>
875
- <div class="template-content">
876
- <p class="template-path">
877
- <code>templates/commands/apex/5-tasks.md</code>
878
- </p>
879
- <div class="code-block template-code">
880
- <button class="copy-btn">Copy</button>
881
- <pre><code>---
882
- description: Task creation - divide plan into small, actionable task files
883
- argument-hint: &lt;task-folder-path&gt;
884
- ---
885
-
886
- You are a task division specialist. Break down plans into executable task files.
887
-
888
- ## Workflow
889
-
890
- 1. **LOAD CONTEXT**: Read analyze.md and plan.md
891
-
892
- 2. **IDENTIFY TASK BOUNDARIES**: Group related changes
893
- - Each task should be independently testable
894
- - Tasks should follow dependency order
895
- - Target 15-30 minutes per task
896
-
897
- 3. **CREATE TASK FILES**: For each logical unit
898
- ```markdown
899
- # Task: [Short Name]
900
-
901
- ## Context
902
- [Relevant context from analyze.md]
903
-
904
- ## Objective
905
- [Clear, single objective]
906
-
907
- ## Files to Modify
908
- - `path/to/file.ts` - [changes]
909
-
910
- ## Steps
911
- 1. [Action 1]
912
- 2. [Action 2]
913
-
914
- ## Acceptance Criteria
915
- - [ ] [Criterion 1]
916
- - [ ] [Criterion 2]
917
-
918
- ## Dependencies
919
- - Requires: [Previous tasks]
920
- - Enables: [Next tasks]
921
- ```
922
-
923
- 4. **SAVE TASKS**: Write to task-NN-name.md files
924
-
925
- ## Task Naming
926
- - task-01-setup-config.md
927
- - task-02-create-types.md
928
- - task-03-implement-service.md
929
-
930
- ## Priority
931
- Clarity > Granularity. Each task must be self-contained.</code></pre>
932
- </div>
933
- </div>
934
- </details>
935
-
936
- <p data-lang="fr">Genere des fichiers de taches individuels :</p>
937
- <p data-lang="en">Generates individual task files:</p>
938
-
939
- <div class="code-block">
940
- <pre><code>.claude/tasks/01-add-user-authentication/
941
- ├── analyze.md
942
- ├── plan.md
943
- ├── task-01-setup-jwt-config.md
944
- ├── task-02-create-auth-middleware.md
945
- ├── task-03-implement-login-endpoint.md
946
- ├── task-04-add-token-refresh.md
947
- └── task-05-write-tests.md</code></pre>
948
- </div>
949
- </div>
950
- </div>
951
- </section>
952
-
953
- <!-- Best Practices -->
954
- <section id="best-practices">
955
- <h2>
956
- <span data-lang="fr">Bonnes pratiques</span>
957
- <span data-lang="en">Best Practices</span>
958
- </h2>
959
-
960
- <div class="best-practice">
961
- <h4>
962
- <span class="bp-icon">&#9989;</span>
963
- <span data-lang="fr">Toujours commencer par /apex 1-analyze</span>
964
- <span data-lang="en">Always start with /apex 1-analyze</span>
965
- </h4>
966
- <p data-lang="fr">
967
- Ne jamais sauter l'analyse. Une comprehension incomplete du contexte mene a des implementations defaillantes.
968
- </p>
969
- <p data-lang="en">
970
- Never skip analysis. Incomplete context understanding leads to failed implementations.
971
- </p>
972
- </div>
973
-
974
- <div class="best-practice">
975
- <h4>
976
- <span class="bp-icon">&#9989;</span>
977
- <span data-lang="fr">Utiliser /apex pour les taches complexes</span>
978
- <span data-lang="en">Use /apex for complex tasks</span>
979
- </h4>
980
- <p data-lang="fr">
981
- Pour les taches simples (renommer une variable, corriger un bug evident), utilisez directement la commande appropriee sans passer par APEX.
982
- </p>
983
- <p data-lang="en">
984
- For simple tasks (renaming a variable, fixing an obvious bug), use the appropriate command directly without going through APEX.
985
- </p>
986
- </div>
987
-
988
- <div class="best-practice">
989
- <h4>
990
- <span class="bp-icon">&#9989;</span>
991
- <span data-lang="fr">Verifier les artefacts entre chaque phase</span>
992
- <span data-lang="en">Review artifacts between each phase</span>
993
- </h4>
994
- <p data-lang="fr">
995
- Avant de passer a la phase suivante, lire l'artefact genere pour s'assurer qu'il est complet et correct.
996
- </p>
997
- <p data-lang="en">
998
- Before moving to the next phase, read the generated artifact to ensure it's complete and correct.
999
- </p>
1000
- </div>
1001
-
1002
- <div class="alert alert-info">
1003
- <span class="alert-icon">&#128161;</span>
1004
- <div class="alert-content">
1005
- <h5 data-lang="fr">Raccourci</h5>
1006
- <h5 data-lang="en">Shortcut</h5>
1007
- <p data-lang="fr">
1008
- Utilisez <code>/apex &lt;description&gt;</code> pour lancer le workflow complet en une seule commande. Claude executera automatiquement toutes les phases.
1009
- </p>
1010
- <p data-lang="en">
1011
- Use <code>/apex &lt;description&gt;</code> to launch the complete workflow in a single command. Claude will automatically execute all phases.
1012
- </p>
1013
- </div>
1014
- </div>
1015
- </section>
1016
- </div>
1017
- </main>
1018
- </div>
1019
- </div>
1020
-
1021
- <!-- Mobile Menu Button -->
1022
- <button class="mobile-menu-btn">&#9776;</button>
1023
- <div class="overlay"></div>
1024
-
1025
- <script src="js/app.js"></script>
1026
- </body>
1027
- </html>