@atlashub/smartstack-cli 1.3.0 → 1.4.1

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