claudex-setup 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/cli.js +9 -1
- package/package.json +8 -2
- package/src/audit.js +40 -3
- package/src/badge.js +13 -0
- package/src/setup.js +363 -45
- package/.claude/agents/security-reviewer.md +0 -11
- package/.claude/commands/review.md +0 -6
- package/.claude/commands/test.md +0 -6
- package/.claude/hooks/on-edit-lint.sh +0 -5
- package/.claude/rules/frontend.md +0 -4
- package/.claude/skills/fix-issue/SKILL.md +0 -11
- package/APF.md +0 -121
- package/CLAUDE.md +0 -42
- package/CONTRIBUTING.md +0 -53
- package/apf/state.json +0 -29
- package/apf/todo.md +0 -40
- package/content/devto-article.json +0 -8
- package/content/launch-posts.md +0 -160
- package/docs/index.html +0 -681
- package/tools/publish.js +0 -149
package/docs/index.html
DELETED
|
@@ -1,681 +0,0 @@
|
|
|
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>claudex-setup — Optimize any project for Claude Code</title>
|
|
7
|
-
<meta name="description" content="One command to audit and optimize your project for Claude Code. Powered by 1,107 verified techniques.">
|
|
8
|
-
<meta property="og:title" content="claudex-setup — Optimize any project for Claude Code">
|
|
9
|
-
<meta property="og:description" content="Score your project 0-100 and auto-fix with one command. 1,107 verified techniques.">
|
|
10
|
-
<meta property="og:type" content="website">
|
|
11
|
-
<meta property="og:url" content="https://dnafin.github.io/claudex/">
|
|
12
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
13
|
-
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
14
|
-
<style>
|
|
15
|
-
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
16
|
-
|
|
17
|
-
:root {
|
|
18
|
-
--bg: #08080a;
|
|
19
|
-
--surface: #111114;
|
|
20
|
-
--surface-2: #19191e;
|
|
21
|
-
--border: #25252b;
|
|
22
|
-
--border-hover: #3a3a44;
|
|
23
|
-
--text: #ececf0;
|
|
24
|
-
--text-secondary: #9494a0;
|
|
25
|
-
--text-dim: #5c5c6a;
|
|
26
|
-
--accent: #a78bfa;
|
|
27
|
-
--accent-bright: #c4b5fd;
|
|
28
|
-
--accent-bg: rgba(167,139,250,0.08);
|
|
29
|
-
--accent-border: rgba(167,139,250,0.2);
|
|
30
|
-
--green: #34d399;
|
|
31
|
-
--green-dim: rgba(52,211,153,0.15);
|
|
32
|
-
--red: #f87171;
|
|
33
|
-
--red-dim: rgba(248,113,113,0.15);
|
|
34
|
-
--yellow: #fbbf24;
|
|
35
|
-
--yellow-dim: rgba(251,191,36,0.15);
|
|
36
|
-
--blue: #60a5fa;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
body {
|
|
40
|
-
font-family: 'Space Grotesk', -apple-system, sans-serif;
|
|
41
|
-
background: var(--bg);
|
|
42
|
-
color: var(--text);
|
|
43
|
-
line-height: 1.65;
|
|
44
|
-
overflow-x: hidden;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.container { max-width: 900px; margin: 0 auto; padding: 0 28px; }
|
|
48
|
-
code, .mono { font-family: 'JetBrains Mono', monospace; }
|
|
49
|
-
|
|
50
|
-
/* Gradient mesh background */
|
|
51
|
-
.bg-mesh {
|
|
52
|
-
position: fixed;
|
|
53
|
-
top: 0; left: 0; right: 0; bottom: 0;
|
|
54
|
-
z-index: -1;
|
|
55
|
-
background:
|
|
56
|
-
radial-gradient(ellipse 600px 400px at 20% 10%, rgba(167,139,250,0.06), transparent),
|
|
57
|
-
radial-gradient(ellipse 500px 500px at 80% 60%, rgba(52,211,153,0.04), transparent),
|
|
58
|
-
radial-gradient(ellipse 800px 300px at 50% 100%, rgba(96,165,250,0.03), transparent);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* Nav */
|
|
62
|
-
nav {
|
|
63
|
-
display: flex;
|
|
64
|
-
justify-content: space-between;
|
|
65
|
-
align-items: center;
|
|
66
|
-
padding: 20px 0;
|
|
67
|
-
border-bottom: 1px solid var(--border);
|
|
68
|
-
}
|
|
69
|
-
.nav-brand {
|
|
70
|
-
font-weight: 700;
|
|
71
|
-
font-size: 18px;
|
|
72
|
-
color: var(--accent-bright);
|
|
73
|
-
text-decoration: none;
|
|
74
|
-
letter-spacing: -0.5px;
|
|
75
|
-
}
|
|
76
|
-
.nav-links { display: flex; gap: 24px; }
|
|
77
|
-
.nav-links a {
|
|
78
|
-
color: var(--text-secondary);
|
|
79
|
-
text-decoration: none;
|
|
80
|
-
font-size: 14px;
|
|
81
|
-
font-weight: 500;
|
|
82
|
-
transition: color 0.2s;
|
|
83
|
-
}
|
|
84
|
-
.nav-links a:hover { color: var(--text); }
|
|
85
|
-
|
|
86
|
-
/* Hero */
|
|
87
|
-
.hero {
|
|
88
|
-
padding: 100px 0 80px;
|
|
89
|
-
text-align: center;
|
|
90
|
-
}
|
|
91
|
-
.hero-eyebrow {
|
|
92
|
-
display: inline-flex;
|
|
93
|
-
align-items: center;
|
|
94
|
-
gap: 8px;
|
|
95
|
-
padding: 6px 16px;
|
|
96
|
-
background: var(--accent-bg);
|
|
97
|
-
border: 1px solid var(--accent-border);
|
|
98
|
-
border-radius: 100px;
|
|
99
|
-
font-size: 13px;
|
|
100
|
-
font-weight: 500;
|
|
101
|
-
color: var(--accent-bright);
|
|
102
|
-
margin-bottom: 32px;
|
|
103
|
-
}
|
|
104
|
-
.hero-eyebrow .dot {
|
|
105
|
-
width: 6px; height: 6px;
|
|
106
|
-
background: var(--green);
|
|
107
|
-
border-radius: 50%;
|
|
108
|
-
animation: pulse 2s infinite;
|
|
109
|
-
}
|
|
110
|
-
@keyframes pulse {
|
|
111
|
-
0%, 100% { opacity: 1; }
|
|
112
|
-
50% { opacity: 0.4; }
|
|
113
|
-
}
|
|
114
|
-
.hero h1 {
|
|
115
|
-
font-size: clamp(36px, 6vw, 56px);
|
|
116
|
-
font-weight: 700;
|
|
117
|
-
line-height: 1.1;
|
|
118
|
-
letter-spacing: -1.5px;
|
|
119
|
-
margin-bottom: 20px;
|
|
120
|
-
background: linear-gradient(135deg, var(--text) 0%, var(--text-secondary) 100%);
|
|
121
|
-
-webkit-background-clip: text;
|
|
122
|
-
-webkit-text-fill-color: transparent;
|
|
123
|
-
}
|
|
124
|
-
.hero h1 em {
|
|
125
|
-
font-style: normal;
|
|
126
|
-
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
|
|
127
|
-
-webkit-background-clip: text;
|
|
128
|
-
-webkit-text-fill-color: transparent;
|
|
129
|
-
}
|
|
130
|
-
.hero-sub {
|
|
131
|
-
font-size: 18px;
|
|
132
|
-
color: var(--text-secondary);
|
|
133
|
-
max-width: 520px;
|
|
134
|
-
margin: 0 auto 40px;
|
|
135
|
-
line-height: 1.7;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/* Install */
|
|
139
|
-
.install-box {
|
|
140
|
-
display: inline-flex;
|
|
141
|
-
align-items: center;
|
|
142
|
-
gap: 12px;
|
|
143
|
-
background: var(--surface);
|
|
144
|
-
border: 1px solid var(--border);
|
|
145
|
-
border-radius: 12px;
|
|
146
|
-
padding: 16px 28px;
|
|
147
|
-
cursor: pointer;
|
|
148
|
-
transition: all 0.2s;
|
|
149
|
-
margin-bottom: 10px;
|
|
150
|
-
}
|
|
151
|
-
.install-box:hover {
|
|
152
|
-
border-color: var(--accent-border);
|
|
153
|
-
background: var(--surface-2);
|
|
154
|
-
}
|
|
155
|
-
.install-box .prompt { color: var(--text-dim); font-size: 18px; }
|
|
156
|
-
.install-box .cmd { color: var(--green); font-size: 18px; font-weight: 600; }
|
|
157
|
-
.install-box .copy-icon { color: var(--text-dim); font-size: 14px; transition: color 0.2s; }
|
|
158
|
-
.install-box:hover .copy-icon { color: var(--accent); }
|
|
159
|
-
.install-hint {
|
|
160
|
-
font-size: 12px;
|
|
161
|
-
color: var(--text-dim);
|
|
162
|
-
margin-top: 8px;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
/* Numbers */
|
|
166
|
-
.numbers {
|
|
167
|
-
display: grid;
|
|
168
|
-
grid-template-columns: repeat(4, 1fr);
|
|
169
|
-
gap: 1px;
|
|
170
|
-
background: var(--border);
|
|
171
|
-
border-radius: 16px;
|
|
172
|
-
overflow: hidden;
|
|
173
|
-
margin: 64px 0;
|
|
174
|
-
}
|
|
175
|
-
.number-card {
|
|
176
|
-
background: var(--surface);
|
|
177
|
-
padding: 28px 20px;
|
|
178
|
-
text-align: center;
|
|
179
|
-
}
|
|
180
|
-
.number-card .val {
|
|
181
|
-
font-size: 32px;
|
|
182
|
-
font-weight: 700;
|
|
183
|
-
letter-spacing: -1px;
|
|
184
|
-
margin-bottom: 4px;
|
|
185
|
-
}
|
|
186
|
-
.number-card .val.purple { color: var(--accent); }
|
|
187
|
-
.number-card .val.green { color: var(--green); }
|
|
188
|
-
.number-card .val.blue { color: var(--blue); }
|
|
189
|
-
.number-card .val.yellow { color: var(--yellow); }
|
|
190
|
-
.number-card .label {
|
|
191
|
-
font-size: 12px;
|
|
192
|
-
color: var(--text-dim);
|
|
193
|
-
text-transform: uppercase;
|
|
194
|
-
letter-spacing: 1px;
|
|
195
|
-
font-weight: 500;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
/* Terminal */
|
|
199
|
-
.terminal-section { margin: 48px 0 64px; }
|
|
200
|
-
.terminal-section h2 {
|
|
201
|
-
font-size: 14px;
|
|
202
|
-
text-transform: uppercase;
|
|
203
|
-
letter-spacing: 2px;
|
|
204
|
-
color: var(--text-dim);
|
|
205
|
-
margin-bottom: 16px;
|
|
206
|
-
font-weight: 500;
|
|
207
|
-
}
|
|
208
|
-
.terminal {
|
|
209
|
-
background: var(--surface);
|
|
210
|
-
border: 1px solid var(--border);
|
|
211
|
-
border-radius: 14px;
|
|
212
|
-
overflow: hidden;
|
|
213
|
-
}
|
|
214
|
-
.terminal-header {
|
|
215
|
-
display: flex;
|
|
216
|
-
align-items: center;
|
|
217
|
-
gap: 8px;
|
|
218
|
-
padding: 14px 18px;
|
|
219
|
-
background: var(--surface-2);
|
|
220
|
-
border-bottom: 1px solid var(--border);
|
|
221
|
-
}
|
|
222
|
-
.terminal-header .dots { display: flex; gap: 6px; }
|
|
223
|
-
.terminal-header .dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
224
|
-
.terminal-header .dot-r { background: #ff5f57; }
|
|
225
|
-
.terminal-header .dot-y { background: #febc2e; }
|
|
226
|
-
.terminal-header .dot-g { background: #28c840; }
|
|
227
|
-
.terminal-header .title {
|
|
228
|
-
flex: 1;
|
|
229
|
-
text-align: center;
|
|
230
|
-
font-size: 12px;
|
|
231
|
-
color: var(--text-dim);
|
|
232
|
-
}
|
|
233
|
-
.terminal-body {
|
|
234
|
-
padding: 24px;
|
|
235
|
-
font-size: 13px;
|
|
236
|
-
line-height: 2;
|
|
237
|
-
overflow-x: auto;
|
|
238
|
-
}
|
|
239
|
-
.t-dim { color: var(--text-dim); }
|
|
240
|
-
.t-green { color: var(--green); }
|
|
241
|
-
.t-red { color: var(--red); }
|
|
242
|
-
.t-yellow { color: var(--yellow); }
|
|
243
|
-
.t-blue { color: var(--blue); }
|
|
244
|
-
.t-accent { color: var(--accent); }
|
|
245
|
-
.t-bold { font-weight: 600; color: var(--text); }
|
|
246
|
-
|
|
247
|
-
/* Before/After */
|
|
248
|
-
.comparison {
|
|
249
|
-
display: grid;
|
|
250
|
-
grid-template-columns: 1fr 1fr;
|
|
251
|
-
gap: 20px;
|
|
252
|
-
margin: 48px 0;
|
|
253
|
-
}
|
|
254
|
-
.comp-card {
|
|
255
|
-
background: var(--surface);
|
|
256
|
-
border: 1px solid var(--border);
|
|
257
|
-
border-radius: 14px;
|
|
258
|
-
padding: 28px;
|
|
259
|
-
}
|
|
260
|
-
.comp-card.before { border-top: 3px solid var(--red); }
|
|
261
|
-
.comp-card.after { border-top: 3px solid var(--green); }
|
|
262
|
-
.comp-label {
|
|
263
|
-
font-size: 12px;
|
|
264
|
-
text-transform: uppercase;
|
|
265
|
-
letter-spacing: 1.5px;
|
|
266
|
-
font-weight: 600;
|
|
267
|
-
margin-bottom: 16px;
|
|
268
|
-
}
|
|
269
|
-
.comp-card.before .comp-label { color: var(--red); }
|
|
270
|
-
.comp-card.after .comp-label { color: var(--green); }
|
|
271
|
-
.comp-score {
|
|
272
|
-
font-size: 48px;
|
|
273
|
-
font-weight: 700;
|
|
274
|
-
letter-spacing: -2px;
|
|
275
|
-
margin-bottom: 4px;
|
|
276
|
-
}
|
|
277
|
-
.comp-card.before .comp-score { color: var(--red); }
|
|
278
|
-
.comp-card.after .comp-score { color: var(--green); }
|
|
279
|
-
.comp-detail {
|
|
280
|
-
font-size: 13px;
|
|
281
|
-
color: var(--text-secondary);
|
|
282
|
-
line-height: 1.8;
|
|
283
|
-
}
|
|
284
|
-
.comp-detail .missing { color: var(--red); }
|
|
285
|
-
.comp-detail .added { color: var(--green); }
|
|
286
|
-
|
|
287
|
-
/* Checks grid */
|
|
288
|
-
.checks-section { margin: 64px 0; }
|
|
289
|
-
.checks-section h2 {
|
|
290
|
-
font-size: 28px;
|
|
291
|
-
font-weight: 700;
|
|
292
|
-
letter-spacing: -0.5px;
|
|
293
|
-
margin-bottom: 8px;
|
|
294
|
-
}
|
|
295
|
-
.checks-section p {
|
|
296
|
-
color: var(--text-secondary);
|
|
297
|
-
margin-bottom: 32px;
|
|
298
|
-
font-size: 15px;
|
|
299
|
-
}
|
|
300
|
-
.checks-grid {
|
|
301
|
-
display: grid;
|
|
302
|
-
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
|
303
|
-
gap: 12px;
|
|
304
|
-
}
|
|
305
|
-
.check-item {
|
|
306
|
-
display: flex;
|
|
307
|
-
align-items: flex-start;
|
|
308
|
-
gap: 12px;
|
|
309
|
-
padding: 16px;
|
|
310
|
-
background: var(--surface);
|
|
311
|
-
border: 1px solid var(--border);
|
|
312
|
-
border-radius: 10px;
|
|
313
|
-
transition: border-color 0.2s;
|
|
314
|
-
}
|
|
315
|
-
.check-item:hover { border-color: var(--border-hover); }
|
|
316
|
-
.check-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
|
|
317
|
-
.check-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
|
|
318
|
-
.check-info p { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
|
|
319
|
-
.check-tag {
|
|
320
|
-
display: inline-block;
|
|
321
|
-
font-size: 10px;
|
|
322
|
-
padding: 2px 6px;
|
|
323
|
-
border-radius: 4px;
|
|
324
|
-
font-weight: 600;
|
|
325
|
-
text-transform: uppercase;
|
|
326
|
-
letter-spacing: 0.5px;
|
|
327
|
-
}
|
|
328
|
-
.tag-critical { background: var(--red-dim); color: var(--red); }
|
|
329
|
-
.tag-high { background: var(--yellow-dim); color: var(--yellow); }
|
|
330
|
-
.tag-medium { background: var(--accent-bg); color: var(--accent); }
|
|
331
|
-
|
|
332
|
-
/* Stacks */
|
|
333
|
-
.stacks {
|
|
334
|
-
display: flex;
|
|
335
|
-
flex-wrap: wrap;
|
|
336
|
-
gap: 10px;
|
|
337
|
-
justify-content: center;
|
|
338
|
-
margin: 48px 0;
|
|
339
|
-
}
|
|
340
|
-
.stack-pill {
|
|
341
|
-
padding: 8px 18px;
|
|
342
|
-
background: var(--surface);
|
|
343
|
-
border: 1px solid var(--border);
|
|
344
|
-
border-radius: 8px;
|
|
345
|
-
font-size: 13px;
|
|
346
|
-
font-weight: 500;
|
|
347
|
-
color: var(--text-secondary);
|
|
348
|
-
transition: all 0.2s;
|
|
349
|
-
}
|
|
350
|
-
.stack-pill:hover {
|
|
351
|
-
border-color: var(--accent-border);
|
|
352
|
-
color: var(--accent-bright);
|
|
353
|
-
background: var(--accent-bg);
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
/* CTA */
|
|
357
|
-
.cta {
|
|
358
|
-
text-align: center;
|
|
359
|
-
padding: 80px 0;
|
|
360
|
-
border-top: 1px solid var(--border);
|
|
361
|
-
}
|
|
362
|
-
.cta h2 {
|
|
363
|
-
font-size: 32px;
|
|
364
|
-
font-weight: 700;
|
|
365
|
-
letter-spacing: -1px;
|
|
366
|
-
margin-bottom: 12px;
|
|
367
|
-
}
|
|
368
|
-
.cta p {
|
|
369
|
-
color: var(--text-secondary);
|
|
370
|
-
margin-bottom: 32px;
|
|
371
|
-
font-size: 16px;
|
|
372
|
-
}
|
|
373
|
-
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
|
374
|
-
.btn {
|
|
375
|
-
display: inline-flex;
|
|
376
|
-
align-items: center;
|
|
377
|
-
gap: 8px;
|
|
378
|
-
padding: 14px 28px;
|
|
379
|
-
border-radius: 10px;
|
|
380
|
-
font-weight: 600;
|
|
381
|
-
font-size: 14px;
|
|
382
|
-
text-decoration: none;
|
|
383
|
-
transition: all 0.2s;
|
|
384
|
-
}
|
|
385
|
-
.btn-primary {
|
|
386
|
-
background: var(--accent);
|
|
387
|
-
color: var(--bg);
|
|
388
|
-
}
|
|
389
|
-
.btn-primary:hover { background: var(--accent-bright); }
|
|
390
|
-
.btn-secondary {
|
|
391
|
-
background: var(--surface);
|
|
392
|
-
color: var(--text);
|
|
393
|
-
border: 1px solid var(--border);
|
|
394
|
-
}
|
|
395
|
-
.btn-secondary:hover { border-color: var(--accent-border); }
|
|
396
|
-
|
|
397
|
-
/* Footer */
|
|
398
|
-
footer {
|
|
399
|
-
text-align: center;
|
|
400
|
-
padding: 28px 0;
|
|
401
|
-
color: var(--text-dim);
|
|
402
|
-
font-size: 12px;
|
|
403
|
-
border-top: 1px solid var(--border);
|
|
404
|
-
}
|
|
405
|
-
footer a { color: var(--accent); text-decoration: none; }
|
|
406
|
-
|
|
407
|
-
@media (max-width: 640px) {
|
|
408
|
-
.numbers { grid-template-columns: repeat(2, 1fr); }
|
|
409
|
-
.comparison { grid-template-columns: 1fr; }
|
|
410
|
-
.checks-grid { grid-template-columns: 1fr; }
|
|
411
|
-
}
|
|
412
|
-
</style>
|
|
413
|
-
</head>
|
|
414
|
-
<body>
|
|
415
|
-
<div class="bg-mesh"></div>
|
|
416
|
-
|
|
417
|
-
<div class="container">
|
|
418
|
-
<nav>
|
|
419
|
-
<a href="/" class="nav-brand">claudex-setup</a>
|
|
420
|
-
<div class="nav-links">
|
|
421
|
-
<a href="https://github.com/DnaFin/claudex">GitHub</a>
|
|
422
|
-
<a href="https://www.npmjs.com/package/claudex-setup">npm</a>
|
|
423
|
-
<a href="https://dev.to/claudex">Blog</a>
|
|
424
|
-
</div>
|
|
425
|
-
</nav>
|
|
426
|
-
|
|
427
|
-
<section class="hero">
|
|
428
|
-
<div class="hero-eyebrow">
|
|
429
|
-
<span class="dot"></span>
|
|
430
|
-
v0.2.0 — Free & Open Source
|
|
431
|
-
</div>
|
|
432
|
-
<h1>Your project is running<br>Claude Code at <em>10%</em></h1>
|
|
433
|
-
<p class="hero-sub">One command to find out what you're missing. Auto-fix everything. Built from 1,107 verified techniques.</p>
|
|
434
|
-
|
|
435
|
-
<div class="install-box mono" onclick="navigator.clipboard.writeText('npx claudex-setup');this.querySelector('.copy-icon').textContent='Copied!'">
|
|
436
|
-
<span class="prompt">$</span>
|
|
437
|
-
<span class="cmd">npx claudex-setup</span>
|
|
438
|
-
<span class="copy-icon">Copy</span>
|
|
439
|
-
</div>
|
|
440
|
-
<div class="install-hint">No install needed. Node.js 18+. Zero dependencies.</div>
|
|
441
|
-
</section>
|
|
442
|
-
|
|
443
|
-
<section class="numbers">
|
|
444
|
-
<div class="number-card">
|
|
445
|
-
<div class="val purple">1,107</div>
|
|
446
|
-
<div class="label">Techniques</div>
|
|
447
|
-
</div>
|
|
448
|
-
<div class="number-card">
|
|
449
|
-
<div class="val green">954</div>
|
|
450
|
-
<div class="label">Tested</div>
|
|
451
|
-
</div>
|
|
452
|
-
<div class="number-card">
|
|
453
|
-
<div class="val blue">54</div>
|
|
454
|
-
<div class="label">Audit Checks</div>
|
|
455
|
-
</div>
|
|
456
|
-
<div class="number-card">
|
|
457
|
-
<div class="val yellow">18</div>
|
|
458
|
-
<div class="label">Stacks</div>
|
|
459
|
-
</div>
|
|
460
|
-
</section>
|
|
461
|
-
|
|
462
|
-
<section class="comparison">
|
|
463
|
-
<div class="comp-card before">
|
|
464
|
-
<div class="comp-label">Before</div>
|
|
465
|
-
<div class="comp-score">10</div>
|
|
466
|
-
<div class="comp-detail">
|
|
467
|
-
<span class="missing">✗</span> No CLAUDE.md<br>
|
|
468
|
-
<span class="missing">✗</span> No hooks<br>
|
|
469
|
-
<span class="missing">✗</span> No commands<br>
|
|
470
|
-
<span class="missing">✗</span> No verification<br>
|
|
471
|
-
<span class="missing">✗</span> No architecture diagram
|
|
472
|
-
</div>
|
|
473
|
-
</div>
|
|
474
|
-
<div class="comp-card after">
|
|
475
|
-
<div class="comp-label">After setup</div>
|
|
476
|
-
<div class="comp-score">71</div>
|
|
477
|
-
<div class="comp-detail">
|
|
478
|
-
<span class="added">✓</span> CLAUDE.md with build commands<br>
|
|
479
|
-
<span class="added">✓</span> Auto-lint hooks<br>
|
|
480
|
-
<span class="added">✓</span> /test, /review commands<br>
|
|
481
|
-
<span class="added">✓</span> Security reviewer agent<br>
|
|
482
|
-
<span class="added">✓</span> Stack-specific rules
|
|
483
|
-
</div>
|
|
484
|
-
</div>
|
|
485
|
-
</section>
|
|
486
|
-
|
|
487
|
-
<section class="terminal-section">
|
|
488
|
-
<h2>See it in action</h2>
|
|
489
|
-
<div class="terminal">
|
|
490
|
-
<div class="terminal-header">
|
|
491
|
-
<div class="dots">
|
|
492
|
-
<div class="dot dot-r"></div>
|
|
493
|
-
<div class="dot dot-y"></div>
|
|
494
|
-
<div class="dot dot-g"></div>
|
|
495
|
-
</div>
|
|
496
|
-
<div class="title mono">~/my-project</div>
|
|
497
|
-
<div></div>
|
|
498
|
-
</div>
|
|
499
|
-
<div class="terminal-body mono">
|
|
500
|
-
<span class="t-dim">$</span> <span class="t-green">npx claudex-setup</span>
|
|
501
|
-
<br><br>
|
|
502
|
-
<span class="t-bold"> claudex-setup audit</span>
|
|
503
|
-
<br><span class="t-dim"> ═════════════════════════════════════</span>
|
|
504
|
-
<br><span class="t-blue"> Detected: React, TypeScript</span>
|
|
505
|
-
<br><br>
|
|
506
|
-
<span class="t-green"> ████████████████</span><span class="t-dim">░░░░</span> <span class="t-bold">78/100</span>
|
|
507
|
-
<br><br>
|
|
508
|
-
<span class="t-green"> ✅ Passing</span>
|
|
509
|
-
<br><span class="t-dim"> CLAUDE.md project instructions</span>
|
|
510
|
-
<br><span class="t-dim"> Mermaid architecture diagram</span>
|
|
511
|
-
<br><span class="t-dim"> Hooks for automation (PreToolUse + PostToolUse)</span>
|
|
512
|
-
<br><span class="t-dim"> Custom slash commands (5 commands)</span>
|
|
513
|
-
<br><span class="t-dim"> XML tags for structured prompts</span>
|
|
514
|
-
<br><span class="t-dim"> Secrets protection configured</span>
|
|
515
|
-
<br><br>
|
|
516
|
-
<span class="t-yellow"> 🟡 High Impact</span>
|
|
517
|
-
<br> <span class="t-bold">CI pipeline configured</span>
|
|
518
|
-
<br><span class="t-dim"> → Add .github/workflows/ for automated testing</span>
|
|
519
|
-
<br><br>
|
|
520
|
-
<span class="t-dim"> ─────────────────────────────────────</span>
|
|
521
|
-
<br> <span class="t-bold">42/54</span> checks passing
|
|
522
|
-
<br> Run <span class="t-green">npx claudex-setup setup</span> to fix
|
|
523
|
-
</div>
|
|
524
|
-
</div>
|
|
525
|
-
</section>
|
|
526
|
-
|
|
527
|
-
<section class="checks-section">
|
|
528
|
-
<h2>What gets checked</h2>
|
|
529
|
-
<p>54 best practices across 13 categories from the CLAUDEX research catalog.</p>
|
|
530
|
-
<div class="checks-grid">
|
|
531
|
-
<div class="check-item">
|
|
532
|
-
<span class="check-icon">📋</span>
|
|
533
|
-
<div class="check-info">
|
|
534
|
-
<h4>CLAUDE.md <span class="check-tag tag-critical">Critical</span></h4>
|
|
535
|
-
<p>Project instructions Claude reads every session</p>
|
|
536
|
-
</div>
|
|
537
|
-
</div>
|
|
538
|
-
<div class="check-item">
|
|
539
|
-
<span class="check-icon">✅</span>
|
|
540
|
-
<div class="check-info">
|
|
541
|
-
<h4>Verification <span class="check-tag tag-critical">Critical</span></h4>
|
|
542
|
-
<p>Test/lint commands so Claude checks its own work</p>
|
|
543
|
-
</div>
|
|
544
|
-
</div>
|
|
545
|
-
<div class="check-item">
|
|
546
|
-
<span class="check-icon">⚡</span>
|
|
547
|
-
<div class="check-info">
|
|
548
|
-
<h4>Hooks <span class="check-tag tag-high">High</span></h4>
|
|
549
|
-
<p>Auto-lint, auto-test on every file edit</p>
|
|
550
|
-
</div>
|
|
551
|
-
</div>
|
|
552
|
-
<div class="check-item">
|
|
553
|
-
<span class="check-icon">🔷</span>
|
|
554
|
-
<div class="check-info">
|
|
555
|
-
<h4>Mermaid Diagram <span class="check-tag tag-high">High</span></h4>
|
|
556
|
-
<p>Architecture visualization. 73% token savings</p>
|
|
557
|
-
</div>
|
|
558
|
-
</div>
|
|
559
|
-
<div class="check-item">
|
|
560
|
-
<span class="check-icon">🏷️</span>
|
|
561
|
-
<div class="check-info">
|
|
562
|
-
<h4>XML Tags <span class="check-tag tag-high">High</span></h4>
|
|
563
|
-
<p>Structured prompts. 30% quality boost</p>
|
|
564
|
-
</div>
|
|
565
|
-
</div>
|
|
566
|
-
<div class="check-item">
|
|
567
|
-
<span class="check-icon">⌘</span>
|
|
568
|
-
<div class="check-info">
|
|
569
|
-
<h4>Commands <span class="check-tag tag-high">High</span></h4>
|
|
570
|
-
<p>Custom /test, /deploy, /review workflows</p>
|
|
571
|
-
</div>
|
|
572
|
-
</div>
|
|
573
|
-
<div class="check-item">
|
|
574
|
-
<span class="check-icon">🛡️</span>
|
|
575
|
-
<div class="check-info">
|
|
576
|
-
<h4>Agents <span class="check-tag tag-medium">Medium</span></h4>
|
|
577
|
-
<p>Security reviewer, test writer subagents</p>
|
|
578
|
-
</div>
|
|
579
|
-
</div>
|
|
580
|
-
<div class="check-item">
|
|
581
|
-
<span class="check-icon">📐</span>
|
|
582
|
-
<div class="check-info">
|
|
583
|
-
<h4>Rules <span class="check-tag tag-medium">Medium</span></h4>
|
|
584
|
-
<p>Path-specific conventions per file type</p>
|
|
585
|
-
</div>
|
|
586
|
-
</div>
|
|
587
|
-
<div class="check-item">
|
|
588
|
-
<span class="check-icon">🧩</span>
|
|
589
|
-
<div class="check-info">
|
|
590
|
-
<h4>Skills <span class="check-tag tag-medium">Medium</span></h4>
|
|
591
|
-
<p>On-demand domain knowledge</p>
|
|
592
|
-
</div>
|
|
593
|
-
</div>
|
|
594
|
-
<div class="check-item">
|
|
595
|
-
<span class="check-icon">🔒</span>
|
|
596
|
-
<div class="check-info">
|
|
597
|
-
<h4>Secrets Protection <span class="check-tag tag-critical">Critical</span></h4>
|
|
598
|
-
<p>Block .env reads, deny rules for sensitive files</p>
|
|
599
|
-
</div>
|
|
600
|
-
</div>
|
|
601
|
-
<div class="check-item">
|
|
602
|
-
<span class="check-icon">🔍</span>
|
|
603
|
-
<div class="check-info">
|
|
604
|
-
<h4>Security Review <span class="check-tag tag-high">High</span></h4>
|
|
605
|
-
<p>Built-in OWASP Top 10 scanning command</p>
|
|
606
|
-
</div>
|
|
607
|
-
</div>
|
|
608
|
-
<div class="check-item">
|
|
609
|
-
<span class="check-icon">🐳</span>
|
|
610
|
-
<div class="check-info">
|
|
611
|
-
<h4>DevOps <span class="check-tag tag-medium">Medium</span></h4>
|
|
612
|
-
<p>Dockerfile, docker-compose, CI pipeline, Terraform</p>
|
|
613
|
-
</div>
|
|
614
|
-
</div>
|
|
615
|
-
<div class="check-item">
|
|
616
|
-
<span class="check-icon">🪝</span>
|
|
617
|
-
<div class="check-info">
|
|
618
|
-
<h4>Hook System <span class="check-tag tag-high">High</span></h4>
|
|
619
|
-
<p>Pre/PostToolUse, SessionStart automation</p>
|
|
620
|
-
</div>
|
|
621
|
-
</div>
|
|
622
|
-
<div class="check-item">
|
|
623
|
-
<span class="check-icon">🧪</span>
|
|
624
|
-
<div class="check-info">
|
|
625
|
-
<h4>Quality Gates <span class="check-tag tag-high">High</span></h4>
|
|
626
|
-
<p>Test, lint, and build commands in CLAUDE.md</p>
|
|
627
|
-
</div>
|
|
628
|
-
</div>
|
|
629
|
-
<div class="check-item">
|
|
630
|
-
<span class="check-icon">🔌</span>
|
|
631
|
-
<div class="check-info">
|
|
632
|
-
<h4>MCP Servers <span class="check-tag tag-medium">Medium</span></h4>
|
|
633
|
-
<p>Context7, database, and API integrations</p>
|
|
634
|
-
</div>
|
|
635
|
-
</div>
|
|
636
|
-
</div>
|
|
637
|
-
</section>
|
|
638
|
-
|
|
639
|
-
<div style="text-align:center">
|
|
640
|
-
<h2 style="font-size:14px;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);margin-bottom:16px;font-weight:500">Auto-detects your stack</h2>
|
|
641
|
-
<div class="stacks">
|
|
642
|
-
<span class="stack-pill">React</span>
|
|
643
|
-
<span class="stack-pill">Vue</span>
|
|
644
|
-
<span class="stack-pill">Angular</span>
|
|
645
|
-
<span class="stack-pill">Next.js</span>
|
|
646
|
-
<span class="stack-pill">Python</span>
|
|
647
|
-
<span class="stack-pill">Django</span>
|
|
648
|
-
<span class="stack-pill">FastAPI</span>
|
|
649
|
-
<span class="stack-pill">Node.js</span>
|
|
650
|
-
<span class="stack-pill">TypeScript</span>
|
|
651
|
-
<span class="stack-pill">Rust</span>
|
|
652
|
-
<span class="stack-pill">Go</span>
|
|
653
|
-
<span class="stack-pill">Docker</span>
|
|
654
|
-
<span class="stack-pill">Svelte</span>
|
|
655
|
-
<span class="stack-pill">Flutter</span>
|
|
656
|
-
<span class="stack-pill">Ruby</span>
|
|
657
|
-
<span class="stack-pill">Java</span>
|
|
658
|
-
<span class="stack-pill">Kotlin</span>
|
|
659
|
-
<span class="stack-pill">Swift</span>
|
|
660
|
-
</div>
|
|
661
|
-
</div>
|
|
662
|
-
|
|
663
|
-
<section class="cta">
|
|
664
|
-
<h2>10 seconds to a better setup</h2>
|
|
665
|
-
<p>No signup. No API keys. Runs entirely on your machine.</p>
|
|
666
|
-
<div class="cta-buttons">
|
|
667
|
-
<a href="https://github.com/DnaFin/claudex" class="btn btn-primary">
|
|
668
|
-
View on GitHub
|
|
669
|
-
</a>
|
|
670
|
-
<a href="https://www.npmjs.com/package/claudex-setup" class="btn btn-secondary">
|
|
671
|
-
npm package
|
|
672
|
-
</a>
|
|
673
|
-
</div>
|
|
674
|
-
</section>
|
|
675
|
-
|
|
676
|
-
<footer>
|
|
677
|
-
Built from <a href="https://github.com/DnaFin/claudex">CLAUDEX</a> — 1,107 verified Claude Code techniques, 954 tested with evidence.
|
|
678
|
-
</footer>
|
|
679
|
-
</div>
|
|
680
|
-
</body>
|
|
681
|
-
</html>
|