apero-kit-cli 1.3.0 → 1.4.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.
- package/bin/ak.js +9 -1
- package/package.json +1 -1
- package/src/commands/help.js +1040 -0
package/bin/ak.js
CHANGED
|
@@ -8,8 +8,9 @@ import { listCommand } from '../src/commands/list.js';
|
|
|
8
8
|
import { updateCommand } from '../src/commands/update.js';
|
|
9
9
|
import { statusCommand } from '../src/commands/status.js';
|
|
10
10
|
import { doctorCommand } from '../src/commands/doctor.js';
|
|
11
|
+
import { helpCommand } from '../src/commands/help.js';
|
|
11
12
|
|
|
12
|
-
const VERSION = '1.
|
|
13
|
+
const VERSION = '1.4.0';
|
|
13
14
|
|
|
14
15
|
console.log(chalk.cyan.bold('\n Apero Kit CLI') + chalk.gray(` v${VERSION}\n`));
|
|
15
16
|
|
|
@@ -75,4 +76,11 @@ program
|
|
|
75
76
|
.description('List all available kits')
|
|
76
77
|
.action(() => listCommand('kits'));
|
|
77
78
|
|
|
79
|
+
// ak help - interactive documentation
|
|
80
|
+
program
|
|
81
|
+
.command('help')
|
|
82
|
+
.description('Open interactive help documentation in browser')
|
|
83
|
+
.option('-s, --source <path>', 'Custom source path')
|
|
84
|
+
.action(helpCommand);
|
|
85
|
+
|
|
78
86
|
program.parse();
|
package/package.json
CHANGED
|
@@ -0,0 +1,1040 @@
|
|
|
1
|
+
import http from 'http';
|
|
2
|
+
import { join } from 'path';
|
|
3
|
+
import { exec } from 'child_process';
|
|
4
|
+
import fs from 'fs-extra';
|
|
5
|
+
import chalk from 'chalk';
|
|
6
|
+
import { CLI_ROOT, TEMPLATES_DIR, resolveSource } from '../utils/paths.js';
|
|
7
|
+
|
|
8
|
+
const PORT = 3457;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Generate help page HTML
|
|
12
|
+
*/
|
|
13
|
+
function generateHelpPage(section = 'overview', source) {
|
|
14
|
+
const sections = {
|
|
15
|
+
overview: generateOverview(source),
|
|
16
|
+
agents: generateAgentsSection(source),
|
|
17
|
+
commands: generateCommandsSection(source),
|
|
18
|
+
skills: generateSkillsSection(source),
|
|
19
|
+
hooks: generateHooksSection(source),
|
|
20
|
+
workflows: generateWorkflowsSection(source),
|
|
21
|
+
quickstart: generateQuickstartSection()
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const content = sections[section] || sections.overview;
|
|
25
|
+
const nav = generateNav(section);
|
|
26
|
+
|
|
27
|
+
return `<!DOCTYPE html>
|
|
28
|
+
<html lang="en">
|
|
29
|
+
<head>
|
|
30
|
+
<meta charset="UTF-8">
|
|
31
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
32
|
+
<title>Apero Kit CLI - Help</title>
|
|
33
|
+
<style>
|
|
34
|
+
:root {
|
|
35
|
+
--bg: #0d1117;
|
|
36
|
+
--bg-secondary: #161b22;
|
|
37
|
+
--bg-tertiary: #21262d;
|
|
38
|
+
--text: #c9d1d9;
|
|
39
|
+
--text-muted: #8b949e;
|
|
40
|
+
--accent: #58a6ff;
|
|
41
|
+
--accent-hover: #79b8ff;
|
|
42
|
+
--border: #30363d;
|
|
43
|
+
--success: #3fb950;
|
|
44
|
+
--warning: #d29922;
|
|
45
|
+
--error: #f85149;
|
|
46
|
+
--purple: #a371f7;
|
|
47
|
+
--pink: #db61a2;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
51
|
+
|
|
52
|
+
body {
|
|
53
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
54
|
+
background: var(--bg);
|
|
55
|
+
color: var(--text);
|
|
56
|
+
line-height: 1.6;
|
|
57
|
+
display: flex;
|
|
58
|
+
min-height: 100vh;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Sidebar */
|
|
62
|
+
.sidebar {
|
|
63
|
+
width: 260px;
|
|
64
|
+
background: var(--bg-secondary);
|
|
65
|
+
border-right: 1px solid var(--border);
|
|
66
|
+
position: fixed;
|
|
67
|
+
height: 100vh;
|
|
68
|
+
overflow-y: auto;
|
|
69
|
+
padding: 24px 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.logo {
|
|
73
|
+
padding: 0 20px 24px;
|
|
74
|
+
border-bottom: 1px solid var(--border);
|
|
75
|
+
margin-bottom: 16px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.logo h1 {
|
|
79
|
+
font-size: 20px;
|
|
80
|
+
color: var(--accent);
|
|
81
|
+
display: flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
gap: 8px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.logo p {
|
|
87
|
+
font-size: 12px;
|
|
88
|
+
color: var(--text-muted);
|
|
89
|
+
margin-top: 4px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.nav-section {
|
|
93
|
+
padding: 0 12px;
|
|
94
|
+
margin-bottom: 24px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.nav-section h3 {
|
|
98
|
+
font-size: 11px;
|
|
99
|
+
text-transform: uppercase;
|
|
100
|
+
letter-spacing: 1px;
|
|
101
|
+
color: var(--text-muted);
|
|
102
|
+
padding: 0 8px;
|
|
103
|
+
margin-bottom: 8px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.nav-section a {
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
gap: 10px;
|
|
110
|
+
padding: 10px 12px;
|
|
111
|
+
color: var(--text-muted);
|
|
112
|
+
text-decoration: none;
|
|
113
|
+
border-radius: 6px;
|
|
114
|
+
font-size: 14px;
|
|
115
|
+
transition: all 0.15s;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.nav-section a:hover {
|
|
119
|
+
background: var(--bg-tertiary);
|
|
120
|
+
color: var(--text);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.nav-section a.active {
|
|
124
|
+
background: rgba(88, 166, 255, 0.15);
|
|
125
|
+
color: var(--accent);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.nav-section a .icon {
|
|
129
|
+
font-size: 18px;
|
|
130
|
+
width: 24px;
|
|
131
|
+
text-align: center;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.nav-section a .badge {
|
|
135
|
+
margin-left: auto;
|
|
136
|
+
background: var(--bg-tertiary);
|
|
137
|
+
padding: 2px 8px;
|
|
138
|
+
border-radius: 10px;
|
|
139
|
+
font-size: 11px;
|
|
140
|
+
color: var(--text-muted);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Main content */
|
|
144
|
+
.main {
|
|
145
|
+
flex: 1;
|
|
146
|
+
margin-left: 260px;
|
|
147
|
+
padding: 40px 60px;
|
|
148
|
+
max-width: 1000px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.main h1 {
|
|
152
|
+
font-size: 32px;
|
|
153
|
+
margin-bottom: 8px;
|
|
154
|
+
display: flex;
|
|
155
|
+
align-items: center;
|
|
156
|
+
gap: 12px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.main h1 .emoji {
|
|
160
|
+
font-size: 36px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.main .subtitle {
|
|
164
|
+
color: var(--text-muted);
|
|
165
|
+
font-size: 16px;
|
|
166
|
+
margin-bottom: 32px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.main h2 {
|
|
170
|
+
font-size: 22px;
|
|
171
|
+
margin: 32px 0 16px;
|
|
172
|
+
padding-bottom: 8px;
|
|
173
|
+
border-bottom: 1px solid var(--border);
|
|
174
|
+
display: flex;
|
|
175
|
+
align-items: center;
|
|
176
|
+
gap: 8px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.main h3 {
|
|
180
|
+
font-size: 18px;
|
|
181
|
+
margin: 24px 0 12px;
|
|
182
|
+
color: var(--text);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.main p {
|
|
186
|
+
margin-bottom: 16px;
|
|
187
|
+
color: var(--text-muted);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* Cards */
|
|
191
|
+
.cards {
|
|
192
|
+
display: grid;
|
|
193
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
194
|
+
gap: 16px;
|
|
195
|
+
margin: 24px 0;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.card {
|
|
199
|
+
background: var(--bg-secondary);
|
|
200
|
+
border: 1px solid var(--border);
|
|
201
|
+
border-radius: 12px;
|
|
202
|
+
padding: 20px;
|
|
203
|
+
transition: all 0.2s;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.card:hover {
|
|
207
|
+
border-color: var(--accent);
|
|
208
|
+
transform: translateY(-2px);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.card h4 {
|
|
212
|
+
font-size: 16px;
|
|
213
|
+
margin-bottom: 8px;
|
|
214
|
+
display: flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
gap: 8px;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.card p {
|
|
220
|
+
font-size: 13px;
|
|
221
|
+
color: var(--text-muted);
|
|
222
|
+
margin: 0;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.card .tag {
|
|
226
|
+
display: inline-block;
|
|
227
|
+
background: var(--bg-tertiary);
|
|
228
|
+
padding: 2px 8px;
|
|
229
|
+
border-radius: 4px;
|
|
230
|
+
font-size: 11px;
|
|
231
|
+
margin-top: 12px;
|
|
232
|
+
color: var(--text-muted);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* Code blocks */
|
|
236
|
+
pre {
|
|
237
|
+
background: var(--bg-tertiary);
|
|
238
|
+
padding: 16px;
|
|
239
|
+
border-radius: 8px;
|
|
240
|
+
overflow-x: auto;
|
|
241
|
+
margin: 16px 0;
|
|
242
|
+
border: 1px solid var(--border);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
code {
|
|
246
|
+
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
247
|
+
font-size: 13px;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
code.inline {
|
|
251
|
+
background: var(--bg-tertiary);
|
|
252
|
+
padding: 2px 6px;
|
|
253
|
+
border-radius: 4px;
|
|
254
|
+
color: var(--accent);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* Tables */
|
|
258
|
+
table {
|
|
259
|
+
width: 100%;
|
|
260
|
+
border-collapse: collapse;
|
|
261
|
+
margin: 16px 0;
|
|
262
|
+
font-size: 14px;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
th, td {
|
|
266
|
+
padding: 12px 16px;
|
|
267
|
+
border: 1px solid var(--border);
|
|
268
|
+
text-align: left;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
th {
|
|
272
|
+
background: var(--bg-secondary);
|
|
273
|
+
font-weight: 600;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
tr:hover td {
|
|
277
|
+
background: var(--bg-secondary);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* Lists */
|
|
281
|
+
ul, ol {
|
|
282
|
+
margin: 16px 0;
|
|
283
|
+
padding-left: 24px;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
li {
|
|
287
|
+
margin-bottom: 8px;
|
|
288
|
+
color: var(--text-muted);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
li strong {
|
|
292
|
+
color: var(--text);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* Alert boxes */
|
|
296
|
+
.alert {
|
|
297
|
+
padding: 16px 20px;
|
|
298
|
+
border-radius: 8px;
|
|
299
|
+
margin: 16px 0;
|
|
300
|
+
border-left: 4px solid;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.alert-info {
|
|
304
|
+
background: rgba(88, 166, 255, 0.1);
|
|
305
|
+
border-color: var(--accent);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.alert-success {
|
|
309
|
+
background: rgba(63, 185, 80, 0.1);
|
|
310
|
+
border-color: var(--success);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.alert-warning {
|
|
314
|
+
background: rgba(210, 153, 34, 0.1);
|
|
315
|
+
border-color: var(--warning);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/* Stats */
|
|
319
|
+
.stats {
|
|
320
|
+
display: flex;
|
|
321
|
+
gap: 24px;
|
|
322
|
+
margin: 24px 0;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.stat {
|
|
326
|
+
text-align: center;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.stat .number {
|
|
330
|
+
font-size: 36px;
|
|
331
|
+
font-weight: bold;
|
|
332
|
+
color: var(--accent);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.stat .label {
|
|
336
|
+
font-size: 12px;
|
|
337
|
+
color: var(--text-muted);
|
|
338
|
+
text-transform: uppercase;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* Flow diagram */
|
|
342
|
+
.flow {
|
|
343
|
+
display: flex;
|
|
344
|
+
align-items: center;
|
|
345
|
+
gap: 12px;
|
|
346
|
+
margin: 24px 0;
|
|
347
|
+
flex-wrap: wrap;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.flow-item {
|
|
351
|
+
background: var(--bg-secondary);
|
|
352
|
+
border: 1px solid var(--border);
|
|
353
|
+
padding: 12px 16px;
|
|
354
|
+
border-radius: 8px;
|
|
355
|
+
font-size: 13px;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.flow-arrow {
|
|
359
|
+
color: var(--accent);
|
|
360
|
+
font-size: 20px;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/* Footer */
|
|
364
|
+
.footer {
|
|
365
|
+
margin-top: 48px;
|
|
366
|
+
padding-top: 24px;
|
|
367
|
+
border-top: 1px solid var(--border);
|
|
368
|
+
color: var(--text-muted);
|
|
369
|
+
font-size: 12px;
|
|
370
|
+
display: flex;
|
|
371
|
+
justify-content: space-between;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.footer a {
|
|
375
|
+
color: var(--accent);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/* Responsive */
|
|
379
|
+
@media (max-width: 768px) {
|
|
380
|
+
.sidebar { width: 100%; height: auto; position: relative; }
|
|
381
|
+
.main { margin-left: 0; padding: 20px; }
|
|
382
|
+
body { flex-direction: column; }
|
|
383
|
+
.cards { grid-template-columns: 1fr; }
|
|
384
|
+
}
|
|
385
|
+
</style>
|
|
386
|
+
</head>
|
|
387
|
+
<body>
|
|
388
|
+
${nav}
|
|
389
|
+
<main class="main">
|
|
390
|
+
${content}
|
|
391
|
+
<footer class="footer">
|
|
392
|
+
<span>Apero Kit CLI v1.4.0</span>
|
|
393
|
+
<span>Press Ctrl+C to close • <a href="https://github.com/Thanh-apero/apero-kit-cli" target="_blank">GitHub</a></span>
|
|
394
|
+
</footer>
|
|
395
|
+
</main>
|
|
396
|
+
</body>
|
|
397
|
+
</html>`;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
function generateNav(activeSection) {
|
|
401
|
+
const sections = [
|
|
402
|
+
{ id: 'overview', icon: '🏠', label: 'Overview' },
|
|
403
|
+
{ id: 'quickstart', icon: '🚀', label: 'Quick Start' },
|
|
404
|
+
{ id: 'agents', icon: '🤖', label: 'Agents', badge: '18' },
|
|
405
|
+
{ id: 'commands', icon: '📋', label: 'Commands', badge: '96+' },
|
|
406
|
+
{ id: 'skills', icon: '📚', label: 'Skills', badge: '57' },
|
|
407
|
+
{ id: 'hooks', icon: '⚡', label: 'Hooks', badge: '15+' },
|
|
408
|
+
{ id: 'workflows', icon: '🔄', label: 'Workflows', badge: '4' }
|
|
409
|
+
];
|
|
410
|
+
|
|
411
|
+
return `
|
|
412
|
+
<nav class="sidebar">
|
|
413
|
+
<div class="logo">
|
|
414
|
+
<h1>🎯 Apero Kit</h1>
|
|
415
|
+
<p>AI Agent Scaffolding Tool</p>
|
|
416
|
+
</div>
|
|
417
|
+
<div class="nav-section">
|
|
418
|
+
<h3>Documentation</h3>
|
|
419
|
+
${sections.map(s => `
|
|
420
|
+
<a href="?section=${s.id}" class="${activeSection === s.id ? 'active' : ''}">
|
|
421
|
+
<span class="icon">${s.icon}</span>
|
|
422
|
+
<span>${s.label}</span>
|
|
423
|
+
${s.badge ? `<span class="badge">${s.badge}</span>` : ''}
|
|
424
|
+
</a>
|
|
425
|
+
`).join('')}
|
|
426
|
+
</div>
|
|
427
|
+
<div class="nav-section">
|
|
428
|
+
<h3>Resources</h3>
|
|
429
|
+
<a href="https://github.com/Thanh-apero/apero-kit-cli" target="_blank">
|
|
430
|
+
<span class="icon">📦</span>
|
|
431
|
+
<span>GitHub</span>
|
|
432
|
+
</a>
|
|
433
|
+
<a href="https://www.npmjs.com/package/apero-kit-cli" target="_blank">
|
|
434
|
+
<span class="icon">📥</span>
|
|
435
|
+
<span>npm Package</span>
|
|
436
|
+
</a>
|
|
437
|
+
</div>
|
|
438
|
+
</nav>`;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
function generateOverview(source) {
|
|
442
|
+
return `
|
|
443
|
+
<h1><span class="emoji">🎯</span> Apero Kit CLI</h1>
|
|
444
|
+
<p class="subtitle">Scaffold AI agent projects with pre-configured kits for Claude Code</p>
|
|
445
|
+
|
|
446
|
+
<div class="stats">
|
|
447
|
+
<div class="stat">
|
|
448
|
+
<div class="number">18</div>
|
|
449
|
+
<div class="label">Agents</div>
|
|
450
|
+
</div>
|
|
451
|
+
<div class="stat">
|
|
452
|
+
<div class="number">96+</div>
|
|
453
|
+
<div class="label">Commands</div>
|
|
454
|
+
</div>
|
|
455
|
+
<div class="stat">
|
|
456
|
+
<div class="number">57</div>
|
|
457
|
+
<div class="label">Skills</div>
|
|
458
|
+
</div>
|
|
459
|
+
<div class="stat">
|
|
460
|
+
<div class="number">5</div>
|
|
461
|
+
<div class="label">Kits</div>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
|
|
465
|
+
<h2>🧩 What is Apero Kit?</h2>
|
|
466
|
+
<p>Apero Kit CLI giúp bạn nhanh chóng thiết lập một dự án AI agent với các thành phần đã được cấu hình sẵn:</p>
|
|
467
|
+
|
|
468
|
+
<div class="cards">
|
|
469
|
+
<div class="card">
|
|
470
|
+
<h4>🤖 Agents</h4>
|
|
471
|
+
<p>Các "chuyên gia AI" với vai trò riêng biệt: debugger, planner, developer, reviewer...</p>
|
|
472
|
+
<span class="tag">18 agents</span>
|
|
473
|
+
</div>
|
|
474
|
+
<div class="card">
|
|
475
|
+
<h4>📋 Commands</h4>
|
|
476
|
+
<p>Các lệnh thực thi như /fix, /code, /plan, /test với nhiều biến thể</p>
|
|
477
|
+
<span class="tag">96+ commands</span>
|
|
478
|
+
</div>
|
|
479
|
+
<div class="card">
|
|
480
|
+
<h4>📚 Skills</h4>
|
|
481
|
+
<p>Kho kiến thức chuyên sâu về frontend, backend, database, devops...</p>
|
|
482
|
+
<span class="tag">57 skills</span>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="card">
|
|
485
|
+
<h4>⚡ Hooks</h4>
|
|
486
|
+
<p>Scripts tự động chạy khi có sự kiện: format code, check security...</p>
|
|
487
|
+
<span class="tag">15+ hooks</span>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
|
|
491
|
+
<h2>🏗️ Folder Structure</h2>
|
|
492
|
+
<pre><code>.claude/
|
|
493
|
+
├── agents/ # 🤖 AI expert roles (debugger, planner, developer...)
|
|
494
|
+
├── commands/ # 📋 Task workflows (/fix, /code, /plan...)
|
|
495
|
+
├── skills/ # 📚 Knowledge bases (frontend, backend, database...)
|
|
496
|
+
├── hooks/ # ⚡ Automation scripts
|
|
497
|
+
├── router/ # 🧭 Decision engine
|
|
498
|
+
├── workflows/ # 🔄 Multi-step processes
|
|
499
|
+
└── settings.json</code></pre>
|
|
500
|
+
|
|
501
|
+
<h2>🔄 How It Works</h2>
|
|
502
|
+
<div class="flow">
|
|
503
|
+
<div class="flow-item">📝 User Request</div>
|
|
504
|
+
<span class="flow-arrow">→</span>
|
|
505
|
+
<div class="flow-item">🧭 Router</div>
|
|
506
|
+
<span class="flow-arrow">→</span>
|
|
507
|
+
<div class="flow-item">🤖 Agent</div>
|
|
508
|
+
<span class="flow-arrow">→</span>
|
|
509
|
+
<div class="flow-item">📋 Command</div>
|
|
510
|
+
<span class="flow-arrow">→</span>
|
|
511
|
+
<div class="flow-item">📚 Skills</div>
|
|
512
|
+
<span class="flow-arrow">→</span>
|
|
513
|
+
<div class="flow-item">✅ Result</div>
|
|
514
|
+
</div>
|
|
515
|
+
|
|
516
|
+
<div class="alert alert-info">
|
|
517
|
+
<strong>💡 Tip:</strong> Sử dụng menu bên trái để tìm hiểu chi tiết về từng thành phần.
|
|
518
|
+
</div>
|
|
519
|
+
`;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
function generateQuickstartSection() {
|
|
523
|
+
return `
|
|
524
|
+
<h1><span class="emoji">🚀</span> Quick Start</h1>
|
|
525
|
+
<p class="subtitle">Bắt đầu trong 2 phút</p>
|
|
526
|
+
|
|
527
|
+
<h2>📥 Installation</h2>
|
|
528
|
+
<pre><code>npm install -g apero-kit-cli</code></pre>
|
|
529
|
+
|
|
530
|
+
<h2>🎯 Create New Project</h2>
|
|
531
|
+
<pre><code># Tạo project mới với kit engineer
|
|
532
|
+
ak init my-app --kit engineer
|
|
533
|
+
|
|
534
|
+
# Hoặc init trong folder hiện tại
|
|
535
|
+
cd my-project
|
|
536
|
+
ak init</code></pre>
|
|
537
|
+
|
|
538
|
+
<h2>📦 Available Kits</h2>
|
|
539
|
+
<table>
|
|
540
|
+
<tr>
|
|
541
|
+
<th>Kit</th>
|
|
542
|
+
<th>Description</th>
|
|
543
|
+
<th>Best For</th>
|
|
544
|
+
</tr>
|
|
545
|
+
<tr>
|
|
546
|
+
<td><strong>🛠️ engineer</strong></td>
|
|
547
|
+
<td>Full-stack development</td>
|
|
548
|
+
<td>Web apps, APIs, full projects</td>
|
|
549
|
+
</tr>
|
|
550
|
+
<tr>
|
|
551
|
+
<td><strong>🔬 researcher</strong></td>
|
|
552
|
+
<td>Research & analysis</td>
|
|
553
|
+
<td>Code exploration, documentation</td>
|
|
554
|
+
</tr>
|
|
555
|
+
<tr>
|
|
556
|
+
<td><strong>🎨 designer</strong></td>
|
|
557
|
+
<td>UI/UX design</td>
|
|
558
|
+
<td>Frontend, design systems</td>
|
|
559
|
+
</tr>
|
|
560
|
+
<tr>
|
|
561
|
+
<td><strong>📦 minimal</strong></td>
|
|
562
|
+
<td>Lightweight essentials</td>
|
|
563
|
+
<td>Small projects, quick tasks</td>
|
|
564
|
+
</tr>
|
|
565
|
+
<tr>
|
|
566
|
+
<td><strong>🚀 full</strong></td>
|
|
567
|
+
<td>Everything included</td>
|
|
568
|
+
<td>Enterprise, complex projects</td>
|
|
569
|
+
</tr>
|
|
570
|
+
</table>
|
|
571
|
+
|
|
572
|
+
<h2>💻 Common Commands</h2>
|
|
573
|
+
<pre><code># Check project status
|
|
574
|
+
ak status
|
|
575
|
+
|
|
576
|
+
# Add more components
|
|
577
|
+
ak add skill:databases
|
|
578
|
+
ak add agent:debugger
|
|
579
|
+
ak add command:fix/ui
|
|
580
|
+
|
|
581
|
+
# Update from source
|
|
582
|
+
ak update
|
|
583
|
+
|
|
584
|
+
# List available items
|
|
585
|
+
ak list agents
|
|
586
|
+
ak list skills
|
|
587
|
+
ak list commands
|
|
588
|
+
|
|
589
|
+
# Health check
|
|
590
|
+
ak doctor</code></pre>
|
|
591
|
+
|
|
592
|
+
<h2>🎮 Existing Project</h2>
|
|
593
|
+
<pre><code>cd existing-project
|
|
594
|
+
ak init
|
|
595
|
+
|
|
596
|
+
# CLI will detect .claude/ and ask:
|
|
597
|
+
# 🔄 Override - Replace all files
|
|
598
|
+
# 📦 Merge - Only add missing files
|
|
599
|
+
# ⏭️ Skip - Do nothing</code></pre>
|
|
600
|
+
|
|
601
|
+
<div class="alert alert-success">
|
|
602
|
+
<strong>✅ Done!</strong> Bạn đã sẵn sàng sử dụng Claude Code với các agents và commands đã được cấu hình.
|
|
603
|
+
</div>
|
|
604
|
+
`;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
function generateAgentsSection(source) {
|
|
608
|
+
const agents = [
|
|
609
|
+
{ name: 'debugger', emoji: '🔍', desc: 'Investigate issues, analyze logs, trace bugs' },
|
|
610
|
+
{ name: 'planner', emoji: '📐', desc: 'Create implementation plans, architecture design' },
|
|
611
|
+
{ name: 'fullstack-developer', emoji: '💻', desc: 'Execute code with strict file ownership' },
|
|
612
|
+
{ name: 'code-reviewer', emoji: '👀', desc: 'Review code quality and standards' },
|
|
613
|
+
{ name: 'tester', emoji: '🧪', desc: 'Write comprehensive tests' },
|
|
614
|
+
{ name: 'scout', emoji: '🔎', desc: 'Search codebase with pattern matching' },
|
|
615
|
+
{ name: 'scout-external', emoji: '🌐', desc: 'Search external docs and APIs' },
|
|
616
|
+
{ name: 'researcher', emoji: '🔬', desc: 'Research technologies and solutions' },
|
|
617
|
+
{ name: 'ui-ux-designer', emoji: '🎨', desc: 'Design interfaces and user experiences' },
|
|
618
|
+
{ name: 'database-admin', emoji: '🗄️', desc: 'Manage databases and queries' },
|
|
619
|
+
{ name: 'git-manager', emoji: '📦', desc: 'Manage version control, commits, PRs' },
|
|
620
|
+
{ name: 'docs-manager', emoji: '📝', desc: 'Write and maintain documentation' },
|
|
621
|
+
{ name: 'project-manager', emoji: '📊', desc: 'Track progress and timelines' },
|
|
622
|
+
{ name: 'brainstormer', emoji: '💡', desc: 'Generate creative ideas' },
|
|
623
|
+
{ name: 'copywriter', emoji: '✍️', desc: 'Write marketing and technical copy' },
|
|
624
|
+
{ name: 'mcp-manager', emoji: '🔧', desc: 'Manage MCP tools and integrations' },
|
|
625
|
+
{ name: 'journal-writer', emoji: '📓', desc: 'Log progress and notes' },
|
|
626
|
+
{ name: 'code-simplifier', emoji: '✂️', desc: 'Simplify and refactor code' }
|
|
627
|
+
];
|
|
628
|
+
|
|
629
|
+
return `
|
|
630
|
+
<h1><span class="emoji">🤖</span> Agents</h1>
|
|
631
|
+
<p class="subtitle">18 chuyên gia AI với vai trò riêng biệt</p>
|
|
632
|
+
|
|
633
|
+
<div class="alert alert-info">
|
|
634
|
+
<strong>💡 Agent là gì?</strong> Agent là một "persona" mà AI sẽ đóng vai, với chuyên môn và phương pháp làm việc riêng.
|
|
635
|
+
</div>
|
|
636
|
+
|
|
637
|
+
<h2>📋 Agent Categories</h2>
|
|
638
|
+
|
|
639
|
+
<h3>🔧 Development</h3>
|
|
640
|
+
<div class="cards">
|
|
641
|
+
${agents.slice(0, 5).map(a => `
|
|
642
|
+
<div class="card">
|
|
643
|
+
<h4>${a.emoji} ${a.name}</h4>
|
|
644
|
+
<p>${a.desc}</p>
|
|
645
|
+
</div>
|
|
646
|
+
`).join('')}
|
|
647
|
+
</div>
|
|
648
|
+
|
|
649
|
+
<h3>🔍 Research & Search</h3>
|
|
650
|
+
<div class="cards">
|
|
651
|
+
${agents.slice(5, 8).map(a => `
|
|
652
|
+
<div class="card">
|
|
653
|
+
<h4>${a.emoji} ${a.name}</h4>
|
|
654
|
+
<p>${a.desc}</p>
|
|
655
|
+
</div>
|
|
656
|
+
`).join('')}
|
|
657
|
+
</div>
|
|
658
|
+
|
|
659
|
+
<h3>🎨 Design & Content</h3>
|
|
660
|
+
<div class="cards">
|
|
661
|
+
${agents.slice(8, 11).map(a => `
|
|
662
|
+
<div class="card">
|
|
663
|
+
<h4>${a.emoji} ${a.name}</h4>
|
|
664
|
+
<p>${a.desc}</p>
|
|
665
|
+
</div>
|
|
666
|
+
`).join('')}
|
|
667
|
+
</div>
|
|
668
|
+
|
|
669
|
+
<h3>📊 Management & Support</h3>
|
|
670
|
+
<div class="cards">
|
|
671
|
+
${agents.slice(11).map(a => `
|
|
672
|
+
<div class="card">
|
|
673
|
+
<h4>${a.emoji} ${a.name}</h4>
|
|
674
|
+
<p>${a.desc}</p>
|
|
675
|
+
</div>
|
|
676
|
+
`).join('')}
|
|
677
|
+
</div>
|
|
678
|
+
|
|
679
|
+
<h2>📄 Agent File Format</h2>
|
|
680
|
+
<pre><code>---
|
|
681
|
+
name: debugger
|
|
682
|
+
description: Investigate issues, analyze logs
|
|
683
|
+
model: inherit
|
|
684
|
+
---
|
|
685
|
+
|
|
686
|
+
# Debugger Agent
|
|
687
|
+
|
|
688
|
+
## Core Competencies
|
|
689
|
+
- Root cause analysis
|
|
690
|
+
- Log investigation
|
|
691
|
+
- Performance profiling
|
|
692
|
+
|
|
693
|
+
## Investigation Methodology
|
|
694
|
+
1. Reproduce the issue
|
|
695
|
+
2. Analyze error messages
|
|
696
|
+
3. Trace the call stack
|
|
697
|
+
4. Identify root cause</code></pre>
|
|
698
|
+
`;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
function generateCommandsSection(source) {
|
|
702
|
+
const commandGroups = [
|
|
703
|
+
{
|
|
704
|
+
name: 'Fix Commands',
|
|
705
|
+
icon: '🔧',
|
|
706
|
+
commands: [
|
|
707
|
+
{ name: '/fix', desc: 'Intelligent routing to specialized fix' },
|
|
708
|
+
{ name: '/fix:fast', desc: 'Quick fixes for simple issues' },
|
|
709
|
+
{ name: '/fix:hard', desc: 'Complex debugging with research' },
|
|
710
|
+
{ name: '/fix:ui', desc: 'UI/layout issues' },
|
|
711
|
+
{ name: '/fix:test', desc: 'Failing test fixes' },
|
|
712
|
+
{ name: '/fix:types', desc: 'TypeScript errors' },
|
|
713
|
+
{ name: '/fix:ci', desc: 'CI/CD pipeline issues' }
|
|
714
|
+
]
|
|
715
|
+
},
|
|
716
|
+
{
|
|
717
|
+
name: 'Plan Commands',
|
|
718
|
+
icon: '📐',
|
|
719
|
+
commands: [
|
|
720
|
+
{ name: '/plan', desc: 'Intelligent plan routing' },
|
|
721
|
+
{ name: '/plan:fast', desc: 'Quick planning without research' },
|
|
722
|
+
{ name: '/plan:hard', desc: 'Full research + planning' },
|
|
723
|
+
{ name: '/plan:parallel', desc: 'Multi-track parallel planning' },
|
|
724
|
+
{ name: '/plan:validate', desc: 'Verify existing plans' },
|
|
725
|
+
{ name: '/plan:preview', desc: 'Open plan in browser' }
|
|
726
|
+
]
|
|
727
|
+
},
|
|
728
|
+
{
|
|
729
|
+
name: 'Code Commands',
|
|
730
|
+
icon: '💻',
|
|
731
|
+
commands: [
|
|
732
|
+
{ name: '/code', desc: 'Standard implementation with tests' },
|
|
733
|
+
{ name: '/code:auto', desc: 'Automated code generation' },
|
|
734
|
+
{ name: '/code:no-test', desc: 'Quick prototyping without tests' },
|
|
735
|
+
{ name: '/code:parallel', desc: 'Parallel implementation' }
|
|
736
|
+
]
|
|
737
|
+
},
|
|
738
|
+
{
|
|
739
|
+
name: 'Other Commands',
|
|
740
|
+
icon: '⚡',
|
|
741
|
+
commands: [
|
|
742
|
+
{ name: '/test', desc: 'Run tests' },
|
|
743
|
+
{ name: '/review', desc: 'Code review' },
|
|
744
|
+
{ name: '/scout', desc: 'Search codebase' },
|
|
745
|
+
{ name: '/debug', desc: 'Deep investigation' },
|
|
746
|
+
{ name: '/brainstorm', desc: 'Generate ideas' },
|
|
747
|
+
{ name: '/docs', desc: 'Documentation' }
|
|
748
|
+
]
|
|
749
|
+
}
|
|
750
|
+
];
|
|
751
|
+
|
|
752
|
+
return `
|
|
753
|
+
<h1><span class="emoji">📋</span> Commands</h1>
|
|
754
|
+
<p class="subtitle">96+ lệnh thực thi với nhiều biến thể</p>
|
|
755
|
+
|
|
756
|
+
<div class="alert alert-info">
|
|
757
|
+
<strong>💡 Command là gì?</strong> Command là các "workflow" được định nghĩa sẵn cho từng loại task.
|
|
758
|
+
</div>
|
|
759
|
+
|
|
760
|
+
${commandGroups.map(group => `
|
|
761
|
+
<h2>${group.icon} ${group.name}</h2>
|
|
762
|
+
<table>
|
|
763
|
+
<tr>
|
|
764
|
+
<th>Command</th>
|
|
765
|
+
<th>Description</th>
|
|
766
|
+
</tr>
|
|
767
|
+
${group.commands.map(c => `
|
|
768
|
+
<tr>
|
|
769
|
+
<td><code>${c.name}</code></td>
|
|
770
|
+
<td>${c.desc}</td>
|
|
771
|
+
</tr>
|
|
772
|
+
`).join('')}
|
|
773
|
+
</table>
|
|
774
|
+
`).join('')}
|
|
775
|
+
|
|
776
|
+
<h2>📄 Command File Format</h2>
|
|
777
|
+
<pre><code>---
|
|
778
|
+
description: ⚡⚡ Quick fix for simple issues
|
|
779
|
+
argument-hint: [issue]
|
|
780
|
+
---
|
|
781
|
+
|
|
782
|
+
## Workflow
|
|
783
|
+
1. Analyze the issue
|
|
784
|
+
2. Identify root cause
|
|
785
|
+
3. Apply fix
|
|
786
|
+
4. Verify solution
|
|
787
|
+
|
|
788
|
+
## When to Use
|
|
789
|
+
- Simple bug fixes
|
|
790
|
+
- Typo corrections
|
|
791
|
+
- Minor logic errors</code></pre>
|
|
792
|
+
`;
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
function generateSkillsSection(source) {
|
|
796
|
+
const skillCategories = [
|
|
797
|
+
{
|
|
798
|
+
name: 'Frontend',
|
|
799
|
+
icon: '🎨',
|
|
800
|
+
skills: ['frontend-development', 'ui-ux-pro-max', 'ui-styling', 'frontend-design-pro', 'mobile-development']
|
|
801
|
+
},
|
|
802
|
+
{
|
|
803
|
+
name: 'Backend',
|
|
804
|
+
icon: '⚙️',
|
|
805
|
+
skills: ['backend-development', 'databases', 'better-auth', 'payment-integration']
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
name: 'DevOps',
|
|
809
|
+
icon: '🚀',
|
|
810
|
+
skills: ['devops', 'media-processing', 'mcp-builder', 'mcp-management']
|
|
811
|
+
},
|
|
812
|
+
{
|
|
813
|
+
name: 'Testing & Debug',
|
|
814
|
+
icon: '🧪',
|
|
815
|
+
skills: ['debugging', 'bug-diagnosis', 'test-generation', 'chrome-devtools']
|
|
816
|
+
},
|
|
817
|
+
{
|
|
818
|
+
name: 'Documentation',
|
|
819
|
+
icon: '📝',
|
|
820
|
+
skills: ['documentation', 'planning', 'readme-improvement', 'project-index']
|
|
821
|
+
}
|
|
822
|
+
];
|
|
823
|
+
|
|
824
|
+
return `
|
|
825
|
+
<h1><span class="emoji">📚</span> Skills</h1>
|
|
826
|
+
<p class="subtitle">57 kho kiến thức chuyên sâu</p>
|
|
827
|
+
|
|
828
|
+
<div class="alert alert-info">
|
|
829
|
+
<strong>💡 Skill là gì?</strong> Skill là các "knowledge package" được load khi cần cho từng domain cụ thể.
|
|
830
|
+
</div>
|
|
831
|
+
|
|
832
|
+
${skillCategories.map(cat => `
|
|
833
|
+
<h2>${cat.icon} ${cat.name}</h2>
|
|
834
|
+
<div class="cards">
|
|
835
|
+
${cat.skills.map(s => `
|
|
836
|
+
<div class="card">
|
|
837
|
+
<h4>${s}</h4>
|
|
838
|
+
<p>Specialized knowledge for ${s.replace(/-/g, ' ')}</p>
|
|
839
|
+
</div>
|
|
840
|
+
`).join('')}
|
|
841
|
+
</div>
|
|
842
|
+
`).join('')}
|
|
843
|
+
|
|
844
|
+
<h2>📄 Skill File Format</h2>
|
|
845
|
+
<pre><code>---
|
|
846
|
+
name: backend-development
|
|
847
|
+
description: Build robust backend systems
|
|
848
|
+
---
|
|
849
|
+
|
|
850
|
+
# Backend Development Skill
|
|
851
|
+
|
|
852
|
+
## Core Concepts
|
|
853
|
+
- API design patterns
|
|
854
|
+
- Database optimization
|
|
855
|
+
- Authentication strategies
|
|
856
|
+
|
|
857
|
+
## Technology Guides
|
|
858
|
+
### Node.js
|
|
859
|
+
- Express/NestJS patterns
|
|
860
|
+
- Middleware architecture
|
|
861
|
+
|
|
862
|
+
### Python
|
|
863
|
+
- FastAPI/Django patterns
|
|
864
|
+
- ORM best practices</code></pre>
|
|
865
|
+
`;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
function generateHooksSection(source) {
|
|
869
|
+
return `
|
|
870
|
+
<h1><span class="emoji">⚡</span> Hooks</h1>
|
|
871
|
+
<p class="subtitle">15+ automation scripts</p>
|
|
872
|
+
|
|
873
|
+
<div class="alert alert-info">
|
|
874
|
+
<strong>💡 Hook là gì?</strong> Hook là scripts tự động chạy khi có sự kiện (edit file, start session, etc.)
|
|
875
|
+
</div>
|
|
876
|
+
|
|
877
|
+
<h2>📋 Hook Types</h2>
|
|
878
|
+
<table>
|
|
879
|
+
<tr>
|
|
880
|
+
<th>Hook</th>
|
|
881
|
+
<th>Trigger</th>
|
|
882
|
+
<th>Purpose</th>
|
|
883
|
+
</tr>
|
|
884
|
+
<tr>
|
|
885
|
+
<td><code>session-init</code></td>
|
|
886
|
+
<td>Session start</td>
|
|
887
|
+
<td>Load config, detect project</td>
|
|
888
|
+
</tr>
|
|
889
|
+
<tr>
|
|
890
|
+
<td><code>session-end</code></td>
|
|
891
|
+
<td>Session end</td>
|
|
892
|
+
<td>Log session, cleanup</td>
|
|
893
|
+
</tr>
|
|
894
|
+
<tr>
|
|
895
|
+
<td><code>post-edit-prettier</code></td>
|
|
896
|
+
<td>After edit</td>
|
|
897
|
+
<td>Auto-format code</td>
|
|
898
|
+
</tr>
|
|
899
|
+
<tr>
|
|
900
|
+
<td><code>privacy-block</code></td>
|
|
901
|
+
<td>File access</td>
|
|
902
|
+
<td>Block sensitive files</td>
|
|
903
|
+
</tr>
|
|
904
|
+
<tr>
|
|
905
|
+
<td><code>scout-block</code></td>
|
|
906
|
+
<td>Directory access</td>
|
|
907
|
+
<td>Block forbidden paths</td>
|
|
908
|
+
</tr>
|
|
909
|
+
<tr>
|
|
910
|
+
<td><code>dev-rules-reminder</code></td>
|
|
911
|
+
<td>Code review</td>
|
|
912
|
+
<td>Enforce coding standards</td>
|
|
913
|
+
</tr>
|
|
914
|
+
</table>
|
|
915
|
+
|
|
916
|
+
<h2>🔔 Notification Hooks</h2>
|
|
917
|
+
<p>Gửi thông báo qua các kênh:</p>
|
|
918
|
+
<ul>
|
|
919
|
+
<li><strong>Slack</strong> - Workspace notifications</li>
|
|
920
|
+
<li><strong>Discord</strong> - Channel webhooks</li>
|
|
921
|
+
<li><strong>Telegram</strong> - Bot messages</li>
|
|
922
|
+
</ul>
|
|
923
|
+
|
|
924
|
+
<h2>🛡️ Security Hooks</h2>
|
|
925
|
+
<ul>
|
|
926
|
+
<li><strong>privacy-block</strong> - Chặn truy cập .env, credentials</li>
|
|
927
|
+
<li><strong>scout-block</strong> - Chặn traversal ngoài project</li>
|
|
928
|
+
</ul>
|
|
929
|
+
`;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
function generateWorkflowsSection(source) {
|
|
933
|
+
return `
|
|
934
|
+
<h1><span class="emoji">🔄</span> Workflows</h1>
|
|
935
|
+
<p class="subtitle">Multi-step collaboration processes</p>
|
|
936
|
+
|
|
937
|
+
<div class="alert alert-info">
|
|
938
|
+
<strong>💡 Workflow là gì?</strong> Workflow là quy trình nhiều bước với sự phối hợp giữa các agents.
|
|
939
|
+
</div>
|
|
940
|
+
|
|
941
|
+
<h2>📋 Primary Workflow</h2>
|
|
942
|
+
<p>Quy trình phát triển feature đầy đủ:</p>
|
|
943
|
+
|
|
944
|
+
<div class="flow">
|
|
945
|
+
<div class="flow-item">📐 Planning</div>
|
|
946
|
+
<span class="flow-arrow">→</span>
|
|
947
|
+
<div class="flow-item">💻 Implementation</div>
|
|
948
|
+
<span class="flow-arrow">→</span>
|
|
949
|
+
<div class="flow-item">🧪 Testing</div>
|
|
950
|
+
<span class="flow-arrow">→</span>
|
|
951
|
+
<div class="flow-item">👀 Review</div>
|
|
952
|
+
<span class="flow-arrow">→</span>
|
|
953
|
+
<div class="flow-item">📝 Documentation</div>
|
|
954
|
+
</div>
|
|
955
|
+
|
|
956
|
+
<h3>Phase 1: Planning</h3>
|
|
957
|
+
<ul>
|
|
958
|
+
<li>Agent: <code>planner</code></li>
|
|
959
|
+
<li>Analyze requirements</li>
|
|
960
|
+
<li>Create implementation plan</li>
|
|
961
|
+
<li>Define success criteria</li>
|
|
962
|
+
</ul>
|
|
963
|
+
|
|
964
|
+
<h3>Phase 2: Implementation</h3>
|
|
965
|
+
<ul>
|
|
966
|
+
<li>Agent: <code>fullstack-developer</code></li>
|
|
967
|
+
<li>Write code following plan</li>
|
|
968
|
+
<li>Self-review</li>
|
|
969
|
+
<li>Write unit tests</li>
|
|
970
|
+
</ul>
|
|
971
|
+
|
|
972
|
+
<h3>Phase 3: Testing</h3>
|
|
973
|
+
<ul>
|
|
974
|
+
<li>Agent: <code>tester</code></li>
|
|
975
|
+
<li>Run full test suite</li>
|
|
976
|
+
<li>Test edge cases</li>
|
|
977
|
+
<li>Report status</li>
|
|
978
|
+
</ul>
|
|
979
|
+
|
|
980
|
+
<h3>Phase 4: Review</h3>
|
|
981
|
+
<ul>
|
|
982
|
+
<li>Agent: <code>code-reviewer</code></li>
|
|
983
|
+
<li>Check code quality</li>
|
|
984
|
+
<li>Security review</li>
|
|
985
|
+
<li>Performance analysis</li>
|
|
986
|
+
</ul>
|
|
987
|
+
|
|
988
|
+
<h3>Phase 5: Documentation</h3>
|
|
989
|
+
<ul>
|
|
990
|
+
<li>Agent: <code>docs-manager</code></li>
|
|
991
|
+
<li>Update documentation</li>
|
|
992
|
+
<li>Changelog entry</li>
|
|
993
|
+
<li>Release notes</li>
|
|
994
|
+
</ul>
|
|
995
|
+
|
|
996
|
+
<h2>🎯 Key Principles</h2>
|
|
997
|
+
<ul>
|
|
998
|
+
<li><strong>Clarify First</strong> - Hỏi rõ yêu cầu trước khi làm</li>
|
|
999
|
+
<li><strong>Minimum Viable</strong> - Chỉ làm những gì cần thiết</li>
|
|
1000
|
+
<li><strong>Reuse Before Write</strong> - Tái sử dụng code có sẵn</li>
|
|
1001
|
+
<li><strong>File < 300 LOC</strong> - Giữ file nhỏ</li>
|
|
1002
|
+
<li><strong>Config from Env</strong> - Không hardcode secrets</li>
|
|
1003
|
+
</ul>
|
|
1004
|
+
`;
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
/**
|
|
1008
|
+
* Help command - open browser with interactive documentation
|
|
1009
|
+
*/
|
|
1010
|
+
export async function helpCommand(options) {
|
|
1011
|
+
const source = resolveSource(options.source);
|
|
1012
|
+
|
|
1013
|
+
console.log(chalk.cyan('\n📚 Starting help server...\n'));
|
|
1014
|
+
|
|
1015
|
+
const server = http.createServer((req, res) => {
|
|
1016
|
+
const url = new URL(req.url, `http://localhost:${PORT}`);
|
|
1017
|
+
const section = url.searchParams.get('section') || 'overview';
|
|
1018
|
+
|
|
1019
|
+
const html = generateHelpPage(section, source);
|
|
1020
|
+
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
|
|
1021
|
+
res.end(html);
|
|
1022
|
+
});
|
|
1023
|
+
|
|
1024
|
+
server.listen(PORT, () => {
|
|
1025
|
+
const url = `http://localhost:${PORT}`;
|
|
1026
|
+
console.log(chalk.green(` Help server running at: ${url}`));
|
|
1027
|
+
console.log(chalk.gray(' Press Ctrl+C to stop\n'));
|
|
1028
|
+
|
|
1029
|
+
// Open browser
|
|
1030
|
+
const openCommand = process.platform === 'darwin' ? 'open' :
|
|
1031
|
+
process.platform === 'win32' ? 'start' : 'xdg-open';
|
|
1032
|
+
exec(`${openCommand} ${url}`);
|
|
1033
|
+
});
|
|
1034
|
+
|
|
1035
|
+
// Handle shutdown
|
|
1036
|
+
process.on('SIGINT', () => {
|
|
1037
|
+
console.log(chalk.yellow('\n👋 Help server stopped'));
|
|
1038
|
+
process.exit(0);
|
|
1039
|
+
});
|
|
1040
|
+
}
|