claude-code-autoconfig 1.0.71 → 1.0.72
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/.claude/agents/{guide-refresh.md → docs-refresh.md} +5 -5
- package/.claude/commands/autoconfig.md +10 -10
- package/.claude/commands/{show-guide.md → show-docs.md} +17 -17
- package/.claude/{guide/autoconfig.guide.html → docs/autoconfig.docs.html} +1834 -1834
- package/README.md +5 -5
- package/package.json +1 -1
|
@@ -1,1835 +1,1835 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Claude Code Autoconfig — Walkthrough</title>
|
|
7
|
-
<style>
|
|
8
|
-
* {
|
|
9
|
-
margin: 0;
|
|
10
|
-
padding: 0;
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
:root {
|
|
15
|
-
--bg-primary: #0D0D0D;
|
|
16
|
-
--bg-secondary: #1A1A1A;
|
|
17
|
-
--bg-elevated: #252525;
|
|
18
|
-
--text-primary: #FFFFFF;
|
|
19
|
-
--text-secondary: #8FBBCF;
|
|
20
|
-
--text-dim: #6B7280;
|
|
21
|
-
--accent-orange: #FF9933;
|
|
22
|
-
--accent-blue: #5C9ECE;
|
|
23
|
-
--accent-cyan: #22D3EE;
|
|
24
|
-
--accent-green: #6ABF69;
|
|
25
|
-
--accent-yellow: #E5C07B;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
body {
|
|
29
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
30
|
-
background: var(--bg-primary);
|
|
31
|
-
color: var(--text-primary);
|
|
32
|
-
min-height: 100vh;
|
|
33
|
-
overflow: hidden;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.container {
|
|
37
|
-
max-width: 900px;
|
|
38
|
-
margin: 0 auto;
|
|
39
|
-
padding: 40px 20px;
|
|
40
|
-
min-height: 100vh;
|
|
41
|
-
display: flex;
|
|
42
|
-
flex-direction: column;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/* Progress bar */
|
|
46
|
-
.progress-container {
|
|
47
|
-
display: flex;
|
|
48
|
-
justify-content: center;
|
|
49
|
-
gap: 8px;
|
|
50
|
-
margin-bottom: 40px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.progress-dot {
|
|
54
|
-
width: 12px;
|
|
55
|
-
height: 12px;
|
|
56
|
-
border-radius: 50%;
|
|
57
|
-
background: #4a4a4a;
|
|
58
|
-
cursor: pointer;
|
|
59
|
-
transition: all 0.3s ease;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.progress-dot:hover {
|
|
63
|
-
background: #6a6a6a;
|
|
64
|
-
transform: scale(1.2);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.progress-dot.active {
|
|
68
|
-
background: var(--accent-green);
|
|
69
|
-
box-shadow: 0 0 15px rgba(106, 191, 105, 0.4);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* Slides */
|
|
73
|
-
.slides-container {
|
|
74
|
-
flex: 1;
|
|
75
|
-
position: relative;
|
|
76
|
-
overflow: hidden;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.slide {
|
|
80
|
-
position: absolute;
|
|
81
|
-
top: 0;
|
|
82
|
-
left: 0;
|
|
83
|
-
width: 100%;
|
|
84
|
-
opacity: 0;
|
|
85
|
-
visibility: hidden;
|
|
86
|
-
transform: translateX(100px);
|
|
87
|
-
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
88
|
-
pointer-events: none;
|
|
89
|
-
display: flex;
|
|
90
|
-
flex-direction: column;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.slide.active {
|
|
94
|
-
opacity: 1;
|
|
95
|
-
visibility: visible;
|
|
96
|
-
transform: translateX(0);
|
|
97
|
-
pointer-events: auto;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.slide.exit {
|
|
101
|
-
opacity: 0;
|
|
102
|
-
transform: translateX(-100px);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.slide-number {
|
|
106
|
-
font-size: 14px;
|
|
107
|
-
color: var(--accent-orange);
|
|
108
|
-
text-transform: uppercase;
|
|
109
|
-
letter-spacing: 2px;
|
|
110
|
-
margin-bottom: 12px;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.slide h1 {
|
|
114
|
-
font-size: 2.5rem;
|
|
115
|
-
font-weight: 700;
|
|
116
|
-
margin-bottom: 20px;
|
|
117
|
-
color: var(--text-primary);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.slide h2 {
|
|
121
|
-
font-size: 1.3rem;
|
|
122
|
-
font-weight: 400;
|
|
123
|
-
color: var(--text-secondary);
|
|
124
|
-
margin-bottom: 30px;
|
|
125
|
-
line-height: 1.6;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.slide-content {
|
|
129
|
-
flex: 1;
|
|
130
|
-
overflow-y: auto;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/* Code blocks */
|
|
134
|
-
.code-block {
|
|
135
|
-
background: var(--bg-secondary);
|
|
136
|
-
border: 1px solid var(--bg-elevated);
|
|
137
|
-
border-radius: 8px;
|
|
138
|
-
padding: 20px;
|
|
139
|
-
margin: 20px 0;
|
|
140
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
141
|
-
font-size: 14px;
|
|
142
|
-
line-height: 1.6;
|
|
143
|
-
overflow-x: auto;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.code-block .comment {
|
|
147
|
-
color: var(--text-dim);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.code-block .keyword {
|
|
151
|
-
color: var(--accent-orange);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.code-block .string {
|
|
155
|
-
color: var(--accent-green);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.code-block .property {
|
|
159
|
-
color: var(--accent-blue);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.code-block .folder {
|
|
163
|
-
color: var(--accent-cyan);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.code-block .file {
|
|
167
|
-
color: var(--accent-orange);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
/* Info cards */
|
|
171
|
-
.info-card {
|
|
172
|
-
background: rgba(212, 165, 116, 0.1);
|
|
173
|
-
border-left: 4px solid var(--accent-orange);
|
|
174
|
-
border-radius: 0 8px 8px 0;
|
|
175
|
-
padding: 16px 20px;
|
|
176
|
-
margin: 20px 0;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.info-card.warning {
|
|
180
|
-
background: rgba(229, 192, 123, 0.1);
|
|
181
|
-
border-left-color: var(--accent-yellow);
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.info-card h4 {
|
|
185
|
-
font-size: 14px;
|
|
186
|
-
text-transform: uppercase;
|
|
187
|
-
letter-spacing: 1px;
|
|
188
|
-
margin-bottom: 8px;
|
|
189
|
-
color: var(--accent-orange);
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.info-card.warning h4 {
|
|
193
|
-
color: var(--accent-yellow);
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
/* Feature list */
|
|
197
|
-
.feature-list {
|
|
198
|
-
list-style: none;
|
|
199
|
-
margin: 20px 0;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.feature-list li {
|
|
203
|
-
padding: 14px 0;
|
|
204
|
-
padding-left: 28px;
|
|
205
|
-
position: relative;
|
|
206
|
-
border-bottom: 1px solid var(--bg-elevated);
|
|
207
|
-
display: flex;
|
|
208
|
-
align-items: center;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.feature-list li:last-child {
|
|
212
|
-
border-bottom: none;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.feature-list li::before {
|
|
216
|
-
content: "●";
|
|
217
|
-
position: absolute;
|
|
218
|
-
left: 0;
|
|
219
|
-
color: var(--text-primary);
|
|
220
|
-
font-size: 14px;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.feature-list li.blue-bullet::before {
|
|
224
|
-
color: var(--accent-blue);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.feature-list .file-name {
|
|
228
|
-
color: var(--accent-orange);
|
|
229
|
-
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
230
|
-
font-size: 14px;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
/* Welcome content */
|
|
234
|
-
.welcome-content {
|
|
235
|
-
display: flex;
|
|
236
|
-
flex-direction: column;
|
|
237
|
-
align-items: center;
|
|
238
|
-
justify-content: center;
|
|
239
|
-
text-align: center;
|
|
240
|
-
padding: 40px 20px;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.welcome-text {
|
|
244
|
-
font-size: 24px;
|
|
245
|
-
color: var(--text-primary);
|
|
246
|
-
margin-bottom: 30px;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.welcome-action {
|
|
250
|
-
background: var(--bg-secondary);
|
|
251
|
-
border: 1px solid var(--bg-elevated);
|
|
252
|
-
border-radius: 12px;
|
|
253
|
-
padding: 24px 32px;
|
|
254
|
-
max-width: 500px;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
.welcome-action p {
|
|
258
|
-
font-size: 16px;
|
|
259
|
-
color: var(--text-secondary);
|
|
260
|
-
line-height: 1.6;
|
|
261
|
-
margin: 0;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
.welcome-action code {
|
|
265
|
-
background: var(--bg-elevated);
|
|
266
|
-
padding: 4px 12px;
|
|
267
|
-
border-radius: 6px;
|
|
268
|
-
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
269
|
-
font-size: 15px;
|
|
270
|
-
color: var(--accent-cyan);
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
/* TOC list */
|
|
274
|
-
.tip-banner {
|
|
275
|
-
display: flex;
|
|
276
|
-
align-items: flex-start;
|
|
277
|
-
gap: 12px;
|
|
278
|
-
padding: 16px 20px;
|
|
279
|
-
margin-bottom: 20px;
|
|
280
|
-
background: rgba(255, 153, 51, 0.1);
|
|
281
|
-
border: 1px solid rgba(255, 153, 51, 0.3);
|
|
282
|
-
border-radius: 8px;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
.tip-icon {
|
|
286
|
-
font-size: 18px;
|
|
287
|
-
flex-shrink: 0;
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
.tip-text {
|
|
291
|
-
color: var(--text-secondary);
|
|
292
|
-
font-size: 14px;
|
|
293
|
-
line-height: 1.5;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.tip-text code {
|
|
297
|
-
background: var(--bg-elevated);
|
|
298
|
-
padding: 2px 8px;
|
|
299
|
-
border-radius: 4px;
|
|
300
|
-
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
301
|
-
font-size: 13px;
|
|
302
|
-
color: var(--accent-cyan);
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
.toc-list {
|
|
306
|
-
list-style: none;
|
|
307
|
-
margin: 10px 0;
|
|
308
|
-
padding: 0;
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.toc-list li {
|
|
312
|
-
display: flex;
|
|
313
|
-
align-items: center;
|
|
314
|
-
gap: 16px;
|
|
315
|
-
padding: 16px 20px;
|
|
316
|
-
margin: 8px 0;
|
|
317
|
-
background: var(--bg-secondary);
|
|
318
|
-
border-radius: 8px;
|
|
319
|
-
cursor: pointer;
|
|
320
|
-
transition: all 0.2s ease;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.toc-list li:hover {
|
|
324
|
-
background: var(--bg-elevated);
|
|
325
|
-
transform: translateX(8px);
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
.toc-number {
|
|
329
|
-
color: var(--accent-orange);
|
|
330
|
-
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
331
|
-
font-size: 14px;
|
|
332
|
-
font-weight: 600;
|
|
333
|
-
min-width: 28px;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
.toc-title {
|
|
337
|
-
color: var(--text-primary);
|
|
338
|
-
font-weight: 600;
|
|
339
|
-
font-size: 16px;
|
|
340
|
-
min-width: 140px;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
.toc-desc {
|
|
344
|
-
color: var(--text-dim);
|
|
345
|
-
font-size: 14px;
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
/* Tree view */
|
|
349
|
-
.tree-view {
|
|
350
|
-
background: var(--bg-secondary);
|
|
351
|
-
border: 1px solid var(--bg-elevated);
|
|
352
|
-
border-radius: 8px;
|
|
353
|
-
padding: 20px;
|
|
354
|
-
margin: 20px 0;
|
|
355
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
356
|
-
font-size: 14px;
|
|
357
|
-
line-height: 1.5;
|
|
358
|
-
overflow-x: auto;
|
|
359
|
-
white-space: pre;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
.tree-view .folder {
|
|
363
|
-
color: var(--accent-cyan);
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
.tree-view .file {
|
|
367
|
-
color: var(--accent-orange);
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
.tree-view .comment {
|
|
371
|
-
color: var(--text-dim);
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
/* Split-pane tree panel */
|
|
375
|
-
.tree-panel {
|
|
376
|
-
display: flex;
|
|
377
|
-
gap: 0;
|
|
378
|
-
background: var(--bg-secondary);
|
|
379
|
-
border-radius: 8px;
|
|
380
|
-
overflow: hidden;
|
|
381
|
-
height: 375px;
|
|
382
|
-
position: relative;
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
.tree-side {
|
|
386
|
-
padding: 16px;
|
|
387
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
388
|
-
font-size: 13px;
|
|
389
|
-
line-height: 1.4;
|
|
390
|
-
border-right: 1px solid var(--bg-elevated);
|
|
391
|
-
overflow-y: auto;
|
|
392
|
-
flex-shrink: 0;
|
|
393
|
-
height: 100%;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
.tree-item {
|
|
397
|
-
padding: 4px 8px;
|
|
398
|
-
margin: 1px 0;
|
|
399
|
-
border-radius: 4px;
|
|
400
|
-
cursor: pointer;
|
|
401
|
-
transition: background 0.15s ease;
|
|
402
|
-
white-space: nowrap;
|
|
403
|
-
display: flex;
|
|
404
|
-
align-items: center;
|
|
405
|
-
gap: 4px;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
.tree-item.hidden {
|
|
409
|
-
display: none;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
.tree-item:hover {
|
|
413
|
-
background: rgba(255, 255, 255, 0.1);
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
.tree-item.active {
|
|
417
|
-
background: rgba(45, 105, 175, 0.5);
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
.tree-item.active:hover {
|
|
421
|
-
background: rgba(45, 105, 175, 0.5);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
.tree-chevron {
|
|
425
|
-
width: 18px;
|
|
426
|
-
font-size: 18px;
|
|
427
|
-
color: var(--text-primary);
|
|
428
|
-
text-align: center;
|
|
429
|
-
flex-shrink: 0;
|
|
430
|
-
transition: transform 0.15s ease;
|
|
431
|
-
user-select: none;
|
|
432
|
-
transform: rotate(90deg);
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
.tree-item.collapsed .tree-chevron {
|
|
436
|
-
transform: rotate(0deg);
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.tree-spacer {
|
|
440
|
-
width: 18px;
|
|
441
|
-
flex-shrink: 0;
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
.tree-folder-icon,
|
|
445
|
-
.tree-file-icon {
|
|
446
|
-
font-size: 14px;
|
|
447
|
-
flex-shrink: 0;
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
.tree-item .folder {
|
|
451
|
-
color: var(--text-primary);
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
.tree-item .file {
|
|
455
|
-
color: var(--text-secondary);
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
.tree-item.indent-1 { padding-left: 24px; }
|
|
459
|
-
.tree-item.indent-2 { padding-left: 44px; }
|
|
460
|
-
.tree-item.indent-3 { padding-left: 64px; }
|
|
461
|
-
.tree-item.indent-4 { padding-left: 84px; }
|
|
462
|
-
|
|
463
|
-
.tree-indent {
|
|
464
|
-
color: var(--text-dim);
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
.info-side {
|
|
468
|
-
flex: 1;
|
|
469
|
-
min-width: 200px;
|
|
470
|
-
overflow-y: auto;
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
.info-panel {
|
|
474
|
-
padding: 20px;
|
|
475
|
-
width: 100%;
|
|
476
|
-
box-sizing: border-box;
|
|
477
|
-
}
|
|
478
|
-
|
|
479
|
-
.info-panel-title {
|
|
480
|
-
font-size: 16px;
|
|
481
|
-
font-weight: 600;
|
|
482
|
-
color: var(--accent-orange);
|
|
483
|
-
margin-bottom: 12px;
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
.info-panel-desc {
|
|
487
|
-
font-size: 14px;
|
|
488
|
-
color: var(--text-secondary);
|
|
489
|
-
line-height: 1.6;
|
|
490
|
-
letter-spacing: 0.02em;
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
.info-panel-trigger {
|
|
494
|
-
margin-top: 16px;
|
|
495
|
-
padding: 8px 12px;
|
|
496
|
-
background: var(--bg-elevated);
|
|
497
|
-
border-radius: 4px;
|
|
498
|
-
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
499
|
-
font-size: 13px;
|
|
500
|
-
color: var(--accent-cyan);
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
/* Navigation */
|
|
504
|
-
.nav-container {
|
|
505
|
-
display: flex;
|
|
506
|
-
justify-content: space-between;
|
|
507
|
-
align-items: center;
|
|
508
|
-
margin-top: 40px;
|
|
509
|
-
padding-top: 20px;
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
.nav-btn {
|
|
513
|
-
display: flex;
|
|
514
|
-
align-items: center;
|
|
515
|
-
gap: 8px;
|
|
516
|
-
padding: 14px 28px;
|
|
517
|
-
border: none;
|
|
518
|
-
border-radius: 8px;
|
|
519
|
-
font-size: 16px;
|
|
520
|
-
font-weight: 500;
|
|
521
|
-
cursor: pointer;
|
|
522
|
-
transition: all 0.3s ease;
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
-
.nav-btn.prev {
|
|
526
|
-
background: var(--bg-elevated);
|
|
527
|
-
color: var(--text-secondary);
|
|
528
|
-
}
|
|
529
|
-
|
|
530
|
-
.nav-btn.prev:hover:not(:disabled) {
|
|
531
|
-
background: var(--bg-secondary);
|
|
532
|
-
color: var(--text-primary);
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
.nav-btn.next {
|
|
536
|
-
background: var(--accent-orange);
|
|
537
|
-
color: var(--bg-primary);
|
|
538
|
-
}
|
|
539
|
-
|
|
540
|
-
.nav-btn.next:hover:not(:disabled) {
|
|
541
|
-
transform: translateY(-2px);
|
|
542
|
-
box-shadow: 0 10px 30px rgba(212, 165, 116, 0.3);
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
.nav-btn:disabled {
|
|
546
|
-
opacity: 0.3;
|
|
547
|
-
cursor: not-allowed;
|
|
548
|
-
transform: none !important;
|
|
549
|
-
}
|
|
550
|
-
|
|
551
|
-
.nav-hint {
|
|
552
|
-
color: var(--text-dim);
|
|
553
|
-
font-size: 14px;
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
.nav-hint kbd {
|
|
557
|
-
background: var(--bg-elevated);
|
|
558
|
-
padding: 4px 8px;
|
|
559
|
-
border-radius: 4px;
|
|
560
|
-
font-family: inherit;
|
|
561
|
-
margin: 0 2px;
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
/* Table */
|
|
565
|
-
.table-container {
|
|
566
|
-
overflow-x: auto;
|
|
567
|
-
margin: 20px 0;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
table {
|
|
571
|
-
width: 100%;
|
|
572
|
-
border-collapse: collapse;
|
|
573
|
-
}
|
|
574
|
-
|
|
575
|
-
th, td {
|
|
576
|
-
padding: 12px 16px;
|
|
577
|
-
text-align: left;
|
|
578
|
-
border-bottom: 1px solid var(--bg-elevated);
|
|
579
|
-
}
|
|
580
|
-
|
|
581
|
-
th {
|
|
582
|
-
color: var(--accent-blue);
|
|
583
|
-
font-size: 12px;
|
|
584
|
-
text-transform: uppercase;
|
|
585
|
-
letter-spacing: 1px;
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
td {
|
|
589
|
-
font-size: 14px;
|
|
590
|
-
}
|
|
591
|
-
|
|
592
|
-
td code {
|
|
593
|
-
background: var(--bg-secondary);
|
|
594
|
-
color: var(--accent-orange);
|
|
595
|
-
padding: 2px 8px;
|
|
596
|
-
border-radius: 4px;
|
|
597
|
-
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
598
|
-
font-size: 13px;
|
|
599
|
-
}
|
|
600
|
-
|
|
601
|
-
/* Animations */
|
|
602
|
-
@keyframes fadeInUp {
|
|
603
|
-
from {
|
|
604
|
-
opacity: 0;
|
|
605
|
-
transform: translateY(20px);
|
|
606
|
-
}
|
|
607
|
-
to {
|
|
608
|
-
opacity: 1;
|
|
609
|
-
transform: translateY(0);
|
|
610
|
-
}
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
.slide.active .slide-number { animation: fadeIn 0.4s ease both; }
|
|
614
|
-
.slide.active h1 { animation: fadeIn 0.4s ease 0.1s both; }
|
|
615
|
-
.slide.active h2 { animation: none; }
|
|
616
|
-
.slide.active .slide-content > ul,
|
|
617
|
-
.slide.active .slide-content > div { animation: fadeIn 0.5s ease 0.3s both; }
|
|
618
|
-
|
|
619
|
-
@keyframes fadeIn {
|
|
620
|
-
from { opacity: 0; }
|
|
621
|
-
to { opacity: 1; }
|
|
622
|
-
}
|
|
623
|
-
|
|
624
|
-
/* Typewriter effect */
|
|
625
|
-
.typewriter {
|
|
626
|
-
border-right: 2px solid var(--bg-primary);
|
|
627
|
-
animation: none !important;
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
.typewriter.typing {
|
|
631
|
-
animation: blink-caret 0.75s step-end infinite !important;
|
|
632
|
-
}
|
|
633
|
-
|
|
634
|
-
.typewriter.done {
|
|
635
|
-
border-right: none !important;
|
|
636
|
-
animation: none !important;
|
|
637
|
-
}
|
|
638
|
-
|
|
639
|
-
@keyframes blink-caret {
|
|
640
|
-
from, to { border-color: var(--bg-primary); }
|
|
641
|
-
50% { border-color: transparent; }
|
|
642
|
-
}
|
|
643
|
-
|
|
644
|
-
/* Scrollbar */
|
|
645
|
-
::-webkit-scrollbar {
|
|
646
|
-
width: 8px;
|
|
647
|
-
}
|
|
648
|
-
|
|
649
|
-
::-webkit-scrollbar-track {
|
|
650
|
-
background: var(--bg-secondary);
|
|
651
|
-
border-radius: 4px;
|
|
652
|
-
}
|
|
653
|
-
|
|
654
|
-
::-webkit-scrollbar-thumb {
|
|
655
|
-
background: var(--bg-elevated);
|
|
656
|
-
border-radius: 4px;
|
|
657
|
-
}
|
|
658
|
-
|
|
659
|
-
::-webkit-scrollbar-thumb:hover {
|
|
660
|
-
background: var(--text-dim);
|
|
661
|
-
}
|
|
662
|
-
|
|
663
|
-
/* Logo */
|
|
664
|
-
.logo {
|
|
665
|
-
font-size: 24px;
|
|
666
|
-
margin-bottom: 8px;
|
|
667
|
-
}
|
|
668
|
-
|
|
669
|
-
/* Final slide special */
|
|
670
|
-
.final-links {
|
|
671
|
-
display: flex;
|
|
672
|
-
gap: 16px;
|
|
673
|
-
margin-top: 30px;
|
|
674
|
-
flex-wrap: wrap;
|
|
675
|
-
}
|
|
676
|
-
|
|
677
|
-
.final-link {
|
|
678
|
-
display: inline-flex;
|
|
679
|
-
align-items: center;
|
|
680
|
-
gap: 8px;
|
|
681
|
-
padding: 12px 24px;
|
|
682
|
-
background: var(--bg-elevated);
|
|
683
|
-
border-radius: 8px;
|
|
684
|
-
color: var(--text-secondary);
|
|
685
|
-
text-decoration: none;
|
|
686
|
-
transition: all 0.3s ease;
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
.final-link:hover {
|
|
690
|
-
background: var(--bg-secondary);
|
|
691
|
-
color: var(--accent-orange);
|
|
692
|
-
transform: translateY(-2px);
|
|
693
|
-
}
|
|
694
|
-
|
|
695
|
-
/* File Preview Modal */
|
|
696
|
-
.modal-overlay {
|
|
697
|
-
position: fixed;
|
|
698
|
-
top: 0;
|
|
699
|
-
left: 0;
|
|
700
|
-
right: 0;
|
|
701
|
-
bottom: 0;
|
|
702
|
-
background: rgba(0, 0, 0, 0.85);
|
|
703
|
-
display: none;
|
|
704
|
-
justify-content: center;
|
|
705
|
-
align-items: center;
|
|
706
|
-
z-index: 1000;
|
|
707
|
-
padding: 40px;
|
|
708
|
-
opacity: 0;
|
|
709
|
-
transition: opacity 0.2s ease;
|
|
710
|
-
}
|
|
711
|
-
|
|
712
|
-
.modal-overlay.visible {
|
|
713
|
-
display: flex;
|
|
714
|
-
opacity: 1;
|
|
715
|
-
}
|
|
716
|
-
|
|
717
|
-
.modal-content {
|
|
718
|
-
background: var(--bg-secondary);
|
|
719
|
-
border: 1px solid var(--bg-elevated);
|
|
720
|
-
border-radius: 12px;
|
|
721
|
-
max-width: 800px;
|
|
722
|
-
width: 100%;
|
|
723
|
-
max-height: 80vh;
|
|
724
|
-
display: flex;
|
|
725
|
-
flex-direction: column;
|
|
726
|
-
transform: scale(0.95);
|
|
727
|
-
transition: transform 0.2s ease;
|
|
728
|
-
}
|
|
729
|
-
|
|
730
|
-
.modal-overlay.visible .modal-content {
|
|
731
|
-
transform: scale(1);
|
|
732
|
-
}
|
|
733
|
-
|
|
734
|
-
.modal-header {
|
|
735
|
-
display: flex;
|
|
736
|
-
justify-content: space-between;
|
|
737
|
-
align-items: center;
|
|
738
|
-
padding: 16px 20px;
|
|
739
|
-
border-bottom: 1px solid var(--bg-elevated);
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
.modal-title {
|
|
743
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
744
|
-
font-size: 14px;
|
|
745
|
-
color: var(--accent-orange);
|
|
746
|
-
}
|
|
747
|
-
|
|
748
|
-
.modal-close {
|
|
749
|
-
background: none;
|
|
750
|
-
border: none;
|
|
751
|
-
color: var(--text-dim);
|
|
752
|
-
font-size: 24px;
|
|
753
|
-
cursor: pointer;
|
|
754
|
-
padding: 0;
|
|
755
|
-
line-height: 1;
|
|
756
|
-
transition: color 0.2s ease;
|
|
757
|
-
}
|
|
758
|
-
|
|
759
|
-
.modal-close:hover {
|
|
760
|
-
color: var(--text-primary);
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
.modal-body {
|
|
764
|
-
padding: 20px;
|
|
765
|
-
overflow-y: auto;
|
|
766
|
-
flex: 1;
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
.modal-body pre {
|
|
770
|
-
margin: 0;
|
|
771
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
772
|
-
font-size: 13px;
|
|
773
|
-
line-height: 1.6;
|
|
774
|
-
color: var(--text-secondary);
|
|
775
|
-
white-space: pre-wrap;
|
|
776
|
-
word-wrap: break-word;
|
|
777
|
-
}
|
|
778
|
-
|
|
779
|
-
.modal-body .comment { color: var(--text-dim); }
|
|
780
|
-
.modal-body .keyword { color: var(--accent-orange); }
|
|
781
|
-
.modal-body .string { color: var(--accent-green); }
|
|
782
|
-
.modal-body .property { color: var(--accent-blue); }
|
|
783
|
-
|
|
784
|
-
.modal-empty {
|
|
785
|
-
color: var(--text-dim);
|
|
786
|
-
font-style: italic;
|
|
787
|
-
text-align: center;
|
|
788
|
-
padding: 40px;
|
|
789
|
-
}
|
|
790
|
-
</style>
|
|
791
|
-
</head>
|
|
792
|
-
<body>
|
|
793
|
-
<!-- File Preview Modal -->
|
|
794
|
-
<div class="modal-overlay" id="fileModal">
|
|
795
|
-
<div class="modal-content">
|
|
796
|
-
<div class="modal-header">
|
|
797
|
-
<span class="modal-title" id="modalTitle">filename.md</span>
|
|
798
|
-
<button class="modal-close" id="modalClose">×</button>
|
|
799
|
-
</div>
|
|
800
|
-
<div class="modal-body">
|
|
801
|
-
<pre id="modalCode"></pre>
|
|
802
|
-
</div>
|
|
803
|
-
</div>
|
|
804
|
-
</div>
|
|
805
|
-
|
|
806
|
-
<div class="container">
|
|
807
|
-
<div class="progress-container" id="progress"></div>
|
|
808
|
-
|
|
809
|
-
<div class="slides-container">
|
|
810
|
-
<!-- Slide 0: What Got Installed -->
|
|
811
|
-
<div class="slide active" data-slide="0">
|
|
812
|
-
<div class="slide-number">01 / Overview</div>
|
|
813
|
-
<h1>✨ Autoconfig Complete</h1>
|
|
814
|
-
<h2 class="typewriter" data-text="Here's what got installed. Hover over any file or folder to learn what it does."></h2>
|
|
815
|
-
<div class="slide-content">
|
|
816
|
-
<div class="tree-panel">
|
|
817
|
-
<div class="tree-side">
|
|
818
|
-
<div class="tree-item folder-row" data-info="root" data-folder="root">
|
|
819
|
-
<span class="tree-chevron">›</span>
|
|
820
|
-
<span class="tree-folder-icon">📁</span>
|
|
821
|
-
<span class="folder">your-project</span>
|
|
822
|
-
</div>
|
|
823
|
-
<div class="tree-item indent-1 folder-row collapsed" data-info="claude-dir" data-folder="claude-dir" data-parent="root">
|
|
824
|
-
<span class="tree-chevron">›</span>
|
|
825
|
-
<span class="tree-folder-icon">📁</span>
|
|
826
|
-
<span class="folder">.claude</span>
|
|
827
|
-
</div>
|
|
828
|
-
<div class="tree-item indent-2 folder-row hidden collapsed" data-info="agents" data-folder="agents" data-parent="claude-dir">
|
|
829
|
-
<span class="tree-chevron">›</span>
|
|
830
|
-
<span class="tree-folder-icon">📁</span>
|
|
831
|
-
<span class="folder">agents</span>
|
|
832
|
-
</div>
|
|
833
|
-
<div class="tree-item indent-3 hidden" data-info="create-retro-item" data-parent="agents">
|
|
834
|
-
<span class="tree-spacer"></span>
|
|
835
|
-
<span class="tree-file-icon">📄</span>
|
|
836
|
-
<span class="file">create-retro-item.md</span>
|
|
837
|
-
</div>
|
|
838
|
-
<div class="tree-item indent-3 hidden" data-info="
|
|
839
|
-
<span class="tree-spacer"></span>
|
|
840
|
-
<span class="tree-file-icon">📄</span>
|
|
841
|
-
<span class="file">
|
|
842
|
-
</div>
|
|
843
|
-
<div class="tree-item indent-2 folder-row hidden collapsed" data-info="commands" data-folder="commands" data-parent="claude-dir">
|
|
844
|
-
<span class="tree-chevron">›</span>
|
|
845
|
-
<span class="tree-folder-icon">📁</span>
|
|
846
|
-
<span class="folder">commands</span>
|
|
847
|
-
</div>
|
|
848
|
-
<div class="tree-item indent-3 hidden" data-info="autoconfig" data-parent="commands">
|
|
849
|
-
<span class="tree-spacer"></span>
|
|
850
|
-
<span class="tree-file-icon">📄</span>
|
|
851
|
-
<span class="file">autoconfig.md</span>
|
|
852
|
-
</div>
|
|
853
|
-
<div class="tree-item indent-3 hidden" data-info="commit-and-push" data-parent="commands">
|
|
854
|
-
<span class="tree-spacer"></span>
|
|
855
|
-
<span class="tree-file-icon">📄</span>
|
|
856
|
-
<span class="file">commit-and-push.md</span>
|
|
857
|
-
</div>
|
|
858
|
-
<div class="tree-item indent-3 hidden" data-info="enable-retro" data-parent="commands">
|
|
859
|
-
<span class="tree-spacer"></span>
|
|
860
|
-
<span class="tree-file-icon">📄</span>
|
|
861
|
-
<span class="file">enable-retro.md</span>
|
|
862
|
-
</div>
|
|
863
|
-
<div class="tree-item indent-3 hidden" data-info="
|
|
864
|
-
<span class="tree-spacer"></span>
|
|
865
|
-
<span class="tree-file-icon">📄</span>
|
|
866
|
-
<span class="file">show-
|
|
867
|
-
</div>
|
|
868
|
-
<div class="tree-item indent-3 hidden" data-info="sync-claude-md" data-parent="commands">
|
|
869
|
-
<span class="tree-spacer"></span>
|
|
870
|
-
<span class="tree-file-icon">📄</span>
|
|
871
|
-
<span class="file">sync-claude-md.md</span>
|
|
872
|
-
</div>
|
|
873
|
-
<div class="tree-item indent-3 hidden" data-info="test" data-parent="commands">
|
|
874
|
-
<span class="tree-spacer"></span>
|
|
875
|
-
<span class="tree-file-icon">📄</span>
|
|
876
|
-
<span class="file">test.md</span>
|
|
877
|
-
</div>
|
|
878
|
-
<div class="tree-item indent-2 folder-row hidden collapsed" data-info="feedback" data-folder="feedback" data-parent="claude-dir">
|
|
879
|
-
<span class="tree-chevron">›</span>
|
|
880
|
-
<span class="tree-folder-icon">📁</span>
|
|
881
|
-
<span class="folder">feedback</span>
|
|
882
|
-
</div>
|
|
883
|
-
<div class="tree-item indent-3 hidden" data-info="feedback-template" data-parent="feedback">
|
|
884
|
-
<span class="tree-spacer"></span>
|
|
885
|
-
<span class="tree-file-icon">📄</span>
|
|
886
|
-
<span class="file">FEEDBACK.md</span>
|
|
887
|
-
</div>
|
|
888
|
-
<div class="tree-item indent-2 folder-row hidden collapsed" data-info="
|
|
889
|
-
<span class="tree-chevron">›</span>
|
|
890
|
-
<span class="tree-folder-icon">📁</span>
|
|
891
|
-
<span class="folder">
|
|
892
|
-
</div>
|
|
893
|
-
<div class="tree-item indent-3 hidden" data-info="
|
|
894
|
-
<span class="tree-spacer"></span>
|
|
895
|
-
<span class="tree-file-icon">🌐</span>
|
|
896
|
-
<span class="file">autoconfig.
|
|
897
|
-
</div>
|
|
898
|
-
<div class="tree-item indent-2 hidden" data-info="rules" data-parent="claude-dir">
|
|
899
|
-
<span class="tree-spacer"></span>
|
|
900
|
-
<span class="tree-folder-icon">📁</span>
|
|
901
|
-
<span class="folder">rules</span>
|
|
902
|
-
</div>
|
|
903
|
-
<div class="tree-item indent-2 hidden" data-info="mcp" data-parent="claude-dir">
|
|
904
|
-
<span class="tree-spacer"></span>
|
|
905
|
-
<span class="tree-file-icon">🔌</span>
|
|
906
|
-
<span class="file">.mcp.json</span>
|
|
907
|
-
</div>
|
|
908
|
-
<div class="tree-item indent-2 hidden" data-info="settings" data-parent="claude-dir">
|
|
909
|
-
<span class="tree-spacer"></span>
|
|
910
|
-
<span class="tree-file-icon">⚙️</span>
|
|
911
|
-
<span class="file">settings.json</span>
|
|
912
|
-
</div>
|
|
913
|
-
<div class="tree-item indent-1" data-info="claude-md" data-parent="root">
|
|
914
|
-
<span class="tree-spacer"></span>
|
|
915
|
-
<span class="tree-file-icon">📄</span>
|
|
916
|
-
<span class="file">CLAUDE.md</span>
|
|
917
|
-
</div>
|
|
918
|
-
</div>
|
|
919
|
-
<div class="info-side">
|
|
920
|
-
<div class="info-panel" id="infoPanel">
|
|
921
|
-
<div class="info-panel-title">Select a file</div>
|
|
922
|
-
<div class="info-panel-desc">Hover over any item in the tree to see what it does.</div>
|
|
923
|
-
</div>
|
|
924
|
-
</div>
|
|
925
|
-
</div>
|
|
926
|
-
</div>
|
|
927
|
-
</div>
|
|
928
|
-
|
|
929
|
-
<!-- Slide 1: Finale -->
|
|
930
|
-
<div class="slide" data-slide="1">
|
|
931
|
-
<div class="slide-number">02 / You're Ready</div>
|
|
932
|
-
<h1>That's It</h1>
|
|
933
|
-
<h2 class="typewriter" data-text="You've got the autoconfig. Now go build something."></h2>
|
|
934
|
-
<div class="slide-content">
|
|
935
|
-
<div class="final-links">
|
|
936
|
-
<a href="https://github.com/design-and-deliver/claude-code-autoconfig" class="final-link" target="_blank">
|
|
937
|
-
⭐ Star on GitHub
|
|
938
|
-
</a>
|
|
939
|
-
<a href="https://docs.anthropic.com/en/docs/claude-code/overview" class="final-link" target="_blank">
|
|
940
|
-
📚 Claude Code Docs
|
|
941
|
-
</a>
|
|
942
|
-
</div>
|
|
943
|
-
</div>
|
|
944
|
-
</div>
|
|
945
|
-
</div>
|
|
946
|
-
|
|
947
|
-
<div class="nav-container">
|
|
948
|
-
<button class="nav-btn prev" id="prevBtn">
|
|
949
|
-
Back
|
|
950
|
-
</button>
|
|
951
|
-
<button class="nav-btn next" id="nextBtn">
|
|
952
|
-
Next
|
|
953
|
-
</button>
|
|
954
|
-
</div>
|
|
955
|
-
</div>
|
|
956
|
-
|
|
957
|
-
<script>
|
|
958
|
-
const slides = document.querySelectorAll('.slide');
|
|
959
|
-
const progressContainer = document.getElementById('progress');
|
|
960
|
-
const prevBtn = document.getElementById('prevBtn');
|
|
961
|
-
const nextBtn = document.getElementById('nextBtn');
|
|
962
|
-
let currentSlide = 0;
|
|
963
|
-
|
|
964
|
-
// Create progress dots
|
|
965
|
-
slides.forEach((_, i) => {
|
|
966
|
-
const dot = document.createElement('div');
|
|
967
|
-
dot.className = 'progress-dot' + (i === 0 ? ' active' : '');
|
|
968
|
-
dot.addEventListener('click', () => goToSlide(i));
|
|
969
|
-
progressContainer.appendChild(dot);
|
|
970
|
-
});
|
|
971
|
-
|
|
972
|
-
function updateProgress() {
|
|
973
|
-
document.querySelectorAll('.progress-dot').forEach((dot, i) => {
|
|
974
|
-
dot.classList.remove('active');
|
|
975
|
-
if (i === currentSlide) dot.classList.add('active');
|
|
976
|
-
});
|
|
977
|
-
}
|
|
978
|
-
|
|
979
|
-
function goToSlide(index) {
|
|
980
|
-
if (index < 0 || index >= slides.length) return;
|
|
981
|
-
|
|
982
|
-
const direction = index > currentSlide ? 1 : -1;
|
|
983
|
-
|
|
984
|
-
slides[currentSlide].classList.remove('active');
|
|
985
|
-
if (direction > 0) {
|
|
986
|
-
slides[currentSlide].classList.add('exit');
|
|
987
|
-
}
|
|
988
|
-
|
|
989
|
-
currentSlide = index;
|
|
990
|
-
|
|
991
|
-
slides.forEach(s => s.classList.remove('exit'));
|
|
992
|
-
slides[currentSlide].classList.add('active');
|
|
993
|
-
|
|
994
|
-
updateProgress();
|
|
995
|
-
updateButtons();
|
|
996
|
-
checkTypewriter();
|
|
997
|
-
|
|
998
|
-
// Select CLAUDE.md by default when entering slide 0 (tree view)
|
|
999
|
-
if (currentSlide === 0) {
|
|
1000
|
-
setTimeout(() => selectTreeItemByKey('claude-md'), 100);
|
|
1001
|
-
}
|
|
1002
|
-
}
|
|
1003
|
-
|
|
1004
|
-
function updateButtons() {
|
|
1005
|
-
// Hide back button on first slide, show on others
|
|
1006
|
-
prevBtn.style.visibility = currentSlide === 0 ? 'hidden' : 'visible';
|
|
1007
|
-
|
|
1008
|
-
if (currentSlide === slides.length - 1) {
|
|
1009
|
-
nextBtn.textContent = 'Done';
|
|
1010
|
-
} else {
|
|
1011
|
-
nextBtn.textContent = 'Next';
|
|
1012
|
-
}
|
|
1013
|
-
}
|
|
1014
|
-
|
|
1015
|
-
prevBtn.addEventListener('click', () => {
|
|
1016
|
-
if (currentSlide > 0) {
|
|
1017
|
-
goToSlide(currentSlide - 1);
|
|
1018
|
-
}
|
|
1019
|
-
});
|
|
1020
|
-
|
|
1021
|
-
nextBtn.addEventListener('click', () => {
|
|
1022
|
-
if (currentSlide < slides.length - 1) {
|
|
1023
|
-
goToSlide(currentSlide + 1);
|
|
1024
|
-
} else {
|
|
1025
|
-
window.close();
|
|
1026
|
-
}
|
|
1027
|
-
});
|
|
1028
|
-
|
|
1029
|
-
// Select CLAUDE.md on initial page load
|
|
1030
|
-
setTimeout(() => selectTreeItemByKey('claude-md'), 300);
|
|
1031
|
-
|
|
1032
|
-
// Keyboard navigation for slides
|
|
1033
|
-
document.addEventListener('keydown', (e) => {
|
|
1034
|
-
// On slide 0, arrow keys control tree - use spacebar for next slide
|
|
1035
|
-
if (currentSlide === 0) {
|
|
1036
|
-
if (e.key === ' ') {
|
|
1037
|
-
e.preventDefault();
|
|
1038
|
-
if (currentSlide < slides.length - 1) {
|
|
1039
|
-
goToSlide(currentSlide + 1);
|
|
1040
|
-
}
|
|
1041
|
-
}
|
|
1042
|
-
return; // Let tree keyboard handler deal with arrows
|
|
1043
|
-
}
|
|
1044
|
-
|
|
1045
|
-
// Space bar for next slide (but not on slide 0 with tree)
|
|
1046
|
-
if (e.key === ' ' && currentSlide !== 0) {
|
|
1047
|
-
e.preventDefault();
|
|
1048
|
-
if (currentSlide < slides.length - 1) {
|
|
1049
|
-
goToSlide(currentSlide + 1);
|
|
1050
|
-
}
|
|
1051
|
-
}
|
|
1052
|
-
});
|
|
1053
|
-
|
|
1054
|
-
updateButtons();
|
|
1055
|
-
|
|
1056
|
-
// Auto-focus for keyboard navigation
|
|
1057
|
-
document.body.setAttribute('tabindex', '0');
|
|
1058
|
-
document.body.focus();
|
|
1059
|
-
|
|
1060
|
-
// Detect project name from file path
|
|
1061
|
-
function getProjectName() {
|
|
1062
|
-
try {
|
|
1063
|
-
const path = window.location.pathname;
|
|
1064
|
-
const parts = path.split('/').filter(p => p && !p.includes(':'));
|
|
1065
|
-
const claudeIndex = parts.indexOf('.claude');
|
|
1066
|
-
if (claudeIndex > 0) {
|
|
1067
|
-
return parts[claudeIndex - 1];
|
|
1068
|
-
}
|
|
1069
|
-
if (parts.length >= 3) {
|
|
1070
|
-
return parts[parts.length - 3];
|
|
1071
|
-
}
|
|
1072
|
-
} catch (e) {}
|
|
1073
|
-
return 'your-project';
|
|
1074
|
-
}
|
|
1075
|
-
|
|
1076
|
-
const projectName = getProjectName();
|
|
1077
|
-
|
|
1078
|
-
// Update tree root with actual project name
|
|
1079
|
-
const rootItem = document.querySelector('[data-info="root"]');
|
|
1080
|
-
if (rootItem) {
|
|
1081
|
-
rootItem.querySelector('.folder').textContent = projectName + '/';
|
|
1082
|
-
}
|
|
1083
|
-
|
|
1084
|
-
// Calculate tree side width dynamically
|
|
1085
|
-
function setTreeWidth() {
|
|
1086
|
-
const treeSide = document.querySelector('.tree-side');
|
|
1087
|
-
const treeItems = document.querySelectorAll('.tree-item');
|
|
1088
|
-
if (!treeSide || !treeItems.length) return;
|
|
1089
|
-
|
|
1090
|
-
const hiddenItems = [];
|
|
1091
|
-
treeItems.forEach(item => {
|
|
1092
|
-
if (item.classList.contains('hidden')) {
|
|
1093
|
-
hiddenItems.push(item);
|
|
1094
|
-
item.style.visibility = 'hidden';
|
|
1095
|
-
item.style.position = 'absolute';
|
|
1096
|
-
item.classList.remove('hidden');
|
|
1097
|
-
}
|
|
1098
|
-
});
|
|
1099
|
-
|
|
1100
|
-
let maxWidth = 0;
|
|
1101
|
-
treeItems.forEach(item => {
|
|
1102
|
-
const width = item.scrollWidth;
|
|
1103
|
-
if (width > maxWidth) maxWidth = width;
|
|
1104
|
-
});
|
|
1105
|
-
|
|
1106
|
-
hiddenItems.forEach(item => {
|
|
1107
|
-
item.classList.add('hidden');
|
|
1108
|
-
item.style.visibility = '';
|
|
1109
|
-
item.style.position = '';
|
|
1110
|
-
});
|
|
1111
|
-
|
|
1112
|
-
treeSide.style.width = (maxWidth + 32) + 'px';
|
|
1113
|
-
treeSide.style.padding = '16px 8px';
|
|
1114
|
-
}
|
|
1115
|
-
|
|
1116
|
-
if (document.fonts && document.fonts.ready) {
|
|
1117
|
-
document.fonts.ready.then(setTreeWidth);
|
|
1118
|
-
} else {
|
|
1119
|
-
setTimeout(setTreeWidth, 100);
|
|
1120
|
-
}
|
|
1121
|
-
|
|
1122
|
-
// Typewriter effect
|
|
1123
|
-
function typeWriter(element) {
|
|
1124
|
-
const text = element.dataset.text;
|
|
1125
|
-
if (!text) return;
|
|
1126
|
-
|
|
1127
|
-
element.textContent = '';
|
|
1128
|
-
element.classList.add('typing');
|
|
1129
|
-
element.classList.remove('done');
|
|
1130
|
-
|
|
1131
|
-
let i = 0;
|
|
1132
|
-
const speed = 30;
|
|
1133
|
-
|
|
1134
|
-
function type() {
|
|
1135
|
-
if (i < text.length) {
|
|
1136
|
-
element.textContent += text.charAt(i);
|
|
1137
|
-
i++;
|
|
1138
|
-
setTimeout(type, speed);
|
|
1139
|
-
} else {
|
|
1140
|
-
element.classList.remove('typing');
|
|
1141
|
-
element.classList.add('done');
|
|
1142
|
-
}
|
|
1143
|
-
}
|
|
1144
|
-
|
|
1145
|
-
setTimeout(type, 300);
|
|
1146
|
-
}
|
|
1147
|
-
|
|
1148
|
-
function checkTypewriter() {
|
|
1149
|
-
const activeSlide = slides[currentSlide];
|
|
1150
|
-
const typewriterEl = activeSlide.querySelector('.typewriter');
|
|
1151
|
-
if (typewriterEl) {
|
|
1152
|
-
typeWriter(typewriterEl);
|
|
1153
|
-
}
|
|
1154
|
-
}
|
|
1155
|
-
|
|
1156
|
-
setTimeout(checkTypewriter, 100);
|
|
1157
|
-
|
|
1158
|
-
// Tree panel info data - UPDATED
|
|
1159
|
-
const treeInfo = {
|
|
1160
|
-
'root': {
|
|
1161
|
-
title: projectName,
|
|
1162
|
-
desc: 'The autoconfig adds CLAUDE.md at your project root and configuration files inside a .claude/ directory. Nothing else is touched.'
|
|
1163
|
-
},
|
|
1164
|
-
'claude-md': {
|
|
1165
|
-
title: 'CLAUDE.md',
|
|
1166
|
-
desc: 'The entry point — Claude reads this at the start of every session. Contains project context populated by autoconfig to optimize how Claude processes requests.<br><br><span style="color: var(--accent-orange);">⚠️ Managed by Claude — do not edit manually.</span>',
|
|
1167
|
-
trigger: 'Loaded automatically at session start'
|
|
1168
|
-
},
|
|
1169
|
-
'claude-dir': {
|
|
1170
|
-
title: '.claude/ Directory',
|
|
1171
|
-
desc: 'Commands, rules, settings, and
|
|
1172
|
-
},
|
|
1173
|
-
'settings': {
|
|
1174
|
-
title: 'settings.json',
|
|
1175
|
-
desc: 'Permissions, security, and hooks. Controls which commands Claude can run and which files it can access.',
|
|
1176
|
-
trigger: 'Claude Code loads this automatically at the start of every session'
|
|
1177
|
-
},
|
|
1178
|
-
'mcp': {
|
|
1179
|
-
title: '.mcp.json',
|
|
1180
|
-
desc: 'MCP (Model Context Protocol) server configuration. Add your MCP server configs here when you\'re ready.<br><br>See <a href="https://docs.anthropic.com/en/docs/claude-code/mcp" target="_blank" style="color: var(--accent-cyan);">MCP documentation</a> for setup instructions.'
|
|
1181
|
-
},
|
|
1182
|
-
'agents': {
|
|
1183
|
-
title: 'agents/',
|
|
1184
|
-
desc: 'Custom agent definitions for specialized tasks. Agents are autonomous workers that can be spawned to handle complex operations independently.'
|
|
1185
|
-
},
|
|
1186
|
-
'create-retro-item': {
|
|
1187
|
-
title: 'create-retro-item.md',
|
|
1188
|
-
desc: '(Experimental) Agent that creates structured retro items for tech debt tracking. Used by the /enable-retro feature.'
|
|
1189
|
-
},
|
|
1190
|
-
'
|
|
1191
|
-
title: '
|
|
1192
|
-
desc: 'Agent that refreshes and updates the interactive
|
|
1193
|
-
},
|
|
1194
|
-
'commands': {
|
|
1195
|
-
title: 'commands/',
|
|
1196
|
-
desc: 'On-demand workflows you trigger with <code>/name</code>. Each .md file becomes a <a href="https://docs.anthropic.com/en/docs/claude-code/slash-commands" target="_blank" style="color: var(--accent-cyan);">slash command</a>.'
|
|
1197
|
-
},
|
|
1198
|
-
'enable-retro': {
|
|
1199
|
-
title: 'enable-retro.md',
|
|
1200
|
-
desc: '(Experimental) Enables tech debt tracking. Creates <code>.claude/retro/</code> directory and configures Claude to log improvement opportunities as structured story files.',
|
|
1201
|
-
trigger: '/enable-retro'
|
|
1202
|
-
},
|
|
1203
|
-
'feedback': {
|
|
1204
|
-
title: 'feedback/',
|
|
1205
|
-
desc: 'Team-maintained corrections and guidance for Claude. Add notes here when Claude does something wrong — it learns for next time. This directory persists across <code>/autoconfig</code> runs.'
|
|
1206
|
-
},
|
|
1207
|
-
'feedback-template': {
|
|
1208
|
-
title: 'FEEDBACK.md',
|
|
1209
|
-
desc: 'Starter template for team feedback. Add dated entries when Claude makes mistakes — include what went wrong and the correct approach. Claude reads this on every session.'
|
|
1210
|
-
},
|
|
1211
|
-
'autoconfig': {
|
|
1212
|
-
title: 'autoconfig.md',
|
|
1213
|
-
desc: 'The command you just ran. Analyzes your project and populates CLAUDE.md with real context. Re-run anytime your stack changes.',
|
|
1214
|
-
trigger: '/autoconfig'
|
|
1215
|
-
},
|
|
1216
|
-
'sync-claude-md': {
|
|
1217
|
-
title: 'sync-claude-md.md',
|
|
1218
|
-
desc: 'Re-analyzes your project and updates CLAUDE.md to reflect current state. Run when your stack changes significantly.',
|
|
1219
|
-
trigger: '/sync-claude-md'
|
|
1220
|
-
},
|
|
1221
|
-
'
|
|
1222
|
-
title: 'show-
|
|
1223
|
-
desc: 'Opens this interactive
|
|
1224
|
-
trigger: '/show-
|
|
1225
|
-
},
|
|
1226
|
-
'test': {
|
|
1227
|
-
title: 'test.md',
|
|
1228
|
-
desc: 'Runs your test suite. Auto-detects Jest, Vitest, Pytest, Go, RSpec, or falls back to npm test.',
|
|
1229
|
-
trigger: '/test'
|
|
1230
|
-
},
|
|
1231
|
-
'commit-and-push': {
|
|
1232
|
-
title: 'commit-and-push.md',
|
|
1233
|
-
desc: 'Stages all changes, generates a conventional commit message from the diff, commits, and pushes. One command, full workflow.',
|
|
1234
|
-
trigger: '/commit-and-push'
|
|
1235
|
-
},
|
|
1236
|
-
'rules': {
|
|
1237
|
-
title: 'rules/',
|
|
1238
|
-
desc: 'Path-scoped context that loads when Claude works on matching files. Optimized rules are based on your project\'s needs, patterns and practices.<br><br><div style="background: var(--bg-elevated); border: 1px solid var(--accent-cyan); border-radius: 8px; padding: 16px; margin-top: 8px;"><strong style="color: var(--accent-orange);">Want optimized rules for your project?</strong><br>Reach out: <a href="mailto:info@adac1001.com" style="color: var(--accent-cyan);">info@adac1001.com</a></div>'
|
|
1239
|
-
},
|
|
1240
|
-
'
|
|
1241
|
-
title: '
|
|
1242
|
-
desc: 'This interactive
|
|
1243
|
-
trigger: '/show-
|
|
1244
|
-
}
|
|
1245
|
-
};
|
|
1246
|
-
|
|
1247
|
-
// Tree panel hover handling
|
|
1248
|
-
const infoPanel = document.getElementById('infoPanel');
|
|
1249
|
-
const treeItems = document.querySelectorAll('.tree-item');
|
|
1250
|
-
|
|
1251
|
-
let selectedInfoKey = 'claude-md'; // Default selection
|
|
1252
|
-
|
|
1253
|
-
function showInfo(key) {
|
|
1254
|
-
const info = treeInfo[key];
|
|
1255
|
-
if (info) {
|
|
1256
|
-
let html = `<div class="info-panel-title">${info.title}</div>`;
|
|
1257
|
-
html += `<div class="info-panel-desc">${info.desc}</div>`;
|
|
1258
|
-
if (info.trigger) {
|
|
1259
|
-
html += `<div class="info-panel-trigger">${info.trigger}</div>`;
|
|
1260
|
-
}
|
|
1261
|
-
infoPanel.innerHTML = html;
|
|
1262
|
-
}
|
|
1263
|
-
}
|
|
1264
|
-
|
|
1265
|
-
treeItems.forEach((item, idx) => {
|
|
1266
|
-
// Hover updates info panel only (preview)
|
|
1267
|
-
item.addEventListener('mouseenter', () => {
|
|
1268
|
-
const key = item.dataset.info;
|
|
1269
|
-
showInfo(key);
|
|
1270
|
-
});
|
|
1271
|
-
|
|
1272
|
-
// Mouseleave restores selected item's info
|
|
1273
|
-
item.addEventListener('mouseleave', () => {
|
|
1274
|
-
showInfo(selectedInfoKey);
|
|
1275
|
-
});
|
|
1276
|
-
|
|
1277
|
-
// Click sets active selection
|
|
1278
|
-
item.addEventListener('click', (e) => {
|
|
1279
|
-
// Don't select if clicking on a folder chevron (let toggle handle it)
|
|
1280
|
-
if (e.target.classList.contains('tree-chevron')) return;
|
|
1281
|
-
|
|
1282
|
-
treeItems.forEach(i => i.classList.remove('active'));
|
|
1283
|
-
item.classList.add('active');
|
|
1284
|
-
|
|
1285
|
-
// Update selected info key
|
|
1286
|
-
selectedInfoKey = item.dataset.info;
|
|
1287
|
-
showInfo(selectedInfoKey);
|
|
1288
|
-
|
|
1289
|
-
// Sync selectedTreeIndex with visible items
|
|
1290
|
-
const visibleItems = Array.from(document.querySelectorAll('.tree-item:not(.hidden)'));
|
|
1291
|
-
selectedTreeIndex = visibleItems.indexOf(item);
|
|
1292
|
-
});
|
|
1293
|
-
});
|
|
1294
|
-
|
|
1295
|
-
// Folder collapse/expand handling
|
|
1296
|
-
function toggleFolder(folderId, collapsed) {
|
|
1297
|
-
const children = document.querySelectorAll(`[data-parent="${folderId}"]`);
|
|
1298
|
-
children.forEach(child => {
|
|
1299
|
-
if (collapsed) {
|
|
1300
|
-
child.classList.add('hidden');
|
|
1301
|
-
} else {
|
|
1302
|
-
child.classList.remove('hidden');
|
|
1303
|
-
if (child.dataset.folder && !child.classList.contains('collapsed')) {
|
|
1304
|
-
toggleFolder(child.dataset.folder, false);
|
|
1305
|
-
}
|
|
1306
|
-
}
|
|
1307
|
-
if (collapsed && child.dataset.folder) {
|
|
1308
|
-
toggleFolder(child.dataset.folder, true);
|
|
1309
|
-
}
|
|
1310
|
-
});
|
|
1311
|
-
}
|
|
1312
|
-
|
|
1313
|
-
document.querySelectorAll('.folder-row').forEach(folder => {
|
|
1314
|
-
folder.addEventListener('click', (e) => {
|
|
1315
|
-
const folderId = folder.dataset.folder;
|
|
1316
|
-
const isCollapsed = folder.classList.toggle('collapsed');
|
|
1317
|
-
toggleFolder(folderId, isCollapsed);
|
|
1318
|
-
});
|
|
1319
|
-
});
|
|
1320
|
-
|
|
1321
|
-
// Tree keyboard navigation
|
|
1322
|
-
let selectedTreeIndex = -1;
|
|
1323
|
-
|
|
1324
|
-
function getVisibleTreeItems() {
|
|
1325
|
-
return Array.from(document.querySelectorAll('.tree-item:not(.hidden)'));
|
|
1326
|
-
}
|
|
1327
|
-
|
|
1328
|
-
function selectTreeItemByKey(key) {
|
|
1329
|
-
const item = document.querySelector(`.tree-item[data-info="${key}"]`);
|
|
1330
|
-
if (!item) return;
|
|
1331
|
-
|
|
1332
|
-
treeItems.forEach(i => i.classList.remove('active'));
|
|
1333
|
-
item.classList.add('active');
|
|
1334
|
-
|
|
1335
|
-
selectedInfoKey = key;
|
|
1336
|
-
showInfo(selectedInfoKey);
|
|
1337
|
-
|
|
1338
|
-
// Update selectedTreeIndex
|
|
1339
|
-
const visibleItems = getVisibleTreeItems();
|
|
1340
|
-
selectedTreeIndex = visibleItems.indexOf(item);
|
|
1341
|
-
}
|
|
1342
|
-
|
|
1343
|
-
function selectTreeItem(index) {
|
|
1344
|
-
const items = getVisibleTreeItems();
|
|
1345
|
-
if (index < 0 || index >= items.length) return;
|
|
1346
|
-
|
|
1347
|
-
treeItems.forEach(i => i.classList.remove('active'));
|
|
1348
|
-
|
|
1349
|
-
selectedTreeIndex = index;
|
|
1350
|
-
const item = items[index];
|
|
1351
|
-
item.classList.add('active');
|
|
1352
|
-
|
|
1353
|
-
item.scrollIntoView({ block: 'nearest' });
|
|
1354
|
-
|
|
1355
|
-
selectedInfoKey = item.dataset.info;
|
|
1356
|
-
showInfo(selectedInfoKey);
|
|
1357
|
-
}
|
|
1358
|
-
|
|
1359
|
-
document.addEventListener('keydown', (e) => {
|
|
1360
|
-
if (currentSlide !== 0) return;
|
|
1361
|
-
|
|
1362
|
-
const items = getVisibleTreeItems();
|
|
1363
|
-
if (items.length === 0) return;
|
|
1364
|
-
|
|
1365
|
-
if (selectedTreeIndex === -1) {
|
|
1366
|
-
selectTreeItem(0);
|
|
1367
|
-
if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
|
|
1368
|
-
e.preventDefault();
|
|
1369
|
-
}
|
|
1370
|
-
return;
|
|
1371
|
-
}
|
|
1372
|
-
|
|
1373
|
-
if (e.key === 'ArrowDown') {
|
|
1374
|
-
e.preventDefault();
|
|
1375
|
-
if (selectedTreeIndex < items.length - 1) {
|
|
1376
|
-
selectTreeItem(selectedTreeIndex + 1);
|
|
1377
|
-
}
|
|
1378
|
-
} else if (e.key === 'ArrowUp') {
|
|
1379
|
-
e.preventDefault();
|
|
1380
|
-
if (selectedTreeIndex > 0) {
|
|
1381
|
-
selectTreeItem(selectedTreeIndex - 1);
|
|
1382
|
-
}
|
|
1383
|
-
} else if (e.key === 'ArrowRight') {
|
|
1384
|
-
e.preventDefault();
|
|
1385
|
-
const item = items[selectedTreeIndex];
|
|
1386
|
-
if (item && item.classList.contains('folder-row')) {
|
|
1387
|
-
if (item.classList.contains('collapsed')) {
|
|
1388
|
-
item.classList.remove('collapsed');
|
|
1389
|
-
toggleFolder(item.dataset.folder, false);
|
|
1390
|
-
}
|
|
1391
|
-
}
|
|
1392
|
-
} else if (e.key === 'ArrowLeft') {
|
|
1393
|
-
e.preventDefault();
|
|
1394
|
-
const item = items[selectedTreeIndex];
|
|
1395
|
-
if (item && item.classList.contains('folder-row')) {
|
|
1396
|
-
if (!item.classList.contains('collapsed')) {
|
|
1397
|
-
item.classList.add('collapsed');
|
|
1398
|
-
toggleFolder(item.dataset.folder, true);
|
|
1399
|
-
}
|
|
1400
|
-
}
|
|
1401
|
-
} else if (e.key === 'Enter') {
|
|
1402
|
-
e.preventDefault();
|
|
1403
|
-
const item = items[selectedTreeIndex];
|
|
1404
|
-
if (item && item.classList.contains('folder-row')) {
|
|
1405
|
-
const isCollapsed = item.classList.toggle('collapsed');
|
|
1406
|
-
toggleFolder(item.dataset.folder, isCollapsed);
|
|
1407
|
-
}
|
|
1408
|
-
}
|
|
1409
|
-
});
|
|
1410
|
-
|
|
1411
|
-
// File Preview Modal
|
|
1412
|
-
const fileContents = {
|
|
1413
|
-
'claude-md': {
|
|
1414
|
-
filename: 'CLAUDE.md',
|
|
1415
|
-
content: `# Project Name
|
|
1416
|
-
|
|
1417
|
-
> Run \`/autoconfig\` to populate this based on your project.`
|
|
1418
|
-
},
|
|
1419
|
-
'settings': {
|
|
1420
|
-
filename: 'settings.json',
|
|
1421
|
-
content: `{
|
|
1422
|
-
"permissions": {
|
|
1423
|
-
"allow": [
|
|
1424
|
-
"Read(./**)",
|
|
1425
|
-
"Edit(./**)",
|
|
1426
|
-
"Write(./**)",
|
|
1427
|
-
"Bash(npm run dev)",
|
|
1428
|
-
"Bash(npm run build)",
|
|
1429
|
-
"Bash(npm run test)",
|
|
1430
|
-
"Bash(git status)",
|
|
1431
|
-
"Bash(git diff:*)",
|
|
1432
|
-
"Bash(git add:*)",
|
|
1433
|
-
"Bash(git commit:*)",
|
|
1434
|
-
"Bash(git push:*)"
|
|
1435
|
-
],
|
|
1436
|
-
"deny": [
|
|
1437
|
-
"Read(./.env)",
|
|
1438
|
-
"Read(./.env.*)",
|
|
1439
|
-
"Read(./secrets/**)"
|
|
1440
|
-
]
|
|
1441
|
-
},
|
|
1442
|
-
"hooks": {
|
|
1443
|
-
"PostToolUse": [{
|
|
1444
|
-
"matcher": "Edit|Write",
|
|
1445
|
-
"hooks": [{
|
|
1446
|
-
"type": "command",
|
|
1447
|
-
"command": "// Auto-refresh
|
|
1448
|
-
}]
|
|
1449
|
-
}]
|
|
1450
|
-
}
|
|
1451
|
-
}`
|
|
1452
|
-
},
|
|
1453
|
-
'mcp': {
|
|
1454
|
-
filename: '.mcp.json',
|
|
1455
|
-
content: `{
|
|
1456
|
-
"mcpServers": {}
|
|
1457
|
-
}
|
|
1458
|
-
|
|
1459
|
-
// Add your MCP server configs here when you're ready.
|
|
1460
|
-
// See: https://docs.anthropic.com/en/docs/claude-code/mcp`
|
|
1461
|
-
},
|
|
1462
|
-
'create-retro-item': {
|
|
1463
|
-
filename: 'create-retro-item.md',
|
|
1464
|
-
content: `# Create Retro Item Agent
|
|
1465
|
-
|
|
1466
|
-
Create a fully-scoped story file in \`.claude/retro/\` when tech debt or improvement opportunities are identified.
|
|
1467
|
-
|
|
1468
|
-
## When to Trigger
|
|
1469
|
-
|
|
1470
|
-
Call this agent when you notice:
|
|
1471
|
-
- Tech debt that should be addressed later
|
|
1472
|
-
- Code that works but could be improved
|
|
1473
|
-
- Missing tests, documentation, or error handling
|
|
1474
|
-
- Architectural improvements worth tracking
|
|
1475
|
-
|
|
1476
|
-
## Input
|
|
1477
|
-
|
|
1478
|
-
Provide these details when calling:
|
|
1479
|
-
- **title**: Short descriptive name (used for filename)
|
|
1480
|
-
- **problem**: What's wrong or what friction was encountered
|
|
1481
|
-
- **criteria**: Specific, testable acceptance criteria
|
|
1482
|
-
- **approach**: How to fix it
|
|
1483
|
-
- **priority**: Critical | High | Medium | Low
|
|
1484
|
-
- **effort**: S | M | L | XL
|
|
1485
|
-
- **files**: List of files involved
|
|
1486
|
-
|
|
1487
|
-
## Behavior
|
|
1488
|
-
|
|
1489
|
-
1. Generate filename from title: \`kebab-case.md\`
|
|
1490
|
-
2. Create story file in \`.claude/retro/\` using the template format
|
|
1491
|
-
3. Confirm creation with filename
|
|
1492
|
-
|
|
1493
|
-
## Guidelines
|
|
1494
|
-
|
|
1495
|
-
- **Be concise**: Keep descriptions actionable, not verbose
|
|
1496
|
-
- **Be specific**: Include actual file paths and line numbers when relevant
|
|
1497
|
-
- **Don't duplicate**: Check if similar item already exists first
|
|
1498
|
-
- **Don't block**: Create the item and continue with the main task`
|
|
1499
|
-
},
|
|
1500
|
-
'
|
|
1501
|
-
filename: '
|
|
1502
|
-
content: `# Guide Refresh Agent
|
|
1503
|
-
|
|
1504
|
-
Incrementally update the
|
|
1505
|
-
|
|
1506
|
-
## Trigger
|
|
1507
|
-
|
|
1508
|
-
- PostToolUse hook on Edit|Write to \`.claude/\`
|
|
1509
|
-
|
|
1510
|
-
## Scope
|
|
1511
|
-
|
|
1512
|
-
- Read \`.claude/**/*.md\` for \`@description\` comments
|
|
1513
|
-
- Update \`.claude/
|
|
1514
|
-
|
|
1515
|
-
## Behavior
|
|
1516
|
-
|
|
1517
|
-
1. Check which \`.claude/\` file was just modified
|
|
1518
|
-
2. Extract the \`<!-- @description ... -->\` comment from the top
|
|
1519
|
-
3. Find the corresponding entry in the
|
|
1520
|
-
4. Update only that entry's \`desc\` field
|
|
1521
|
-
5. If file is new, add a new treeInfo entry
|
|
1522
|
-
6. If file was deleted, remove the treeInfo entry
|
|
1523
|
-
|
|
1524
|
-
## Guidelines
|
|
1525
|
-
|
|
1526
|
-
- **Be fast**: Only touch the affected entry
|
|
1527
|
-
- **Be minimal**: Don't reformat or reorganize unrelated code
|
|
1528
|
-
- **Be silent**: Run in background, no output unless error`
|
|
1529
|
-
},
|
|
1530
|
-
'autoconfig': {
|
|
1531
|
-
filename: 'autoconfig.md',
|
|
1532
|
-
content: `# Autoconfig
|
|
1533
|
-
|
|
1534
|
-
Analyze this project and configure Claude Code with real context.
|
|
1535
|
-
|
|
1536
|
-
## Step 1: Scan the Project
|
|
1537
|
-
|
|
1538
|
-
Look for these indicators to understand the project:
|
|
1539
|
-
|
|
1540
|
-
**Package/Config Files:**
|
|
1541
|
-
- \`package.json\` → Node.js, npm scripts, dependencies
|
|
1542
|
-
- \`requirements.txt\` / \`pyproject.toml\` / \`setup.py\` → Python
|
|
1543
|
-
- \`Cargo.toml\` → Rust
|
|
1544
|
-
- \`go.mod\` → Go
|
|
1545
|
-
- \`Gemfile\` → Ruby
|
|
1546
|
-
- \`pom.xml\` / \`build.gradle\` → Java
|
|
1547
|
-
- \`*.csproj\` / \`*.sln\` → .NET
|
|
1548
|
-
- \`composer.json\` → PHP
|
|
1549
|
-
|
|
1550
|
-
**Framework Indicators:**
|
|
1551
|
-
- \`next.config.*\` / \`app/\` directory → Next.js
|
|
1552
|
-
- \`vite.config.*\` → Vite
|
|
1553
|
-
- \`angular.json\` → Angular
|
|
1554
|
-
- \`svelte.config.*\` → Svelte
|
|
1555
|
-
- \`remix.config.*\` → Remix
|
|
1556
|
-
- \`nuxt.config.*\` → Nuxt
|
|
1557
|
-
- \`django\` in imports → Django
|
|
1558
|
-
- \`flask\` in imports → Flask
|
|
1559
|
-
- \`fastapi\` in imports → FastAPI
|
|
1560
|
-
- \`express\` in dependencies → Express
|
|
1561
|
-
- \`rails\` / \`Gemfile\` with rails → Rails
|
|
1562
|
-
- \`laravel\` → Laravel
|
|
1563
|
-
|
|
1564
|
-
**Testing Frameworks:**
|
|
1565
|
-
- \`jest.config.*\` / \`@jest\` in deps → Jest
|
|
1566
|
-
- \`vitest.config.*\` → Vitest
|
|
1567
|
-
- \`pytest.ini\` / \`conftest.py\` → Pytest
|
|
1568
|
-
- \`*_test.go\` files → Go testing
|
|
1569
|
-
- \`*_spec.rb\` files → RSpec
|
|
1570
|
-
- \`cypress/\` or \`playwright/\` → E2E testing
|
|
1571
|
-
|
|
1572
|
-
**Infrastructure:**
|
|
1573
|
-
- \`Dockerfile\` / \`docker-compose.*\` → Docker
|
|
1574
|
-
- \`*.tf\` files → Terraform
|
|
1575
|
-
- \`k8s/\` or \`kubernetes/\` → Kubernetes
|
|
1576
|
-
- \`.github/workflows/\` → GitHub Actions
|
|
1577
|
-
- \`serverless.yml\` → Serverless Framework
|
|
1578
|
-
|
|
1579
|
-
## Step 2: Populate CLAUDE.md
|
|
1580
|
-
|
|
1581
|
-
Focus on what Claude Code actually needs to work effectively. Claude can explore the codebase itself — don't document what it can discover.
|
|
1582
|
-
|
|
1583
|
-
**Always include:**
|
|
1584
|
-
- **Project name + one-liner**: What is this thing?
|
|
1585
|
-
- **Tech stack**: Runtime, framework, database, key services (so Claude uses correct patterns)
|
|
1586
|
-
- **Commands**: How to run, test, build, deploy — Claude needs these to execute tasks
|
|
1587
|
-
- **Non-obvious conventions**: Multi-schema databases, monorepo structure, unusual patterns Claude wouldn't infer
|
|
1588
|
-
|
|
1589
|
-
**Include if relevant:**
|
|
1590
|
-
- **Deployment flow**: If non-standard or involves multiple steps
|
|
1591
|
-
|
|
1592
|
-
**Skip these — Claude can discover them:**
|
|
1593
|
-
- Detailed project structure trees (Claude can run \`ls\` or \`tree\`)
|
|
1594
|
-
- Exhaustive route/endpoint lists (Claude can grep)
|
|
1595
|
-
- File-by-file descriptions (Claude can read files)
|
|
1596
|
-
- Database model lists (Claude can read schema files)
|
|
1597
|
-
|
|
1598
|
-
**Keep it tight.** A 30-line CLAUDE.md that hits the essentials beats a 200-line doc Claude has to parse every session.
|
|
1599
|
-
|
|
1600
|
-
## Step 3: Create Rules Directory
|
|
1601
|
-
|
|
1602
|
-
Create an empty \`.claude/rules/\` directory. Do not create any subdirectories or rule files.
|
|
1603
|
-
|
|
1604
|
-
Rules are path-scoped context files that load automatically when Claude works on matching files. Effective rules require deep understanding of your codebase patterns, team conventions, and quality goals — they should be crafted intentionally, not auto-generated.
|
|
1605
|
-
|
|
1606
|
-
## Step 4: Configure Settings
|
|
1607
|
-
|
|
1608
|
-
Update \`.claude/settings.json\` using the official schema.
|
|
1609
|
-
|
|
1610
|
-
### Deny Patterns (files Claude shouldn't read/write)
|
|
1611
|
-
|
|
1612
|
-
Use \`Read()\` for blocking reads, \`Edit()\` for blocking writes:
|
|
1613
|
-
|
|
1614
|
-
**Always deny (security):**
|
|
1615
|
-
\`\`\`
|
|
1616
|
-
Read(./.env)
|
|
1617
|
-
Read(./.env.*)
|
|
1618
|
-
Read(./secrets/**)
|
|
1619
|
-
Edit(./.env)
|
|
1620
|
-
Edit(./.env.*)
|
|
1621
|
-
\`\`\`
|
|
1622
|
-
|
|
1623
|
-
**Often deny (generated/vendor):**
|
|
1624
|
-
\`\`\`
|
|
1625
|
-
Edit(./node_modules/**)
|
|
1626
|
-
Edit(./dist/**)
|
|
1627
|
-
Edit(./.git/**)
|
|
1628
|
-
\`\`\`
|
|
1629
|
-
|
|
1630
|
-
### Allow Patterns (auto-approve without prompting)
|
|
1631
|
-
|
|
1632
|
-
Use \`Bash()\` patterns with prefix matching:
|
|
1633
|
-
|
|
1634
|
-
\`\`\`
|
|
1635
|
-
Bash(npm run test:*)
|
|
1636
|
-
Bash(npm run lint:*)
|
|
1637
|
-
Bash(npm run build)
|
|
1638
|
-
\`\`\`
|
|
1639
|
-
|
|
1640
|
-
### Environment Variables
|
|
1641
|
-
|
|
1642
|
-
Set session-level env vars:
|
|
1643
|
-
|
|
1644
|
-
\`\`\`json
|
|
1645
|
-
{
|
|
1646
|
-
"env": {
|
|
1647
|
-
"NODE_ENV": "development"
|
|
1648
|
-
}
|
|
1649
|
-
}
|
|
1650
|
-
\`\`\`
|
|
1651
|
-
|
|
1652
|
-
**Keep it minimal** — only include patterns that actually exist in this project.
|
|
1653
|
-
|
|
1654
|
-
## Guidelines
|
|
1655
|
-
|
|
1656
|
-
- Replace ALL placeholder content with real values from THIS project
|
|
1657
|
-
- Delete sections that don't apply — no empty stubs
|
|
1658
|
-
- Optimize for Claude's efficiency, not human documentation
|
|
1659
|
-
- When uncertain, leave it out — Claude can ask or explore
|
|
1660
|
-
|
|
1661
|
-
## After Completion
|
|
1662
|
-
|
|
1663
|
-
Once autoconfig is complete, prompt the user:
|
|
1664
|
-
|
|
1665
|
-
**Run \`/
|
|
1666
|
-
},
|
|
1667
|
-
'commit-and-push': {
|
|
1668
|
-
filename: 'commit-and-push.md',
|
|
1669
|
-
content: `# Commit and Push
|
|
1670
|
-
|
|
1671
|
-
Stage all changes, create a commit with a good message, and push to the current branch.
|
|
1672
|
-
|
|
1673
|
-
## Steps
|
|
1674
|
-
|
|
1675
|
-
1. Stage all changes (\`git add -A\`)
|
|
1676
|
-
2. Generate a conventional commit message based on the diff
|
|
1677
|
-
3. Commit the changes
|
|
1678
|
-
4. Push to the current branch
|
|
1679
|
-
|
|
1680
|
-
## Commit Message Format
|
|
1681
|
-
|
|
1682
|
-
Use conventional commits: \`type(scope): description\`
|
|
1683
|
-
|
|
1684
|
-
Types: feat, fix, docs, style, refactor, test, chore
|
|
1685
|
-
|
|
1686
|
-
Keep the subject line under 50 chars. Add body if the change needs explanation.`
|
|
1687
|
-
},
|
|
1688
|
-
'
|
|
1689
|
-
filename: 'show-
|
|
1690
|
-
content: `# Show Guide
|
|
1691
|
-
|
|
1692
|
-
Open the interactive
|
|
1693
|
-
|
|
1694
|
-
## Step 1: Check for Changes
|
|
1695
|
-
|
|
1696
|
-
Compare modification times of files in \`.claude/\` against the
|
|
1697
|
-
|
|
1698
|
-
If any files are newer: "Syncing
|
|
1699
|
-
|
|
1700
|
-
## Step 2: Delta Sync
|
|
1701
|
-
|
|
1702
|
-
For each changed file, update only that entry in the
|
|
1703
|
-
|
|
1704
|
-
## Step 3: Open Guide
|
|
1705
|
-
|
|
1706
|
-
Open in default browser (macOS: open, Linux: xdg-open, Windows: start).`
|
|
1707
|
-
},
|
|
1708
|
-
'test': {
|
|
1709
|
-
filename: 'test.md',
|
|
1710
|
-
content: `# Run Tests
|
|
1711
|
-
|
|
1712
|
-
Run tests for this project.
|
|
1713
|
-
|
|
1714
|
-
**Scope:** $ARGUMENTS
|
|
1715
|
-
|
|
1716
|
-
If no scope provided, run the full test suite. Otherwise run tests matching the scope (file, directory, or pattern).
|
|
1717
|
-
|
|
1718
|
-
Detect the test command from project config (package.json scripts, pytest, go test, etc.) and execute it.`
|
|
1719
|
-
},
|
|
1720
|
-
'rules': {
|
|
1721
|
-
filename: 'rules/',
|
|
1722
|
-
content: null,
|
|
1723
|
-
empty: true,
|
|
1724
|
-
emptyMessage: 'This directory is empty.\n\nAdd .md files here to define rules for specific paths in your codebase.'
|
|
1725
|
-
},
|
|
1726
|
-
'
|
|
1727
|
-
filename: 'autoconfig.
|
|
1728
|
-
content: null,
|
|
1729
|
-
empty: true,
|
|
1730
|
-
emptyMessage: "You're looking at it! 👀"
|
|
1731
|
-
},
|
|
1732
|
-
'enable-retro': {
|
|
1733
|
-
filename: 'enable-retro.md',
|
|
1734
|
-
content: `# Enable Retro
|
|
1735
|
-
|
|
1736
|
-
(Experimental) Enable tech debt tracking.
|
|
1737
|
-
|
|
1738
|
-
## What This Does
|
|
1739
|
-
|
|
1740
|
-
1. Creates \`.claude/retro/\` directory
|
|
1741
|
-
2. Creates \`.claude/agents/create-retro-item.md\` agent
|
|
1742
|
-
3. Adds Retro instructions to CLAUDE.md
|
|
1743
|
-
|
|
1744
|
-
## After Enabling
|
|
1745
|
-
|
|
1746
|
-
Claude will log tech debt and improvement opportunities as structured story files:
|
|
1747
|
-
- Problem description
|
|
1748
|
-
- Acceptance criteria
|
|
1749
|
-
- Suggested approach
|
|
1750
|
-
- Priority & effort sizing
|
|
1751
|
-
- Files involved
|
|
1752
|
-
|
|
1753
|
-
Work through items: "Fix retro #001"`
|
|
1754
|
-
},
|
|
1755
|
-
'feedback-template': {
|
|
1756
|
-
filename: 'FEEDBACK.md',
|
|
1757
|
-
content: `# Team Feedback
|
|
1758
|
-
|
|
1759
|
-
Add corrections and guidance here when Claude does something wrong.
|
|
1760
|
-
Claude reads this directory and learns for next time.
|
|
1761
|
-
|
|
1762
|
-
## YYYY-MM-DD: Brief title
|
|
1763
|
-
|
|
1764
|
-
Describe what Claude did wrong and what to do instead.
|
|
1765
|
-
Keep entries brief and actionable.
|
|
1766
|
-
|
|
1767
|
-
Example:
|
|
1768
|
-
|
|
1769
|
-
## 2026-01-06: Don't use deprecated API
|
|
1770
|
-
Claude used \`oldFunction()\` instead of \`newFunction()\`.
|
|
1771
|
-
Always use the v2 API for user endpoints.
|
|
1772
|
-
|
|
1773
|
-
## 2026-01-07: Test database naming
|
|
1774
|
-
Use \`test_\` prefix for test databases, not \`dev_\`.`
|
|
1775
|
-
}
|
|
1776
|
-
};
|
|
1777
|
-
|
|
1778
|
-
const modal = document.getElementById('fileModal');
|
|
1779
|
-
const modalTitle = document.getElementById('modalTitle');
|
|
1780
|
-
const modalCode = document.getElementById('modalCode');
|
|
1781
|
-
const modalClose = document.getElementById('modalClose');
|
|
1782
|
-
|
|
1783
|
-
function openModal(key) {
|
|
1784
|
-
const file = fileContents[key];
|
|
1785
|
-
if (!file) return;
|
|
1786
|
-
|
|
1787
|
-
modalTitle.textContent = file.filename;
|
|
1788
|
-
|
|
1789
|
-
if (file.empty) {
|
|
1790
|
-
modalCode.innerHTML = `<span class="modal-empty">${file.emptyMessage}</span>`;
|
|
1791
|
-
} else {
|
|
1792
|
-
modalCode.textContent = file.content;
|
|
1793
|
-
}
|
|
1794
|
-
|
|
1795
|
-
modal.classList.add('visible');
|
|
1796
|
-
}
|
|
1797
|
-
|
|
1798
|
-
function closeModal() {
|
|
1799
|
-
modal.classList.remove('visible');
|
|
1800
|
-
}
|
|
1801
|
-
|
|
1802
|
-
modalClose.addEventListener('click', closeModal);
|
|
1803
|
-
modal.addEventListener('click', (e) => {
|
|
1804
|
-
if (e.target === modal) closeModal();
|
|
1805
|
-
});
|
|
1806
|
-
document.addEventListener('keydown', (e) => {
|
|
1807
|
-
if (e.key === 'Escape' && modal.classList.contains('visible')) {
|
|
1808
|
-
closeModal();
|
|
1809
|
-
}
|
|
1810
|
-
// Enter key opens preview for selected item
|
|
1811
|
-
if (e.key === 'Enter' && !modal.classList.contains('visible')) {
|
|
1812
|
-
const selected = document.querySelector('.tree-item.active');
|
|
1813
|
-
if (selected) {
|
|
1814
|
-
const key = selected.dataset.info;
|
|
1815
|
-
if (fileContents[key]) {
|
|
1816
|
-
openModal(key);
|
|
1817
|
-
}
|
|
1818
|
-
}
|
|
1819
|
-
}
|
|
1820
|
-
});
|
|
1821
|
-
|
|
1822
|
-
// Double-click to open file preview
|
|
1823
|
-
treeItems.forEach(item => {
|
|
1824
|
-
item.addEventListener('dblclick', (e) => {
|
|
1825
|
-
const key = item.dataset.info;
|
|
1826
|
-
// Don't open modal for folders (except rules which is empty) or root
|
|
1827
|
-
if (key === 'root' || key === 'claude-dir' || key === 'commands') return;
|
|
1828
|
-
if (fileContents[key]) {
|
|
1829
|
-
openModal(key);
|
|
1830
|
-
}
|
|
1831
|
-
});
|
|
1832
|
-
});
|
|
1833
|
-
</script>
|
|
1834
|
-
</body>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Claude Code Autoconfig — Walkthrough</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:root {
|
|
15
|
+
--bg-primary: #0D0D0D;
|
|
16
|
+
--bg-secondary: #1A1A1A;
|
|
17
|
+
--bg-elevated: #252525;
|
|
18
|
+
--text-primary: #FFFFFF;
|
|
19
|
+
--text-secondary: #8FBBCF;
|
|
20
|
+
--text-dim: #6B7280;
|
|
21
|
+
--accent-orange: #FF9933;
|
|
22
|
+
--accent-blue: #5C9ECE;
|
|
23
|
+
--accent-cyan: #22D3EE;
|
|
24
|
+
--accent-green: #6ABF69;
|
|
25
|
+
--accent-yellow: #E5C07B;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
body {
|
|
29
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
30
|
+
background: var(--bg-primary);
|
|
31
|
+
color: var(--text-primary);
|
|
32
|
+
min-height: 100vh;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.container {
|
|
37
|
+
max-width: 900px;
|
|
38
|
+
margin: 0 auto;
|
|
39
|
+
padding: 40px 20px;
|
|
40
|
+
min-height: 100vh;
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Progress bar */
|
|
46
|
+
.progress-container {
|
|
47
|
+
display: flex;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
gap: 8px;
|
|
50
|
+
margin-bottom: 40px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.progress-dot {
|
|
54
|
+
width: 12px;
|
|
55
|
+
height: 12px;
|
|
56
|
+
border-radius: 50%;
|
|
57
|
+
background: #4a4a4a;
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
transition: all 0.3s ease;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.progress-dot:hover {
|
|
63
|
+
background: #6a6a6a;
|
|
64
|
+
transform: scale(1.2);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.progress-dot.active {
|
|
68
|
+
background: var(--accent-green);
|
|
69
|
+
box-shadow: 0 0 15px rgba(106, 191, 105, 0.4);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Slides */
|
|
73
|
+
.slides-container {
|
|
74
|
+
flex: 1;
|
|
75
|
+
position: relative;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.slide {
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: 0;
|
|
82
|
+
left: 0;
|
|
83
|
+
width: 100%;
|
|
84
|
+
opacity: 0;
|
|
85
|
+
visibility: hidden;
|
|
86
|
+
transform: translateX(100px);
|
|
87
|
+
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
88
|
+
pointer-events: none;
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.slide.active {
|
|
94
|
+
opacity: 1;
|
|
95
|
+
visibility: visible;
|
|
96
|
+
transform: translateX(0);
|
|
97
|
+
pointer-events: auto;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.slide.exit {
|
|
101
|
+
opacity: 0;
|
|
102
|
+
transform: translateX(-100px);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.slide-number {
|
|
106
|
+
font-size: 14px;
|
|
107
|
+
color: var(--accent-orange);
|
|
108
|
+
text-transform: uppercase;
|
|
109
|
+
letter-spacing: 2px;
|
|
110
|
+
margin-bottom: 12px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.slide h1 {
|
|
114
|
+
font-size: 2.5rem;
|
|
115
|
+
font-weight: 700;
|
|
116
|
+
margin-bottom: 20px;
|
|
117
|
+
color: var(--text-primary);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.slide h2 {
|
|
121
|
+
font-size: 1.3rem;
|
|
122
|
+
font-weight: 400;
|
|
123
|
+
color: var(--text-secondary);
|
|
124
|
+
margin-bottom: 30px;
|
|
125
|
+
line-height: 1.6;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.slide-content {
|
|
129
|
+
flex: 1;
|
|
130
|
+
overflow-y: auto;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Code blocks */
|
|
134
|
+
.code-block {
|
|
135
|
+
background: var(--bg-secondary);
|
|
136
|
+
border: 1px solid var(--bg-elevated);
|
|
137
|
+
border-radius: 8px;
|
|
138
|
+
padding: 20px;
|
|
139
|
+
margin: 20px 0;
|
|
140
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
141
|
+
font-size: 14px;
|
|
142
|
+
line-height: 1.6;
|
|
143
|
+
overflow-x: auto;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.code-block .comment {
|
|
147
|
+
color: var(--text-dim);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.code-block .keyword {
|
|
151
|
+
color: var(--accent-orange);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.code-block .string {
|
|
155
|
+
color: var(--accent-green);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.code-block .property {
|
|
159
|
+
color: var(--accent-blue);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.code-block .folder {
|
|
163
|
+
color: var(--accent-cyan);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.code-block .file {
|
|
167
|
+
color: var(--accent-orange);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* Info cards */
|
|
171
|
+
.info-card {
|
|
172
|
+
background: rgba(212, 165, 116, 0.1);
|
|
173
|
+
border-left: 4px solid var(--accent-orange);
|
|
174
|
+
border-radius: 0 8px 8px 0;
|
|
175
|
+
padding: 16px 20px;
|
|
176
|
+
margin: 20px 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.info-card.warning {
|
|
180
|
+
background: rgba(229, 192, 123, 0.1);
|
|
181
|
+
border-left-color: var(--accent-yellow);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.info-card h4 {
|
|
185
|
+
font-size: 14px;
|
|
186
|
+
text-transform: uppercase;
|
|
187
|
+
letter-spacing: 1px;
|
|
188
|
+
margin-bottom: 8px;
|
|
189
|
+
color: var(--accent-orange);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.info-card.warning h4 {
|
|
193
|
+
color: var(--accent-yellow);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* Feature list */
|
|
197
|
+
.feature-list {
|
|
198
|
+
list-style: none;
|
|
199
|
+
margin: 20px 0;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.feature-list li {
|
|
203
|
+
padding: 14px 0;
|
|
204
|
+
padding-left: 28px;
|
|
205
|
+
position: relative;
|
|
206
|
+
border-bottom: 1px solid var(--bg-elevated);
|
|
207
|
+
display: flex;
|
|
208
|
+
align-items: center;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.feature-list li:last-child {
|
|
212
|
+
border-bottom: none;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.feature-list li::before {
|
|
216
|
+
content: "●";
|
|
217
|
+
position: absolute;
|
|
218
|
+
left: 0;
|
|
219
|
+
color: var(--text-primary);
|
|
220
|
+
font-size: 14px;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.feature-list li.blue-bullet::before {
|
|
224
|
+
color: var(--accent-blue);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.feature-list .file-name {
|
|
228
|
+
color: var(--accent-orange);
|
|
229
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
230
|
+
font-size: 14px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Welcome content */
|
|
234
|
+
.welcome-content {
|
|
235
|
+
display: flex;
|
|
236
|
+
flex-direction: column;
|
|
237
|
+
align-items: center;
|
|
238
|
+
justify-content: center;
|
|
239
|
+
text-align: center;
|
|
240
|
+
padding: 40px 20px;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.welcome-text {
|
|
244
|
+
font-size: 24px;
|
|
245
|
+
color: var(--text-primary);
|
|
246
|
+
margin-bottom: 30px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.welcome-action {
|
|
250
|
+
background: var(--bg-secondary);
|
|
251
|
+
border: 1px solid var(--bg-elevated);
|
|
252
|
+
border-radius: 12px;
|
|
253
|
+
padding: 24px 32px;
|
|
254
|
+
max-width: 500px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.welcome-action p {
|
|
258
|
+
font-size: 16px;
|
|
259
|
+
color: var(--text-secondary);
|
|
260
|
+
line-height: 1.6;
|
|
261
|
+
margin: 0;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.welcome-action code {
|
|
265
|
+
background: var(--bg-elevated);
|
|
266
|
+
padding: 4px 12px;
|
|
267
|
+
border-radius: 6px;
|
|
268
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
269
|
+
font-size: 15px;
|
|
270
|
+
color: var(--accent-cyan);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* TOC list */
|
|
274
|
+
.tip-banner {
|
|
275
|
+
display: flex;
|
|
276
|
+
align-items: flex-start;
|
|
277
|
+
gap: 12px;
|
|
278
|
+
padding: 16px 20px;
|
|
279
|
+
margin-bottom: 20px;
|
|
280
|
+
background: rgba(255, 153, 51, 0.1);
|
|
281
|
+
border: 1px solid rgba(255, 153, 51, 0.3);
|
|
282
|
+
border-radius: 8px;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.tip-icon {
|
|
286
|
+
font-size: 18px;
|
|
287
|
+
flex-shrink: 0;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.tip-text {
|
|
291
|
+
color: var(--text-secondary);
|
|
292
|
+
font-size: 14px;
|
|
293
|
+
line-height: 1.5;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.tip-text code {
|
|
297
|
+
background: var(--bg-elevated);
|
|
298
|
+
padding: 2px 8px;
|
|
299
|
+
border-radius: 4px;
|
|
300
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
301
|
+
font-size: 13px;
|
|
302
|
+
color: var(--accent-cyan);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.toc-list {
|
|
306
|
+
list-style: none;
|
|
307
|
+
margin: 10px 0;
|
|
308
|
+
padding: 0;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.toc-list li {
|
|
312
|
+
display: flex;
|
|
313
|
+
align-items: center;
|
|
314
|
+
gap: 16px;
|
|
315
|
+
padding: 16px 20px;
|
|
316
|
+
margin: 8px 0;
|
|
317
|
+
background: var(--bg-secondary);
|
|
318
|
+
border-radius: 8px;
|
|
319
|
+
cursor: pointer;
|
|
320
|
+
transition: all 0.2s ease;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.toc-list li:hover {
|
|
324
|
+
background: var(--bg-elevated);
|
|
325
|
+
transform: translateX(8px);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.toc-number {
|
|
329
|
+
color: var(--accent-orange);
|
|
330
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
331
|
+
font-size: 14px;
|
|
332
|
+
font-weight: 600;
|
|
333
|
+
min-width: 28px;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.toc-title {
|
|
337
|
+
color: var(--text-primary);
|
|
338
|
+
font-weight: 600;
|
|
339
|
+
font-size: 16px;
|
|
340
|
+
min-width: 140px;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.toc-desc {
|
|
344
|
+
color: var(--text-dim);
|
|
345
|
+
font-size: 14px;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
/* Tree view */
|
|
349
|
+
.tree-view {
|
|
350
|
+
background: var(--bg-secondary);
|
|
351
|
+
border: 1px solid var(--bg-elevated);
|
|
352
|
+
border-radius: 8px;
|
|
353
|
+
padding: 20px;
|
|
354
|
+
margin: 20px 0;
|
|
355
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
356
|
+
font-size: 14px;
|
|
357
|
+
line-height: 1.5;
|
|
358
|
+
overflow-x: auto;
|
|
359
|
+
white-space: pre;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.tree-view .folder {
|
|
363
|
+
color: var(--accent-cyan);
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.tree-view .file {
|
|
367
|
+
color: var(--accent-orange);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.tree-view .comment {
|
|
371
|
+
color: var(--text-dim);
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/* Split-pane tree panel */
|
|
375
|
+
.tree-panel {
|
|
376
|
+
display: flex;
|
|
377
|
+
gap: 0;
|
|
378
|
+
background: var(--bg-secondary);
|
|
379
|
+
border-radius: 8px;
|
|
380
|
+
overflow: hidden;
|
|
381
|
+
height: 375px;
|
|
382
|
+
position: relative;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.tree-side {
|
|
386
|
+
padding: 16px;
|
|
387
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
388
|
+
font-size: 13px;
|
|
389
|
+
line-height: 1.4;
|
|
390
|
+
border-right: 1px solid var(--bg-elevated);
|
|
391
|
+
overflow-y: auto;
|
|
392
|
+
flex-shrink: 0;
|
|
393
|
+
height: 100%;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.tree-item {
|
|
397
|
+
padding: 4px 8px;
|
|
398
|
+
margin: 1px 0;
|
|
399
|
+
border-radius: 4px;
|
|
400
|
+
cursor: pointer;
|
|
401
|
+
transition: background 0.15s ease;
|
|
402
|
+
white-space: nowrap;
|
|
403
|
+
display: flex;
|
|
404
|
+
align-items: center;
|
|
405
|
+
gap: 4px;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.tree-item.hidden {
|
|
409
|
+
display: none;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.tree-item:hover {
|
|
413
|
+
background: rgba(255, 255, 255, 0.1);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.tree-item.active {
|
|
417
|
+
background: rgba(45, 105, 175, 0.5);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.tree-item.active:hover {
|
|
421
|
+
background: rgba(45, 105, 175, 0.5);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.tree-chevron {
|
|
425
|
+
width: 18px;
|
|
426
|
+
font-size: 18px;
|
|
427
|
+
color: var(--text-primary);
|
|
428
|
+
text-align: center;
|
|
429
|
+
flex-shrink: 0;
|
|
430
|
+
transition: transform 0.15s ease;
|
|
431
|
+
user-select: none;
|
|
432
|
+
transform: rotate(90deg);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.tree-item.collapsed .tree-chevron {
|
|
436
|
+
transform: rotate(0deg);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.tree-spacer {
|
|
440
|
+
width: 18px;
|
|
441
|
+
flex-shrink: 0;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.tree-folder-icon,
|
|
445
|
+
.tree-file-icon {
|
|
446
|
+
font-size: 14px;
|
|
447
|
+
flex-shrink: 0;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.tree-item .folder {
|
|
451
|
+
color: var(--text-primary);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.tree-item .file {
|
|
455
|
+
color: var(--text-secondary);
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.tree-item.indent-1 { padding-left: 24px; }
|
|
459
|
+
.tree-item.indent-2 { padding-left: 44px; }
|
|
460
|
+
.tree-item.indent-3 { padding-left: 64px; }
|
|
461
|
+
.tree-item.indent-4 { padding-left: 84px; }
|
|
462
|
+
|
|
463
|
+
.tree-indent {
|
|
464
|
+
color: var(--text-dim);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.info-side {
|
|
468
|
+
flex: 1;
|
|
469
|
+
min-width: 200px;
|
|
470
|
+
overflow-y: auto;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.info-panel {
|
|
474
|
+
padding: 20px;
|
|
475
|
+
width: 100%;
|
|
476
|
+
box-sizing: border-box;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.info-panel-title {
|
|
480
|
+
font-size: 16px;
|
|
481
|
+
font-weight: 600;
|
|
482
|
+
color: var(--accent-orange);
|
|
483
|
+
margin-bottom: 12px;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.info-panel-desc {
|
|
487
|
+
font-size: 14px;
|
|
488
|
+
color: var(--text-secondary);
|
|
489
|
+
line-height: 1.6;
|
|
490
|
+
letter-spacing: 0.02em;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.info-panel-trigger {
|
|
494
|
+
margin-top: 16px;
|
|
495
|
+
padding: 8px 12px;
|
|
496
|
+
background: var(--bg-elevated);
|
|
497
|
+
border-radius: 4px;
|
|
498
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
499
|
+
font-size: 13px;
|
|
500
|
+
color: var(--accent-cyan);
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
/* Navigation */
|
|
504
|
+
.nav-container {
|
|
505
|
+
display: flex;
|
|
506
|
+
justify-content: space-between;
|
|
507
|
+
align-items: center;
|
|
508
|
+
margin-top: 40px;
|
|
509
|
+
padding-top: 20px;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.nav-btn {
|
|
513
|
+
display: flex;
|
|
514
|
+
align-items: center;
|
|
515
|
+
gap: 8px;
|
|
516
|
+
padding: 14px 28px;
|
|
517
|
+
border: none;
|
|
518
|
+
border-radius: 8px;
|
|
519
|
+
font-size: 16px;
|
|
520
|
+
font-weight: 500;
|
|
521
|
+
cursor: pointer;
|
|
522
|
+
transition: all 0.3s ease;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.nav-btn.prev {
|
|
526
|
+
background: var(--bg-elevated);
|
|
527
|
+
color: var(--text-secondary);
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
.nav-btn.prev:hover:not(:disabled) {
|
|
531
|
+
background: var(--bg-secondary);
|
|
532
|
+
color: var(--text-primary);
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.nav-btn.next {
|
|
536
|
+
background: var(--accent-orange);
|
|
537
|
+
color: var(--bg-primary);
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.nav-btn.next:hover:not(:disabled) {
|
|
541
|
+
transform: translateY(-2px);
|
|
542
|
+
box-shadow: 0 10px 30px rgba(212, 165, 116, 0.3);
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
.nav-btn:disabled {
|
|
546
|
+
opacity: 0.3;
|
|
547
|
+
cursor: not-allowed;
|
|
548
|
+
transform: none !important;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.nav-hint {
|
|
552
|
+
color: var(--text-dim);
|
|
553
|
+
font-size: 14px;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.nav-hint kbd {
|
|
557
|
+
background: var(--bg-elevated);
|
|
558
|
+
padding: 4px 8px;
|
|
559
|
+
border-radius: 4px;
|
|
560
|
+
font-family: inherit;
|
|
561
|
+
margin: 0 2px;
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
/* Table */
|
|
565
|
+
.table-container {
|
|
566
|
+
overflow-x: auto;
|
|
567
|
+
margin: 20px 0;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
table {
|
|
571
|
+
width: 100%;
|
|
572
|
+
border-collapse: collapse;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
th, td {
|
|
576
|
+
padding: 12px 16px;
|
|
577
|
+
text-align: left;
|
|
578
|
+
border-bottom: 1px solid var(--bg-elevated);
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
th {
|
|
582
|
+
color: var(--accent-blue);
|
|
583
|
+
font-size: 12px;
|
|
584
|
+
text-transform: uppercase;
|
|
585
|
+
letter-spacing: 1px;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
td {
|
|
589
|
+
font-size: 14px;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
td code {
|
|
593
|
+
background: var(--bg-secondary);
|
|
594
|
+
color: var(--accent-orange);
|
|
595
|
+
padding: 2px 8px;
|
|
596
|
+
border-radius: 4px;
|
|
597
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
598
|
+
font-size: 13px;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
/* Animations */
|
|
602
|
+
@keyframes fadeInUp {
|
|
603
|
+
from {
|
|
604
|
+
opacity: 0;
|
|
605
|
+
transform: translateY(20px);
|
|
606
|
+
}
|
|
607
|
+
to {
|
|
608
|
+
opacity: 1;
|
|
609
|
+
transform: translateY(0);
|
|
610
|
+
}
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.slide.active .slide-number { animation: fadeIn 0.4s ease both; }
|
|
614
|
+
.slide.active h1 { animation: fadeIn 0.4s ease 0.1s both; }
|
|
615
|
+
.slide.active h2 { animation: none; }
|
|
616
|
+
.slide.active .slide-content > ul,
|
|
617
|
+
.slide.active .slide-content > div { animation: fadeIn 0.5s ease 0.3s both; }
|
|
618
|
+
|
|
619
|
+
@keyframes fadeIn {
|
|
620
|
+
from { opacity: 0; }
|
|
621
|
+
to { opacity: 1; }
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
/* Typewriter effect */
|
|
625
|
+
.typewriter {
|
|
626
|
+
border-right: 2px solid var(--bg-primary);
|
|
627
|
+
animation: none !important;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.typewriter.typing {
|
|
631
|
+
animation: blink-caret 0.75s step-end infinite !important;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.typewriter.done {
|
|
635
|
+
border-right: none !important;
|
|
636
|
+
animation: none !important;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
@keyframes blink-caret {
|
|
640
|
+
from, to { border-color: var(--bg-primary); }
|
|
641
|
+
50% { border-color: transparent; }
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
/* Scrollbar */
|
|
645
|
+
::-webkit-scrollbar {
|
|
646
|
+
width: 8px;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
::-webkit-scrollbar-track {
|
|
650
|
+
background: var(--bg-secondary);
|
|
651
|
+
border-radius: 4px;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
::-webkit-scrollbar-thumb {
|
|
655
|
+
background: var(--bg-elevated);
|
|
656
|
+
border-radius: 4px;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
::-webkit-scrollbar-thumb:hover {
|
|
660
|
+
background: var(--text-dim);
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
/* Logo */
|
|
664
|
+
.logo {
|
|
665
|
+
font-size: 24px;
|
|
666
|
+
margin-bottom: 8px;
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
/* Final slide special */
|
|
670
|
+
.final-links {
|
|
671
|
+
display: flex;
|
|
672
|
+
gap: 16px;
|
|
673
|
+
margin-top: 30px;
|
|
674
|
+
flex-wrap: wrap;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.final-link {
|
|
678
|
+
display: inline-flex;
|
|
679
|
+
align-items: center;
|
|
680
|
+
gap: 8px;
|
|
681
|
+
padding: 12px 24px;
|
|
682
|
+
background: var(--bg-elevated);
|
|
683
|
+
border-radius: 8px;
|
|
684
|
+
color: var(--text-secondary);
|
|
685
|
+
text-decoration: none;
|
|
686
|
+
transition: all 0.3s ease;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
.final-link:hover {
|
|
690
|
+
background: var(--bg-secondary);
|
|
691
|
+
color: var(--accent-orange);
|
|
692
|
+
transform: translateY(-2px);
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
/* File Preview Modal */
|
|
696
|
+
.modal-overlay {
|
|
697
|
+
position: fixed;
|
|
698
|
+
top: 0;
|
|
699
|
+
left: 0;
|
|
700
|
+
right: 0;
|
|
701
|
+
bottom: 0;
|
|
702
|
+
background: rgba(0, 0, 0, 0.85);
|
|
703
|
+
display: none;
|
|
704
|
+
justify-content: center;
|
|
705
|
+
align-items: center;
|
|
706
|
+
z-index: 1000;
|
|
707
|
+
padding: 40px;
|
|
708
|
+
opacity: 0;
|
|
709
|
+
transition: opacity 0.2s ease;
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
.modal-overlay.visible {
|
|
713
|
+
display: flex;
|
|
714
|
+
opacity: 1;
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.modal-content {
|
|
718
|
+
background: var(--bg-secondary);
|
|
719
|
+
border: 1px solid var(--bg-elevated);
|
|
720
|
+
border-radius: 12px;
|
|
721
|
+
max-width: 800px;
|
|
722
|
+
width: 100%;
|
|
723
|
+
max-height: 80vh;
|
|
724
|
+
display: flex;
|
|
725
|
+
flex-direction: column;
|
|
726
|
+
transform: scale(0.95);
|
|
727
|
+
transition: transform 0.2s ease;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.modal-overlay.visible .modal-content {
|
|
731
|
+
transform: scale(1);
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
.modal-header {
|
|
735
|
+
display: flex;
|
|
736
|
+
justify-content: space-between;
|
|
737
|
+
align-items: center;
|
|
738
|
+
padding: 16px 20px;
|
|
739
|
+
border-bottom: 1px solid var(--bg-elevated);
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.modal-title {
|
|
743
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
744
|
+
font-size: 14px;
|
|
745
|
+
color: var(--accent-orange);
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
.modal-close {
|
|
749
|
+
background: none;
|
|
750
|
+
border: none;
|
|
751
|
+
color: var(--text-dim);
|
|
752
|
+
font-size: 24px;
|
|
753
|
+
cursor: pointer;
|
|
754
|
+
padding: 0;
|
|
755
|
+
line-height: 1;
|
|
756
|
+
transition: color 0.2s ease;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
.modal-close:hover {
|
|
760
|
+
color: var(--text-primary);
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.modal-body {
|
|
764
|
+
padding: 20px;
|
|
765
|
+
overflow-y: auto;
|
|
766
|
+
flex: 1;
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
.modal-body pre {
|
|
770
|
+
margin: 0;
|
|
771
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Ubuntu', 'Roboto', 'Noto Sans', sans-serif;
|
|
772
|
+
font-size: 13px;
|
|
773
|
+
line-height: 1.6;
|
|
774
|
+
color: var(--text-secondary);
|
|
775
|
+
white-space: pre-wrap;
|
|
776
|
+
word-wrap: break-word;
|
|
777
|
+
}
|
|
778
|
+
|
|
779
|
+
.modal-body .comment { color: var(--text-dim); }
|
|
780
|
+
.modal-body .keyword { color: var(--accent-orange); }
|
|
781
|
+
.modal-body .string { color: var(--accent-green); }
|
|
782
|
+
.modal-body .property { color: var(--accent-blue); }
|
|
783
|
+
|
|
784
|
+
.modal-empty {
|
|
785
|
+
color: var(--text-dim);
|
|
786
|
+
font-style: italic;
|
|
787
|
+
text-align: center;
|
|
788
|
+
padding: 40px;
|
|
789
|
+
}
|
|
790
|
+
</style>
|
|
791
|
+
</head>
|
|
792
|
+
<body>
|
|
793
|
+
<!-- File Preview Modal -->
|
|
794
|
+
<div class="modal-overlay" id="fileModal">
|
|
795
|
+
<div class="modal-content">
|
|
796
|
+
<div class="modal-header">
|
|
797
|
+
<span class="modal-title" id="modalTitle">filename.md</span>
|
|
798
|
+
<button class="modal-close" id="modalClose">×</button>
|
|
799
|
+
</div>
|
|
800
|
+
<div class="modal-body">
|
|
801
|
+
<pre id="modalCode"></pre>
|
|
802
|
+
</div>
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
805
|
+
|
|
806
|
+
<div class="container">
|
|
807
|
+
<div class="progress-container" id="progress"></div>
|
|
808
|
+
|
|
809
|
+
<div class="slides-container">
|
|
810
|
+
<!-- Slide 0: What Got Installed -->
|
|
811
|
+
<div class="slide active" data-slide="0">
|
|
812
|
+
<div class="slide-number">01 / Overview</div>
|
|
813
|
+
<h1>✨ Autoconfig Complete</h1>
|
|
814
|
+
<h2 class="typewriter" data-text="Here's what got installed. Hover over any file or folder to learn what it does."></h2>
|
|
815
|
+
<div class="slide-content">
|
|
816
|
+
<div class="tree-panel">
|
|
817
|
+
<div class="tree-side">
|
|
818
|
+
<div class="tree-item folder-row" data-info="root" data-folder="root">
|
|
819
|
+
<span class="tree-chevron">›</span>
|
|
820
|
+
<span class="tree-folder-icon">📁</span>
|
|
821
|
+
<span class="folder">your-project</span>
|
|
822
|
+
</div>
|
|
823
|
+
<div class="tree-item indent-1 folder-row collapsed" data-info="claude-dir" data-folder="claude-dir" data-parent="root">
|
|
824
|
+
<span class="tree-chevron">›</span>
|
|
825
|
+
<span class="tree-folder-icon">📁</span>
|
|
826
|
+
<span class="folder">.claude</span>
|
|
827
|
+
</div>
|
|
828
|
+
<div class="tree-item indent-2 folder-row hidden collapsed" data-info="agents" data-folder="agents" data-parent="claude-dir">
|
|
829
|
+
<span class="tree-chevron">›</span>
|
|
830
|
+
<span class="tree-folder-icon">📁</span>
|
|
831
|
+
<span class="folder">agents</span>
|
|
832
|
+
</div>
|
|
833
|
+
<div class="tree-item indent-3 hidden" data-info="create-retro-item" data-parent="agents">
|
|
834
|
+
<span class="tree-spacer"></span>
|
|
835
|
+
<span class="tree-file-icon">📄</span>
|
|
836
|
+
<span class="file">create-retro-item.md</span>
|
|
837
|
+
</div>
|
|
838
|
+
<div class="tree-item indent-3 hidden" data-info="docs-refresh-agent" data-parent="agents">
|
|
839
|
+
<span class="tree-spacer"></span>
|
|
840
|
+
<span class="tree-file-icon">📄</span>
|
|
841
|
+
<span class="file">docs-refresh.md</span>
|
|
842
|
+
</div>
|
|
843
|
+
<div class="tree-item indent-2 folder-row hidden collapsed" data-info="commands" data-folder="commands" data-parent="claude-dir">
|
|
844
|
+
<span class="tree-chevron">›</span>
|
|
845
|
+
<span class="tree-folder-icon">📁</span>
|
|
846
|
+
<span class="folder">commands</span>
|
|
847
|
+
</div>
|
|
848
|
+
<div class="tree-item indent-3 hidden" data-info="autoconfig" data-parent="commands">
|
|
849
|
+
<span class="tree-spacer"></span>
|
|
850
|
+
<span class="tree-file-icon">📄</span>
|
|
851
|
+
<span class="file">autoconfig.md</span>
|
|
852
|
+
</div>
|
|
853
|
+
<div class="tree-item indent-3 hidden" data-info="commit-and-push" data-parent="commands">
|
|
854
|
+
<span class="tree-spacer"></span>
|
|
855
|
+
<span class="tree-file-icon">📄</span>
|
|
856
|
+
<span class="file">commit-and-push.md</span>
|
|
857
|
+
</div>
|
|
858
|
+
<div class="tree-item indent-3 hidden" data-info="enable-retro" data-parent="commands">
|
|
859
|
+
<span class="tree-spacer"></span>
|
|
860
|
+
<span class="tree-file-icon">📄</span>
|
|
861
|
+
<span class="file">enable-retro.md</span>
|
|
862
|
+
</div>
|
|
863
|
+
<div class="tree-item indent-3 hidden" data-info="docs-cmd" data-parent="commands">
|
|
864
|
+
<span class="tree-spacer"></span>
|
|
865
|
+
<span class="tree-file-icon">📄</span>
|
|
866
|
+
<span class="file">show-docs.md</span>
|
|
867
|
+
</div>
|
|
868
|
+
<div class="tree-item indent-3 hidden" data-info="sync-claude-md" data-parent="commands">
|
|
869
|
+
<span class="tree-spacer"></span>
|
|
870
|
+
<span class="tree-file-icon">📄</span>
|
|
871
|
+
<span class="file">sync-claude-md.md</span>
|
|
872
|
+
</div>
|
|
873
|
+
<div class="tree-item indent-3 hidden" data-info="test" data-parent="commands">
|
|
874
|
+
<span class="tree-spacer"></span>
|
|
875
|
+
<span class="tree-file-icon">📄</span>
|
|
876
|
+
<span class="file">test.md</span>
|
|
877
|
+
</div>
|
|
878
|
+
<div class="tree-item indent-2 folder-row hidden collapsed" data-info="feedback" data-folder="feedback" data-parent="claude-dir">
|
|
879
|
+
<span class="tree-chevron">›</span>
|
|
880
|
+
<span class="tree-folder-icon">📁</span>
|
|
881
|
+
<span class="folder">feedback</span>
|
|
882
|
+
</div>
|
|
883
|
+
<div class="tree-item indent-3 hidden" data-info="feedback-template" data-parent="feedback">
|
|
884
|
+
<span class="tree-spacer"></span>
|
|
885
|
+
<span class="tree-file-icon">📄</span>
|
|
886
|
+
<span class="file">FEEDBACK.md</span>
|
|
887
|
+
</div>
|
|
888
|
+
<div class="tree-item indent-2 folder-row hidden collapsed" data-info="docs" data-folder="docs-folder" data-parent="claude-dir">
|
|
889
|
+
<span class="tree-chevron">›</span>
|
|
890
|
+
<span class="tree-folder-icon">📁</span>
|
|
891
|
+
<span class="folder">docs</span>
|
|
892
|
+
</div>
|
|
893
|
+
<div class="tree-item indent-3 hidden" data-info="docs" data-parent="docs-folder">
|
|
894
|
+
<span class="tree-spacer"></span>
|
|
895
|
+
<span class="tree-file-icon">🌐</span>
|
|
896
|
+
<span class="file">autoconfig.docs.html</span>
|
|
897
|
+
</div>
|
|
898
|
+
<div class="tree-item indent-2 hidden" data-info="rules" data-parent="claude-dir">
|
|
899
|
+
<span class="tree-spacer"></span>
|
|
900
|
+
<span class="tree-folder-icon">📁</span>
|
|
901
|
+
<span class="folder">rules</span>
|
|
902
|
+
</div>
|
|
903
|
+
<div class="tree-item indent-2 hidden" data-info="mcp" data-parent="claude-dir">
|
|
904
|
+
<span class="tree-spacer"></span>
|
|
905
|
+
<span class="tree-file-icon">🔌</span>
|
|
906
|
+
<span class="file">.mcp.json</span>
|
|
907
|
+
</div>
|
|
908
|
+
<div class="tree-item indent-2 hidden" data-info="settings" data-parent="claude-dir">
|
|
909
|
+
<span class="tree-spacer"></span>
|
|
910
|
+
<span class="tree-file-icon">⚙️</span>
|
|
911
|
+
<span class="file">settings.json</span>
|
|
912
|
+
</div>
|
|
913
|
+
<div class="tree-item indent-1" data-info="claude-md" data-parent="root">
|
|
914
|
+
<span class="tree-spacer"></span>
|
|
915
|
+
<span class="tree-file-icon">📄</span>
|
|
916
|
+
<span class="file">CLAUDE.md</span>
|
|
917
|
+
</div>
|
|
918
|
+
</div>
|
|
919
|
+
<div class="info-side">
|
|
920
|
+
<div class="info-panel" id="infoPanel">
|
|
921
|
+
<div class="info-panel-title">Select a file</div>
|
|
922
|
+
<div class="info-panel-desc">Hover over any item in the tree to see what it does.</div>
|
|
923
|
+
</div>
|
|
924
|
+
</div>
|
|
925
|
+
</div>
|
|
926
|
+
</div>
|
|
927
|
+
</div>
|
|
928
|
+
|
|
929
|
+
<!-- Slide 1: Finale -->
|
|
930
|
+
<div class="slide" data-slide="1">
|
|
931
|
+
<div class="slide-number">02 / You're Ready</div>
|
|
932
|
+
<h1>That's It</h1>
|
|
933
|
+
<h2 class="typewriter" data-text="You've got the autoconfig. Now go build something."></h2>
|
|
934
|
+
<div class="slide-content">
|
|
935
|
+
<div class="final-links">
|
|
936
|
+
<a href="https://github.com/design-and-deliver/claude-code-autoconfig" class="final-link" target="_blank">
|
|
937
|
+
⭐ Star on GitHub
|
|
938
|
+
</a>
|
|
939
|
+
<a href="https://docs.anthropic.com/en/docs/claude-code/overview" class="final-link" target="_blank">
|
|
940
|
+
📚 Claude Code Docs
|
|
941
|
+
</a>
|
|
942
|
+
</div>
|
|
943
|
+
</div>
|
|
944
|
+
</div>
|
|
945
|
+
</div>
|
|
946
|
+
|
|
947
|
+
<div class="nav-container">
|
|
948
|
+
<button class="nav-btn prev" id="prevBtn">
|
|
949
|
+
Back
|
|
950
|
+
</button>
|
|
951
|
+
<button class="nav-btn next" id="nextBtn">
|
|
952
|
+
Next
|
|
953
|
+
</button>
|
|
954
|
+
</div>
|
|
955
|
+
</div>
|
|
956
|
+
|
|
957
|
+
<script>
|
|
958
|
+
const slides = document.querySelectorAll('.slide');
|
|
959
|
+
const progressContainer = document.getElementById('progress');
|
|
960
|
+
const prevBtn = document.getElementById('prevBtn');
|
|
961
|
+
const nextBtn = document.getElementById('nextBtn');
|
|
962
|
+
let currentSlide = 0;
|
|
963
|
+
|
|
964
|
+
// Create progress dots
|
|
965
|
+
slides.forEach((_, i) => {
|
|
966
|
+
const dot = document.createElement('div');
|
|
967
|
+
dot.className = 'progress-dot' + (i === 0 ? ' active' : '');
|
|
968
|
+
dot.addEventListener('click', () => goToSlide(i));
|
|
969
|
+
progressContainer.appendChild(dot);
|
|
970
|
+
});
|
|
971
|
+
|
|
972
|
+
function updateProgress() {
|
|
973
|
+
document.querySelectorAll('.progress-dot').forEach((dot, i) => {
|
|
974
|
+
dot.classList.remove('active');
|
|
975
|
+
if (i === currentSlide) dot.classList.add('active');
|
|
976
|
+
});
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
function goToSlide(index) {
|
|
980
|
+
if (index < 0 || index >= slides.length) return;
|
|
981
|
+
|
|
982
|
+
const direction = index > currentSlide ? 1 : -1;
|
|
983
|
+
|
|
984
|
+
slides[currentSlide].classList.remove('active');
|
|
985
|
+
if (direction > 0) {
|
|
986
|
+
slides[currentSlide].classList.add('exit');
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
currentSlide = index;
|
|
990
|
+
|
|
991
|
+
slides.forEach(s => s.classList.remove('exit'));
|
|
992
|
+
slides[currentSlide].classList.add('active');
|
|
993
|
+
|
|
994
|
+
updateProgress();
|
|
995
|
+
updateButtons();
|
|
996
|
+
checkTypewriter();
|
|
997
|
+
|
|
998
|
+
// Select CLAUDE.md by default when entering slide 0 (tree view)
|
|
999
|
+
if (currentSlide === 0) {
|
|
1000
|
+
setTimeout(() => selectTreeItemByKey('claude-md'), 100);
|
|
1001
|
+
}
|
|
1002
|
+
}
|
|
1003
|
+
|
|
1004
|
+
function updateButtons() {
|
|
1005
|
+
// Hide back button on first slide, show on others
|
|
1006
|
+
prevBtn.style.visibility = currentSlide === 0 ? 'hidden' : 'visible';
|
|
1007
|
+
|
|
1008
|
+
if (currentSlide === slides.length - 1) {
|
|
1009
|
+
nextBtn.textContent = 'Done';
|
|
1010
|
+
} else {
|
|
1011
|
+
nextBtn.textContent = 'Next';
|
|
1012
|
+
}
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
prevBtn.addEventListener('click', () => {
|
|
1016
|
+
if (currentSlide > 0) {
|
|
1017
|
+
goToSlide(currentSlide - 1);
|
|
1018
|
+
}
|
|
1019
|
+
});
|
|
1020
|
+
|
|
1021
|
+
nextBtn.addEventListener('click', () => {
|
|
1022
|
+
if (currentSlide < slides.length - 1) {
|
|
1023
|
+
goToSlide(currentSlide + 1);
|
|
1024
|
+
} else {
|
|
1025
|
+
window.close();
|
|
1026
|
+
}
|
|
1027
|
+
});
|
|
1028
|
+
|
|
1029
|
+
// Select CLAUDE.md on initial page load
|
|
1030
|
+
setTimeout(() => selectTreeItemByKey('claude-md'), 300);
|
|
1031
|
+
|
|
1032
|
+
// Keyboard navigation for slides
|
|
1033
|
+
document.addEventListener('keydown', (e) => {
|
|
1034
|
+
// On slide 0, arrow keys control tree - use spacebar for next slide
|
|
1035
|
+
if (currentSlide === 0) {
|
|
1036
|
+
if (e.key === ' ') {
|
|
1037
|
+
e.preventDefault();
|
|
1038
|
+
if (currentSlide < slides.length - 1) {
|
|
1039
|
+
goToSlide(currentSlide + 1);
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
1042
|
+
return; // Let tree keyboard handler deal with arrows
|
|
1043
|
+
}
|
|
1044
|
+
|
|
1045
|
+
// Space bar for next slide (but not on slide 0 with tree)
|
|
1046
|
+
if (e.key === ' ' && currentSlide !== 0) {
|
|
1047
|
+
e.preventDefault();
|
|
1048
|
+
if (currentSlide < slides.length - 1) {
|
|
1049
|
+
goToSlide(currentSlide + 1);
|
|
1050
|
+
}
|
|
1051
|
+
}
|
|
1052
|
+
});
|
|
1053
|
+
|
|
1054
|
+
updateButtons();
|
|
1055
|
+
|
|
1056
|
+
// Auto-focus for keyboard navigation
|
|
1057
|
+
document.body.setAttribute('tabindex', '0');
|
|
1058
|
+
document.body.focus();
|
|
1059
|
+
|
|
1060
|
+
// Detect project name from file path
|
|
1061
|
+
function getProjectName() {
|
|
1062
|
+
try {
|
|
1063
|
+
const path = window.location.pathname;
|
|
1064
|
+
const parts = path.split('/').filter(p => p && !p.includes(':'));
|
|
1065
|
+
const claudeIndex = parts.indexOf('.claude');
|
|
1066
|
+
if (claudeIndex > 0) {
|
|
1067
|
+
return parts[claudeIndex - 1];
|
|
1068
|
+
}
|
|
1069
|
+
if (parts.length >= 3) {
|
|
1070
|
+
return parts[parts.length - 3];
|
|
1071
|
+
}
|
|
1072
|
+
} catch (e) {}
|
|
1073
|
+
return 'your-project';
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
const projectName = getProjectName();
|
|
1077
|
+
|
|
1078
|
+
// Update tree root with actual project name
|
|
1079
|
+
const rootItem = document.querySelector('[data-info="root"]');
|
|
1080
|
+
if (rootItem) {
|
|
1081
|
+
rootItem.querySelector('.folder').textContent = projectName + '/';
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
// Calculate tree side width dynamically
|
|
1085
|
+
function setTreeWidth() {
|
|
1086
|
+
const treeSide = document.querySelector('.tree-side');
|
|
1087
|
+
const treeItems = document.querySelectorAll('.tree-item');
|
|
1088
|
+
if (!treeSide || !treeItems.length) return;
|
|
1089
|
+
|
|
1090
|
+
const hiddenItems = [];
|
|
1091
|
+
treeItems.forEach(item => {
|
|
1092
|
+
if (item.classList.contains('hidden')) {
|
|
1093
|
+
hiddenItems.push(item);
|
|
1094
|
+
item.style.visibility = 'hidden';
|
|
1095
|
+
item.style.position = 'absolute';
|
|
1096
|
+
item.classList.remove('hidden');
|
|
1097
|
+
}
|
|
1098
|
+
});
|
|
1099
|
+
|
|
1100
|
+
let maxWidth = 0;
|
|
1101
|
+
treeItems.forEach(item => {
|
|
1102
|
+
const width = item.scrollWidth;
|
|
1103
|
+
if (width > maxWidth) maxWidth = width;
|
|
1104
|
+
});
|
|
1105
|
+
|
|
1106
|
+
hiddenItems.forEach(item => {
|
|
1107
|
+
item.classList.add('hidden');
|
|
1108
|
+
item.style.visibility = '';
|
|
1109
|
+
item.style.position = '';
|
|
1110
|
+
});
|
|
1111
|
+
|
|
1112
|
+
treeSide.style.width = (maxWidth + 32) + 'px';
|
|
1113
|
+
treeSide.style.padding = '16px 8px';
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
if (document.fonts && document.fonts.ready) {
|
|
1117
|
+
document.fonts.ready.then(setTreeWidth);
|
|
1118
|
+
} else {
|
|
1119
|
+
setTimeout(setTreeWidth, 100);
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
// Typewriter effect
|
|
1123
|
+
function typeWriter(element) {
|
|
1124
|
+
const text = element.dataset.text;
|
|
1125
|
+
if (!text) return;
|
|
1126
|
+
|
|
1127
|
+
element.textContent = '';
|
|
1128
|
+
element.classList.add('typing');
|
|
1129
|
+
element.classList.remove('done');
|
|
1130
|
+
|
|
1131
|
+
let i = 0;
|
|
1132
|
+
const speed = 30;
|
|
1133
|
+
|
|
1134
|
+
function type() {
|
|
1135
|
+
if (i < text.length) {
|
|
1136
|
+
element.textContent += text.charAt(i);
|
|
1137
|
+
i++;
|
|
1138
|
+
setTimeout(type, speed);
|
|
1139
|
+
} else {
|
|
1140
|
+
element.classList.remove('typing');
|
|
1141
|
+
element.classList.add('done');
|
|
1142
|
+
}
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
setTimeout(type, 300);
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
function checkTypewriter() {
|
|
1149
|
+
const activeSlide = slides[currentSlide];
|
|
1150
|
+
const typewriterEl = activeSlide.querySelector('.typewriter');
|
|
1151
|
+
if (typewriterEl) {
|
|
1152
|
+
typeWriter(typewriterEl);
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
setTimeout(checkTypewriter, 100);
|
|
1157
|
+
|
|
1158
|
+
// Tree panel info data - UPDATED
|
|
1159
|
+
const treeInfo = {
|
|
1160
|
+
'root': {
|
|
1161
|
+
title: projectName,
|
|
1162
|
+
desc: 'The autoconfig adds CLAUDE.md at your project root and configuration files inside a .claude/ directory. Nothing else is touched.'
|
|
1163
|
+
},
|
|
1164
|
+
'claude-md': {
|
|
1165
|
+
title: 'CLAUDE.md',
|
|
1166
|
+
desc: 'The entry point — Claude reads this at the start of every session. Contains project context populated by autoconfig to optimize how Claude processes requests.<br><br><span style="color: var(--accent-orange);">⚠️ Managed by Claude — do not edit manually.</span>',
|
|
1167
|
+
trigger: 'Loaded automatically at session start'
|
|
1168
|
+
},
|
|
1169
|
+
'claude-dir': {
|
|
1170
|
+
title: '.claude/ Directory',
|
|
1171
|
+
desc: 'Commands, rules, settings, and these docs. Keeps configuration organized as your project grows.'
|
|
1172
|
+
},
|
|
1173
|
+
'settings': {
|
|
1174
|
+
title: 'settings.json',
|
|
1175
|
+
desc: 'Permissions, security, and hooks. Controls which commands Claude can run and which files it can access.',
|
|
1176
|
+
trigger: 'Claude Code loads this automatically at the start of every session'
|
|
1177
|
+
},
|
|
1178
|
+
'mcp': {
|
|
1179
|
+
title: '.mcp.json',
|
|
1180
|
+
desc: 'MCP (Model Context Protocol) server configuration. Add your MCP server configs here when you\'re ready.<br><br>See <a href="https://docs.anthropic.com/en/docs/claude-code/mcp" target="_blank" style="color: var(--accent-cyan);">MCP documentation</a> for setup instructions.'
|
|
1181
|
+
},
|
|
1182
|
+
'agents': {
|
|
1183
|
+
title: 'agents/',
|
|
1184
|
+
desc: 'Custom agent definitions for specialized tasks. Agents are autonomous workers that can be spawned to handle complex operations independently.'
|
|
1185
|
+
},
|
|
1186
|
+
'create-retro-item': {
|
|
1187
|
+
title: 'create-retro-item.md',
|
|
1188
|
+
desc: '(Experimental) Agent that creates structured retro items for tech debt tracking. Used by the /enable-retro feature.'
|
|
1189
|
+
},
|
|
1190
|
+
'docs-refresh-agent': {
|
|
1191
|
+
title: 'docs-refresh.md',
|
|
1192
|
+
desc: 'Agent that refreshes and updates the interactive docs after configuration changes.'
|
|
1193
|
+
},
|
|
1194
|
+
'commands': {
|
|
1195
|
+
title: 'commands/',
|
|
1196
|
+
desc: 'On-demand workflows you trigger with <code>/name</code>. Each .md file becomes a <a href="https://docs.anthropic.com/en/docs/claude-code/slash-commands" target="_blank" style="color: var(--accent-cyan);">slash command</a>.'
|
|
1197
|
+
},
|
|
1198
|
+
'enable-retro': {
|
|
1199
|
+
title: 'enable-retro.md',
|
|
1200
|
+
desc: '(Experimental) Enables tech debt tracking. Creates <code>.claude/retro/</code> directory and configures Claude to log improvement opportunities as structured story files.',
|
|
1201
|
+
trigger: '/enable-retro'
|
|
1202
|
+
},
|
|
1203
|
+
'feedback': {
|
|
1204
|
+
title: 'feedback/',
|
|
1205
|
+
desc: 'Team-maintained corrections and guidance for Claude. Add notes here when Claude does something wrong — it learns for next time. This directory persists across <code>/autoconfig</code> runs.'
|
|
1206
|
+
},
|
|
1207
|
+
'feedback-template': {
|
|
1208
|
+
title: 'FEEDBACK.md',
|
|
1209
|
+
desc: 'Starter template for team feedback. Add dated entries when Claude makes mistakes — include what went wrong and the correct approach. Claude reads this on every session.'
|
|
1210
|
+
},
|
|
1211
|
+
'autoconfig': {
|
|
1212
|
+
title: 'autoconfig.md',
|
|
1213
|
+
desc: 'The command you just ran. Analyzes your project and populates CLAUDE.md with real context. Re-run anytime your stack changes.',
|
|
1214
|
+
trigger: '/autoconfig'
|
|
1215
|
+
},
|
|
1216
|
+
'sync-claude-md': {
|
|
1217
|
+
title: 'sync-claude-md.md',
|
|
1218
|
+
desc: 'Re-analyzes your project and updates CLAUDE.md to reflect current state. Run when your stack changes significantly.',
|
|
1219
|
+
trigger: '/sync-claude-md'
|
|
1220
|
+
},
|
|
1221
|
+
'docs-cmd': {
|
|
1222
|
+
title: 'show-docs.md',
|
|
1223
|
+
desc: 'Opens this interactive docs in your browser. Auto-syncs any changed files before opening.',
|
|
1224
|
+
trigger: '/show-docs'
|
|
1225
|
+
},
|
|
1226
|
+
'test': {
|
|
1227
|
+
title: 'test.md',
|
|
1228
|
+
desc: 'Runs your test suite. Auto-detects Jest, Vitest, Pytest, Go, RSpec, or falls back to npm test.',
|
|
1229
|
+
trigger: '/test'
|
|
1230
|
+
},
|
|
1231
|
+
'commit-and-push': {
|
|
1232
|
+
title: 'commit-and-push.md',
|
|
1233
|
+
desc: 'Stages all changes, generates a conventional commit message from the diff, commits, and pushes. One command, full workflow.',
|
|
1234
|
+
trigger: '/commit-and-push'
|
|
1235
|
+
},
|
|
1236
|
+
'rules': {
|
|
1237
|
+
title: 'rules/',
|
|
1238
|
+
desc: 'Path-scoped context that loads when Claude works on matching files. Optimized rules are based on your project\'s needs, patterns and practices.<br><br><div style="background: var(--bg-elevated); border: 1px solid var(--accent-cyan); border-radius: 8px; padding: 16px; margin-top: 8px;"><strong style="color: var(--accent-orange);">Want optimized rules for your project?</strong><br>Reach out: <a href="mailto:info@adac1001.com" style="color: var(--accent-cyan);">info@adac1001.com</a></div>'
|
|
1239
|
+
},
|
|
1240
|
+
'docs': {
|
|
1241
|
+
title: 'docs/autoconfig.docs.html',
|
|
1242
|
+
desc: 'This interactive docs. Open it anytime to review what each file does.',
|
|
1243
|
+
trigger: '/show-docs'
|
|
1244
|
+
}
|
|
1245
|
+
};
|
|
1246
|
+
|
|
1247
|
+
// Tree panel hover handling
|
|
1248
|
+
const infoPanel = document.getElementById('infoPanel');
|
|
1249
|
+
const treeItems = document.querySelectorAll('.tree-item');
|
|
1250
|
+
|
|
1251
|
+
let selectedInfoKey = 'claude-md'; // Default selection
|
|
1252
|
+
|
|
1253
|
+
function showInfo(key) {
|
|
1254
|
+
const info = treeInfo[key];
|
|
1255
|
+
if (info) {
|
|
1256
|
+
let html = `<div class="info-panel-title">${info.title}</div>`;
|
|
1257
|
+
html += `<div class="info-panel-desc">${info.desc}</div>`;
|
|
1258
|
+
if (info.trigger) {
|
|
1259
|
+
html += `<div class="info-panel-trigger">${info.trigger}</div>`;
|
|
1260
|
+
}
|
|
1261
|
+
infoPanel.innerHTML = html;
|
|
1262
|
+
}
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1265
|
+
treeItems.forEach((item, idx) => {
|
|
1266
|
+
// Hover updates info panel only (preview)
|
|
1267
|
+
item.addEventListener('mouseenter', () => {
|
|
1268
|
+
const key = item.dataset.info;
|
|
1269
|
+
showInfo(key);
|
|
1270
|
+
});
|
|
1271
|
+
|
|
1272
|
+
// Mouseleave restores selected item's info
|
|
1273
|
+
item.addEventListener('mouseleave', () => {
|
|
1274
|
+
showInfo(selectedInfoKey);
|
|
1275
|
+
});
|
|
1276
|
+
|
|
1277
|
+
// Click sets active selection
|
|
1278
|
+
item.addEventListener('click', (e) => {
|
|
1279
|
+
// Don't select if clicking on a folder chevron (let toggle handle it)
|
|
1280
|
+
if (e.target.classList.contains('tree-chevron')) return;
|
|
1281
|
+
|
|
1282
|
+
treeItems.forEach(i => i.classList.remove('active'));
|
|
1283
|
+
item.classList.add('active');
|
|
1284
|
+
|
|
1285
|
+
// Update selected info key
|
|
1286
|
+
selectedInfoKey = item.dataset.info;
|
|
1287
|
+
showInfo(selectedInfoKey);
|
|
1288
|
+
|
|
1289
|
+
// Sync selectedTreeIndex with visible items
|
|
1290
|
+
const visibleItems = Array.from(document.querySelectorAll('.tree-item:not(.hidden)'));
|
|
1291
|
+
selectedTreeIndex = visibleItems.indexOf(item);
|
|
1292
|
+
});
|
|
1293
|
+
});
|
|
1294
|
+
|
|
1295
|
+
// Folder collapse/expand handling
|
|
1296
|
+
function toggleFolder(folderId, collapsed) {
|
|
1297
|
+
const children = document.querySelectorAll(`[data-parent="${folderId}"]`);
|
|
1298
|
+
children.forEach(child => {
|
|
1299
|
+
if (collapsed) {
|
|
1300
|
+
child.classList.add('hidden');
|
|
1301
|
+
} else {
|
|
1302
|
+
child.classList.remove('hidden');
|
|
1303
|
+
if (child.dataset.folder && !child.classList.contains('collapsed')) {
|
|
1304
|
+
toggleFolder(child.dataset.folder, false);
|
|
1305
|
+
}
|
|
1306
|
+
}
|
|
1307
|
+
if (collapsed && child.dataset.folder) {
|
|
1308
|
+
toggleFolder(child.dataset.folder, true);
|
|
1309
|
+
}
|
|
1310
|
+
});
|
|
1311
|
+
}
|
|
1312
|
+
|
|
1313
|
+
document.querySelectorAll('.folder-row').forEach(folder => {
|
|
1314
|
+
folder.addEventListener('click', (e) => {
|
|
1315
|
+
const folderId = folder.dataset.folder;
|
|
1316
|
+
const isCollapsed = folder.classList.toggle('collapsed');
|
|
1317
|
+
toggleFolder(folderId, isCollapsed);
|
|
1318
|
+
});
|
|
1319
|
+
});
|
|
1320
|
+
|
|
1321
|
+
// Tree keyboard navigation
|
|
1322
|
+
let selectedTreeIndex = -1;
|
|
1323
|
+
|
|
1324
|
+
function getVisibleTreeItems() {
|
|
1325
|
+
return Array.from(document.querySelectorAll('.tree-item:not(.hidden)'));
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
function selectTreeItemByKey(key) {
|
|
1329
|
+
const item = document.querySelector(`.tree-item[data-info="${key}"]`);
|
|
1330
|
+
if (!item) return;
|
|
1331
|
+
|
|
1332
|
+
treeItems.forEach(i => i.classList.remove('active'));
|
|
1333
|
+
item.classList.add('active');
|
|
1334
|
+
|
|
1335
|
+
selectedInfoKey = key;
|
|
1336
|
+
showInfo(selectedInfoKey);
|
|
1337
|
+
|
|
1338
|
+
// Update selectedTreeIndex
|
|
1339
|
+
const visibleItems = getVisibleTreeItems();
|
|
1340
|
+
selectedTreeIndex = visibleItems.indexOf(item);
|
|
1341
|
+
}
|
|
1342
|
+
|
|
1343
|
+
function selectTreeItem(index) {
|
|
1344
|
+
const items = getVisibleTreeItems();
|
|
1345
|
+
if (index < 0 || index >= items.length) return;
|
|
1346
|
+
|
|
1347
|
+
treeItems.forEach(i => i.classList.remove('active'));
|
|
1348
|
+
|
|
1349
|
+
selectedTreeIndex = index;
|
|
1350
|
+
const item = items[index];
|
|
1351
|
+
item.classList.add('active');
|
|
1352
|
+
|
|
1353
|
+
item.scrollIntoView({ block: 'nearest' });
|
|
1354
|
+
|
|
1355
|
+
selectedInfoKey = item.dataset.info;
|
|
1356
|
+
showInfo(selectedInfoKey);
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
document.addEventListener('keydown', (e) => {
|
|
1360
|
+
if (currentSlide !== 0) return;
|
|
1361
|
+
|
|
1362
|
+
const items = getVisibleTreeItems();
|
|
1363
|
+
if (items.length === 0) return;
|
|
1364
|
+
|
|
1365
|
+
if (selectedTreeIndex === -1) {
|
|
1366
|
+
selectTreeItem(0);
|
|
1367
|
+
if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
|
|
1368
|
+
e.preventDefault();
|
|
1369
|
+
}
|
|
1370
|
+
return;
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1373
|
+
if (e.key === 'ArrowDown') {
|
|
1374
|
+
e.preventDefault();
|
|
1375
|
+
if (selectedTreeIndex < items.length - 1) {
|
|
1376
|
+
selectTreeItem(selectedTreeIndex + 1);
|
|
1377
|
+
}
|
|
1378
|
+
} else if (e.key === 'ArrowUp') {
|
|
1379
|
+
e.preventDefault();
|
|
1380
|
+
if (selectedTreeIndex > 0) {
|
|
1381
|
+
selectTreeItem(selectedTreeIndex - 1);
|
|
1382
|
+
}
|
|
1383
|
+
} else if (e.key === 'ArrowRight') {
|
|
1384
|
+
e.preventDefault();
|
|
1385
|
+
const item = items[selectedTreeIndex];
|
|
1386
|
+
if (item && item.classList.contains('folder-row')) {
|
|
1387
|
+
if (item.classList.contains('collapsed')) {
|
|
1388
|
+
item.classList.remove('collapsed');
|
|
1389
|
+
toggleFolder(item.dataset.folder, false);
|
|
1390
|
+
}
|
|
1391
|
+
}
|
|
1392
|
+
} else if (e.key === 'ArrowLeft') {
|
|
1393
|
+
e.preventDefault();
|
|
1394
|
+
const item = items[selectedTreeIndex];
|
|
1395
|
+
if (item && item.classList.contains('folder-row')) {
|
|
1396
|
+
if (!item.classList.contains('collapsed')) {
|
|
1397
|
+
item.classList.add('collapsed');
|
|
1398
|
+
toggleFolder(item.dataset.folder, true);
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1401
|
+
} else if (e.key === 'Enter') {
|
|
1402
|
+
e.preventDefault();
|
|
1403
|
+
const item = items[selectedTreeIndex];
|
|
1404
|
+
if (item && item.classList.contains('folder-row')) {
|
|
1405
|
+
const isCollapsed = item.classList.toggle('collapsed');
|
|
1406
|
+
toggleFolder(item.dataset.folder, isCollapsed);
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
});
|
|
1410
|
+
|
|
1411
|
+
// File Preview Modal
|
|
1412
|
+
const fileContents = {
|
|
1413
|
+
'claude-md': {
|
|
1414
|
+
filename: 'CLAUDE.md',
|
|
1415
|
+
content: `# Project Name
|
|
1416
|
+
|
|
1417
|
+
> Run \`/autoconfig\` to populate this based on your project.`
|
|
1418
|
+
},
|
|
1419
|
+
'settings': {
|
|
1420
|
+
filename: 'settings.json',
|
|
1421
|
+
content: `{
|
|
1422
|
+
"permissions": {
|
|
1423
|
+
"allow": [
|
|
1424
|
+
"Read(./**)",
|
|
1425
|
+
"Edit(./**)",
|
|
1426
|
+
"Write(./**)",
|
|
1427
|
+
"Bash(npm run dev)",
|
|
1428
|
+
"Bash(npm run build)",
|
|
1429
|
+
"Bash(npm run test)",
|
|
1430
|
+
"Bash(git status)",
|
|
1431
|
+
"Bash(git diff:*)",
|
|
1432
|
+
"Bash(git add:*)",
|
|
1433
|
+
"Bash(git commit:*)",
|
|
1434
|
+
"Bash(git push:*)"
|
|
1435
|
+
],
|
|
1436
|
+
"deny": [
|
|
1437
|
+
"Read(./.env)",
|
|
1438
|
+
"Read(./.env.*)",
|
|
1439
|
+
"Read(./secrets/**)"
|
|
1440
|
+
]
|
|
1441
|
+
},
|
|
1442
|
+
"hooks": {
|
|
1443
|
+
"PostToolUse": [{
|
|
1444
|
+
"matcher": "Edit|Write",
|
|
1445
|
+
"hooks": [{
|
|
1446
|
+
"type": "command",
|
|
1447
|
+
"command": "// Auto-refresh docs when .claude/ changes"
|
|
1448
|
+
}]
|
|
1449
|
+
}]
|
|
1450
|
+
}
|
|
1451
|
+
}`
|
|
1452
|
+
},
|
|
1453
|
+
'mcp': {
|
|
1454
|
+
filename: '.mcp.json',
|
|
1455
|
+
content: `{
|
|
1456
|
+
"mcpServers": {}
|
|
1457
|
+
}
|
|
1458
|
+
|
|
1459
|
+
// Add your MCP server configs here when you're ready.
|
|
1460
|
+
// See: https://docs.anthropic.com/en/docs/claude-code/mcp`
|
|
1461
|
+
},
|
|
1462
|
+
'create-retro-item': {
|
|
1463
|
+
filename: 'create-retro-item.md',
|
|
1464
|
+
content: `# Create Retro Item Agent
|
|
1465
|
+
|
|
1466
|
+
Create a fully-scoped story file in \`.claude/retro/\` when tech debt or improvement opportunities are identified.
|
|
1467
|
+
|
|
1468
|
+
## When to Trigger
|
|
1469
|
+
|
|
1470
|
+
Call this agent when you notice:
|
|
1471
|
+
- Tech debt that should be addressed later
|
|
1472
|
+
- Code that works but could be improved
|
|
1473
|
+
- Missing tests, documentation, or error handling
|
|
1474
|
+
- Architectural improvements worth tracking
|
|
1475
|
+
|
|
1476
|
+
## Input
|
|
1477
|
+
|
|
1478
|
+
Provide these details when calling:
|
|
1479
|
+
- **title**: Short descriptive name (used for filename)
|
|
1480
|
+
- **problem**: What's wrong or what friction was encountered
|
|
1481
|
+
- **criteria**: Specific, testable acceptance criteria
|
|
1482
|
+
- **approach**: How to fix it
|
|
1483
|
+
- **priority**: Critical | High | Medium | Low
|
|
1484
|
+
- **effort**: S | M | L | XL
|
|
1485
|
+
- **files**: List of files involved
|
|
1486
|
+
|
|
1487
|
+
## Behavior
|
|
1488
|
+
|
|
1489
|
+
1. Generate filename from title: \`kebab-case.md\`
|
|
1490
|
+
2. Create story file in \`.claude/retro/\` using the template format
|
|
1491
|
+
3. Confirm creation with filename
|
|
1492
|
+
|
|
1493
|
+
## Guidelines
|
|
1494
|
+
|
|
1495
|
+
- **Be concise**: Keep descriptions actionable, not verbose
|
|
1496
|
+
- **Be specific**: Include actual file paths and line numbers when relevant
|
|
1497
|
+
- **Don't duplicate**: Check if similar item already exists first
|
|
1498
|
+
- **Don't block**: Create the item and continue with the main task`
|
|
1499
|
+
},
|
|
1500
|
+
'docs-refresh-agent': {
|
|
1501
|
+
filename: 'docs-refresh.md',
|
|
1502
|
+
content: `# Guide Refresh Agent
|
|
1503
|
+
|
|
1504
|
+
Incrementally update the docs's treeInfo when \`.claude/\` files are added or modified.
|
|
1505
|
+
|
|
1506
|
+
## Trigger
|
|
1507
|
+
|
|
1508
|
+
- PostToolUse hook on Edit|Write to \`.claude/\`
|
|
1509
|
+
|
|
1510
|
+
## Scope
|
|
1511
|
+
|
|
1512
|
+
- Read \`.claude/**/*.md\` for \`@description\` comments
|
|
1513
|
+
- Update \`.claude/docs/autoconfig.docs.html\` treeInfo
|
|
1514
|
+
|
|
1515
|
+
## Behavior
|
|
1516
|
+
|
|
1517
|
+
1. Check which \`.claude/\` file was just modified
|
|
1518
|
+
2. Extract the \`<!-- @description ... -->\` comment from the top
|
|
1519
|
+
3. Find the corresponding entry in the docs's \`treeInfo\` object
|
|
1520
|
+
4. Update only that entry's \`desc\` field
|
|
1521
|
+
5. If file is new, add a new treeInfo entry
|
|
1522
|
+
6. If file was deleted, remove the treeInfo entry
|
|
1523
|
+
|
|
1524
|
+
## Guidelines
|
|
1525
|
+
|
|
1526
|
+
- **Be fast**: Only touch the affected entry
|
|
1527
|
+
- **Be minimal**: Don't reformat or reorganize unrelated code
|
|
1528
|
+
- **Be silent**: Run in background, no output unless error`
|
|
1529
|
+
},
|
|
1530
|
+
'autoconfig': {
|
|
1531
|
+
filename: 'autoconfig.md',
|
|
1532
|
+
content: `# Autoconfig
|
|
1533
|
+
|
|
1534
|
+
Analyze this project and configure Claude Code with real context.
|
|
1535
|
+
|
|
1536
|
+
## Step 1: Scan the Project
|
|
1537
|
+
|
|
1538
|
+
Look for these indicators to understand the project:
|
|
1539
|
+
|
|
1540
|
+
**Package/Config Files:**
|
|
1541
|
+
- \`package.json\` → Node.js, npm scripts, dependencies
|
|
1542
|
+
- \`requirements.txt\` / \`pyproject.toml\` / \`setup.py\` → Python
|
|
1543
|
+
- \`Cargo.toml\` → Rust
|
|
1544
|
+
- \`go.mod\` → Go
|
|
1545
|
+
- \`Gemfile\` → Ruby
|
|
1546
|
+
- \`pom.xml\` / \`build.gradle\` → Java
|
|
1547
|
+
- \`*.csproj\` / \`*.sln\` → .NET
|
|
1548
|
+
- \`composer.json\` → PHP
|
|
1549
|
+
|
|
1550
|
+
**Framework Indicators:**
|
|
1551
|
+
- \`next.config.*\` / \`app/\` directory → Next.js
|
|
1552
|
+
- \`vite.config.*\` → Vite
|
|
1553
|
+
- \`angular.json\` → Angular
|
|
1554
|
+
- \`svelte.config.*\` → Svelte
|
|
1555
|
+
- \`remix.config.*\` → Remix
|
|
1556
|
+
- \`nuxt.config.*\` → Nuxt
|
|
1557
|
+
- \`django\` in imports → Django
|
|
1558
|
+
- \`flask\` in imports → Flask
|
|
1559
|
+
- \`fastapi\` in imports → FastAPI
|
|
1560
|
+
- \`express\` in dependencies → Express
|
|
1561
|
+
- \`rails\` / \`Gemfile\` with rails → Rails
|
|
1562
|
+
- \`laravel\` → Laravel
|
|
1563
|
+
|
|
1564
|
+
**Testing Frameworks:**
|
|
1565
|
+
- \`jest.config.*\` / \`@jest\` in deps → Jest
|
|
1566
|
+
- \`vitest.config.*\` → Vitest
|
|
1567
|
+
- \`pytest.ini\` / \`conftest.py\` → Pytest
|
|
1568
|
+
- \`*_test.go\` files → Go testing
|
|
1569
|
+
- \`*_spec.rb\` files → RSpec
|
|
1570
|
+
- \`cypress/\` or \`playwright/\` → E2E testing
|
|
1571
|
+
|
|
1572
|
+
**Infrastructure:**
|
|
1573
|
+
- \`Dockerfile\` / \`docker-compose.*\` → Docker
|
|
1574
|
+
- \`*.tf\` files → Terraform
|
|
1575
|
+
- \`k8s/\` or \`kubernetes/\` → Kubernetes
|
|
1576
|
+
- \`.github/workflows/\` → GitHub Actions
|
|
1577
|
+
- \`serverless.yml\` → Serverless Framework
|
|
1578
|
+
|
|
1579
|
+
## Step 2: Populate CLAUDE.md
|
|
1580
|
+
|
|
1581
|
+
Focus on what Claude Code actually needs to work effectively. Claude can explore the codebase itself — don't document what it can discover.
|
|
1582
|
+
|
|
1583
|
+
**Always include:**
|
|
1584
|
+
- **Project name + one-liner**: What is this thing?
|
|
1585
|
+
- **Tech stack**: Runtime, framework, database, key services (so Claude uses correct patterns)
|
|
1586
|
+
- **Commands**: How to run, test, build, deploy — Claude needs these to execute tasks
|
|
1587
|
+
- **Non-obvious conventions**: Multi-schema databases, monorepo structure, unusual patterns Claude wouldn't infer
|
|
1588
|
+
|
|
1589
|
+
**Include if relevant:**
|
|
1590
|
+
- **Deployment flow**: If non-standard or involves multiple steps
|
|
1591
|
+
|
|
1592
|
+
**Skip these — Claude can discover them:**
|
|
1593
|
+
- Detailed project structure trees (Claude can run \`ls\` or \`tree\`)
|
|
1594
|
+
- Exhaustive route/endpoint lists (Claude can grep)
|
|
1595
|
+
- File-by-file descriptions (Claude can read files)
|
|
1596
|
+
- Database model lists (Claude can read schema files)
|
|
1597
|
+
|
|
1598
|
+
**Keep it tight.** A 30-line CLAUDE.md that hits the essentials beats a 200-line doc Claude has to parse every session.
|
|
1599
|
+
|
|
1600
|
+
## Step 3: Create Rules Directory
|
|
1601
|
+
|
|
1602
|
+
Create an empty \`.claude/rules/\` directory. Do not create any subdirectories or rule files.
|
|
1603
|
+
|
|
1604
|
+
Rules are path-scoped context files that load automatically when Claude works on matching files. Effective rules require deep understanding of your codebase patterns, team conventions, and quality goals — they should be crafted intentionally, not auto-generated.
|
|
1605
|
+
|
|
1606
|
+
## Step 4: Configure Settings
|
|
1607
|
+
|
|
1608
|
+
Update \`.claude/settings.json\` using the official schema.
|
|
1609
|
+
|
|
1610
|
+
### Deny Patterns (files Claude shouldn't read/write)
|
|
1611
|
+
|
|
1612
|
+
Use \`Read()\` for blocking reads, \`Edit()\` for blocking writes:
|
|
1613
|
+
|
|
1614
|
+
**Always deny (security):**
|
|
1615
|
+
\`\`\`
|
|
1616
|
+
Read(./.env)
|
|
1617
|
+
Read(./.env.*)
|
|
1618
|
+
Read(./secrets/**)
|
|
1619
|
+
Edit(./.env)
|
|
1620
|
+
Edit(./.env.*)
|
|
1621
|
+
\`\`\`
|
|
1622
|
+
|
|
1623
|
+
**Often deny (generated/vendor):**
|
|
1624
|
+
\`\`\`
|
|
1625
|
+
Edit(./node_modules/**)
|
|
1626
|
+
Edit(./dist/**)
|
|
1627
|
+
Edit(./.git/**)
|
|
1628
|
+
\`\`\`
|
|
1629
|
+
|
|
1630
|
+
### Allow Patterns (auto-approve without prompting)
|
|
1631
|
+
|
|
1632
|
+
Use \`Bash()\` patterns with prefix matching:
|
|
1633
|
+
|
|
1634
|
+
\`\`\`
|
|
1635
|
+
Bash(npm run test:*)
|
|
1636
|
+
Bash(npm run lint:*)
|
|
1637
|
+
Bash(npm run build)
|
|
1638
|
+
\`\`\`
|
|
1639
|
+
|
|
1640
|
+
### Environment Variables
|
|
1641
|
+
|
|
1642
|
+
Set session-level env vars:
|
|
1643
|
+
|
|
1644
|
+
\`\`\`json
|
|
1645
|
+
{
|
|
1646
|
+
"env": {
|
|
1647
|
+
"NODE_ENV": "development"
|
|
1648
|
+
}
|
|
1649
|
+
}
|
|
1650
|
+
\`\`\`
|
|
1651
|
+
|
|
1652
|
+
**Keep it minimal** — only include patterns that actually exist in this project.
|
|
1653
|
+
|
|
1654
|
+
## Guidelines
|
|
1655
|
+
|
|
1656
|
+
- Replace ALL placeholder content with real values from THIS project
|
|
1657
|
+
- Delete sections that don't apply — no empty stubs
|
|
1658
|
+
- Optimize for Claude's efficiency, not human documentation
|
|
1659
|
+
- When uncertain, leave it out — Claude can ask or explore
|
|
1660
|
+
|
|
1661
|
+
## After Completion
|
|
1662
|
+
|
|
1663
|
+
Once autoconfig is complete, prompt the user:
|
|
1664
|
+
|
|
1665
|
+
**Run \`/show-docs\` for an interactive walkthrough of your new Claude Code project setup.**`
|
|
1666
|
+
},
|
|
1667
|
+
'commit-and-push': {
|
|
1668
|
+
filename: 'commit-and-push.md',
|
|
1669
|
+
content: `# Commit and Push
|
|
1670
|
+
|
|
1671
|
+
Stage all changes, create a commit with a good message, and push to the current branch.
|
|
1672
|
+
|
|
1673
|
+
## Steps
|
|
1674
|
+
|
|
1675
|
+
1. Stage all changes (\`git add -A\`)
|
|
1676
|
+
2. Generate a conventional commit message based on the diff
|
|
1677
|
+
3. Commit the changes
|
|
1678
|
+
4. Push to the current branch
|
|
1679
|
+
|
|
1680
|
+
## Commit Message Format
|
|
1681
|
+
|
|
1682
|
+
Use conventional commits: \`type(scope): description\`
|
|
1683
|
+
|
|
1684
|
+
Types: feat, fix, docs, style, refactor, test, chore
|
|
1685
|
+
|
|
1686
|
+
Keep the subject line under 50 chars. Add body if the change needs explanation.`
|
|
1687
|
+
},
|
|
1688
|
+
'docs-cmd': {
|
|
1689
|
+
filename: 'show-docs.md',
|
|
1690
|
+
content: `# Show Guide
|
|
1691
|
+
|
|
1692
|
+
Open the interactive docs for Claude Code Autoconfig.
|
|
1693
|
+
|
|
1694
|
+
## Step 1: Check for Changes
|
|
1695
|
+
|
|
1696
|
+
Compare modification times of files in \`.claude/\` against the docs HTML.
|
|
1697
|
+
|
|
1698
|
+
If any files are newer: "Syncing docs with latest changes..." → proceed to delta sync.
|
|
1699
|
+
|
|
1700
|
+
## Step 2: Delta Sync
|
|
1701
|
+
|
|
1702
|
+
For each changed file, update only that entry in the docs's fileContents.
|
|
1703
|
+
|
|
1704
|
+
## Step 3: Open Guide
|
|
1705
|
+
|
|
1706
|
+
Open in default browser (macOS: open, Linux: xdg-open, Windows: start).`
|
|
1707
|
+
},
|
|
1708
|
+
'test': {
|
|
1709
|
+
filename: 'test.md',
|
|
1710
|
+
content: `# Run Tests
|
|
1711
|
+
|
|
1712
|
+
Run tests for this project.
|
|
1713
|
+
|
|
1714
|
+
**Scope:** $ARGUMENTS
|
|
1715
|
+
|
|
1716
|
+
If no scope provided, run the full test suite. Otherwise run tests matching the scope (file, directory, or pattern).
|
|
1717
|
+
|
|
1718
|
+
Detect the test command from project config (package.json scripts, pytest, go test, etc.) and execute it.`
|
|
1719
|
+
},
|
|
1720
|
+
'rules': {
|
|
1721
|
+
filename: 'rules/',
|
|
1722
|
+
content: null,
|
|
1723
|
+
empty: true,
|
|
1724
|
+
emptyMessage: 'This directory is empty.\n\nAdd .md files here to define rules for specific paths in your codebase.'
|
|
1725
|
+
},
|
|
1726
|
+
'docs': {
|
|
1727
|
+
filename: 'autoconfig.docs.html',
|
|
1728
|
+
content: null,
|
|
1729
|
+
empty: true,
|
|
1730
|
+
emptyMessage: "You're looking at it! 👀"
|
|
1731
|
+
},
|
|
1732
|
+
'enable-retro': {
|
|
1733
|
+
filename: 'enable-retro.md',
|
|
1734
|
+
content: `# Enable Retro
|
|
1735
|
+
|
|
1736
|
+
(Experimental) Enable tech debt tracking.
|
|
1737
|
+
|
|
1738
|
+
## What This Does
|
|
1739
|
+
|
|
1740
|
+
1. Creates \`.claude/retro/\` directory
|
|
1741
|
+
2. Creates \`.claude/agents/create-retro-item.md\` agent
|
|
1742
|
+
3. Adds Retro instructions to CLAUDE.md
|
|
1743
|
+
|
|
1744
|
+
## After Enabling
|
|
1745
|
+
|
|
1746
|
+
Claude will log tech debt and improvement opportunities as structured story files:
|
|
1747
|
+
- Problem description
|
|
1748
|
+
- Acceptance criteria
|
|
1749
|
+
- Suggested approach
|
|
1750
|
+
- Priority & effort sizing
|
|
1751
|
+
- Files involved
|
|
1752
|
+
|
|
1753
|
+
Work through items: "Fix retro #001"`
|
|
1754
|
+
},
|
|
1755
|
+
'feedback-template': {
|
|
1756
|
+
filename: 'FEEDBACK.md',
|
|
1757
|
+
content: `# Team Feedback
|
|
1758
|
+
|
|
1759
|
+
Add corrections and guidance here when Claude does something wrong.
|
|
1760
|
+
Claude reads this directory and learns for next time.
|
|
1761
|
+
|
|
1762
|
+
## YYYY-MM-DD: Brief title
|
|
1763
|
+
|
|
1764
|
+
Describe what Claude did wrong and what to do instead.
|
|
1765
|
+
Keep entries brief and actionable.
|
|
1766
|
+
|
|
1767
|
+
Example:
|
|
1768
|
+
|
|
1769
|
+
## 2026-01-06: Don't use deprecated API
|
|
1770
|
+
Claude used \`oldFunction()\` instead of \`newFunction()\`.
|
|
1771
|
+
Always use the v2 API for user endpoints.
|
|
1772
|
+
|
|
1773
|
+
## 2026-01-07: Test database naming
|
|
1774
|
+
Use \`test_\` prefix for test databases, not \`dev_\`.`
|
|
1775
|
+
}
|
|
1776
|
+
};
|
|
1777
|
+
|
|
1778
|
+
const modal = document.getElementById('fileModal');
|
|
1779
|
+
const modalTitle = document.getElementById('modalTitle');
|
|
1780
|
+
const modalCode = document.getElementById('modalCode');
|
|
1781
|
+
const modalClose = document.getElementById('modalClose');
|
|
1782
|
+
|
|
1783
|
+
function openModal(key) {
|
|
1784
|
+
const file = fileContents[key];
|
|
1785
|
+
if (!file) return;
|
|
1786
|
+
|
|
1787
|
+
modalTitle.textContent = file.filename;
|
|
1788
|
+
|
|
1789
|
+
if (file.empty) {
|
|
1790
|
+
modalCode.innerHTML = `<span class="modal-empty">${file.emptyMessage}</span>`;
|
|
1791
|
+
} else {
|
|
1792
|
+
modalCode.textContent = file.content;
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
modal.classList.add('visible');
|
|
1796
|
+
}
|
|
1797
|
+
|
|
1798
|
+
function closeModal() {
|
|
1799
|
+
modal.classList.remove('visible');
|
|
1800
|
+
}
|
|
1801
|
+
|
|
1802
|
+
modalClose.addEventListener('click', closeModal);
|
|
1803
|
+
modal.addEventListener('click', (e) => {
|
|
1804
|
+
if (e.target === modal) closeModal();
|
|
1805
|
+
});
|
|
1806
|
+
document.addEventListener('keydown', (e) => {
|
|
1807
|
+
if (e.key === 'Escape' && modal.classList.contains('visible')) {
|
|
1808
|
+
closeModal();
|
|
1809
|
+
}
|
|
1810
|
+
// Enter key opens preview for selected item
|
|
1811
|
+
if (e.key === 'Enter' && !modal.classList.contains('visible')) {
|
|
1812
|
+
const selected = document.querySelector('.tree-item.active');
|
|
1813
|
+
if (selected) {
|
|
1814
|
+
const key = selected.dataset.info;
|
|
1815
|
+
if (fileContents[key]) {
|
|
1816
|
+
openModal(key);
|
|
1817
|
+
}
|
|
1818
|
+
}
|
|
1819
|
+
}
|
|
1820
|
+
});
|
|
1821
|
+
|
|
1822
|
+
// Double-click to open file preview
|
|
1823
|
+
treeItems.forEach(item => {
|
|
1824
|
+
item.addEventListener('dblclick', (e) => {
|
|
1825
|
+
const key = item.dataset.info;
|
|
1826
|
+
// Don't open modal for folders (except rules which is empty) or root
|
|
1827
|
+
if (key === 'root' || key === 'claude-dir' || key === 'commands') return;
|
|
1828
|
+
if (fileContents[key]) {
|
|
1829
|
+
openModal(key);
|
|
1830
|
+
}
|
|
1831
|
+
});
|
|
1832
|
+
});
|
|
1833
|
+
</script>
|
|
1834
|
+
</body>
|
|
1835
1835
|
</html>
|