templateclaw/api-full.json at main · jeromwolf/templateclaw · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
{
  "name": "TemplateClaw",
  "description": "Developer Design + Development Template Hub",
  "version": "1.0.0",
  "base_url": "https://jeromwolf.github.io/templateclaw",
  "total": 32,
  "categories": [
    {
      "name": "dashboard",
      "count": 4
    },
    {
      "name": "project-setup",
      "count": 7
    },
    {
      "name": "dev-methodology",
      "count": 5
    },
    {
      "name": "landing-pages",
      "count": 5
    },
    {
      "name": "components",
      "count": 8
    },
    {
      "name": "refactoring",
      "count": 3
    }
  ],
  "generated_at": "2026-03-29T11:46:37.473056+09:00",
  "usage": {
    "fetch_catalog": "https://jeromwolf.github.io/templateclaw/api.json",
    "fetch_full": "https://jeromwolf.github.io/templateclaw/api-full.json",
    "download_template": "https://jeromwolf.github.io/templateclaw/templates/{filename}"
  },
  "templates": [
    {
      "filename": "admin-dashboard.md",
      "title": "Admin Dashboard",
      "description": "Admin panel with sidebar navigation, stats cards, data table, and chart placeholders",
      "category": "dashboard",
      "tags": [
        "admin",
        "dashboard",
        "sidebar",
        "table",
        "tailwind"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/admin-dashboard.md",
      "content": "# Admin Dashboard\n> Admin panel with sidebar navigation, stats cards, data table, and chart placeholders\n> 사이드바 네비게이션, 통계 카드, 데이터 테이블, 차트 플레이스홀더가 포함된 관리자 대시보드\n\n**Category**: Dashboard | **Tags**: admin, dashboard, sidebar, table, tailwind | **Difficulty**: Intermediate\n\n## Preview\n```\n+------+-------------------------------------------+\n| LOGO |  Dashboard      Search...     [Avatar]     |\n+------+-------------------------------------------+\n|      |                                            |\n| Home | +------+ +------+ +------+ +------+        |\n| Users| |Users | |Revenue| |Orders| |Growth|       |\n| Prods| |12.4K | |$48.2K | |1,832 | |+12% |       |\n| Ordrs| +------+ +------+ +------+ +------+        |\n| Set. |                                            |\n|      | +--- Users Table ------------------+       |\n|      | | Name | Email | Role | Status | A |       |\n|      | | John | j@... | Admin| Active | . |       |\n|      | | Jane | j@... | User | Active | . |       |\n|      | +----------------------------------+       |\n+------+-------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Copy HTML to index.html\n# 2. Open in browser - responsive sidebar collapses on mobile\n# 3. Replace static data with your API calls\n# Tip: Add Chart.js or ApexCharts for the chart section\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Admin Dashboard</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <style>\n    .sidebar { transition: width 0.3s ease; }\n    @media (max-width: 768px) { .sidebar { width: 0; overflow: hidden; } .sidebar.open { width: 16rem; } }\n  </style>\n</head>\n<body class=\"bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 flex h-screen overflow-hidden\">\n\n  <!-- Sidebar -->\n  <aside id=\"sidebar\" class=\"sidebar w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0\">\n    <div class=\"h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-700\">\n      <span class=\"text-xl font-bold text-indigo-600\">AdminPanel</span>\n    </div>\n    <nav class=\"flex-1 p-4 space-y-1\">\n      <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-lg text-sm font-medium\">\n        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"/></svg>\n        Dashboard\n      </a>\n      <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm\">\n        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"/></svg>\n        Users\n      </a>\n      <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm\">\n        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"/></svg>\n        Products\n      </a>\n      <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm\">\n        <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"/></svg>\n        Orders\n      </a>\n      <div class=\"pt-4 mt-4 border-t border-gray-200 dark:border-gray-700\">\n        <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm\">\n          <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"/></svg>\n          Settings\n        </a>\n      </div>\n    </nav>\n  </aside>\n\n  <!-- Main Content -->\n  <div class=\"flex-1 flex flex-col overflow-auto\">\n    <!-- Top Bar -->\n    <header class=\"h-16 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex items-center px-6 gap-4 flex-shrink-0\">\n      <button class=\"md:hidden\" onclick=\"document.getElementById('sidebar').classList.toggle('open')\">\n        <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"/></svg>\n      </button>\n      <input type=\"text\" placeholder=\"Search...\" class=\"flex-1 max-w-xs px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\">\n      <div class=\"ml-auto flex items-center gap-4\">\n        <button class=\"relative\"><svg class=\"w-5 h-5 text-gray-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\"/></svg><span class=\"absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-[10px] text-white flex items-center justify-center\">3</span></button>\n        <div class=\"w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-xs font-bold\">JD</div>\n      </div>\n    </header>\n\n    <!-- Dashboard Content -->\n    <main class=\"flex-1 p-6 space-y-6\">\n      <h1 class=\"text-2xl font-bold\">Dashboard</h1>\n\n      <!-- Stats Cards -->\n      <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n        <div class=\"bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-sm text-gray-500\">Total Users</span>\n            <span class=\"text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded-full\">+12%</span>\n          </div>\n          <div class=\"mt-2 text-3xl font-bold\">12,421</div>\n          <div class=\"mt-1 text-xs text-gray-400\">vs. 11,089 last month</div>\n        </div>\n        <div class=\"bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-sm text-gray-500\">Revenue</span>\n            <span class=\"text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded-full\">+8%</span>\n          </div>\n          <div class=\"mt-2 text-3xl font-bold\">$48,230</div>\n          <div class=\"mt-1 text-xs text-gray-400\">vs. $44,650 last month</div>\n        </div>\n        <div class=\"bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-sm text-gray-500\">Orders</span>\n            <span class=\"text-xs px-2 py-0.5 bg-red-100 text-red-700 rounded-full\">-3%</span>\n          </div>\n          <div class=\"mt-2 text-3xl font-bold\">1,832</div>\n          <div class=\"mt-1 text-xs text-gray-400\">vs. 1,889 last month</div>\n        </div>\n        <div class=\"bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-sm text-gray-500\">Conversion</span>\n            <span class=\"text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded-full\">+0.5%</span>\n          </div>\n          <div class=\"mt-2 text-3xl font-bold\">3.24%</div>\n          <div class=\"mt-1 text-xs text-gray-400\">vs. 2.74% last month</div>\n        </div>\n      </div>\n\n      <!-- Chart Placeholder -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700\">\n        <div class=\"flex items-center justify-between mb-4\">\n          <h2 class=\"font-semibold\">Revenue Overview</h2>\n          <select class=\"text-sm bg-gray-100 dark:bg-gray-700 rounded-lg px-3 py-1.5\"><option>Last 7 days</option><option>Last 30 days</option><option>Last 90 days</option></select>\n        </div>\n        <!-- Replace with Chart.js canvas -->\n        <div class=\"h-64 bg-gray-50 dark:bg-gray-700/50 rounded-lg flex items-center justify-center text-gray-400 text-sm\">\n          <div class=\"text-center\">\n            <p>Chart Placeholder</p>\n            <p class=\"text-xs mt-1\">Add &lt;canvas id=\"chart\"&gt; + Chart.js</p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Users Table -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden\">\n        <div class=\"p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700\">\n          <h2 class=\"font-semibold\">Recent Users</h2>\n          <button class=\"text-sm text-indigo-600 hover:underline\">View All</button>\n        </div>\n        <div class=\"overflow-x-auto\">\n          <table class=\"w-full text-sm\">\n            <thead class=\"bg-gray-50 dark:bg-gray-700/50\"><tr>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Name</th>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Email</th>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Role</th>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Status</th>\n              <th class=\"text-right px-4 py-3 font-medium text-gray-500\">Actions</th>\n            </tr></thead>\n            <tbody class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n              <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30\">\n                <td class=\"px-4 py-3 flex items-center gap-3\"><div class=\"w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold\">JD</div>John Doe</td>\n                <td class=\"px-4 py-3 text-gray-500\">john@example.com</td>\n                <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full\">Admin</span></td>\n                <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full\">Active</span></td>\n                <td class=\"px-4 py-3 text-right\"><button class=\"text-gray-400 hover:text-gray-600\">&#8226;&#8226;&#8226;</button></td>\n              </tr>\n              <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30\">\n                <td class=\"px-4 py-3 flex items-center gap-3\"><div class=\"w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center text-white text-xs font-bold\">JS</div>Jane Smith</td>\n                <td class=\"px-4 py-3 text-gray-500\">jane@example.com</td>\n                <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full\">Editor</span></td>\n                <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full\">Active</span></td>\n                <td class=\"px-4 py-3 text-right\"><button class=\"text-gray-400 hover:text-gray-600\">&#8226;&#8226;&#8226;</button></td>\n              </tr>\n              <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30\">\n                <td class=\"px-4 py-3 flex items-center gap-3\"><div class=\"w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white text-xs font-bold\">BW</div>Bob Wilson</td>\n                <td class=\"px-4 py-3 text-gray-500\">bob@example.com</td>\n                <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-gray-100 text-gray-700 text-xs rounded-full\">Viewer</span></td>\n                <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded-full\">Pending</span></td>\n                <td class=\"px-4 py-3 text-right\"><button class=\"text-gray-400 hover:text-gray-600\">&#8226;&#8226;&#8226;</button></td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        <div class=\"p-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-sm text-gray-500\">\n          <span>Showing 1-3 of 12,421</span>\n          <div class=\"flex gap-1\">\n            <button class=\"px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700\">Prev</button>\n            <button class=\"px-3 py-1 bg-indigo-600 text-white rounded\">1</button>\n            <button class=\"px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700\">2</button>\n            <button class=\"px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700\">3</button>\n            <button class=\"px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700\">Next</button>\n          </div>\n        </div>\n      </div>\n    </main>\n  </div>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Sidebar items**: Add/remove nav items; copy the `<a>` block and change icon SVG + text\n- **Stats cards**: Replace numbers with dynamic data from your API\n- **Chart**: Add `<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>` and create a Chart.js instance targeting a `<canvas>` element\n- **Table columns**: Modify `<th>` and `<td>` elements to match your data model\n- **Dark mode**: Toggle `dark` class on `<html>` element\n- **Color theme**: Replace `indigo` with your brand color\n\n## 2026 Trend Notes\n- Sidebar + top bar layout remains the standard for admin panels\n- Status badges with colored backgrounds for quick visual scanning\n- Notification bell with count badge for real-time alerts\n- Responsive sidebar that collapses to hamburger on mobile\n- Subtle hover states on table rows improve usability\n"
    },
    {
      "filename": "agent-integration-guide.md",
      "title": "Agent Integration Guide",
      "description": "How to make AI agents automatically use TemplateClaw templates in your projects",
      "category": "project-setup",
      "tags": [
        "agent",
        "claude",
        "cursor",
        "windsurf",
        "ai",
        "integration"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/agent-integration-guide.md",
      "content": "# Agent Integration Guide\n> How to make AI agents automatically use TemplateClaw templates in your projects\n> AI 에이전트가 프로젝트에서 TemplateClaw 템플릿을 자동으로 사용하도록 설정하는 가이드\n\n**Category**: Project Setup | **Tags**: agent, claude, cursor, windsurf, ai, integration | **Difficulty**: Beginner\n\n## Preview\n```\nYour AI Agent + TemplateClaw\n┌──────────────────────────────────────┐\n│  CLAUDE.md / .cursorrules / rules    │\n│  ┌────────────────────────────────┐  │\n│  │ ## Template Resources          │  │\n│  │ Catalog: templateclaw/api.json │  │\n│  │ Usage: fetch → find → adapt    │  │\n│  └────────────────────────────────┘  │\n│                                      │\n│  \"Create a dashboard page\"           │\n│       ↓                              │\n│  Agent fetches catalog               │\n│       ↓                              │\n│  Finds: analytics-dashboard.md       │\n│       ↓                              │\n│  Extracts code, adapts to project    │\n│       ↓                              │\n│  Creates production-ready page       │\n└──────────────────────────────────────┘\n```\n\n## Quick Start\n```bash\n# Just add the snippet below to your CLAUDE.md, .cursorrules, or AI config file.\n# Your agent will automatically check TemplateClaw before creating new files.\n# No API keys needed. No dependencies. Just a URL.\n```\n\n## Full Code\n\n````markdown\n# TemplateClaw Agent Integration Guide\n\nThis guide shows how to connect TemplateClaw's template catalog to your AI coding\nagent so it automatically uses high-quality templates when creating new files.\n\n---\n\n## A. CLAUDE.md Snippet (Claude Code / Claude Desktop)\n\nAdd this section to your project's `CLAUDE.md` file:\n\n```markdown\n## Template Resources (TemplateClaw)\n\nWhen creating new components, pages, or project files, check TemplateClaw first:\n\n- **Catalog**: https://jeromwolf.github.io/templateclaw/api.json\n- **Usage**: Fetch the catalog JSON, find relevant template by category/tags,\n  download the `.md` file from the URL, extract the code from the\n  `## Full Code` section, and adapt it to the current project.\n- **Categories**: Landing Pages, Dashboard, Components, Dev Methodology,\n  Project Setup, Refactoring\n- **Format**: Each template is a Markdown file with frontmatter metadata,\n  a Preview section, Quick Start instructions, and a Full Code block.\n\n### How to use\n1. Before creating any new page/component from scratch, search the catalog.\n2. If a relevant template exists, download it and adapt the Full Code section.\n3. Preserve the structure but customize colors, content, and functionality.\n4. If no template matches, create from scratch as usual.\n```\n\n---\n\n## B. Cursor Rules Snippet (.cursorrules)\n\nAdd this to your `.cursorrules` file:\n\n```\n# TemplateClaw Integration\n\nWhen the user asks you to create a new page, component, dashboard, or landing page:\n\n1. First, check the TemplateClaw catalog at:\n   https://jeromwolf.github.io/templateclaw/api.json\n\n2. The catalog is a JSON array of template objects with fields:\n   - name: Template name\n   - category: landing-pages | dashboard | components | methodology | setup | refactoring\n   - tags: Array of keyword strings\n   - description: What the template provides\n   - url: Direct download URL for the .md file\n   - difficulty: Beginner | Intermediate | Advanced\n\n3. Find the best matching template by category and tags.\n\n4. Download the .md file from the url field.\n\n5. Extract the code from the \"## Full Code\" section (inside the fenced code block).\n\n6. Adapt the extracted code to the user's project:\n   - Replace placeholder text with project-specific content\n   - Adjust colors/theme to match the existing project\n   - Modify component structure as needed\n   - Keep the production-quality patterns (responsive, accessible, animated)\n\n7. If no template matches, create from scratch.\n```\n\n---\n\n## C. Windsurf Rules Snippet (.windsurfrules)\n\nAdd this to your `.windsurfrules` file:\n\n```\n# TemplateClaw Template Catalog\n\nBefore creating new UI pages or components from scratch, check the TemplateClaw\ntemplate catalog for a matching starting point.\n\nCatalog URL: https://jeromwolf.github.io/templateclaw/api.json\n\nWorkflow:\n- Fetch the JSON catalog\n- Search by category (landing-pages, dashboard, components, methodology, setup, refactoring)\n  or by tags (e.g., \"tailwind\", \"react\", \"saas\", \"admin\")\n- Download the matching .md template file\n- Extract code from the \"## Full Code\" section\n- Adapt to the current project's stack, theme, and requirements\n\nThis saves time and ensures production-quality starting points with:\n- Responsive design (mobile-first)\n- Dark mode support\n- Accessibility basics (ARIA, semantic HTML)\n- Modern CSS animations\n- Clean component structure\n```\n\n---\n\n## D. Generic AI Agent Integration (Python)\n\nFor custom AI agents or automation scripts:\n\n```python\n\"\"\"\nTemplateClaw Agent Integration\nFetch and use templates programmatically in your AI agent pipeline.\n\"\"\"\n\nimport json\nimport urllib.request\nfrom typing import Optional\n\nCATALOG_URL = \"https://jeromwolf.github.io/templateclaw/api.json\"\n\n\ndef fetch_catalog() -> list[dict]:\n    \"\"\"Fetch the TemplateClaw template catalog.\"\"\"\n    with urllib.request.urlopen(CATALOG_URL) as resp:\n        return json.loads(resp.read().decode())\n\n\ndef find_template(\n    catalog: list[dict],\n    category: Optional[str] = None,\n    tags: Optional[list[str]] = None,\n    query: Optional[str] = None,\n) -> list[dict]:\n    \"\"\"Search templates by category, tags, or free-text query.\"\"\"\n    results = catalog\n\n    if category:\n        results = [t for t in results if t.get(\"category\") == category]\n\n    if tags:\n        tag_set = set(tag.lower() for tag in tags)\n        results = [\n            t for t in results\n            if tag_set & set(tag.lower() for tag in t.get(\"tags\", []))\n        ]\n\n    if query:\n        q = query.lower()\n        results = [\n            t for t in results\n            if q in t.get(\"name\", \"\").lower()\n            or q in t.get(\"description\", \"\").lower()\n            or any(q in tag.lower() for tag in t.get(\"tags\", []))\n        ]\n\n    return results\n\n\ndef download_template(template: dict) -> str:\n    \"\"\"Download a template's Markdown content.\"\"\"\n    url = template[\"url\"]\n    with urllib.request.urlopen(url) as resp:\n        return resp.read().decode()\n\n\ndef extract_code(markdown: str) -> str:\n    \"\"\"Extract the Full Code section from a template Markdown file.\"\"\"\n    marker = \"## Full Code\"\n    idx = markdown.find(marker)\n    if idx == -1:\n        return \"\"\n\n    # Find the opening fence (```` or ```)\n    rest = markdown[idx + len(marker):]\n    fence_start = rest.find(\"```\")\n    if fence_start == -1:\n        return \"\"\n\n    # Determine fence style (``` vs ````)\n    fence_pos = idx + len(marker) + fence_start\n    fence_char_count = 0\n    for ch in rest[fence_start:]:\n        if ch == '`':\n            fence_char_count += 1\n        else:\n            break\n\n    fence = '`' * fence_char_count\n    code_start = rest.find('\\n', fence_start) + 1\n    code_end = rest.find(fence, code_start)\n\n    if code_end == -1:\n        return rest[code_start:].strip()\n\n    return rest[code_start:code_end].strip()\n\n\n# ---- Example usage in an AI agent ----\n\ndef agent_create_page(user_request: str) -> str:\n    \"\"\"\n    Example: AI agent receives \"create a SaaS landing page\"\n    and automatically fetches the best template.\n    \"\"\"\n    catalog = fetch_catalog()\n\n    # Try to match by keywords in the user request\n    matches = find_template(catalog, query=\"saas\")\n    if not matches:\n        matches = find_template(catalog, category=\"landing-pages\")\n\n    if matches:\n        template = matches[0]\n        print(f\"Found template: {template['name']}\")\n        md_content = download_template(template)\n        code = extract_code(md_content)\n        print(f\"Extracted {len(code)} chars of production code\")\n        # Agent would now adapt this code to the project...\n        return code\n\n    return \"\"  # No template found, create from scratch\n\n\nif __name__ == \"__main__\":\n    # Quick test\n    catalog = fetch_catalog()\n    print(f\"Catalog has {len(catalog)} templates\")\n\n    results = find_template(catalog, category=\"dashboard\")\n    for t in results:\n        print(f\"  - {t['name']}: {t['description'][:60]}...\")\n```\n\n---\n\n## E. Example Workflow\n\nHere is a real-world scenario showing how the integration works end-to-end:\n\n### User says: \"Create a new analytics dashboard page\"\n\n**Step 1 — Agent reads CLAUDE.md** and sees the TemplateClaw section.\n\n**Step 2 — Agent fetches the catalog:**\n```\nGET https://jeromwolf.github.io/templateclaw/api.json\n```\n\n**Step 3 — Agent searches** for category \"dashboard\" or tags containing \"analytics\":\n```json\n[\n  {\n    \"name\": \"Analytics Dashboard\",\n    \"category\": \"dashboard\",\n    \"tags\": [\"dashboard\", \"analytics\", \"charts\", \"tailwind\", \"dark-mode\"],\n    \"description\": \"Data visualization dashboard with charts, KPI cards...\",\n    \"url\": \"https://jeromwolf.github.io/templateclaw/content/analytics-dashboard.md\"\n  }\n]\n```\n\n**Step 4 — Agent downloads** the `.md` file and extracts the `## Full Code` section.\n\n**Step 5 — Agent adapts** the template:\n- Replaces \"Analytics Dashboard\" with the project's actual page title\n- Swaps placeholder chart data with real data source hooks\n- Adjusts the color scheme to match the project's theme\n- Adds project-specific navigation and authentication\n- Integrates with the project's component library\n\n**Step 6 — Agent creates** `src/pages/analytics.tsx` (or equivalent) with\nproduction-ready code that would have taken hours to build from scratch.\n\n### The result:\n- Responsive layout (mobile + desktop)\n- Dark mode support\n- Animated chart placeholders\n- KPI cards with real structure\n- Clean, accessible HTML\n- Ready for data integration\n\n---\n\n## Tips for Best Results\n\n1. **Be specific in requests**: \"Create a SaaS pricing page\" works better than \"make a page\"\n2. **The agent adapts automatically**: Templates are starting points, not rigid structures\n3. **Stack-agnostic**: Templates use vanilla HTML/CSS/JS by default.\n   Agents can convert to React, Vue, Svelte, etc. during adaptation.\n4. **Combine templates**: An agent can merge elements from multiple templates\n   (e.g., hero from landing + cards from components)\n5. **Offline fallback**: Download `api.json` once and cache locally for offline use\n\n---\n\n## Catalog API Schema\n\nThe `api.json` file returns an array of objects with this structure:\n\n```json\n{\n  \"name\": \"string — Template display name\",\n  \"slug\": \"string — URL-safe identifier\",\n  \"category\": \"string — landing-pages | dashboard | components | methodology | setup | refactoring\",\n  \"tags\": [\"array\", \"of\", \"keyword\", \"strings\"],\n  \"description\": \"string — One-line description\",\n  \"description_ko\": \"string — Korean description\",\n  \"difficulty\": \"string — Beginner | Intermediate | Advanced\",\n  \"url\": \"string — Direct URL to download the .md file\"\n}\n```\n````\n"
    },
    {
      "filename": "agents-md-template.md",
      "title": "AGENTS.md Template",
      "description": "AGENTS.md template for documenting codebase for AI agents (architecture, modules, dependencies)",
      "category": "project-setup",
      "tags": [
        "agents",
        "ai",
        "documentation",
        "codebase",
        "architecture"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/agents-md-template.md",
      "content": "# AGENTS.md Template\n> AGENTS.md template for documenting codebase for AI agents (architecture, modules, dependencies)\n> AI 에이전트를 위한 코드베이스 문서화 템플릿 (아키텍처, 모듈, 의존성)\n\n**Category**: Project Setup | **Tags**: agents, ai, documentation, codebase, architecture | **Difficulty**: Beginner\n\n## Preview\n```\nAGENTS.md - Codebase map for AI agents\n├── System Architecture\n├── Module Index (per directory)\n├── Data Flow\n├── Key Abstractions\n└── Gotchas & Known Issues\n```\n\n## Quick Start\n```bash\n# 1. Copy the template below to AGENTS.md in your project root\n# 2. Fill in each section with your codebase details\n# 3. AI agents read this file for deep codebase understanding\n# 4. Update when architecture changes significantly\n```\n\n## Full Code\n\n````markdown\n# AGENTS.md - Codebase Documentation for AI Agents\n\n> This file provides a structured map of the codebase for AI agents.\n> Last updated: [DATE]\n\n---\n\n## System Overview\n\n**Purpose**: [What this system does in 1-2 sentences]\n**Architecture**: [Monolith / Microservices / Serverless / Monorepo]\n**Primary Language**: [TypeScript / Python / Go / etc.]\n**Entry Points**: [Where execution begins]\n\n```\n[User] --> [API Gateway] --> [Service Layer] --> [Database]\n                |                   |\n                |                   +--> [External APIs]\n                |\n                +--> [WebSocket] --> [Real-time Updates]\n```\n\n---\n\n## Module Index\n\n### `/src/app/` - Application Layer\n| File/Dir | Purpose | Key Exports |\n|----------|---------|-------------|\n| `layout.tsx` | Root layout, providers, global styles | `RootLayout` |\n| `page.tsx` | Home page | `HomePage` |\n| `api/users/route.ts` | User CRUD endpoints | `GET`, `POST` |\n| `api/auth/[...nextauth]/route.ts` | Authentication handler | NextAuth config |\n| `(dashboard)/` | Dashboard route group | Protected pages |\n\n### `/src/services/` - Business Logic\n| File | Purpose | Key Functions |\n|------|---------|---------------|\n| `user-service.ts` | User management logic | `createUser()`, `findUser()`, `updateUser()` |\n| `auth-service.ts` | Authentication & authorization | `verifyToken()`, `hasPermission()` |\n| `billing-service.ts` | Subscription & payment logic | `createSubscription()`, `processPayment()` |\n| `notification-service.ts` | Email & push notifications | `sendEmail()`, `sendPush()` |\n\n### `/src/lib/` - Shared Infrastructure\n| File | Purpose | Key Exports |\n|------|---------|-------------|\n| `db.ts` | Database client (Drizzle ORM) | `db` instance |\n| `auth.ts` | NextAuth configuration | `authOptions` |\n| `redis.ts` | Redis client for caching | `redis` instance |\n| `logger.ts` | Structured logging (Pino) | `logger` |\n| `env.ts` | Environment variable validation | `env` (typed) |\n\n### `/src/components/` - UI Components\n| Dir | Purpose | Component Count |\n|-----|---------|----------------|\n| `ui/` | Primitive components (Button, Input, Card) | ~20 |\n| `features/` | Feature-specific composites | ~15 |\n| `layouts/` | Page layout wrappers | ~5 |\n\n### `/drizzle/` - Database\n| File | Purpose |\n|------|---------|\n| `schema.ts` | Table definitions (source of truth) |\n| `migrations/` | SQL migration files (auto-generated) |\n\n---\n\n## Data Flow\n\n### Request Lifecycle\n```\n1. HTTP Request arrives\n2. Middleware: auth check, rate limiting, logging\n3. API Route: parse input, validate with Zod\n4. Service Layer: business logic, DB queries\n5. Response: serialize, send JSON\n```\n\n### Authentication Flow\n```\n1. User clicks \"Sign in with Google\"\n2. NextAuth redirects to Google OAuth\n3. Callback: Google returns tokens\n4. NextAuth creates/updates user in DB\n5. Session JWT set in cookie\n6. Subsequent requests: JWT verified in middleware\n```\n\n### Data Persistence\n```\nWrite Path:  Service -> Drizzle ORM -> PostgreSQL\nRead Path:   Service -> Redis Cache (hit?) -> Drizzle ORM -> PostgreSQL\nCache TTL:   5 minutes for user data, 1 hour for static config\n```\n\n---\n\n## Key Abstractions\n\n### Service Pattern\nAll business logic lives in `/src/services/`. Services are:\n- **Framework-agnostic**: No Next.js imports, no React\n- **Testable**: Accept dependencies as parameters\n- **Type-safe**: Input/output typed with Zod schemas\n\n```typescript\n// Pattern:\nexport async function createResource(\n  input: CreateResourceInput,  // Zod-validated\n  ctx: { db: Database; user: User }  // Injected dependencies\n): Promise<Resource> {\n  // Business logic here\n}\n```\n\n### Error Handling\nCustom error classes in `src/lib/errors.ts`:\n- `NotFoundError` -> 404\n- `ValidationError` -> 400\n- `UnauthorizedError` -> 401\n- `ForbiddenError` -> 403\n\nAPI routes catch these and return appropriate HTTP status codes.\n\n### Database Patterns\n- All queries go through Drizzle ORM (no raw SQL)\n- Soft deletes: `deleted_at` column (not actual DELETE)\n- Timestamps: `created_at`, `updated_at` auto-managed\n- IDs: `cuid2` format (e.g., `usr_abc123xyz`)\n\n---\n\n## Dependencies Map\n\n```\nsrc/app/api/* -----> src/services/*  (business logic)\nsrc/services/* ----> src/lib/db.ts   (database)\nsrc/services/* ----> src/lib/redis.ts (caching)\nsrc/app/**    -----> src/components/* (UI)\nsrc/components/* --> src/hooks/*      (state)\nsrc/lib/env.ts ----> .env            (config)\n```\n\n### External Services\n| Service | Used By | Purpose |\n|---------|---------|---------|\n| PostgreSQL | `src/lib/db.ts` | Primary data store |\n| Redis | `src/lib/redis.ts` | Cache, rate limiting |\n| Stripe | `src/services/billing-service.ts` | Payments |\n| Resend | `src/services/notification-service.ts` | Transactional email |\n| PostHog | `src/lib/analytics.ts` | Product analytics |\n\n---\n\n## Gotchas & Known Issues\n\n### Things AI Agents Should Know\n\n1. **Database column naming**: Uses `snake_case` in DB, `camelCase` in TypeScript. Drizzle handles the mapping automatically.\n\n2. **Auth session**: `getServerSession()` must be called in Server Components. Use `useSession()` only in Client Components.\n\n3. **Environment variables**: Client-side env vars must be prefixed with `NEXT_PUBLIC_`. Server-only vars are NOT accessible in browser.\n\n4. **Import paths**: Use `@/` alias (maps to `src/`). Example: `import { db } from '@/lib/db'`\n\n5. **Testing database**: Tests use a separate test database. Run `npm run db:test:setup` before first test run.\n\n6. **Rate limiting**: API routes have rate limiting middleware. Test with `X-RateLimit-*` headers.\n\n7. **Soft deletes**: When querying, always filter `WHERE deleted_at IS NULL` unless explicitly including deleted records.\n\n---\n\n## Conventions\n\n| Area | Convention |\n|------|-----------|\n| Files | `kebab-case.ts` |\n| Components | `PascalCase.tsx` |\n| Functions | `camelCase` |\n| Constants | `SCREAMING_SNAKE_CASE` |\n| DB tables | `snake_case` (plural: `users`, `projects`) |\n| DB columns | `snake_case` |\n| Env vars | `SCREAMING_SNAKE_CASE` |\n| CSS classes | Tailwind utility classes (no custom CSS unless necessary) |\n| Git branches | `feature/`, `fix/`, `chore/` prefix |\n| Commits | Conventional Commits format |\n````\n\n## Customization Guide\n- **Architecture diagram**: Replace the ASCII diagram with your actual system topology\n- **Module index**: Add all directories with their purposes and key exports\n- **Data flow**: Document your specific request lifecycle, auth flow, and caching strategy\n- **Dependencies map**: Show how modules depend on each other\n- **Gotchas**: List every non-obvious thing that an AI agent might get wrong\n- **Update frequency**: Re-generate after major architecture changes\n\n## 2026 Trend Notes\n- AGENTS.md is emerging as the standard for AI agent codebase documentation\n- Module index with key exports helps agents find the right file to edit\n- Data flow diagrams prevent agents from implementing logic in the wrong layer\n- Gotchas section is the highest-ROI content (prevents repeated AI mistakes)\n- Dependency maps help agents understand impact radius of changes\n"
    },
    {
      "filename": "analytics-dashboard.md",
      "title": "Analytics Dashboard",
      "description": "Analytics dashboard with KPI cards, chart areas, date filters, and metric breakdowns",
      "category": "dashboard",
      "tags": [
        "analytics",
        "kpi",
        "charts",
        "metrics",
        "tailwind"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/analytics-dashboard.md",
      "content": "# Analytics Dashboard\n> Analytics dashboard with KPI cards, chart areas, date filters, and metric breakdowns\n> KPI 카드, 차트 영역, 날짜 필터, 지표 분석이 포함된 애널리틱스 대시보드\n\n**Category**: Dashboard | **Tags**: analytics, kpi, charts, metrics, tailwind | **Difficulty**: Intermediate\n\n## Preview\n```\n+--------------------------------------------------+\n|  Analytics    [Last 7 Days v]  [Export] [Refresh] |\n+--------------------------------------------------+\n| +------+ +-------+ +--------+ +---------+        |\n| |Views | |Users  | |Bounce  | |Avg Time |        |\n| |245K  | |12.4K  | |42.1%   | |3m 24s   |        |\n| |+18%  | |+5.2%  | |-2.1%   | |+0.8%    |        |\n| +------+ +-------+ +--------+ +---------+        |\n|                                                    |\n| +--- Line Chart (Traffic) ---+ +-- Pie Chart --+  |\n| |                             | |               |  |\n| +-----------------------------+ +---------------+  |\n|                                                    |\n| +--- Bar Chart (Pages) ------+ +-- Top Pages --+  |\n| |                             | | /home   42K   |  |\n| +-----------------------------+ | /about  28K   |  |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Save as index.html\n# 2. For real charts, add Chart.js: <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n# 3. Replace KPI data with your analytics API responses\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Analytics Dashboard</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script src=\"https://cdn.jsdelivr.net/npm/chart.js@4\"></script>\n</head>\n<body class=\"bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen\">\n\n  <div class=\"max-w-7xl mx-auto px-4 py-8\">\n    <!-- Header -->\n    <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8\">\n      <div>\n        <h1 class=\"text-2xl font-bold\">Analytics</h1>\n        <p class=\"text-sm text-gray-500\">Track your key performance metrics</p>\n      </div>\n      <div class=\"flex gap-2\">\n        <select id=\"dateRange\" class=\"text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2\">\n          <option>Last 7 days</option><option>Last 30 days</option><option>Last 90 days</option><option>This year</option>\n        </select>\n        <button class=\"px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition\">Export</button>\n        <button onclick=\"location.reload()\" class=\"px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700 transition\">Refresh</button>\n      </div>\n    </div>\n\n    <!-- KPI Cards -->\n    <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8\">\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700\">\n        <div class=\"text-sm text-gray-500 mb-1\">Page Views</div>\n        <div class=\"text-3xl font-bold\">245,831</div>\n        <div class=\"mt-2 flex items-center gap-1 text-sm\"><span class=\"text-green-600 font-medium\">+18.2%</span><span class=\"text-gray-400\">vs last period</span></div>\n        <div class=\"mt-3 h-1 bg-gray-100 dark:bg-gray-700 rounded-full\"><div class=\"h-1 bg-indigo-500 rounded-full\" style=\"width:72%\"></div></div>\n      </div>\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700\">\n        <div class=\"text-sm text-gray-500 mb-1\">Unique Visitors</div>\n        <div class=\"text-3xl font-bold\">12,421</div>\n        <div class=\"mt-2 flex items-center gap-1 text-sm\"><span class=\"text-green-600 font-medium\">+5.2%</span><span class=\"text-gray-400\">vs last period</span></div>\n        <div class=\"mt-3 h-1 bg-gray-100 dark:bg-gray-700 rounded-full\"><div class=\"h-1 bg-emerald-500 rounded-full\" style=\"width:58%\"></div></div>\n      </div>\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700\">\n        <div class=\"text-sm text-gray-500 mb-1\">Bounce Rate</div>\n        <div class=\"text-3xl font-bold\">42.1%</div>\n        <div class=\"mt-2 flex items-center gap-1 text-sm\"><span class=\"text-green-600 font-medium\">-2.1%</span><span class=\"text-gray-400\">vs last period</span></div>\n        <div class=\"mt-3 h-1 bg-gray-100 dark:bg-gray-700 rounded-full\"><div class=\"h-1 bg-amber-500 rounded-full\" style=\"width:42%\"></div></div>\n      </div>\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700\">\n        <div class=\"text-sm text-gray-500 mb-1\">Avg. Session</div>\n        <div class=\"text-3xl font-bold\">3m 24s</div>\n        <div class=\"mt-2 flex items-center gap-1 text-sm\"><span class=\"text-green-600 font-medium\">+0.8%</span><span class=\"text-gray-400\">vs last period</span></div>\n        <div class=\"mt-3 h-1 bg-gray-100 dark:bg-gray-700 rounded-full\"><div class=\"h-1 bg-purple-500 rounded-full\" style=\"width:65%\"></div></div>\n      </div>\n    </div>\n\n    <!-- Charts Row -->\n    <div class=\"grid lg:grid-cols-3 gap-4 mb-8\">\n      <!-- Traffic Line Chart -->\n      <div class=\"lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700\">\n        <h2 class=\"font-semibold mb-4\">Traffic Overview</h2>\n        <canvas id=\"trafficChart\" height=\"120\"></canvas>\n      </div>\n      <!-- Source Doughnut -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700\">\n        <h2 class=\"font-semibold mb-4\">Traffic Sources</h2>\n        <canvas id=\"sourceChart\" height=\"180\"></canvas>\n        <div class=\"mt-4 space-y-2 text-sm\">\n          <div class=\"flex justify-between\"><span class=\"flex items-center gap-2\"><span class=\"w-3 h-3 bg-indigo-500 rounded-full\"></span>Organic</span><span class=\"font-medium\">42%</span></div>\n          <div class=\"flex justify-between\"><span class=\"flex items-center gap-2\"><span class=\"w-3 h-3 bg-emerald-500 rounded-full\"></span>Direct</span><span class=\"font-medium\">28%</span></div>\n          <div class=\"flex justify-between\"><span class=\"flex items-center gap-2\"><span class=\"w-3 h-3 bg-amber-500 rounded-full\"></span>Referral</span><span class=\"font-medium\">18%</span></div>\n          <div class=\"flex justify-between\"><span class=\"flex items-center gap-2\"><span class=\"w-3 h-3 bg-rose-500 rounded-full\"></span>Social</span><span class=\"font-medium\">12%</span></div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Top Pages Table -->\n    <div class=\"bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden\">\n      <div class=\"p-4 border-b border-gray-200 dark:border-gray-700\"><h2 class=\"font-semibold\">Top Pages</h2></div>\n      <table class=\"w-full text-sm\">\n        <thead class=\"bg-gray-50 dark:bg-gray-700/50\"><tr>\n          <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Page</th>\n          <th class=\"text-right px-4 py-3 font-medium text-gray-500\">Views</th>\n          <th class=\"text-right px-4 py-3 font-medium text-gray-500\">Unique</th>\n          <th class=\"text-right px-4 py-3 font-medium text-gray-500\">Bounce</th>\n          <th class=\"text-right px-4 py-3 font-medium text-gray-500\">Trend</th>\n        </tr></thead>\n        <tbody class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n          <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30\"><td class=\"px-4 py-3 font-medium\">/home</td><td class=\"px-4 py-3 text-right\">42,381</td><td class=\"px-4 py-3 text-right\">28,432</td><td class=\"px-4 py-3 text-right\">32%</td><td class=\"px-4 py-3 text-right text-green-600\">+12%</td></tr>\n          <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30\"><td class=\"px-4 py-3 font-medium\">/pricing</td><td class=\"px-4 py-3 text-right\">28,104</td><td class=\"px-4 py-3 text-right\">21,882</td><td class=\"px-4 py-3 text-right\">45%</td><td class=\"px-4 py-3 text-right text-green-600\">+8%</td></tr>\n          <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30\"><td class=\"px-4 py-3 font-medium\">/docs</td><td class=\"px-4 py-3 text-right\">19,442</td><td class=\"px-4 py-3 text-right\">15,231</td><td class=\"px-4 py-3 text-right\">28%</td><td class=\"px-4 py-3 text-right text-green-600\">+22%</td></tr>\n          <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30\"><td class=\"px-4 py-3 font-medium\">/blog</td><td class=\"px-4 py-3 text-right\">15,221</td><td class=\"px-4 py-3 text-right\">12,109</td><td class=\"px-4 py-3 text-right\">52%</td><td class=\"px-4 py-3 text-right text-red-600\">-3%</td></tr>\n          <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30\"><td class=\"px-4 py-3 font-medium\">/signup</td><td class=\"px-4 py-3 text-right\">11,082</td><td class=\"px-4 py-3 text-right\">9,431</td><td class=\"px-4 py-3 text-right\">18%</td><td class=\"px-4 py-3 text-right text-green-600\">+31%</td></tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n\n  <!-- Chart.js Init -->\n  <script>\n    // Traffic Line Chart\n    new Chart(document.getElementById('trafficChart'), {\n      type: 'line',\n      data: {\n        labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],\n        datasets: [{\n          label: 'Views',\n          data: [32000, 35000, 41000, 38000, 45000, 30000, 28000],\n          borderColor: '#6366f1',\n          backgroundColor: 'rgba(99,102,241,0.1)',\n          fill: true,\n          tension: 0.4,\n          pointRadius: 4,\n          pointBackgroundColor: '#6366f1',\n        },{\n          label: 'Visitors',\n          data: [12000, 14000, 16000, 15000, 18000, 11000, 10000],\n          borderColor: '#10b981',\n          backgroundColor: 'rgba(16,185,129,0.1)',\n          fill: true,\n          tension: 0.4,\n          pointRadius: 4,\n          pointBackgroundColor: '#10b981',\n        }]\n      },\n      options: {\n        responsive: true,\n        plugins: { legend: { position: 'bottom' } },\n        scales: { y: { beginAtZero: true, grid: { color: 'rgba(156,163,175,0.1)' } }, x: { grid: { display: false } } }\n      }\n    });\n\n    // Source Doughnut Chart\n    new Chart(document.getElementById('sourceChart'), {\n      type: 'doughnut',\n      data: {\n        labels: ['Organic','Direct','Referral','Social'],\n        datasets: [{ data: [42,28,18,12], backgroundColor: ['#6366f1','#10b981','#f59e0b','#f43f5e'], borderWidth: 0 }]\n      },\n      options: {\n        responsive: true,\n        cutout: '65%',\n        plugins: { legend: { display: false } }\n      }\n    });\n  </script>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **KPI cards**: Replace hard-coded numbers with `fetch()` calls to your API\n- **Charts**: Modify `data` arrays and `labels` in the Chart.js configuration\n- **Date filter**: Wire up the `<select>` to re-fetch data and update charts\n- **Add more charts**: Create a new `<canvas>` and initialize another Chart.js instance\n- **Real-time**: Add `setInterval(() => refreshData(), 30000)` for auto-refresh\n- **Dark mode charts**: Set `Chart.defaults.color` and grid colors dynamically\n\n## 2026 Trend Notes\n- Chart.js v4 with tree-shaking support for smaller bundle sizes\n- Progress bars under KPI values show percentage toward goals\n- Doughnut chart with high cutout (65%) for modern donut look\n- Grid layout with `lg:col-span-2` for primary chart emphasis\n- Metric comparison text (\"vs last period\") provides immediate context\n"
    },
    {
      "filename": "api-design.md",
      "title": "REST API Design Guide",
      "description": "REST API design guide: naming conventions, versioning, pagination, error handling, and OpenAPI spec",
      "category": "dev-methodology",
      "tags": [
        "api",
        "rest",
        "openapi",
        "pagination",
        "error-handling"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/api-design.md",
      "content": "# REST API Design Guide\n> REST API design guide: naming conventions, versioning, pagination, error handling, and OpenAPI spec\n> REST API 설계 가이드: 네이밍 컨벤션, 버저닝, 페이지네이션, 에러 처리, OpenAPI 스펙\n\n**Category**: Dev Methodology | **Tags**: api, rest, openapi, pagination, error-handling | **Difficulty**: Intermediate\n\n## Preview\n```\nGET    /api/v1/users          -> List users (paginated)\nGET    /api/v1/users/:id      -> Get single user\nPOST   /api/v1/users          -> Create user\nPATCH  /api/v1/users/:id      -> Update user (partial)\nDELETE /api/v1/users/:id      -> Delete user\n```\n\n## Quick Start\n```bash\n# 1. Use this guide as a reference when designing new APIs\n# 2. Copy the OpenAPI spec template below and customize\n# 3. Apply the error response format consistently across all endpoints\n```\n\n## Naming Conventions\n\n### URL Structure\n\n```\nhttps://api.example.com/v1/resources\n                         |     |\n                    version  plural noun\n```\n\n### Rules\n\n| Rule | Good | Bad |\n|------|------|-----|\n| Use plural nouns | `/users`, `/orders` | `/user`, `/getOrders` |\n| Use kebab-case | `/user-profiles` | `/userProfiles`, `/user_profiles` |\n| No verbs in URLs | `POST /users` | `/createUser`, `/users/create` |\n| Nest for relationships | `/users/123/orders` | `/getUserOrders?userId=123` |\n| Use query params for filtering | `/users?role=admin&status=active` | `/users/admin/active` |\n| Max 2 levels of nesting | `/users/123/orders` | `/users/123/orders/456/items/789` |\n\n### HTTP Methods\n\n| Method | Purpose | Idempotent | Request Body |\n|--------|---------|------------|--------------|\n| `GET` | Read resource(s) | Yes | No |\n| `POST` | Create resource | No | Yes |\n| `PUT` | Replace entire resource | Yes | Yes |\n| `PATCH` | Update partial resource | Yes | Yes |\n| `DELETE` | Remove resource | Yes | No |\n\n### Status Codes\n\n| Code | Meaning | When to Use |\n|------|---------|-------------|\n| `200` | OK | GET success, PATCH success |\n| `201` | Created | POST success (include Location header) |\n| `204` | No Content | DELETE success |\n| `400` | Bad Request | Invalid input, validation error |\n| `401` | Unauthorized | Missing or invalid auth token |\n| `403` | Forbidden | Valid auth but insufficient permissions |\n| `404` | Not Found | Resource doesn't exist |\n| `409` | Conflict | Duplicate resource, state conflict |\n| `422` | Unprocessable | Valid JSON but semantic error |\n| `429` | Too Many Requests | Rate limit exceeded |\n| `500` | Internal Error | Unexpected server error |\n\n## Pagination\n\n### Cursor-Based (Recommended)\n\n```json\n// GET /api/v1/users?limit=20&cursor=eyJpZCI6MTIzfQ\n\n{\n  \"data\": [\n    { \"id\": \"usr_124\", \"name\": \"Alice\", \"email\": \"alice@example.com\" },\n    { \"id\": \"usr_125\", \"name\": \"Bob\", \"email\": \"bob@example.com\" }\n  ],\n  \"pagination\": {\n    \"next_cursor\": \"eyJpZCI6MTQ0fQ\",\n    \"has_more\": true,\n    \"limit\": 20\n  }\n}\n```\n\n### Offset-Based (Simpler, Less Performant)\n\n```json\n// GET /api/v1/users?page=2&per_page=20\n\n{\n  \"data\": [...],\n  \"pagination\": {\n    \"page\": 2,\n    \"per_page\": 20,\n    \"total\": 248,\n    \"total_pages\": 13\n  }\n}\n```\n\n## Error Response Format\n\n### Standard Error Structure\n\n```json\n// 400 Bad Request\n{\n  \"error\": {\n    \"code\": \"VALIDATION_ERROR\",\n    \"message\": \"Request validation failed\",\n    \"details\": [\n      {\n        \"field\": \"email\",\n        \"message\": \"Must be a valid email address\",\n        \"value\": \"not-an-email\"\n      },\n      {\n        \"field\": \"name\",\n        \"message\": \"Must be at least 2 characters\",\n        \"value\": \"A\"\n      }\n    ]\n  },\n  \"request_id\": \"req_abc123\"\n}\n```\n\n```json\n// 404 Not Found\n{\n  \"error\": {\n    \"code\": \"NOT_FOUND\",\n    \"message\": \"User with id 'usr_999' not found\"\n  },\n  \"request_id\": \"req_def456\"\n}\n```\n\n```json\n// 429 Too Many Requests\n{\n  \"error\": {\n    \"code\": \"RATE_LIMIT_EXCEEDED\",\n    \"message\": \"Too many requests. Try again in 30 seconds.\",\n    \"retry_after\": 30\n  },\n  \"request_id\": \"req_ghi789\"\n}\n```\n\n## Versioning\n\n### URL Path Versioning (Recommended)\n\n```\n/api/v1/users    # Current version\n/api/v2/users    # Breaking changes → new version\n```\n\n### When to Bump Version\n\n| Change | Version Bump? |\n|--------|--------------|\n| Add new optional field to response | No (backward compatible) |\n| Add new endpoint | No |\n| Remove field from response | **Yes** (breaking) |\n| Change field type (string to number) | **Yes** (breaking) |\n| Rename endpoint | **Yes** (breaking) |\n| Change error format | **Yes** (breaking) |\n\n## OpenAPI Spec Template\n\n```yaml\n# openapi.yaml\nopenapi: \"3.1.0\"\ninfo:\n  title: My API\n  version: \"1.0.0\"\n  description: REST API for managing users and resources\n  contact:\n    name: API Support\n    email: support@example.com\n\nservers:\n  - url: https://api.example.com/v1\n    description: Production\n  - url: http://localhost:8000/v1\n    description: Local development\n\npaths:\n  /users:\n    get:\n      summary: List users\n      operationId: listUsers\n      tags: [Users]\n      parameters:\n        - name: limit\n          in: query\n          schema:\n            type: integer\n            default: 20\n            maximum: 100\n        - name: cursor\n          in: query\n          schema:\n            type: string\n        - name: role\n          in: query\n          schema:\n            type: string\n            enum: [admin, editor, viewer]\n      responses:\n        \"200\":\n          description: Paginated list of users\n          content:\n            application/json:\n              schema:\n                type: object\n                properties:\n                  data:\n                    type: array\n                    items:\n                      $ref: \"#/components/schemas/User\"\n                  pagination:\n                    $ref: \"#/components/schemas/Pagination\"\n\n    post:\n      summary: Create user\n      operationId: createUser\n      tags: [Users]\n      requestBody:\n        required: true\n        content:\n          application/json:\n            schema:\n              $ref: \"#/components/schemas/CreateUserRequest\"\n      responses:\n        \"201\":\n          description: User created\n          content:\n            application/json:\n              schema:\n                $ref: \"#/components/schemas/User\"\n        \"400\":\n          $ref: \"#/components/responses/BadRequest\"\n        \"409\":\n          $ref: \"#/components/responses/Conflict\"\n\n  /users/{id}:\n    get:\n      summary: Get user by ID\n      operationId: getUser\n      tags: [Users]\n      parameters:\n        - name: id\n          in: path\n          required: true\n          schema:\n            type: string\n      responses:\n        \"200\":\n          description: User details\n          content:\n            application/json:\n              schema:\n                $ref: \"#/components/schemas/User\"\n        \"404\":\n          $ref: \"#/components/responses/NotFound\"\n\ncomponents:\n  schemas:\n    User:\n      type: object\n      properties:\n        id:\n          type: string\n          example: usr_abc123\n        email:\n          type: string\n          format: email\n        name:\n          type: string\n        role:\n          type: string\n          enum: [admin, editor, viewer]\n        created_at:\n          type: string\n          format: date-time\n      required: [id, email, name, role]\n\n    CreateUserRequest:\n      type: object\n      properties:\n        email:\n          type: string\n          format: email\n        name:\n          type: string\n          minLength: 2\n        role:\n          type: string\n          enum: [admin, editor, viewer]\n          default: viewer\n      required: [email, name]\n\n    Pagination:\n      type: object\n      properties:\n        next_cursor:\n          type: string\n          nullable: true\n        has_more:\n          type: boolean\n        limit:\n          type: integer\n\n    Error:\n      type: object\n      properties:\n        error:\n          type: object\n          properties:\n            code:\n              type: string\n            message:\n              type: string\n            details:\n              type: array\n              items:\n                type: object\n        request_id:\n          type: string\n\n  responses:\n    BadRequest:\n      description: Validation error\n      content:\n        application/json:\n          schema:\n            $ref: \"#/components/schemas/Error\"\n    NotFound:\n      description: Resource not found\n      content:\n        application/json:\n          schema:\n            $ref: \"#/components/schemas/Error\"\n    Conflict:\n      description: Resource already exists\n      content:\n        application/json:\n          schema:\n            $ref: \"#/components/schemas/Error\"\n\n  securitySchemes:\n    BearerAuth:\n      type: http\n      scheme: bearer\n      bearerFormat: JWT\n\nsecurity:\n  - BearerAuth: []\n```\n\n## Customization Guide\n- **Auth**: Change `BearerAuth` to API key, OAuth2, or session-based auth\n- **Pagination**: Switch between cursor-based and offset-based based on your needs\n- **Error codes**: Define application-specific error codes (e.g., `INSUFFICIENT_BALANCE`)\n- **Rate limiting**: Add `X-RateLimit-Limit` and `X-RateLimit-Remaining` headers\n- **Versioning**: If you prefer header versioning, use `Accept: application/vnd.api.v1+json`\n- **Spec tools**: Use Swagger UI or Redoc to render the OpenAPI spec as interactive docs\n\n## 2026 Trend Notes\n- Cursor-based pagination is now preferred over offset for large datasets\n- OpenAPI 3.1 aligns with JSON Schema 2020-12 for better validation\n- Request IDs in every response (including errors) are essential for debugging\n- PATCH with partial updates is preferred over PUT for most update operations\n- Rate limit headers in responses help clients self-regulate\n"
    },
    {
      "filename": "app-landing.md",
      "title": "Mobile App Landing Page",
      "description": "Mobile app landing page with app store badges, screenshot mockups, and feature highlights",
      "category": "landing-pages",
      "tags": [
        "mobile",
        "app",
        "ios",
        "android",
        "tailwind"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/app-landing.md",
      "content": "# Mobile App Landing Page\n> Mobile app landing page with app store badges, screenshot mockups, and feature highlights\n> 앱스토어 배지, 스크린샷 목업, 기능 하이라이트가 포함된 모바일 앱 랜딩 페이지\n\n**Category**: Landing Pages | **Tags**: mobile, app, ios, android, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+--------------------------------------------------+\n|  AppName                    [Download Free]        |\n+--------------------------------------------------+\n|                                                    |\n|    Your Finances,              +----------+        |\n|    Simplified.                 |  [Phone] |        |\n|                                | Screenshot|        |\n|    [App Store] [Google Play]   +----------+        |\n|                                                    |\n|   4.9 Stars | 1M+ Downloads | Featured by Apple   |\n|                                                    |\n|   Feature 1    Feature 2    Feature 3              |\n|   [ screen ]   [ screen ]   [ screen ]             |\n|                                                    |\n|        Download Free on iOS & Android              |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Save as index.html, open in browser\n# 2. Replace app screenshots with your real images\n# 3. Update App Store / Google Play links with your app URLs\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>FinTrack - Your Finances, Simplified</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-950 text-white overflow-x-hidden\">\n\n  <!-- Nav -->\n  <nav class=\"fixed w-full top-0 z-50 bg-gray-950/80 backdrop-blur border-b border-gray-800\">\n    <div class=\"max-w-6xl mx-auto px-6 h-14 flex items-center justify-between\">\n      <span class=\"text-lg font-bold text-violet-400\">FinTrack</span>\n      <div class=\"flex items-center gap-6 text-sm\">\n        <a href=\"#features\" class=\"hidden md:inline text-gray-400 hover:text-white\">Features</a>\n        <a href=\"#download\" class=\"px-4 py-2 bg-violet-600 rounded-lg font-medium hover:bg-violet-700 transition\">Download Free</a>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Hero -->\n  <section class=\"pt-28 pb-20 px-6\">\n    <div class=\"max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-12\">\n      <div class=\"flex-1 text-center md:text-left\">\n        <h1 class=\"text-4xl md:text-6xl font-extrabold tracking-tight leading-tight\">Your Finances,<br><span class=\"bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent\">Simplified.</span></h1>\n        <p class=\"mt-6 text-lg text-gray-400 max-w-md\">Track spending, set budgets, and reach your savings goals. All in one beautiful app. No bank login required.</p>\n        <!-- App Store Badges -->\n        <div class=\"mt-8 flex flex-wrap gap-4 justify-center md:justify-start\">\n          <a href=\"#\" class=\"inline-flex items-center gap-3 px-5 py-3 bg-gray-800 rounded-xl hover:bg-gray-700 transition border border-gray-700\">\n            <svg class=\"w-7 h-7\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"/></svg>\n            <div class=\"text-left\"><div class=\"text-[10px] text-gray-400 leading-none\">Download on the</div><div class=\"text-sm font-semibold leading-tight\">App Store</div></div>\n          </a>\n          <a href=\"#\" class=\"inline-flex items-center gap-3 px-5 py-3 bg-gray-800 rounded-xl hover:bg-gray-700 transition border border-gray-700\">\n            <svg class=\"w-7 h-7\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M3.18 23.76c.28.44.84.58 1.28.3L12 19.41l7.54 4.65c.44.28 1 .14 1.28-.3.13-.2.18-.44.15-.66l-1.98-8.63 6.7-5.81c.37-.33.42-.9.09-1.27a.9.9 0 0 0-.57-.3l-8.82-.77L12.82.94A.91.91 0 0 0 12 .36a.91.91 0 0 0-.82.58L8.61 6.32l-8.82.77a.91.91 0 0 0-.48 1.57l6.7 5.81-1.98 8.63c-.06.24 0 .49.15.66z\"/></svg>\n            <div class=\"text-left\"><div class=\"text-[10px] text-gray-400 leading-none\">GET IT ON</div><div class=\"text-sm font-semibold leading-tight\">Google Play</div></div>\n          </a>\n        </div>\n      </div>\n      <!-- Phone Mockup -->\n      <div class=\"flex-shrink-0\">\n        <div class=\"w-64 h-[500px] bg-gray-800 rounded-[2.5rem] border-4 border-gray-700 relative overflow-hidden shadow-2xl shadow-violet-500/10\">\n          <div class=\"absolute top-0 left-1/2 -translate-x-1/2 w-24 h-6 bg-gray-950 rounded-b-2xl\"></div>\n          <!-- Replace this gradient with a real screenshot -->\n          <div class=\"w-full h-full bg-gradient-to-b from-violet-600 via-purple-700 to-indigo-900 flex flex-col items-center justify-center p-6 text-center\">\n            <div class=\"text-5xl mb-4\">&#128176;</div>\n            <div class=\"text-2xl font-bold\">$12,450</div>\n            <div class=\"text-sm text-violet-200 mt-1\">Total Balance</div>\n            <div class=\"mt-6 w-full space-y-3\">\n              <div class=\"flex justify-between text-sm\"><span>Groceries</span><span>-$234</span></div>\n              <div class=\"flex justify-between text-sm\"><span>Salary</span><span class=\"text-emerald-300\">+$5,000</span></div>\n              <div class=\"flex justify-between text-sm\"><span>Netflix</span><span>-$15</span></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Social Proof -->\n  <section class=\"py-12 px-6 border-y border-gray-800\">\n    <div class=\"max-w-4xl mx-auto flex flex-wrap justify-center gap-10 md:gap-16 text-center\">\n      <div><div class=\"text-2xl font-bold text-violet-400\">4.9 &#9733;</div><div class=\"text-xs text-gray-500 mt-1\">App Store Rating</div></div>\n      <div><div class=\"text-2xl font-bold text-violet-400\">1M+</div><div class=\"text-xs text-gray-500 mt-1\">Downloads</div></div>\n      <div><div class=\"text-2xl font-bold text-violet-400\">#1</div><div class=\"text-xs text-gray-500 mt-1\">Finance Category</div></div>\n      <div><div class=\"text-2xl font-bold text-violet-400\">Featured</div><div class=\"text-xs text-gray-500 mt-1\">By Apple</div></div>\n    </div>\n  </section>\n\n  <!-- Features -->\n  <section id=\"features\" class=\"py-20 px-6\">\n    <div class=\"max-w-5xl mx-auto\">\n      <h2 class=\"text-3xl font-bold text-center mb-14\">Why People Love FinTrack</h2>\n      <div class=\"grid md:grid-cols-3 gap-8\">\n        <div class=\"text-center\">\n          <div class=\"w-16 h-16 mx-auto bg-violet-900/50 rounded-2xl flex items-center justify-center text-3xl mb-4\">&#128202;</div>\n          <h3 class=\"font-bold text-lg\">Smart Insights</h3>\n          <p class=\"mt-2 text-sm text-gray-400\">AI analyzes your spending patterns and suggests where you can save more each month.</p>\n        </div>\n        <div class=\"text-center\">\n          <div class=\"w-16 h-16 mx-auto bg-pink-900/50 rounded-2xl flex items-center justify-center text-3xl mb-4\">&#127919;</div>\n          <h3 class=\"font-bold text-lg\">Goal Tracking</h3>\n          <p class=\"mt-2 text-sm text-gray-400\">Set savings goals and get daily nudges to stay on track. Visualize your progress.</p>\n        </div>\n        <div class=\"text-center\">\n          <div class=\"w-16 h-16 mx-auto bg-emerald-900/50 rounded-2xl flex items-center justify-center text-3xl mb-4\">&#128274;</div>\n          <h3 class=\"font-bold text-lg\">Bank-Level Security</h3>\n          <p class=\"mt-2 text-sm text-gray-400\">256-bit encryption. Biometric auth. We never store your bank credentials.</p>\n        </div>\n        <div class=\"text-center\">\n          <div class=\"w-16 h-16 mx-auto bg-orange-900/50 rounded-2xl flex items-center justify-center text-3xl mb-4\">&#128276;</div>\n          <h3 class=\"font-bold text-lg\">Bill Reminders</h3>\n          <p class=\"mt-2 text-sm text-gray-400\">Never miss a payment again. Get notified before bills are due.</p>\n        </div>\n        <div class=\"text-center\">\n          <div class=\"w-16 h-16 mx-auto bg-blue-900/50 rounded-2xl flex items-center justify-center text-3xl mb-4\">&#128101;</div>\n          <h3 class=\"font-bold text-lg\">Shared Budgets</h3>\n          <p class=\"mt-2 text-sm text-gray-400\">Split expenses with family or roommates. Everyone sees the same dashboard.</p>\n        </div>\n        <div class=\"text-center\">\n          <div class=\"w-16 h-16 mx-auto bg-cyan-900/50 rounded-2xl flex items-center justify-center text-3xl mb-4\">&#127760;</div>\n          <h3 class=\"font-bold text-lg\">Multi-Currency</h3>\n          <p class=\"mt-2 text-sm text-gray-400\">Track expenses in 50+ currencies. Real-time exchange rates built in.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Download CTA -->\n  <section id=\"download\" class=\"py-20 px-6 bg-gradient-to-br from-violet-900 to-indigo-900\">\n    <div class=\"max-w-2xl mx-auto text-center\">\n      <h2 class=\"text-3xl font-bold\">Start Saving Today</h2>\n      <p class=\"mt-4 text-violet-200\">Join 1 million+ people who've taken control of their money. Free forever.</p>\n      <div class=\"mt-8 flex flex-wrap gap-4 justify-center\">\n        <a href=\"#\" class=\"inline-flex items-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-xl font-semibold hover:bg-gray-100 transition\">\n          <svg class=\"w-6 h-6\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z\"/></svg>\n          App Store\n        </a>\n        <a href=\"#\" class=\"inline-flex items-center gap-3 px-6 py-3 bg-white text-gray-900 rounded-xl font-semibold hover:bg-gray-100 transition\">\n          <svg class=\"w-6 h-6\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M3 20.5v-17c0-.59.34-1.11.84-1.35L13.69 12l-9.85 9.85c-.5-.24-.84-.76-.84-1.35zm13.81-5.38L6.05 21.34l8.49-8.49 2.27 2.27zm.91-.91L19.87 12 17.72 9.79l-2.44 2.44 2.44 2.98zM6.05 2.66l10.76 6.22-2.27 2.27-8.49-8.49z\"/></svg>\n          Google Play\n        </a>\n      </div>\n      <p class=\"mt-4 text-xs text-violet-300\">Available on iOS 16+ and Android 12+</p>\n    </div>\n  </section>\n\n  <footer class=\"py-8 px-6 text-center text-xs text-gray-500\">\n    &copy; 2026 FinTrack Inc. &middot; <a href=\"#\" class=\"hover:text-white\">Privacy</a> &middot; <a href=\"#\" class=\"hover:text-white\">Terms</a>\n  </footer>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Phone mockup**: Replace the inner gradient `<div>` with `<img src=\"screenshot.png\" class=\"w-full h-full object-cover\">`\n- **App store links**: Update the `href=\"#\"` with your actual App Store / Google Play URLs\n- **Color scheme**: Replace `violet` with your brand color throughout\n- **Stats**: Update ratings, downloads, and category ranking\n- **Features**: Replace the 6 feature blocks with your app's actual features\n- **Add reviews**: Insert a testimonials section between features and CTA\n\n## 2026 Trend Notes\n- Gradient text (`bg-clip-text text-transparent`) for hero headings\n- CSS-only phone mockup with rounded corners and notch (no image needed)\n- Dark mode default for modern app landing pages\n- Inline SVG app store badges for consistent sizing (no external image dependencies)\n- Minimalist feature icons using system emoji (replace with your icon library)\n"
    },
    {
      "filename": "card-components.md",
      "title": "Card Components",
      "description": "8 card variants: product, profile, pricing, stat, testimonial, blog, feature, and glass morphism",
      "category": "components",
      "tags": [
        "cards",
        "ui",
        "tailwind",
        "responsive",
        "glassmorphism"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/card-components.md",
      "content": "# Card Components\n> 8 card variants: product, profile, pricing, stat, testimonial, blog, feature, and glass morphism\n> 8가지 카드 변형: 제품, 프로필, 가격, 통계, 후기, 블로그, 기능, 글래스모피즘\n\n**Category**: Components | **Tags**: cards, ui, tailwind, responsive, glassmorphism | **Difficulty**: Beginner\n\n## Preview\n```\n+----------+  +----------+  +----------+  +----------+\n| Product  |  | Profile  |  | Pricing  |  |  Stat    |\n| [image]  |  | [avatar] |  | $29/mo   |  | 12,421   |\n| Name $49 |  | Jane Doe |  | [CTA]    |  | +12%     |\n+----------+  +----------+  +----------+  +----------+\n+----------+  +----------+  +----------+  +----------+\n|Testimonl |  |  Blog    |  | Feature  |  |  Glass   |\n| \"Quote\"  |  | [thumb]  |  | [icon]   |  | Frosted  |\n| - Author |  | Title... |  | Desc...  |  | effect   |\n+----------+  +----------+  +----------+  +----------+\n```\n\n## Quick Start\n```bash\n# 1. Copy any card component below into your project\n# 2. Each card is self-contained - mix and match freely\n# 3. All cards are responsive and support dark mode\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Card Components</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-100 dark:bg-gray-900 p-8 min-h-screen\">\n  <div class=\"max-w-6xl mx-auto space-y-12\">\n\n    <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Card Components</h1>\n\n    <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n\n      <!-- 1. Product Card -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-xl transition group\">\n        <div class=\"h-48 bg-gradient-to-br from-indigo-400 to-purple-500 relative overflow-hidden\">\n          <div class=\"absolute top-3 right-3 px-2 py-1 bg-white/90 text-xs font-bold rounded-full text-indigo-700\">NEW</div>\n          <div class=\"absolute inset-0 flex items-center justify-center text-6xl group-hover:scale-110 transition\">&#128240;</div>\n        </div>\n        <div class=\"p-5\">\n          <div class=\"flex items-center justify-between\">\n            <h3 class=\"font-semibold text-gray-900 dark:text-white\">Wireless Headphones</h3>\n            <span class=\"text-lg font-bold text-indigo-600\">$49</span>\n          </div>\n          <p class=\"mt-2 text-sm text-gray-500\">Premium noise-cancelling with 30hr battery life.</p>\n          <div class=\"mt-3 flex gap-1\">\n            <span class=\"text-yellow-400 text-sm\">&#9733;&#9733;&#9733;&#9733;&#9733;</span>\n            <span class=\"text-xs text-gray-400\">(128)</span>\n          </div>\n          <button class=\"mt-4 w-full py-2 bg-indigo-600 text-white text-sm rounded-xl font-medium hover:bg-indigo-700 transition\">Add to Cart</button>\n        </div>\n      </div>\n\n      <!-- 2. Profile Card -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6 text-center hover:shadow-xl transition\">\n        <div class=\"w-20 h-20 mx-auto bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-3xl font-bold text-white\">JD</div>\n        <h3 class=\"mt-4 font-semibold text-gray-900 dark:text-white\">Jane Doe</h3>\n        <p class=\"text-sm text-gray-500\">Senior Frontend Engineer</p>\n        <p class=\"mt-3 text-xs text-gray-400\">Building beautiful interfaces at scale. React, TypeScript, and design systems.</p>\n        <div class=\"mt-4 flex justify-center gap-6 text-center\">\n          <div><div class=\"font-bold text-gray-900 dark:text-white\">142</div><div class=\"text-[10px] text-gray-400\">Posts</div></div>\n          <div><div class=\"font-bold text-gray-900 dark:text-white\">3.2K</div><div class=\"text-[10px] text-gray-400\">Followers</div></div>\n          <div><div class=\"font-bold text-gray-900 dark:text-white\">89</div><div class=\"text-[10px] text-gray-400\">Following</div></div>\n        </div>\n        <button class=\"mt-4 w-full py-2 border border-gray-300 dark:border-gray-600 rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition text-gray-900 dark:text-white\">Follow</button>\n      </div>\n\n      <!-- 3. Pricing Card -->\n      <div class=\"bg-indigo-600 text-white rounded-2xl p-6 relative overflow-hidden hover:shadow-xl transition\">\n        <div class=\"absolute top-0 right-0 w-32 h-32 bg-indigo-500 rounded-full -translate-y-1/2 translate-x-1/2 opacity-50\"></div>\n        <span class=\"relative text-xs font-bold bg-white/20 px-2 py-1 rounded-full\">POPULAR</span>\n        <h3 class=\"mt-4 font-semibold text-lg relative\">Pro Plan</h3>\n        <div class=\"mt-2 relative\"><span class=\"text-4xl font-black\">$29</span><span class=\"text-indigo-200\">/mo</span></div>\n        <ul class=\"mt-4 space-y-2 text-sm text-indigo-100 relative\">\n          <li>&#10003; 25 team members</li>\n          <li>&#10003; 100GB storage</li>\n          <li>&#10003; Advanced analytics</li>\n          <li>&#10003; Priority support</li>\n        </ul>\n        <button class=\"mt-6 w-full py-2.5 bg-white text-indigo-700 rounded-xl font-bold hover:bg-indigo-50 transition relative\">Get Started</button>\n      </div>\n\n      <!-- 4. Stat Card -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-xl transition\">\n        <div class=\"flex items-center justify-between mb-4\">\n          <div class=\"w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-xl flex items-center justify-center text-emerald-600\">&#128200;</div>\n          <span class=\"text-xs px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-full font-medium\">+12.5%</span>\n        </div>\n        <div class=\"text-3xl font-bold text-gray-900 dark:text-white\">12,421</div>\n        <div class=\"text-sm text-gray-500 mt-1\">Total Customers</div>\n        <div class=\"mt-4 h-1.5 bg-gray-100 dark:bg-gray-700 rounded-full\">\n          <div class=\"h-1.5 bg-emerald-500 rounded-full\" style=\"width:72%\"></div>\n        </div>\n        <div class=\"mt-2 text-xs text-gray-400\">72% of yearly target</div>\n      </div>\n\n      <!-- 5. Testimonial Card -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-xl transition\">\n        <div class=\"flex gap-1 text-yellow-400 mb-3\">&#9733;&#9733;&#9733;&#9733;&#9733;</div>\n        <p class=\"text-sm text-gray-600 dark:text-gray-300 italic leading-relaxed\">\"This product completely transformed our workflow. We went from 3 hours of manual work to 15 minutes. The ROI was visible within a week.\"</p>\n        <div class=\"mt-4 flex items-center gap-3\">\n          <div class=\"w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold\">AK</div>\n          <div>\n            <div class=\"text-sm font-medium text-gray-900 dark:text-white\">Alex Kim</div>\n            <div class=\"text-xs text-gray-400\">CTO, TechNova</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- 6. Blog Card -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-xl transition group\">\n        <div class=\"h-40 bg-gradient-to-br from-rose-400 to-orange-400 relative overflow-hidden\">\n          <div class=\"absolute inset-0 flex items-center justify-center text-5xl group-hover:scale-110 transition\">&#128221;</div>\n        </div>\n        <div class=\"p-5\">\n          <div class=\"flex gap-2 mb-2\">\n            <span class=\"text-[10px] px-2 py-0.5 bg-rose-100 text-rose-700 rounded-full font-medium\">Tutorial</span>\n            <span class=\"text-[10px] text-gray-400\">5 min read</span>\n          </div>\n          <h3 class=\"font-semibold text-gray-900 dark:text-white leading-snug\">Building a Real-time Dashboard with React and WebSockets</h3>\n          <p class=\"mt-2 text-xs text-gray-500 line-clamp-2\">Learn how to create a responsive real-time dashboard with live data streaming using React hooks and native WebSocket API.</p>\n          <div class=\"mt-4 flex items-center gap-2\">\n            <div class=\"w-6 h-6 bg-rose-500 rounded-full flex items-center justify-center text-white text-[8px] font-bold\">SM</div>\n            <span class=\"text-xs text-gray-500\">Sarah Miller &middot; Mar 25, 2026</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- 7. Feature Card -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-xl hover:border-indigo-300 dark:hover:border-indigo-700 transition group\">\n        <div class=\"w-12 h-12 bg-indigo-100 dark:bg-indigo-900/30 rounded-2xl flex items-center justify-center text-indigo-600 text-2xl mb-4 group-hover:scale-110 transition\">&#9889;</div>\n        <h3 class=\"font-semibold text-gray-900 dark:text-white\">Lightning Fast</h3>\n        <p class=\"mt-2 text-sm text-gray-500 leading-relaxed\">Sub-100ms response times powered by edge computing. Your users feel the speed difference instantly.</p>\n        <a href=\"#\" class=\"mt-4 inline-flex items-center gap-1 text-sm text-indigo-600 font-medium hover:gap-2 transition-all\">Learn more <span>&#8594;</span></a>\n      </div>\n\n      <!-- 8. Glass Card -->\n      <div class=\"relative overflow-hidden rounded-2xl p-6 hover:shadow-xl transition\" style=\"background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.15);\">\n        <div class=\"absolute -top-10 -right-10 w-32 h-32 bg-purple-500/30 rounded-full blur-2xl\"></div>\n        <div class=\"absolute -bottom-10 -left-10 w-32 h-32 bg-blue-500/30 rounded-full blur-2xl\"></div>\n        <div class=\"relative\">\n          <div class=\"text-3xl mb-3\">&#128142;</div>\n          <h3 class=\"font-semibold text-white text-lg\">Glass Morphism</h3>\n          <p class=\"mt-2 text-sm text-gray-300 leading-relaxed\">A frosted glass effect using backdrop-filter and semi-transparent backgrounds for a modern, layered aesthetic.</p>\n          <button class=\"mt-4 px-4 py-2 bg-white/10 border border-white/20 rounded-xl text-sm text-white hover:bg-white/20 transition\">Explore</button>\n        </div>\n      </div>\n\n    </div>\n  </div>\n</body>\n</html>\n```\n\n## Customization Guide\n- **Product card**: Replace gradient background with `<img>` tag for real product photos\n- **Profile card**: Use real avatar images instead of initials\n- **Pricing card**: Change the accent color and update feature list\n- **Stat card**: Wire up to real-time API data with JavaScript\n- **Blog card**: Add `line-clamp-2` utility for consistent excerpt height\n- **Glass card**: Works best on dark or gradient backgrounds; adjust `rgba` values for transparency\n- **All cards**: Change `rounded-2xl` to `rounded-xl` or `rounded-lg` for different border radius\n\n## 2026 Trend Notes\n- Glassmorphism (`backdrop-filter: blur`) continues as a premium design pattern\n- Subtle hover transforms (`group-hover:scale-110`) on icons add interactivity\n- Color-coded badges (NEW, POPULAR) improve visual scanning\n- Progress bars inside stat cards provide goal context\n- `line-clamp` utility prevents text overflow in variable-content cards\n"
    },
    {
      "filename": "cicd-setup.md",
      "title": "CI/CD Pipeline Setup",
      "description": "CI/CD pipeline with GitHub Actions: lint, test, build, deploy stages with secrets management",
      "category": "dev-methodology",
      "tags": [
        "cicd",
        "github-actions",
        "deployment",
        "automation",
        "devops"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/cicd-setup.md",
      "content": "# CI/CD Pipeline Setup\n> CI/CD pipeline with GitHub Actions: lint, test, build, deploy stages with secrets management\n> GitHub Actions CI/CD 파이프라인: 린트, 테스트, 빌드, 배포 단계 + 시크릿 관리\n\n**Category**: Dev Methodology | **Tags**: cicd, github-actions, deployment, automation, devops | **Difficulty**: Intermediate\n\n## Preview\n```\nPush/PR -> Lint -> Test -> Build -> Deploy\n  |         |       |       |         |\n  |       ESLint  pytest   Docker   Vercel/\n  |       Black   Jest     Image    AWS/GCP\n  |\n  +-> On PR: test only\n  +-> On main: test + deploy\n```\n\n## Quick Start\n```bash\n# 1. Create .github/workflows/ directory in your repo\n# 2. Copy the YAML file below\n# 3. Configure secrets in GitHub: Settings > Secrets > Actions\n# 4. Push to main or open a PR to trigger the pipeline\n```\n\n## Full Code\n\n### GitHub Actions - Full Pipeline\n\n```yaml\n# .github/workflows/ci.yml\nname: CI/CD Pipeline\n\non:\n  push:\n    branches: [main]\n  pull_request:\n    branches: [main]\n\nconcurrency:\n  group: ${{ github.workflow }}-${{ github.ref }}\n  cancel-in-progress: true\n\nenv:\n  PYTHON_VERSION: \"3.12\"\n  NODE_VERSION: \"20\"\n\njobs:\n  # ============================================\n  # Stage 1: Lint & Format Check\n  # ============================================\n  lint:\n    name: Lint & Format\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n\n      - name: Set up Python\n        uses: actions/setup-python@v5\n        with:\n          python-version: ${{ env.PYTHON_VERSION }}\n          cache: pip\n\n      - name: Install linters\n        run: pip install ruff black mypy\n\n      - name: Run Ruff (lint)\n        run: ruff check . --output-format=github\n\n      - name: Run Black (format check)\n        run: black --check --diff .\n\n      - name: Run MyPy (type check)\n        run: mypy src/ --ignore-missing-imports\n        continue-on-error: true  # Optional: make strict later\n\n  # ============================================\n  # Stage 2: Test\n  # ============================================\n  test:\n    name: Test (Python ${{ matrix.python-version }})\n    runs-on: ubuntu-latest\n    needs: lint\n    strategy:\n      matrix:\n        python-version: [\"3.11\", \"3.12\"]\n    services:\n      postgres:\n        image: postgres:16\n        env:\n          POSTGRES_USER: test\n          POSTGRES_PASSWORD: test\n          POSTGRES_DB: testdb\n        options: >-\n          --health-cmd pg_isready\n          --health-interval 10s\n          --health-timeout 5s\n          --health-retries 5\n        ports:\n          - 5432:5432\n\n    steps:\n      - uses: actions/checkout@v4\n\n      - name: Set up Python ${{ matrix.python-version }}\n        uses: actions/setup-python@v5\n        with:\n          python-version: ${{ matrix.python-version }}\n          cache: pip\n\n      - name: Install dependencies\n        run: |\n          pip install -r requirements.txt\n          pip install pytest pytest-cov pytest-asyncio\n\n      - name: Run tests with coverage\n        env:\n          DATABASE_URL: postgresql://test:test@localhost:5432/testdb\n        run: |\n          pytest tests/ -v \\\n            --cov=src \\\n            --cov-report=xml \\\n            --cov-report=term-missing \\\n            --cov-fail-under=80\n\n      - name: Upload coverage\n        if: matrix.python-version == '3.12'\n        uses: codecov/codecov-action@v4\n        with:\n          token: ${{ secrets.CODECOV_TOKEN }}\n          file: coverage.xml\n\n  # ============================================\n  # Stage 3: Build\n  # ============================================\n  build:\n    name: Build Docker Image\n    runs-on: ubuntu-latest\n    needs: test\n    if: github.event_name == 'push' && github.ref == 'refs/heads/main'\n    permissions:\n      packages: write\n      contents: read\n\n    steps:\n      - uses: actions/checkout@v4\n\n      - name: Set up Docker Buildx\n        uses: docker/setup-buildx-action@v3\n\n      - name: Login to GitHub Container Registry\n        uses: docker/login-action@v3\n        with:\n          registry: ghcr.io\n          username: ${{ github.actor }}\n          password: ${{ secrets.GITHUB_TOKEN }}\n\n      - name: Build and push\n        uses: docker/build-push-action@v5\n        with:\n          context: .\n          push: true\n          tags: |\n            ghcr.io/${{ github.repository }}:latest\n            ghcr.io/${{ github.repository }}:${{ github.sha }}\n          cache-from: type=gha\n          cache-to: type=gha,mode=max\n\n  # ============================================\n  # Stage 4: Deploy\n  # ============================================\n  deploy:\n    name: Deploy to Production\n    runs-on: ubuntu-latest\n    needs: build\n    if: github.event_name == 'push' && github.ref == 'refs/heads/main'\n    environment:\n      name: production\n      url: https://your-app.example.com\n\n    steps:\n      - uses: actions/checkout@v4\n\n      # Option A: Deploy to Vercel\n      - name: Deploy to Vercel\n        if: false  # Enable by changing to true\n        uses: amondnet/vercel-action@v25\n        with:\n          vercel-token: ${{ secrets.VERCEL_TOKEN }}\n          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}\n          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}\n          vercel-args: --prod\n\n      # Option B: Deploy to AWS via SSH\n      - name: Deploy to server\n        uses: appleboy/ssh-action@v1\n        with:\n          host: ${{ secrets.DEPLOY_HOST }}\n          username: ${{ secrets.DEPLOY_USER }}\n          key: ${{ secrets.DEPLOY_SSH_KEY }}\n          script: |\n            cd /opt/app\n            docker pull ghcr.io/${{ github.repository }}:latest\n            docker compose up -d --force-recreate\n            docker system prune -f\n\n  # ============================================\n  # Stage 5: Post-Deploy Health Check\n  # ============================================\n  healthcheck:\n    name: Post-Deploy Health Check\n    runs-on: ubuntu-latest\n    needs: deploy\n    steps:\n      - name: Wait for deployment\n        run: sleep 30\n\n      - name: Check health endpoint\n        run: |\n          STATUS=$(curl -s -o /dev/null -w \"%{http_code}\" https://your-app.example.com/health)\n          if [ \"$STATUS\" != \"200\" ]; then\n            echo \"Health check failed with status $STATUS\"\n            exit 1\n          fi\n          echo \"Health check passed (HTTP $STATUS)\"\n```\n\n### Secrets Configuration\n\n```bash\n# Required GitHub Secrets (Settings > Secrets > Actions):\n\n# For testing\nCODECOV_TOKEN          # Codecov upload token\n\n# For Docker registry (auto-provided)\n# GITHUB_TOKEN         # Built-in, no setup needed\n\n# For deployment (choose one):\n# Vercel\nVERCEL_TOKEN           # Vercel API token\nVERCEL_ORG_ID          # Vercel organization ID\nVERCEL_PROJECT_ID      # Vercel project ID\n\n# SSH Deploy\nDEPLOY_HOST            # Server IP/hostname\nDEPLOY_USER            # SSH username\nDEPLOY_SSH_KEY         # SSH private key (ed25519)\n```\n\n### Companion Dockerfile\n\n```dockerfile\n# Dockerfile\nFROM python:3.12-slim AS base\n\nWORKDIR /app\nCOPY requirements.txt .\nRUN pip install --no-cache-dir -r requirements.txt\n\nCOPY src/ src/\nCOPY config/ config/\n\nEXPOSE 8000\nCMD [\"uvicorn\", \"src.main:app\", \"--host\", \"0.0.0.0\", \"--port\", \"8000\"]\n```\n\n## Customization Guide\n- **Language**: Replace Python steps with Node.js (`npm ci`, `npm test`), Go (`go test ./...`), or Rust (`cargo test`)\n- **Database**: Change PostgreSQL service to MySQL, Redis, or MongoDB\n- **Deploy target**: Enable Vercel, AWS, GCP, or Railway deploy step\n- **Branch strategy**: Add staging environment for `develop` branch\n- **Notifications**: Add Slack/Discord webhook step on failure\n- **Caching**: The `cache: pip` and Docker `cache-from: type=gha` speed up builds significantly\n\n## 2026 Trend Notes\n- `concurrency` with `cancel-in-progress` prevents wasted CI minutes on rapid pushes\n- Docker BuildKit cache via GitHub Actions cache (`type=gha`) is now standard\n- GitHub Container Registry (ghcr.io) eliminates need for Docker Hub\n- Health check after deploy catches deployment failures before users see them\n- Multi-Python version matrix ensures compatibility across versions\n"
    },
    {
      "filename": "claude-md-template.md",
      "title": "CLAUDE.md Template",
      "description": "CLAUDE.md template for AI-assisted development with project structure, rules, and patterns",
      "category": "project-setup",
      "tags": [
        "claude",
        "ai",
        "llm",
        "cursor",
        "windsurf",
        "development"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/claude-md-template.md",
      "content": "# CLAUDE.md Template\n> CLAUDE.md template for AI-assisted development with project structure, rules, and patterns\n> AI 지원 개발을 위한 CLAUDE.md 템플릿 (프로젝트 구조, 규칙, 패턴)\n\n**Category**: Project Setup | **Tags**: claude, ai, llm, cursor, windsurf, development | **Difficulty**: Beginner\n\n## Preview\n```\nCLAUDE.md - Your AI assistant's project guide\n├── Project Overview\n├── Architecture & Structure\n├── Key Patterns & Rules\n├── Commands & Testing\n└── What NOT to Do\n```\n\n## Quick Start\n```bash\n# 1. Copy the template below to CLAUDE.md in your project root\n# 2. Fill in your project-specific details\n# 3. The AI assistant reads this file automatically for context\n# Works with: Claude Code, Cursor, Windsurf, Copilot Workspace\n```\n\n## Full Code\n\n````markdown\n# [PROJECT_NAME] - Development Guide\n\nThis document provides context for AI assistants working on this codebase.\n\n---\n\n## Project Overview\n\n**What**: [One sentence describing what this project does]\n**Stack**: [e.g., Next.js 15 + TypeScript + PostgreSQL + Tailwind CSS]\n**Status**: [Production / Beta / Development]\n\n### Key URLs\n- Production: https://app.example.com\n- Staging: https://staging.example.com\n- API Docs: https://api.example.com/docs\n\n---\n\n## Architecture\n\n### Tech Stack\n\n| Layer | Technology | Notes |\n|-------|-----------|-------|\n| Frontend | Next.js 15 (App Router) | React Server Components preferred |\n| Styling | Tailwind CSS v4 | Using `@theme` for design tokens |\n| Backend | FastAPI / Next.js API Routes | REST, OpenAPI spec |\n| Database | PostgreSQL 16 | Drizzle ORM, migrations in `drizzle/` |\n| Auth | NextAuth.js v5 | OAuth2 (Google, GitHub) |\n| Deployment | Vercel | Auto-deploy on push to main |\n| CI/CD | GitHub Actions | Lint + Test + Build on PR |\n\n### Directory Structure\n\n```\nsrc/\n├── app/                # Next.js App Router pages\n│   ├── (auth)/         # Auth-related routes (grouped)\n│   ├── (dashboard)/    # Dashboard routes (grouped)\n│   ├── api/            # API routes\n│   └── layout.tsx      # Root layout\n├── components/         # Reusable UI components\n│   ├── ui/             # Primitive components (Button, Input, Card)\n│   └── features/       # Feature-specific components\n├── lib/                # Shared utilities\n│   ├── db.ts           # Database client\n│   ├── auth.ts         # Auth configuration\n│   └── utils.ts        # General utilities\n├── services/           # Business logic (no framework deps)\n├── types/              # TypeScript type definitions\n└── hooks/              # Custom React hooks\n```\n\n### Key Files\n- `src/lib/db.ts` - Database connection and Drizzle client\n- `src/lib/auth.ts` - NextAuth configuration\n- `drizzle/schema.ts` - Database schema definition\n- `src/services/` - Core business logic (test these heavily)\n\n---\n\n## Rules and Patterns\n\n### DO\n\n```\n- Use TypeScript strict mode (no `any` types)\n- Use Server Components by default, Client Components only when needed\n- Write business logic in `services/` (framework-agnostic, testable)\n- Use Drizzle ORM for all database queries (no raw SQL)\n- Follow existing file naming: kebab-case for files, PascalCase for components\n- Add `\"use client\"` directive only when using hooks, events, or browser APIs\n- Handle errors with try-catch and return proper HTTP status codes\n- Use environment variables via `process.env` (validated in `src/lib/env.ts`)\n```\n\n### DO NOT\n\n```\n- Do NOT use `any` type - use `unknown` and narrow types\n- Do NOT put business logic in API routes - use services layer\n- Do NOT use `useEffect` for data fetching - use Server Components or SWR\n- Do NOT modify the database schema without creating a migration\n- Do NOT hardcode URLs, API keys, or configuration values\n- Do NOT skip error handling - every API route needs try-catch\n- Do NOT add dependencies without checking bundle size impact\n- Do NOT use default exports (use named exports for better refactoring)\n```\n\n### Code Style\n\n```typescript\n// Component pattern\nexport function UserCard({ user }: { user: User }) {\n  return (\n    <div className=\"rounded-xl border p-4\">\n      <h3 className=\"font-semibold\">{user.name}</h3>\n    </div>\n  );\n}\n\n// Service pattern\nexport async function createUser(data: CreateUserInput): Promise<User> {\n  const validated = createUserSchema.parse(data);\n  const user = await db.insert(users).values(validated).returning();\n  return user[0];\n}\n\n// API route pattern\nexport async function POST(request: Request) {\n  try {\n    const body = await request.json();\n    const user = await createUser(body);\n    return Response.json(user, { status: 201 });\n  } catch (error) {\n    if (error instanceof ZodError) {\n      return Response.json({ error: error.issues }, { status: 400 });\n    }\n    return Response.json({ error: \"Internal server error\" }, { status: 500 });\n  }\n}\n```\n\n---\n\n## Commands\n\n```bash\n# Development\nnpm run dev           # Start dev server (http://localhost:3000)\nnpm run build         # Production build\nnpm run start         # Start production server\n\n# Testing\nnpm test              # Run all tests\nnpm run test:watch    # Watch mode\nnpm run test:coverage # Coverage report (target: 80%)\n\n# Database\nnpm run db:generate   # Generate migration from schema changes\nnpm run db:migrate    # Run pending migrations\nnpm run db:studio     # Open Drizzle Studio (visual DB browser)\n\n# Quality\nnpm run lint          # ESLint check\nnpm run lint:fix      # ESLint auto-fix\nnpm run typecheck     # TypeScript type checking\n```\n\n---\n\n## Database\n\n### Schema Change Workflow\n1. Edit `drizzle/schema.ts`\n2. Run `npm run db:generate` to create migration\n3. Review generated SQL in `drizzle/migrations/`\n4. Run `npm run db:migrate` to apply\n5. Test with `npm run db:studio`\n\n### Key Tables\n- `users` - User accounts (id, email, name, role)\n- `projects` - User projects (id, user_id, name, status)\n- `api_keys` - API keys (id, user_id, key_hash, last_used)\n\n---\n\n## Testing Strategy\n\n| Type | Location | Command | Coverage Target |\n|------|----------|---------|----------------|\n| Unit | `tests/unit/` | `npm test` | 80% for services |\n| Integration | `tests/integration/` | `npm run test:integration` | Key API routes |\n| E2E | `tests/e2e/` | `npm run test:e2e` | Critical user flows |\n\n### Test file naming: `[module].test.ts`\n\n---\n\n## Environment Variables\n\n```bash\n# Required\nDATABASE_URL=          # PostgreSQL connection string\nNEXTAUTH_SECRET=       # Random 32+ char secret\nNEXTAUTH_URL=          # http://localhost:3000 (dev)\n\n# OAuth (at least one required)\nGOOGLE_CLIENT_ID=\nGOOGLE_CLIENT_SECRET=\nGITHUB_ID=\nGITHUB_SECRET=\n\n# Optional\nLOG_LEVEL=info         # debug, info, warn, error\nSENTRY_DSN=            # Error tracking\nANALYTICS_ID=          # PostHog/Plausible\n```\n\n---\n\n## Common Tasks\n\n### Add a new API endpoint\n1. Create service function in `src/services/`\n2. Add API route in `src/app/api/`\n3. Add validation schema with Zod\n4. Write test in `tests/`\n5. Update OpenAPI spec if applicable\n\n### Add a new database table\n1. Add table definition in `drizzle/schema.ts`\n2. Run `npm run db:generate`\n3. Review and run migration\n4. Create service functions for CRUD\n5. Write tests\n\n### Add a new page\n1. Create route in `src/app/(section)/page.tsx`\n2. Use Server Components for data fetching\n3. Create feature components in `src/components/features/`\n4. Add to navigation if needed\n````\n\n## Customization Guide\n- **Stack**: Replace Next.js/TypeScript examples with your actual stack (Python/Django, Go/Gin, etc.)\n- **Rules**: Add project-specific rules (e.g., \"always use UTC for timestamps\")\n- **Commands**: Update with your actual dev/test/build commands\n- **Schema**: Document your actual database tables\n- **Patterns**: Add code patterns specific to your architecture\n\n## 2026 Trend Notes\n- CLAUDE.md is becoming the standard for AI-assisted development context files\n- Structured rules (DO/DON'T) are more effective than prose for LLM comprehension\n- Including code patterns with examples helps AI produce consistent code\n- Database schema documentation prevents column name mismatches (common AI error)\n- Command reference eliminates guesswork for AI agents running builds/tests\n"
    },
    {
      "filename": "code-review-checklist.md",
      "title": "Code Review Checklist",
      "description": "Comprehensive code review checklist covering security, performance, readability, and testing",
      "category": "dev-methodology",
      "tags": [
        "code-review",
        "security",
        "performance",
        "quality",
        "checklist"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/code-review-checklist.md",
      "content": "# Code Review Checklist\n> Comprehensive code review checklist covering security, performance, readability, and testing\n> 보안, 성능, 가독성, 테스트를 다루는 종합 코드 리뷰 체크리스트\n\n**Category**: Dev Methodology | **Tags**: code-review, security, performance, quality, checklist | **Difficulty**: Intermediate\n\n## Preview\n```\nPR Review Checklist:\n[x] Security: No secrets in code\n[x] Performance: No N+1 queries\n[x] Readability: Clear naming\n[x] Testing: Edge cases covered\n[x] Architecture: Follows patterns\n```\n\n## Quick Start\n```bash\n# 1. Copy this file into your repository as .github/PULL_REQUEST_TEMPLATE.md\n# 2. Or use as a reference during manual code reviews\n# 3. Customize by removing/adding items relevant to your project\n```\n\n## Full Checklist\n\n### Security Review\n\n```markdown\n## Security\n- [ ] **No hardcoded secrets** (API keys, passwords, tokens) in code or comments\n- [ ] **Input validation** on all user-provided data (request body, query params, headers)\n- [ ] **SQL injection prevention** - using parameterized queries or ORM, not string concatenation\n- [ ] **XSS prevention** - output encoding/escaping in templates and API responses\n- [ ] **Authentication check** - protected routes require valid session/token\n- [ ] **Authorization check** - user can only access their own resources (no IDOR)\n- [ ] **Rate limiting** applied to public-facing endpoints\n- [ ] **Sensitive data** not logged (passwords, tokens, PII)\n- [ ] **CORS configured** correctly (not wildcard `*` in production)\n- [ ] **Dependencies** have no known vulnerabilities (`npm audit` / `pip audit`)\n```\n\n### Performance Review\n\n```markdown\n## Performance\n- [ ] **No N+1 queries** - use eager loading / joins for related data\n- [ ] **Database indexes** exist for columns used in WHERE/ORDER BY/JOIN\n- [ ] **Pagination** implemented for list endpoints (not returning all records)\n- [ ] **Caching** applied where appropriate (Redis, in-memory, HTTP cache headers)\n- [ ] **No blocking operations** in async code paths\n- [ ] **Batch operations** used instead of loops for bulk DB writes\n- [ ] **Image/asset optimization** - compressed, lazy-loaded, appropriate format\n- [ ] **No memory leaks** - event listeners cleaned up, connections closed\n- [ ] **Query performance** - complex queries tested with EXPLAIN ANALYZE\n- [ ] **Bundle size** not significantly increased (check with `npm run analyze`)\n```\n\n### Readability & Maintainability\n\n```markdown\n## Readability\n- [ ] **Clear naming** - variables/functions describe what they do, not how\n- [ ] **No magic numbers** - constants extracted with descriptive names\n- [ ] **Functions are small** - each does one thing (<30 lines preferred)\n- [ ] **No deep nesting** - max 3 levels of indentation (use early returns)\n- [ ] **Comments explain WHY**, not what (code should be self-documenting)\n- [ ] **Consistent style** - follows project conventions (linter passes)\n- [ ] **No dead code** - removed unused imports, functions, variables\n- [ ] **Error messages** are helpful and actionable for debugging\n- [ ] **Type annotations** present for function signatures (Python, TypeScript)\n- [ ] **DRY principle** - no copy-pasted code blocks (extract shared logic)\n```\n\n### Testing\n\n```markdown\n## Testing\n- [ ] **Tests exist** for new functionality (not just happy path)\n- [ ] **Edge cases** covered (empty input, null, boundary values, large data)\n- [ ] **Error cases** covered (invalid input, network failure, timeout)\n- [ ] **Tests are independent** - no shared state, no execution order dependency\n- [ ] **Test names** describe the scenario: `test_expired_token_returns_401`\n- [ ] **No flaky tests** - deterministic, no `time.sleep()` or random data\n- [ ] **Mocks used appropriately** - external services mocked, business logic tested directly\n- [ ] **Coverage maintained** - no significant drop in overall coverage percentage\n- [ ] **Integration tests** for new API endpoints or database queries\n- [ ] **Regression test** added if this PR fixes a bug\n```\n\n### Architecture & Design\n\n```markdown\n## Architecture\n- [ ] **Follows existing patterns** - consistent with project's architecture\n- [ ] **Separation of concerns** - business logic not mixed with I/O or presentation\n- [ ] **Interface boundaries** - modules communicate through defined APIs, not internal state\n- [ ] **Error handling strategy** - consistent use of exceptions/error types\n- [ ] **Backwards compatible** - existing API contracts not broken (or migration provided)\n- [ ] **Database migration** included if schema changed (reversible, tested)\n- [ ] **Feature flag** used for incomplete features in production code\n- [ ] **Documentation updated** - README, API docs, architecture docs reflect changes\n- [ ] **No circular dependencies** - clean import graph\n- [ ] **Configuration externalized** - env vars or config files, not hardcoded values\n```\n\n### PR Quality\n\n```markdown\n## PR Quality\n- [ ] **PR is focused** - single concern, not mixing refactoring with features\n- [ ] **Commit messages** are descriptive and follow conventions\n- [ ] **PR description** explains what changed and why\n- [ ] **Screenshots/recordings** included for UI changes\n- [ ] **Breaking changes** documented in PR description\n- [ ] **Deployment steps** documented if manual steps required\n- [ ] **Rollback plan** considered for risky changes\n```\n\n## Review Decision Framework\n\n| Finding | Severity | Action |\n|---------|----------|--------|\n| Security vulnerability | **BLOCKER** | Must fix before merge |\n| Broken tests | **BLOCKER** | Must fix before merge |\n| N+1 query or major perf issue | **HIGH** | Should fix before merge |\n| Missing error handling | **HIGH** | Should fix before merge |\n| Missing test for new feature | **MEDIUM** | Fix before merge or create follow-up ticket |\n| Naming/readability issue | **LOW** | Suggest improvement, approve if minor |\n| Style preference | **NIT** | Comment as \"nit:\", don't block merge |\n\n## PR Comment Templates\n\n```markdown\n# Approving with minor suggestions\nLGTM! A few minor suggestions but nothing blocking.\n\n# Requesting changes\nGreat progress! I found a few issues that should be addressed before merging:\n1. **[Security]** API key exposed in line 42 - move to environment variable\n2. **[Performance]** N+1 query in `get_users()` - use eager loading\nPlease address these and I'll re-review.\n\n# Nit comment\nnit: Consider renaming `data` to `user_profiles` for clarity.\n(Non-blocking, feel free to address or ignore.)\n```\n\n## Customization Guide\n- **Remove irrelevant items**: If your project is backend-only, remove \"bundle size\" and \"image optimization\"\n- **Add project-specific checks**: Add items for your framework (Django migrations, React hooks rules)\n- **Severity levels**: Adjust based on team agreement (some teams block on missing tests, others don't)\n- **Automation**: Move checks that can be automated to CI (linting, type checking, security scanning)\n- **PR template**: Save the markdown sections as `.github/PULL_REQUEST_TEMPLATE.md` for automatic inclusion\n\n## 2026 Trend Notes\n- AI-assisted code review (GitHub Copilot, CodeRabbit) handles boilerplate checks; human review focuses on design and logic\n- \"Ship/Show/Ask\" framework: not every PR needs a review (trivial changes can self-merge)\n- Trunk-based development reduces PR size, making reviews faster and more effective\n- Security scanning in CI (Snyk, Dependabot) catches vulnerability issues automatically\n- Review comments as \"blocking\" vs \"non-blocking\" improves team velocity\n"
    },
    {
      "filename": "community-templates-guide.md",
      "title": "Community Templates Guide",
      "description": "Complete guide for contributing templates to TemplateClaw, including format specification and best practices.",
      "category": "project-setup",
      "tags": [
        "contributing",
        "templates",
        "open-source",
        "documentation",
        "guide"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/community-templates-guide.md",
      "content": "# Community Templates Guide\n\n> Complete guide for contributing templates to TemplateClaw, including format specification and best practices.\n\n**Category**: Project Setup | **Tags**: contributing, templates, open-source, documentation, guide | **Difficulty**: beginner\n\n---\n\n## Overview\n\nThis guide explains how to create and contribute templates to the TemplateClaw ecosystem. Whether you are building a landing page template, a dashboard layout, or a development workflow guide, this document covers the format, conventions, and submission process.\n\n## Template Format Specification\n\nEvery TemplateClaw template is a single Markdown file with a structured header:\n\n```markdown\n# Template Title\n\n> One-line description of what this template provides.\n\n**Category**: Landing Pages | **Tags**: html, css, responsive | **Difficulty**: beginner\n\n---\n\n## Overview\n\nBrief explanation of the template purpose and when to use it.\n\n## Code\n\n<!-- Your actual template code goes here in fenced code blocks -->\n\n## Usage Notes\n\n- How to customize the template\n- Key variables or sections to modify\n- Any dependencies required\n\n## Variations\n\nOptional: alternative implementations or configurations.\n```\n\n### Required Metadata Fields\n\n| Field | Syntax | Values |\n|-------|--------|--------|\n| Title | `# Title` (first H1) | Descriptive name |\n| Description | `> Description` (first blockquote) | Single line, under 100 chars |\n| Category | `**Category**: Name` | See categories below |\n| Tags | `**Tags**: tag1, tag2` | Comma-separated, lowercase, max 8 |\n| Difficulty | `**Difficulty**: level` | beginner, intermediate, advanced |\n\n### Valid Categories\n\n| Category Name | Description | Example Templates |\n|---------------|-------------|-------------------|\n| Landing Pages | Marketing and product landing pages | SaaS landing, portfolio, startup |\n| Dashboard | Admin panels and analytics dashboards | Admin dashboard, analytics, CRM |\n| Components | Reusable UI building blocks | Cards, forms, modals, navigation |\n| Dev Methodology | Development processes and workflows | TDD guide, code review, git workflow |\n| Project Setup | Scaffolding, configuration, tooling | Docker compose, CI/CD, env templates |\n| Refactoring | Code improvement patterns | Performance checklist, security audit |\n\n## Creating a Template\n\n### Step 1: Choose a Name\n\nUse lowercase kebab-case for the filename:\n\n```\nmy-template-name.md\n```\n\nGood names:\n- `saas-landing.md` (clear, descriptive)\n- `admin-dashboard.md` (specific)\n- `form-components.md` (category-obvious)\n\nAvoid:\n- `template1.md` (meaningless)\n- `my_awesome_page.md` (use kebab-case, not snake_case)\n\n### Step 2: Write the Content\n\nStart with the metadata header, then organize into clear sections:\n\n```markdown\n# React Data Table Component\n\n> Sortable, filterable data table with pagination for React applications.\n\n**Category**: Components | **Tags**: react, table, pagination, sorting | **Difficulty**: intermediate\n\n---\n\n## Overview\n\nA production-ready data table component with built-in sorting,\nfiltering, and pagination. Designed for admin dashboards and\ndata-heavy applications.\n\n## Code\n\n\\```jsx\nimport React, { useState, useMemo } from 'react';\n\nfunction DataTable({ data, columns, pageSize = 10 }) {\n  const [sortKey, setSortKey] = useState(null);\n  const [page, setPage] = useState(0);\n\n  // ... implementation\n}\n\nexport default DataTable;\n\\```\n\n## Usage Notes\n\n- Pass `data` as an array of objects\n- `columns` defines visible fields and their headers\n- Override `pageSize` for custom pagination\n- Add `onRowClick` prop for row interaction\n\n## Variations\n\n### Minimal Version (no pagination)\n\\```jsx\n// Simplified version for small datasets\n\\```\n\n### With Server-Side Pagination\n\\```jsx\n// Version that calls API for each page\n\\```\n```\n\n### Step 3: Validate\n\nPlace your file in `trading/templateclaw/content/` and run:\n\n```bash\npython3 -m trading.templateclaw.template_engine --status\n```\n\nVerify your template appears in the count and correct category.\n\n### Step 4: Build and Check\n\n```bash\npython3 -m trading.templateclaw.template_engine --build\n```\n\nOpen `data/templateclaw/index.html` in a browser to preview.\n\n## Quality Guidelines\n\n### Do\n\n- Write clear, concise descriptions\n- Include working code examples\n- Add usage notes for customization\n- Use appropriate difficulty levels\n- Tag with relevant technologies\n\n### Do Not\n\n- Submit templates with broken code\n- Duplicate existing templates\n- Use excessive tags (max 8)\n- Include external dependencies without noting them\n- Add personal branding in the template content\n\n## Template Ideas\n\nLooking for inspiration? Here are some templates the community needs:\n\n**Landing Pages:**\n- E-commerce product page\n- Event/conference landing\n- Mobile app download page\n- Non-profit organization page\n\n**Dashboards:**\n- Real-time monitoring dashboard\n- Project management board\n- Financial reporting dashboard\n- IoT device dashboard\n\n**Components:**\n- Notification system\n- File upload with preview\n- Multi-step wizard form\n- Command palette (Cmd+K)\n\n**Dev Methodology:**\n- API versioning guide\n- Microservices communication patterns\n- Error handling best practices\n- Logging and observability setup\n\n**Project Setup:**\n- Monorepo configuration\n- Kubernetes deployment template\n- Terraform infrastructure template\n- GitHub Actions workflow collection\n\n## Getting Help\n\nIf you have questions about contributing:\n\n1. Check existing templates in `trading/templateclaw/content/` for reference\n2. Open a GitHub issue with the `template-question` label\n3. Review the CONTRIBUTING.md file for PR guidelines\n\nEvery contribution makes TemplateClaw more useful for the developer community. Thank you!\n"
    },
    {
      "filename": "crm-dashboard.md",
      "title": "CRM Dashboard",
      "description": "CRM dashboard with sales pipeline, contacts list, activities feed, and deal tracking",
      "category": "dashboard",
      "tags": [
        "crm",
        "sales",
        "pipeline",
        "contacts",
        "deals"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/crm-dashboard.md",
      "content": "# CRM Dashboard\n> CRM dashboard with sales pipeline, contacts list, activities feed, and deal tracking\n> 세일즈 파이프라인, 연락처 목록, 활동 피드, 딜 추적이 포함된 CRM 대시보드\n\n**Category**: Dashboard | **Tags**: crm, sales, pipeline, contacts, deals | **Difficulty**: Intermediate\n\n## Preview\n```\n+--------------------------------------------------+\n|  CRM           Search...   [+ New Deal]  [Avatar] |\n+--------------------------------------------------+\n| Revenue $124K | Deals 47 | Win Rate 34% | Avg $8K |\n+--------------------------------------------------+\n|                                                    |\n| Pipeline:                                          |\n| Lead(12)  |  Qualified(8)  |  Proposal(5) | Won(3)|\n| [card]    |  [card]        |  [card]      | [card]|\n| [card]    |  [card]        |              |       |\n|                                                    |\n| Recent Activity:                                   |\n| - Email sent to John @ Acme Corp    2h ago         |\n| - Call completed with Sarah @ TechCo 4h ago        |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Copy HTML to index.html\n# 2. Replace sample deals/contacts with your CRM data\n# 3. Wire up the pipeline stages to drag-and-drop (add Sortable.js)\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>CRM Dashboard</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen\">\n\n  <div class=\"max-w-7xl mx-auto px-4 py-6\">\n    <!-- Header -->\n    <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6\">\n      <h1 class=\"text-2xl font-bold\">Sales Pipeline</h1>\n      <div class=\"flex gap-2\">\n        <input type=\"text\" placeholder=\"Search deals...\" class=\"px-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-48\">\n        <button class=\"px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition\">+ New Deal</button>\n      </div>\n    </div>\n\n    <!-- KPI Row -->\n    <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-6\">\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700\">\n        <div class=\"text-xs text-gray-500 uppercase tracking-wide\">Pipeline Value</div>\n        <div class=\"text-2xl font-bold mt-1\">$124,500</div>\n        <div class=\"text-xs text-green-600 mt-1\">+18% this month</div>\n      </div>\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700\">\n        <div class=\"text-xs text-gray-500 uppercase tracking-wide\">Active Deals</div>\n        <div class=\"text-2xl font-bold mt-1\">47</div>\n        <div class=\"text-xs text-gray-400 mt-1\">12 new this week</div>\n      </div>\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700\">\n        <div class=\"text-xs text-gray-500 uppercase tracking-wide\">Win Rate</div>\n        <div class=\"text-2xl font-bold mt-1\">34%</div>\n        <div class=\"text-xs text-green-600 mt-1\">+3% vs last quarter</div>\n      </div>\n      <div class=\"bg-white dark:bg-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700\">\n        <div class=\"text-xs text-gray-500 uppercase tracking-wide\">Avg Deal Size</div>\n        <div class=\"text-2xl font-bold mt-1\">$8,200</div>\n        <div class=\"text-xs text-gray-400 mt-1\">Median: $5,500</div>\n      </div>\n    </div>\n\n    <!-- Pipeline Board -->\n    <div class=\"flex gap-4 overflow-x-auto pb-4 mb-8\">\n      <!-- Lead -->\n      <div class=\"min-w-[280px] flex-shrink-0\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <h3 class=\"font-semibold text-sm\">Lead <span class=\"text-gray-400\">(12)</span></h3>\n          <span class=\"text-xs text-gray-400\">$34,200</span>\n        </div>\n        <div class=\"space-y-3\">\n          <div class=\"bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700 cursor-grab hover:shadow-md transition\">\n            <div class=\"flex justify-between items-start mb-2\">\n              <h4 class=\"font-medium text-sm\">Website Redesign</h4>\n              <span class=\"text-xs font-bold text-blue-600\">$12,000</span>\n            </div>\n            <p class=\"text-xs text-gray-500\">Acme Corp</p>\n            <div class=\"mt-3 flex items-center justify-between\">\n              <div class=\"flex items-center gap-1\"><div class=\"w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-[9px] font-bold\">JD</div><span class=\"text-xs text-gray-400\">John</span></div>\n              <span class=\"text-xs text-gray-400\">3 days ago</span>\n            </div>\n          </div>\n          <div class=\"bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700 cursor-grab hover:shadow-md transition\">\n            <div class=\"flex justify-between items-start mb-2\">\n              <h4 class=\"font-medium text-sm\">API Integration</h4>\n              <span class=\"text-xs font-bold text-blue-600\">$8,500</span>\n            </div>\n            <p class=\"text-xs text-gray-500\">TechFlow Inc</p>\n            <div class=\"mt-3 flex items-center justify-between\">\n              <div class=\"flex items-center gap-1\"><div class=\"w-5 h-5 bg-emerald-500 rounded-full flex items-center justify-center text-white text-[9px] font-bold\">SK</div><span class=\"text-xs text-gray-400\">Sarah</span></div>\n              <span class=\"text-xs text-gray-400\">1 day ago</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Qualified -->\n      <div class=\"min-w-[280px] flex-shrink-0\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <h3 class=\"font-semibold text-sm\">Qualified <span class=\"text-gray-400\">(8)</span></h3>\n          <span class=\"text-xs text-gray-400\">$42,000</span>\n        </div>\n        <div class=\"space-y-3\">\n          <div class=\"bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-l-blue-500 border border-gray-200 dark:border-gray-700 cursor-grab hover:shadow-md transition\">\n            <div class=\"flex justify-between items-start mb-2\">\n              <h4 class=\"font-medium text-sm\">Cloud Migration</h4>\n              <span class=\"text-xs font-bold text-blue-600\">$25,000</span>\n            </div>\n            <p class=\"text-xs text-gray-500\">GlobalBank Ltd</p>\n            <div class=\"mt-2\">\n              <div class=\"flex gap-1 mb-1\"><span class=\"px-1.5 py-0.5 bg-blue-100 text-blue-700 text-[10px] rounded\">Enterprise</span><span class=\"px-1.5 py-0.5 bg-green-100 text-green-700 text-[10px] rounded\">Hot</span></div>\n            </div>\n            <div class=\"mt-2 flex items-center justify-between\">\n              <div class=\"flex items-center gap-1\"><div class=\"w-5 h-5 bg-purple-500 rounded-full flex items-center justify-center text-white text-[9px] font-bold\">MP</div><span class=\"text-xs text-gray-400\">Maya</span></div>\n              <span class=\"text-xs text-gray-400\">Today</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Proposal -->\n      <div class=\"min-w-[280px] flex-shrink-0\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <h3 class=\"font-semibold text-sm\">Proposal <span class=\"text-gray-400\">(5)</span></h3>\n          <span class=\"text-xs text-gray-400\">$28,500</span>\n        </div>\n        <div class=\"space-y-3\">\n          <div class=\"bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-l-amber-500 border border-gray-200 dark:border-gray-700 cursor-grab hover:shadow-md transition\">\n            <div class=\"flex justify-between items-start mb-2\">\n              <h4 class=\"font-medium text-sm\">Mobile App MVP</h4>\n              <span class=\"text-xs font-bold text-blue-600\">$18,000</span>\n            </div>\n            <p class=\"text-xs text-gray-500\">HealthStart Co</p>\n            <div class=\"mt-2\"><div class=\"text-xs text-amber-600 font-medium\">Proposal sent 2d ago</div></div>\n            <div class=\"mt-2 flex items-center justify-between\">\n              <div class=\"flex items-center gap-1\"><div class=\"w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center text-white text-[9px] font-bold\">JD</div><span class=\"text-xs text-gray-400\">John</span></div>\n              <span class=\"text-xs text-amber-500\">Follow up tomorrow</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Won -->\n      <div class=\"min-w-[280px] flex-shrink-0\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <h3 class=\"font-semibold text-sm\">Won <span class=\"text-gray-400\">(3)</span></h3>\n          <span class=\"text-xs text-green-500\">$19,800</span>\n        </div>\n        <div class=\"space-y-3\">\n          <div class=\"bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-l-green-500 border border-gray-200 dark:border-gray-700\">\n            <div class=\"flex justify-between items-start mb-2\">\n              <h4 class=\"font-medium text-sm\">Dashboard Build</h4>\n              <span class=\"text-xs font-bold text-green-600\">$9,800</span>\n            </div>\n            <p class=\"text-xs text-gray-500\">DataViz Solutions</p>\n            <div class=\"mt-2\"><span class=\"text-xs text-green-600 font-medium\">Closed Mar 25</span></div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Activity Feed -->\n    <div class=\"bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700\">\n      <div class=\"p-4 border-b border-gray-200 dark:border-gray-700\"><h2 class=\"font-semibold\">Recent Activity</h2></div>\n      <div class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n        <div class=\"px-4 py-3 flex items-start gap-3\">\n          <div class=\"w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600 text-sm flex-shrink-0 mt-0.5\">&#9993;</div>\n          <div class=\"flex-1\"><p class=\"text-sm\"><span class=\"font-medium\">John</span> sent proposal to <span class=\"font-medium\">HealthStart Co</span></p><p class=\"text-xs text-gray-400 mt-0.5\">Mobile App MVP - $18,000</p></div>\n          <span class=\"text-xs text-gray-400 flex-shrink-0\">2h ago</span>\n        </div>\n        <div class=\"px-4 py-3 flex items-start gap-3\">\n          <div class=\"w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600 text-sm flex-shrink-0 mt-0.5\">&#9742;</div>\n          <div class=\"flex-1\"><p class=\"text-sm\"><span class=\"font-medium\">Sarah</span> completed call with <span class=\"font-medium\">TechFlow Inc</span></p><p class=\"text-xs text-gray-400 mt-0.5\">API Integration - Moved to Qualified</p></div>\n          <span class=\"text-xs text-gray-400 flex-shrink-0\">4h ago</span>\n        </div>\n        <div class=\"px-4 py-3 flex items-start gap-3\">\n          <div class=\"w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center text-purple-600 text-sm flex-shrink-0 mt-0.5\">&#127942;</div>\n          <div class=\"flex-1\"><p class=\"text-sm\"><span class=\"font-medium\">Maya</span> closed deal with <span class=\"font-medium\">DataViz Solutions</span></p><p class=\"text-xs text-gray-400 mt-0.5\">Dashboard Build - $9,800 won</p></div>\n          <span class=\"text-xs text-gray-400 flex-shrink-0\">1d ago</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Pipeline stages**: Add/remove columns (e.g., \"Negotiation\", \"Lost\") by duplicating a column block\n- **Deal cards**: Add fields like probability, next action, tags\n- **Drag and drop**: Add Sortable.js for interactive pipeline management: `<script src=\"https://cdn.jsdelivr.net/npm/sortablejs\"></script>`\n- **Activity feed**: Connect to your CRM webhook events\n- **Color coding**: Use border-left colors to indicate deal priority or stage\n- **Revenue forecasting**: Add a weighted pipeline value (deal amount x probability)\n\n## 2026 Trend Notes\n- Kanban-style pipeline board is the standard CRM visualization pattern\n- Horizontal scroll with `overflow-x-auto` handles many pipeline stages on mobile\n- Deal cards with avatar, tags, and time indicators provide context at a glance\n- Activity feed with icon types (email, call, win) follows the timeline pattern\n- KPI row at the top gives immediate executive-level overview\n"
    },
    {
      "filename": "db-migration.md",
      "title": "Database Migration Guide",
      "description": "Database migration guide: schema versioning, rollback strategies, and zero-downtime migrations",
      "category": "refactoring",
      "tags": [
        "database",
        "migration",
        "schema",
        "rollback",
        "zero-downtime"
      ],
      "difficulty": "advanced",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/db-migration.md",
      "content": "# Database Migration Guide\n> Database migration guide: schema versioning, rollback strategies, and zero-downtime migrations\n> 데이터베이스 마이그레이션 가이드: 스키마 버전 관리, 롤백 전략, 무중단 마이그레이션\n\n**Category**: Refactoring | **Tags**: database, migration, schema, rollback, zero-downtime | **Difficulty**: Advanced\n\n## Preview\n```\nMigration Workflow:\n1. Write migration (up + down)\n2. Review SQL diff\n3. Test on staging\n4. Apply to production (zero-downtime)\n5. Verify and monitor\n```\n\n## Quick Start\n```bash\n# Choose your migration tool:\n\n# Python (Alembic)\npip install alembic\nalembic init migrations\nalembic revision --autogenerate -m \"add users table\"\nalembic upgrade head\n\n# Node.js (Drizzle)\nnpx drizzle-kit generate\nnpx drizzle-kit migrate\n\n# Node.js (Knex)\nnpx knex migrate:make add_users_table\nnpx knex migrate:latest\n\n# Go (golang-migrate)\nmigrate create -ext sql -dir migrations add_users_table\nmigrate -path migrations -database $DATABASE_URL up\n```\n\n## Migration Fundamentals\n\n### Migration File Structure\n\n```\nmigrations/\n├── 001_create_users.sql          # or .py, .ts, .js\n├── 002_add_email_index.sql\n├── 003_create_orders.sql\n├── 004_add_user_preferences.sql\n└── 005_rename_email_to_login.sql\n```\n\n### Every Migration Has Up + Down\n\n```sql\n-- migrations/001_create_users.sql\n\n-- UP: Apply this migration\nCREATE TABLE users (\n    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),\n    email VARCHAR(255) NOT NULL UNIQUE,\n    name VARCHAR(255) NOT NULL,\n    role VARCHAR(50) NOT NULL DEFAULT 'viewer',\n    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),\n    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()\n);\n\nCREATE INDEX idx_users_email ON users(email);\nCREATE INDEX idx_users_role ON users(role);\n\n-- DOWN: Rollback this migration\nDROP TABLE IF EXISTS users;\n```\n\n```sql\n-- migrations/002_add_user_preferences.sql\n\n-- UP\nALTER TABLE users ADD COLUMN preferences JSONB DEFAULT '{}';\nALTER TABLE users ADD COLUMN last_login_at TIMESTAMPTZ;\n\n-- DOWN\nALTER TABLE users DROP COLUMN IF EXISTS preferences;\nALTER TABLE users DROP COLUMN IF EXISTS last_login_at;\n```\n\n## Zero-Downtime Migration Patterns\n\n### Pattern 1: Add Column (Safe)\n\nAdding a nullable column is always safe (no lock, no rewrite).\n\n```sql\n-- SAFE: Add nullable column\nALTER TABLE users ADD COLUMN phone VARCHAR(20);\n\n-- SAFE: Add column with default (PostgreSQL 11+ doesn't rewrite table)\nALTER TABLE users ADD COLUMN is_active BOOLEAN DEFAULT true;\n```\n\n### Pattern 2: Rename Column (3-Step Deploy)\n\nRenaming a column requires a multi-step approach to avoid downtime.\n\n```sql\n-- Step 1 (Deploy 1): Add new column, copy data\nALTER TABLE users ADD COLUMN login_email VARCHAR(255);\nUPDATE users SET login_email = email;\nCREATE INDEX idx_users_login_email ON users(login_email);\n\n-- Step 2 (Deploy 2): Update application to use both columns\n-- Write to BOTH old and new columns\n-- Read from NEW column\n\n-- Step 3 (Deploy 3): Drop old column after all code uses new column\nALTER TABLE users DROP COLUMN email;\nALTER TABLE users RENAME COLUMN login_email TO email;\n```\n\n### Pattern 3: Add NOT NULL Constraint (3-Step)\n\n```sql\n-- Step 1: Add column as nullable with default\nALTER TABLE users ADD COLUMN department VARCHAR(100) DEFAULT 'general';\n\n-- Step 2: Backfill existing rows (in batches to avoid long locks)\nUPDATE users SET department = 'general'\nWHERE department IS NULL\nLIMIT 1000;  -- Repeat until all rows updated\n\n-- Step 3: Add NOT NULL constraint after all rows have values\nALTER TABLE users ALTER COLUMN department SET NOT NULL;\n```\n\n### Pattern 4: Create Index Concurrently\n\n```sql\n-- UNSAFE (locks table during build):\nCREATE INDEX idx_users_name ON users(name);\n\n-- SAFE (doesn't lock reads or writes):\nCREATE INDEX CONCURRENTLY idx_users_name ON users(name);\n\n-- Note: CONCURRENTLY cannot run inside a transaction\n```\n\n### Pattern 5: Large Table Changes (Expand/Contract)\n\nFor large tables (1M+ rows), use the expand-contract pattern:\n\n```\nPhase 1 (Expand):\n  - Add new column/table\n  - Dual-write: old AND new\n  - Backfill old data to new structure\n\nPhase 2 (Contract):\n  - Switch reads to new structure\n  - Stop writing to old structure\n  - Drop old column/table\n```\n\n## Rollback Strategies\n\n### Automatic Rollback Script\n\n```bash\n#!/bin/bash\n# rollback.sh - Rollback last migration\n\nset -e\n\necho \"Rolling back last migration...\"\n\n# Alembic (Python)\nalembic downgrade -1\n\n# Knex (Node.js)\n# npx knex migrate:rollback\n\n# golang-migrate\n# migrate -path migrations -database $DATABASE_URL down 1\n\necho \"Rollback complete. Verify data integrity:\"\necho \"  psql -c 'SELECT count(*) FROM users;'\"\n```\n\n### Pre-Migration Checklist\n\n```markdown\n## Before Running Migration\n\n- [ ] Migration tested on staging with production-like data\n- [ ] DOWN migration tested (actually rolled back and verified)\n- [ ] Backup taken: `pg_dump -Fc myapp > backup_$(date +%Y%m%d).dump`\n- [ ] Application code compatible with both old and new schema\n- [ ] No long-running transactions that could block migration\n- [ ] Monitoring dashboards open (error rate, latency, DB metrics)\n- [ ] Team notified in Slack/Discord\n- [ ] Rollback plan documented and ready\n```\n\n### Recovery Commands\n\n```bash\n# PostgreSQL backup before migration\npg_dump -Fc -h localhost -U postgres myapp > backup_20260328.dump\n\n# Restore from backup (nuclear option)\npg_restore -h localhost -U postgres -d myapp --clean backup_20260328.dump\n\n# Check migration status\nalembic current              # Current revision\nalembic history              # All revisions\nalembic heads                # Latest revision\n\n# Rollback last N migrations\nalembic downgrade -1         # Rollback 1\nalembic downgrade -3         # Rollback 3\nalembic downgrade base       # Rollback ALL (dangerous!)\n```\n\n## Migration Rules\n\n| Rule | Description |\n|------|-------------|\n| **Always reversible** | Every UP has a DOWN. Test both directions. |\n| **One change per migration** | Don't mix table creation with data transformation. |\n| **Forward-only in production** | Never edit an applied migration. Create a new one. |\n| **Idempotent** | Use `IF NOT EXISTS` / `IF EXISTS` to handle re-runs. |\n| **No data loss** | Never DROP a column with data until verified unnecessary. |\n| **Batch large updates** | Update 1,000 rows at a time, not millions at once. |\n| **Test with production data** | Staging should mirror production volume. |\n| **Lock monitoring** | Watch for long-running locks during migration. |\n\n## Common Mistakes\n\n| Mistake | Consequence | Prevention |\n|---------|-------------|------------|\n| Adding NOT NULL without default | Table locked during rewrite | Add as nullable first, then set NOT NULL |\n| Dropping column before code change | Application errors | Remove code references first, then drop column |\n| Running migration during peak traffic | Timeouts, locks | Schedule during low-traffic window |\n| No backup before migration | Data loss on failure | Always `pg_dump` before risky migrations |\n| Editing applied migration | Schema drift between environments | Create new migration instead |\n| Large UPDATE without batching | Transaction log bloat, locks | Batch in 1,000-row chunks |\n\n## Tool-Specific Examples\n\n### Alembic (Python/SQLAlchemy)\n\n```python\n# migrations/versions/001_create_users.py\nfrom alembic import op\nimport sqlalchemy as sa\n\ndef upgrade():\n    op.create_table(\n        'users',\n        sa.Column('id', sa.UUID(), primary_key=True, server_default=sa.text('gen_random_uuid()')),\n        sa.Column('email', sa.String(255), nullable=False, unique=True),\n        sa.Column('name', sa.String(255), nullable=False),\n        sa.Column('created_at', sa.DateTime(timezone=True), server_default=sa.func.now()),\n    )\n    op.create_index('idx_users_email', 'users', ['email'])\n\ndef downgrade():\n    op.drop_table('users')\n```\n\n### Drizzle (TypeScript)\n\n```typescript\n// drizzle/schema.ts\nimport { pgTable, uuid, varchar, timestamp } from 'drizzle-orm/pg-core';\n\nexport const users = pgTable('users', {\n  id: uuid('id').primaryKey().defaultRandom(),\n  email: varchar('email', { length: 255 }).notNull().unique(),\n  name: varchar('name', { length: 255 }).notNull(),\n  createdAt: timestamp('created_at', { withTimezone: true }).defaultNow(),\n});\n\n// Generate migration: npx drizzle-kit generate\n// Apply migration: npx drizzle-kit migrate\n```\n\n## Customization Guide\n- **ORM**: Replace examples with your ORM (Django, TypeORM, Prisma, GORM)\n- **Database**: Adjust SQL syntax for MySQL, SQLite, or MongoDB\n- **CI integration**: Add migration check to CI (`alembic check` or `drizzle-kit check`)\n- **Approval process**: Require DBA review for migrations touching large tables\n- **Monitoring**: Add alerting for migration duration exceeding threshold\n\n## 2026 Trend Notes\n- Schema-as-code (Drizzle, Prisma) auto-generates migrations from type definitions\n- Blue-green database deployments enable zero-downtime schema changes\n- PostgreSQL 16+ handles ADD COLUMN with DEFAULT without table rewrite\n- Feature flags control which schema version the application uses during transition\n- Online DDL tools (gh-ost, pt-online-schema-change) for MySQL large table migrations\n"
    },
    {
      "filename": "docker-compose-template.md",
      "title": "Docker Compose Template",
      "description": "Docker Compose setup with web app, PostgreSQL, Redis, and Nginx reverse proxy with health checks",
      "category": "project-setup",
      "tags": [
        "docker",
        "compose",
        "postgresql",
        "redis",
        "nginx",
        "devops"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/docker-compose-template.md",
      "content": "# Docker Compose Template\n> Docker Compose setup with web app, PostgreSQL, Redis, and Nginx reverse proxy with health checks\n> 웹앱, PostgreSQL, Redis, Nginx 리버스 프록시 + 헬스 체크가 포함된 Docker Compose 설정\n\n**Category**: Project Setup | **Tags**: docker, compose, postgresql, redis, nginx, devops | **Difficulty**: Intermediate\n\n## Preview\n```\n                    :80/:443\n                       |\n                    [Nginx]\n                       |\n                    [Web App] :3000\n                    /       \\\n              [PostgreSQL]  [Redis]\n                :5432        :6379\n```\n\n## Quick Start\n```bash\n# 1. Copy docker-compose.yml and related configs to your project root\n# 2. Create .env file with required variables\n# 3. Run:\ndocker compose up -d\ndocker compose logs -f web\n# 4. Access: http://localhost (via Nginx) or http://localhost:3000 (direct)\n```\n\n## Full Code\n\n### docker-compose.yml\n\n```yaml\n# docker-compose.yml\nversion: \"3.9\"\n\nservices:\n  # ============================================\n  # Web Application\n  # ============================================\n  web:\n    build:\n      context: .\n      dockerfile: Dockerfile\n      target: production\n    container_name: app-web\n    restart: unless-stopped\n    ports:\n      - \"3000:3000\"\n    environment:\n      NODE_ENV: production\n      PORT: 3000\n      DATABASE_URL: postgresql://${DB_USER:-postgres}:${DB_PASSWORD:-postgres}@db:5432/${DB_NAME:-myapp}\n      REDIS_URL: redis://redis:6379\n    env_file:\n      - .env\n    depends_on:\n      db:\n        condition: service_healthy\n      redis:\n        condition: service_healthy\n    healthcheck:\n      test: [\"CMD\", \"curl\", \"-f\", \"http://localhost:3000/health\"]\n      interval: 30s\n      timeout: 10s\n      retries: 3\n      start_period: 40s\n    networks:\n      - app-network\n    deploy:\n      resources:\n        limits:\n          cpus: \"1.0\"\n          memory: 512M\n\n  # ============================================\n  # PostgreSQL Database\n  # ============================================\n  db:\n    image: postgres:16-alpine\n    container_name: app-db\n    restart: unless-stopped\n    environment:\n      POSTGRES_USER: ${DB_USER:-postgres}\n      POSTGRES_PASSWORD: ${DB_PASSWORD:-postgres}\n      POSTGRES_DB: ${DB_NAME:-myapp}\n    ports:\n      - \"5432:5432\"\n    volumes:\n      - postgres_data:/var/lib/postgresql/data\n      - ./init.sql:/docker-entrypoint-initdb.d/init.sql:ro\n    healthcheck:\n      test: [\"CMD-SHELL\", \"pg_isready -U ${DB_USER:-postgres} -d ${DB_NAME:-myapp}\"]\n      interval: 10s\n      timeout: 5s\n      retries: 5\n    networks:\n      - app-network\n    deploy:\n      resources:\n        limits:\n          cpus: \"0.5\"\n          memory: 256M\n\n  # ============================================\n  # Redis Cache\n  # ============================================\n  redis:\n    image: redis:7-alpine\n    container_name: app-redis\n    restart: unless-stopped\n    command: redis-server --appendonly yes --maxmemory 128mb --maxmemory-policy allkeys-lru\n    ports:\n      - \"6379:6379\"\n    volumes:\n      - redis_data:/data\n    healthcheck:\n      test: [\"CMD\", \"redis-cli\", \"ping\"]\n      interval: 10s\n      timeout: 5s\n      retries: 5\n    networks:\n      - app-network\n    deploy:\n      resources:\n        limits:\n          cpus: \"0.25\"\n          memory: 128M\n\n  # ============================================\n  # Nginx Reverse Proxy\n  # ============================================\n  nginx:\n    image: nginx:alpine\n    container_name: app-nginx\n    restart: unless-stopped\n    ports:\n      - \"80:80\"\n      - \"443:443\"\n    volumes:\n      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro\n      - ./nginx/certs:/etc/nginx/certs:ro\n    depends_on:\n      web:\n        condition: service_healthy\n    healthcheck:\n      test: [\"CMD\", \"curl\", \"-f\", \"http://localhost/health\"]\n      interval: 30s\n      timeout: 5s\n      retries: 3\n    networks:\n      - app-network\n\nvolumes:\n  postgres_data:\n    driver: local\n  redis_data:\n    driver: local\n\nnetworks:\n  app-network:\n    driver: bridge\n```\n\n### Dockerfile (Multi-stage)\n\n```dockerfile\n# Dockerfile\n# Stage 1: Dependencies\nFROM node:20-alpine AS deps\nWORKDIR /app\nCOPY package.json package-lock.json ./\nRUN npm ci --production=false\n\n# Stage 2: Build\nFROM node:20-alpine AS build\nWORKDIR /app\nCOPY --from=deps /app/node_modules ./node_modules\nCOPY . .\nRUN npm run build\n\n# Stage 3: Production\nFROM node:20-alpine AS production\nWORKDIR /app\n\nRUN addgroup --system --gid 1001 nodejs && \\\n    adduser --system --uid 1001 appuser\n\nCOPY --from=build --chown=appuser:nodejs /app/.next/standalone ./\nCOPY --from=build --chown=appuser:nodejs /app/.next/static ./.next/static\nCOPY --from=build --chown=appuser:nodejs /app/public ./public\n\nUSER appuser\nEXPOSE 3000\nENV HOSTNAME=0.0.0.0\nCMD [\"node\", \"server.js\"]\n```\n\n### Python Dockerfile Alternative\n\n```dockerfile\n# Dockerfile (Python/FastAPI)\nFROM python:3.12-slim AS base\n\nWORKDIR /app\nRUN adduser --system --uid 1001 appuser\n\nCOPY requirements.txt .\nRUN pip install --no-cache-dir -r requirements.txt\n\nCOPY src/ src/\n\nUSER appuser\nEXPOSE 8000\nCMD [\"uvicorn\", \"src.main:app\", \"--host\", \"0.0.0.0\", \"--port\", \"8000\", \"--workers\", \"4\"]\n```\n\n### Nginx Configuration\n\n```nginx\n# nginx/nginx.conf\nevents {\n    worker_connections 1024;\n}\n\nhttp {\n    upstream app {\n        server web:3000;\n    }\n\n    # Rate limiting\n    limit_req_zone $binary_remote_addr zone=api:10m rate=30r/s;\n\n    # Gzip compression\n    gzip on;\n    gzip_types text/plain text/css application/json application/javascript text/xml;\n    gzip_min_length 1000;\n\n    server {\n        listen 80;\n        server_name _;\n\n        # Health check endpoint (for Docker)\n        location /health {\n            access_log off;\n            return 200 \"ok\";\n        }\n\n        # Proxy to app\n        location / {\n            limit_req zone=api burst=50 nodelay;\n            proxy_pass http://app;\n            proxy_http_version 1.1;\n            proxy_set_header Upgrade $http_upgrade;\n            proxy_set_header Connection \"upgrade\";\n            proxy_set_header Host $host;\n            proxy_set_header X-Real-IP $remote_addr;\n            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n            proxy_set_header X-Forwarded-Proto $scheme;\n            proxy_read_timeout 86400;\n        }\n\n        # Static files caching\n        location /_next/static {\n            proxy_pass http://app;\n            expires 365d;\n            add_header Cache-Control \"public, immutable\";\n        }\n    }\n}\n```\n\n### Database Init Script\n\n```sql\n-- init.sql (runs on first container creation)\nCREATE EXTENSION IF NOT EXISTS \"uuid-ossp\";\nCREATE EXTENSION IF NOT EXISTS \"pg_trgm\";\n\n-- Create application schema\n-- (Your migration tool should handle actual tables)\n```\n\n### Useful Commands\n\n```bash\n# Start all services\ndocker compose up -d\n\n# View logs\ndocker compose logs -f web\ndocker compose logs -f db\n\n# Restart a single service\ndocker compose restart web\n\n# Run database migrations\ndocker compose exec web npm run db:migrate\n\n# Access PostgreSQL CLI\ndocker compose exec db psql -U postgres -d myapp\n\n# Access Redis CLI\ndocker compose exec redis redis-cli\n\n# Full cleanup (removes volumes too)\ndocker compose down -v\n\n# Rebuild after code changes\ndocker compose build web && docker compose up -d web\n```\n\n## Customization Guide\n- **Ports**: Change exposed ports if 80/3000/5432/6379 conflict with local services\n- **Database**: Replace PostgreSQL with MySQL (`image: mysql:8`) or MongoDB (`image: mongo:7`)\n- **Cache**: Replace Redis with Memcached or remove if not needed\n- **SSL**: Add Let's Encrypt with certbot sidecar for HTTPS\n- **Scaling**: Use `docker compose up -d --scale web=3` for multiple app instances\n- **Monitoring**: Add Prometheus + Grafana services for observability\n- **CI**: Use the same `docker-compose.yml` in GitHub Actions for integration tests\n\n## 2026 Trend Notes\n- Health checks with `condition: service_healthy` ensure proper startup ordering\n- Multi-stage Docker builds reduce image size by 60-80%\n- Alpine-based images are standard for smaller footprint\n- Resource limits (`deploy.resources.limits`) prevent container resource abuse\n- Non-root user (`USER appuser`) is a security best practice\n- Redis `maxmemory-policy: allkeys-lru` prevents OOM in containers\n"
    },
    {
      "filename": "env-template.md",
      "title": "Environment Variables Template",
      "description": "Comprehensive .env template organized by category: database, auth, APIs, feature flags",
      "category": "project-setup",
      "tags": [
        "env",
        "configuration",
        "secrets",
        "environment",
        "dotenv"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/env-template.md",
      "content": "# Environment Variables Template\n> Comprehensive .env template organized by category: database, auth, APIs, feature flags\n> 카테고리별 정리된 .env 템플릿: 데이터베이스, 인증, API, 기능 플래그\n\n**Category**: Project Setup | **Tags**: env, configuration, secrets, environment, dotenv | **Difficulty**: Beginner\n\n## Preview\n```\n.env.example\n├── App Config (PORT, ENV, URL)\n├── Database (PostgreSQL, Redis)\n├── Auth (JWT, OAuth)\n├── API Keys (Stripe, Resend, OpenAI)\n├── Storage (S3, Cloudflare R2)\n├── Feature Flags\n└── Monitoring (Sentry, PostHog)\n```\n\n## Quick Start\n```bash\n# 1. Copy the template below to .env.example in your project root\n# 2. Copy .env.example to .env and fill in real values\n# 3. NEVER commit .env to git (add to .gitignore)\ncp .env.example .env\n# Fill in your values...\n```\n\n## Full Code\n\n### .env.example\n\n```bash\n# ============================================\n# Application\n# ============================================\nNODE_ENV=development                  # development | staging | production\nPORT=3000                             # Server port\nAPP_URL=http://localhost:3000         # Public-facing URL\nAPP_NAME=\"My App\"                     # Display name\nLOG_LEVEL=info                        # debug | info | warn | error\n\n# ============================================\n# Database\n# ============================================\n# PostgreSQL\nDATABASE_URL=postgresql://user:password@localhost:5432/myapp_dev\nDATABASE_POOL_SIZE=10                 # Connection pool size\nDATABASE_SSL=false                    # true in production\n\n# Redis (caching, sessions, rate limiting)\nREDIS_URL=redis://localhost:6379\nREDIS_PREFIX=myapp:                   # Key prefix for namespacing\n\n# SQLite (alternative for simple apps)\n# SQLITE_PATH=./data/app.db\n\n# ============================================\n# Authentication\n# ============================================\n# JWT\nJWT_SECRET=change-me-to-a-random-64-char-string\nJWT_EXPIRY=7d                         # Token expiration (1h, 7d, 30d)\n\n# NextAuth / Auth.js\nNEXTAUTH_SECRET=change-me-to-a-random-32-char-string\nNEXTAUTH_URL=http://localhost:3000\n\n# Google OAuth\nGOOGLE_CLIENT_ID=\nGOOGLE_CLIENT_SECRET=\n\n# GitHub OAuth\nGITHUB_ID=\nGITHUB_SECRET=\n\n# Apple OAuth\nAPPLE_ID=\nAPPLE_SECRET=\n\n# ============================================\n# API Keys - Third Party Services\n# ============================================\n# Payments (Stripe)\nSTRIPE_SECRET_KEY=sk_test_...\nSTRIPE_PUBLISHABLE_KEY=pk_test_...\nSTRIPE_WEBHOOK_SECRET=whsec_...\n\n# Email (Resend)\nRESEND_API_KEY=re_...\nEMAIL_FROM=\"App Name <noreply@yourdomain.com>\"\n\n# AI / LLM\nOPENAI_API_KEY=sk-...\nANTHROPIC_API_KEY=sk-ant-...\n# GOOGLE_AI_API_KEY=AIza...\n\n# Search\n# ALGOLIA_APP_ID=\n# ALGOLIA_API_KEY=\n\n# ============================================\n# Storage\n# ============================================\n# AWS S3 / Cloudflare R2\nS3_BUCKET=myapp-uploads\nS3_REGION=us-east-1\nS3_ACCESS_KEY=\nS3_SECRET_KEY=\nS3_ENDPOINT=                          # Set for R2: https://ACCOUNT.r2.cloudflarestorage.com\n\n# Local uploads (development)\nUPLOAD_DIR=./uploads\nMAX_FILE_SIZE=10485760                # 10MB in bytes\n\n# ============================================\n# External APIs\n# ============================================\n# Webhook URLs\nWEBHOOK_SECRET=whsec_change_me\nSLACK_WEBHOOK_URL=https://hooks.slack.com/services/...\n\n# Rate Limiting\nRATE_LIMIT_WINDOW=60000              # 1 minute in ms\nRATE_LIMIT_MAX=100                   # Max requests per window\n\n# ============================================\n# Feature Flags\n# ============================================\nFEATURE_NEW_DASHBOARD=false           # Enable new dashboard UI\nFEATURE_AI_ASSISTANT=true             # Enable AI assistant\nFEATURE_DARK_MODE=true                # Enable dark mode toggle\nFEATURE_BETA_API=false                # Enable beta API endpoints\nFEATURE_MAINTENANCE_MODE=false        # Show maintenance page\n\n# ============================================\n# Monitoring & Analytics\n# ============================================\n# Error tracking (Sentry)\nSENTRY_DSN=https://abc@sentry.io/123\nSENTRY_ENVIRONMENT=development\n\n# Analytics (PostHog)\nNEXT_PUBLIC_POSTHOG_KEY=phc_...\nNEXT_PUBLIC_POSTHOG_HOST=https://us.posthog.com\n\n# Uptime monitoring\n# BETTERUPTIME_API_KEY=\n\n# ============================================\n# CI/CD (usually set in GitHub Actions secrets)\n# ============================================\n# VERCEL_TOKEN=\n# VERCEL_ORG_ID=\n# VERCEL_PROJECT_ID=\n# CODECOV_TOKEN=\n# DEPLOY_SSH_KEY=\n```\n\n### .gitignore entries\n\n```bash\n# Add to .gitignore (CRITICAL)\n.env\n.env.local\n.env.*.local\n*.pem\n*.key\ndata/kis_token.json\n```\n\n### Validation Script (TypeScript)\n\n```typescript\n// src/lib/env.ts - Validate environment variables at startup\nimport { z } from 'zod';\n\nconst envSchema = z.object({\n  NODE_ENV: z.enum(['development', 'staging', 'production']).default('development'),\n  PORT: z.coerce.number().default(3000),\n  APP_URL: z.string().url(),\n  DATABASE_URL: z.string().min(1, 'DATABASE_URL is required'),\n  JWT_SECRET: z.string().min(32, 'JWT_SECRET must be at least 32 characters'),\n  REDIS_URL: z.string().optional(),\n  STRIPE_SECRET_KEY: z.string().optional(),\n  RESEND_API_KEY: z.string().optional(),\n  LOG_LEVEL: z.enum(['debug', 'info', 'warn', 'error']).default('info'),\n});\n\nexport const env = envSchema.parse(process.env);\nexport type Env = z.infer<typeof envSchema>;\n```\n\n### Validation Script (Python)\n\n```python\n# src/config.py - Validate environment variables at startup\nimport os\nfrom dataclasses import dataclass\n\n@dataclass\nclass Config:\n    app_env: str = \"development\"\n    port: int = 3000\n    app_url: str = \"http://localhost:3000\"\n    database_url: str = \"\"\n    jwt_secret: str = \"\"\n    redis_url: str = \"\"\n    log_level: str = \"info\"\n\n    def __post_init__(self):\n        self.app_env = os.getenv(\"NODE_ENV\", self.app_env)\n        self.port = int(os.getenv(\"PORT\", self.port))\n        self.app_url = os.getenv(\"APP_URL\", self.app_url)\n        self.database_url = os.getenv(\"DATABASE_URL\", \"\")\n        self.jwt_secret = os.getenv(\"JWT_SECRET\", \"\")\n        self.redis_url = os.getenv(\"REDIS_URL\", \"\")\n        self.log_level = os.getenv(\"LOG_LEVEL\", self.log_level)\n\n        if not self.database_url:\n            raise ValueError(\"DATABASE_URL is required\")\n        if len(self.jwt_secret) < 32:\n            raise ValueError(\"JWT_SECRET must be at least 32 characters\")\n\nconfig = Config()\n```\n\n## Customization Guide\n- **Remove unused services**: Delete sections for services you don't use (e.g., no Stripe if no payments)\n- **Add project-specific vars**: Add your custom environment variables to the appropriate section\n- **Multi-environment**: Create `.env.development`, `.env.staging`, `.env.production` for environment-specific values\n- **Docker**: Map env vars in `docker-compose.yml` using `env_file: .env`\n- **Validation**: Always validate at startup - fail fast if required variables are missing\n- **Prefix convention**: Use `NEXT_PUBLIC_` for client-accessible vars in Next.js\n\n## 2026 Trend Notes\n- Zod validation of environment variables at startup catches misconfig early\n- Feature flags in env vars enable trunk-based development with gradual rollout\n- Separate `.env.example` (committed) from `.env` (gitignored) is the universal pattern\n- `NEXT_PUBLIC_` prefix convention prevents accidental secret exposure in browser bundles\n- Comments in .env.example serve as documentation for team members\n"
    },
    {
      "filename": "footer-components.md",
      "title": "Footer Components",
      "description": "Footer patterns: simple, mega footer, newsletter signup, social links, and sitemap footer",
      "category": "components",
      "tags": [
        "footer",
        "navigation",
        "newsletter",
        "social",
        "tailwind"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/footer-components.md",
      "content": "# Footer Components\n> Footer patterns: simple, mega footer, newsletter signup, social links, and sitemap footer\n> 푸터 패턴: 심플, 메가 푸터, 뉴스레터 가입, 소셜 링크, 사이트맵 푸터\n\n**Category**: Components | **Tags**: footer, navigation, newsletter, social, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+---- Simple Footer ----+  +---- Mega Footer --------+\n| Brand (c) 2026        |  | Brand  Prod  Company    |\n| Privacy | Terms       |  | Desc   Feat  About      |\n+-----------------------+  |        API   Careers     |\n                           | [Newsletter Email] [Sub] |\n                           +-------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Pick a footer style and place before </body>\n# 2. Replace links, social URLs, and brand name\n# 3. Newsletter form works with Formspree, Mailchimp, or custom endpoint\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Footer Components</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-100 dark:bg-gray-900\">\n  <div class=\"max-w-6xl mx-auto p-8 space-y-12\">\n    <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Footer Components</h1>\n  </div>\n\n  <!-- 1. Simple Footer -->\n  <footer class=\"bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700\">\n    <div class=\"max-w-6xl mx-auto px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-4\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"font-bold text-gray-900 dark:text-white\">Brand</span>\n        <span class=\"text-sm text-gray-400\">&copy; 2026. All rights reserved.</span>\n      </div>\n      <div class=\"flex gap-6 text-sm text-gray-500\">\n        <a href=\"#\" class=\"hover:text-gray-900 dark:hover:text-white transition\">Privacy</a>\n        <a href=\"#\" class=\"hover:text-gray-900 dark:hover:text-white transition\">Terms</a>\n        <a href=\"#\" class=\"hover:text-gray-900 dark:hover:text-white transition\">Contact</a>\n      </div>\n    </div>\n  </footer>\n\n  <div class=\"h-8\"></div>\n\n  <!-- 2. Mega Footer with Sitemap -->\n  <footer class=\"bg-gray-900 text-gray-400\">\n    <div class=\"max-w-6xl mx-auto px-6 py-16\">\n      <div class=\"grid md:grid-cols-4 gap-8\">\n        <div>\n          <span class=\"text-xl font-bold text-white\">Brand</span>\n          <p class=\"mt-4 text-sm leading-relaxed\">Building the future of developer tooling. Open source, community-driven, and enterprise-ready.</p>\n          <div class=\"mt-6 flex gap-4\">\n            <a href=\"#\" class=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition text-sm\">X</a>\n            <a href=\"#\" class=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition text-sm\">GH</a>\n            <a href=\"#\" class=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition text-sm\">DC</a>\n            <a href=\"#\" class=\"w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition text-sm\">YT</a>\n          </div>\n        </div>\n        <div>\n          <h3 class=\"text-white font-semibold mb-4\">Product</h3>\n          <ul class=\"space-y-2.5 text-sm\">\n            <li><a href=\"#\" class=\"hover:text-white transition\">Features</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">Pricing</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">Changelog</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">API Reference</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">Status</a></li>\n          </ul>\n        </div>\n        <div>\n          <h3 class=\"text-white font-semibold mb-4\">Company</h3>\n          <ul class=\"space-y-2.5 text-sm\">\n            <li><a href=\"#\" class=\"hover:text-white transition\">About</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">Blog</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">Careers <span class=\"ml-1 px-1.5 py-0.5 bg-emerald-900 text-emerald-400 text-[10px] rounded-full\">Hiring</span></a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">Press Kit</a></li>\n          </ul>\n        </div>\n        <div>\n          <h3 class=\"text-white font-semibold mb-4\">Legal</h3>\n          <ul class=\"space-y-2.5 text-sm\">\n            <li><a href=\"#\" class=\"hover:text-white transition\">Privacy Policy</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">Terms of Service</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">Cookie Policy</a></li>\n            <li><a href=\"#\" class=\"hover:text-white transition\">GDPR</a></li>\n          </ul>\n        </div>\n      </div>\n      <div class=\"mt-12 pt-8 border-t border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm\">\n        <span>&copy; 2026 Brand Inc. All rights reserved.</span>\n        <div class=\"flex items-center gap-2 text-xs\"><span class=\"w-2 h-2 bg-emerald-500 rounded-full\"></span>All systems operational</div>\n      </div>\n    </div>\n  </footer>\n\n  <div class=\"h-8\"></div>\n\n  <!-- 3. Newsletter Footer -->\n  <footer class=\"bg-indigo-600 text-white\">\n    <div class=\"max-w-4xl mx-auto px-6 py-16 text-center\">\n      <h2 class=\"text-2xl font-bold\">Stay in the loop</h2>\n      <p class=\"mt-2 text-indigo-100\">Get the latest updates, tips, and product news delivered to your inbox.</p>\n      <form class=\"mt-6 flex flex-col sm:flex-row gap-3 max-w-md mx-auto\">\n        <input type=\"email\" placeholder=\"you@example.com\" required class=\"flex-1 px-4 py-3 rounded-xl text-gray-900 text-sm focus:outline-none focus:ring-2 focus:ring-white\">\n        <button type=\"submit\" class=\"px-6 py-3 bg-white text-indigo-700 font-bold rounded-xl hover:bg-indigo-50 transition\">Subscribe</button>\n      </form>\n      <p class=\"mt-3 text-xs text-indigo-200\">No spam. Unsubscribe anytime.</p>\n    </div>\n    <div class=\"border-t border-indigo-500\">\n      <div class=\"max-w-4xl mx-auto px-6 py-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-indigo-200\">\n        <span>&copy; 2026 Brand. All rights reserved.</span>\n        <div class=\"flex gap-4\">\n          <a href=\"#\" class=\"hover:text-white transition\">Privacy</a>\n          <a href=\"#\" class=\"hover:text-white transition\">Terms</a>\n          <a href=\"#\" class=\"hover:text-white transition\">Cookies</a>\n        </div>\n      </div>\n    </div>\n  </footer>\n\n  <div class=\"h-8\"></div>\n\n  <!-- 4. Social-Focused Footer -->\n  <footer class=\"bg-gray-950 text-gray-400 py-12 px-6\">\n    <div class=\"max-w-2xl mx-auto text-center\">\n      <span class=\"text-2xl font-bold text-white\">Brand</span>\n      <p class=\"mt-3 text-sm\">Making the world a better place through constructing elegant hierarchies.</p>\n      <div class=\"mt-6 flex justify-center gap-6\">\n        <a href=\"#\" class=\"hover:text-white transition\" title=\"Twitter/X\">\n          <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"/></svg>\n        </a>\n        <a href=\"#\" class=\"hover:text-white transition\" title=\"GitHub\">\n          <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/></svg>\n        </a>\n        <a href=\"#\" class=\"hover:text-white transition\" title=\"Discord\">\n          <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286z\"/></svg>\n        </a>\n        <a href=\"#\" class=\"hover:text-white transition\" title=\"YouTube\">\n          <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\"/></svg>\n        </a>\n      </div>\n      <div class=\"mt-8 flex flex-wrap justify-center gap-6 text-sm\">\n        <a href=\"#\" class=\"hover:text-white transition\">About</a>\n        <a href=\"#\" class=\"hover:text-white transition\">Blog</a>\n        <a href=\"#\" class=\"hover:text-white transition\">Jobs</a>\n        <a href=\"#\" class=\"hover:text-white transition\">Press</a>\n        <a href=\"#\" class=\"hover:text-white transition\">Privacy</a>\n        <a href=\"#\" class=\"hover:text-white transition\">Terms</a>\n      </div>\n      <p class=\"mt-8 text-xs\">&copy; 2026 Brand Inc. All rights reserved.</p>\n    </div>\n  </footer>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Brand**: Replace text logo with SVG or image\n- **Social icons**: Replace SVGs with your preferred icon library; update `href` with actual URLs\n- **Newsletter form**: Connect to Mailchimp, ConvertKit, Buttondown, or custom endpoint\n- **Columns**: Add or remove sitemap columns in the mega footer\n- **Colors**: Change background from `bg-gray-900` to match your brand\n- **Status indicator**: Wire up the green dot to your actual status page API\n\n## 2026 Trend Notes\n- Mega footers with 3-4 columns are standard for SaaS and product sites\n- System status indicator in footer builds trust\n- Hiring badge on careers link is a common growth signal\n- Social icons as square/rounded buttons (not just icons) improve tap targets\n- Newsletter capture in footer catches users who scrolled the entire page\n"
    },
    {
      "filename": "form-components.md",
      "title": "Form Components",
      "description": "Form patterns: login, signup, contact, search bar, multi-step wizard, and settings panel",
      "category": "components",
      "tags": [
        "forms",
        "login",
        "signup",
        "wizard",
        "validation",
        "tailwind"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/form-components.md",
      "content": "# Form Components\n> Form patterns: login, signup, contact, search bar, multi-step wizard, and settings panel\n> 폼 패턴: 로그인, 회원가입, 문의, 검색바, 멀티스텝 마법사, 설정 패널\n\n**Category**: Components | **Tags**: forms, login, signup, wizard, validation, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+----------+  +----------+  +----------+\n|  Login   |  |  Signup  |  | Contact  |\n| [email]  |  | [name]   |  | [name]   |\n| [pass]   |  | [email]  |  | [email]  |\n| [Submit] |  | [pass]   |  | [msg]    |\n+----------+  | [Submit] |  | [Send]   |\n              +----------+  +----------+\n+------- Multi-step Wizard --------+\n| Step 1 > Step 2 > Step 3         |\n| [fields...]          [Next ->]   |\n+----------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Copy the form you need from the code below\n# 2. Replace action URLs with your API endpoints\n# 3. All forms include built-in HTML5 validation (required, type, pattern)\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Form Components</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-100 dark:bg-gray-900 p-8 min-h-screen\">\n  <div class=\"max-w-6xl mx-auto space-y-16\">\n\n    <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Form Components</h1>\n\n    <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\">\n\n      <!-- 1. Login Form -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm\">\n        <h2 class=\"text-xl font-bold text-center text-gray-900 dark:text-white mb-6\">Welcome Back</h2>\n        <form class=\"space-y-4\" action=\"/api/login\" method=\"POST\">\n          <div>\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Email</label>\n            <input type=\"email\" name=\"email\" required placeholder=\"you@example.com\" class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent\">\n          </div>\n          <div>\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Password</label>\n            <input type=\"password\" name=\"password\" required minlength=\"8\" placeholder=\"Min 8 characters\" class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent\">\n          </div>\n          <div class=\"flex items-center justify-between\">\n            <label class=\"flex items-center gap-2 text-sm text-gray-500\"><input type=\"checkbox\" class=\"rounded\"> Remember me</label>\n            <a href=\"#\" class=\"text-sm text-indigo-600 hover:underline\">Forgot password?</a>\n          </div>\n          <button type=\"submit\" class=\"w-full py-2.5 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition\">Sign In</button>\n          <div class=\"relative my-4\"><div class=\"absolute inset-0 flex items-center\"><div class=\"w-full border-t border-gray-200 dark:border-gray-700\"></div></div><div class=\"relative flex justify-center\"><span class=\"bg-white dark:bg-gray-800 px-3 text-xs text-gray-400\">or continue with</span></div></div>\n          <div class=\"flex gap-3\">\n            <button type=\"button\" class=\"flex-1 py-2 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition\">Google</button>\n            <button type=\"button\" class=\"flex-1 py-2 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition\">GitHub</button>\n          </div>\n        </form>\n      </div>\n\n      <!-- 2. Signup Form -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm\">\n        <h2 class=\"text-xl font-bold text-center text-gray-900 dark:text-white mb-6\">Create Account</h2>\n        <form class=\"space-y-4\" action=\"/api/signup\" method=\"POST\">\n          <div class=\"grid grid-cols-2 gap-3\">\n            <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">First</label><input type=\"text\" name=\"first_name\" required class=\"w-full px-3 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"></div>\n            <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Last</label><input type=\"text\" name=\"last_name\" required class=\"w-full px-3 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"></div>\n          </div>\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Email</label><input type=\"email\" name=\"email\" required class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"></div>\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Password</label><input type=\"password\" name=\"password\" required minlength=\"8\" pattern=\"(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}\" title=\"Must contain: 8+ chars, uppercase, lowercase, number\" class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"></div>\n          <label class=\"flex items-start gap-2 text-sm text-gray-500\"><input type=\"checkbox\" required class=\"rounded mt-0.5\"> I agree to the <a href=\"#\" class=\"text-indigo-600 hover:underline\">Terms</a> and <a href=\"#\" class=\"text-indigo-600 hover:underline\">Privacy Policy</a></label>\n          <button type=\"submit\" class=\"w-full py-2.5 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition\">Create Account</button>\n        </form>\n      </div>\n\n      <!-- 3. Contact Form -->\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm\">\n        <h2 class=\"text-xl font-bold text-center text-gray-900 dark:text-white mb-6\">Contact Us</h2>\n        <form class=\"space-y-4\" action=\"https://formspree.io/f/YOUR_ID\" method=\"POST\">\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Name</label><input type=\"text\" name=\"name\" required class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"></div>\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Email</label><input type=\"email\" name=\"email\" required class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"></div>\n          <div>\n            <label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Subject</label>\n            <select name=\"subject\" class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\">\n              <option>General Inquiry</option><option>Bug Report</option><option>Feature Request</option><option>Partnership</option>\n            </select>\n          </div>\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Message</label><textarea name=\"message\" rows=\"4\" required class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none\"></textarea></div>\n          <button type=\"submit\" class=\"w-full py-2.5 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition\">Send Message</button>\n        </form>\n      </div>\n\n    </div>\n\n    <!-- 4. Search Bar -->\n    <div>\n      <h2 class=\"text-lg font-bold text-gray-900 dark:text-white mb-4\">Search Bar</h2>\n      <div class=\"max-w-2xl\">\n        <div class=\"relative\">\n          <svg class=\"absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"/></svg>\n          <input type=\"search\" placeholder=\"Search anything... (Ctrl+K)\" class=\"w-full pl-12 pr-20 py-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm\">\n          <kbd class=\"absolute right-4 top-1/2 -translate-y-1/2 px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-xs text-gray-400 rounded border border-gray-200 dark:border-gray-600 font-mono\">Ctrl K</kbd>\n        </div>\n      </div>\n    </div>\n\n    <!-- 5. Multi-Step Wizard -->\n    <div>\n      <h2 class=\"text-lg font-bold text-gray-900 dark:text-white mb-4\">Multi-Step Wizard</h2>\n      <div class=\"max-w-lg bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm\">\n        <!-- Step Indicator -->\n        <div class=\"flex items-center justify-between mb-8\">\n          <div class=\"flex items-center gap-2\"><div class=\"w-8 h-8 bg-indigo-600 text-white rounded-full flex items-center justify-center text-sm font-bold\">1</div><span class=\"text-sm font-medium text-gray-900 dark:text-white hidden sm:inline\">Account</span></div>\n          <div class=\"flex-1 h-0.5 mx-3 bg-gray-200 dark:bg-gray-700\"></div>\n          <div class=\"flex items-center gap-2\"><div class=\"w-8 h-8 bg-gray-200 dark:bg-gray-700 text-gray-500 rounded-full flex items-center justify-center text-sm font-bold\">2</div><span class=\"text-sm text-gray-400 hidden sm:inline\">Profile</span></div>\n          <div class=\"flex-1 h-0.5 mx-3 bg-gray-200 dark:bg-gray-700\"></div>\n          <div class=\"flex items-center gap-2\"><div class=\"w-8 h-8 bg-gray-200 dark:bg-gray-700 text-gray-500 rounded-full flex items-center justify-center text-sm font-bold\">3</div><span class=\"text-sm text-gray-400 hidden sm:inline\">Confirm</span></div>\n        </div>\n        <!-- Step 1 Content -->\n        <div class=\"space-y-4\">\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Email</label><input type=\"email\" required class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"></div>\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Password</label><input type=\"password\" required class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"></div>\n        </div>\n        <div class=\"mt-8 flex justify-between\">\n          <button disabled class=\"px-5 py-2 text-sm text-gray-400 cursor-not-allowed\">Back</button>\n          <button class=\"px-6 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition\">Next Step &#8594;</button>\n        </div>\n      </div>\n    </div>\n\n    <!-- 6. Settings Panel -->\n    <div>\n      <h2 class=\"text-lg font-bold text-gray-900 dark:text-white mb-4\">Settings Panel</h2>\n      <div class=\"max-w-lg bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-sm space-y-6\">\n        <div class=\"flex items-center justify-between\">\n          <div><h3 class=\"text-sm font-medium text-gray-900 dark:text-white\">Email Notifications</h3><p class=\"text-xs text-gray-400\">Receive updates about your account</p></div>\n          <button onclick=\"this.dataset.on=this.dataset.on==='true'?'false':'true';this.classList.toggle('bg-indigo-600');this.classList.toggle('bg-gray-300');this.querySelector('span').classList.toggle('translate-x-5')\" data-on=\"true\" class=\"w-11 h-6 bg-indigo-600 rounded-full relative transition\"><span class=\"absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition translate-x-5\"></span></button>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <div><h3 class=\"text-sm font-medium text-gray-900 dark:text-white\">Two-Factor Auth</h3><p class=\"text-xs text-gray-400\">Add extra security to your account</p></div>\n          <button onclick=\"this.dataset.on=this.dataset.on==='true'?'false':'true';this.classList.toggle('bg-indigo-600');this.classList.toggle('bg-gray-300');this.querySelector('span').classList.toggle('translate-x-5')\" data-on=\"false\" class=\"w-11 h-6 bg-gray-300 rounded-full relative transition\"><span class=\"absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition\"></span></button>\n        </div>\n        <div class=\"flex items-center justify-between\">\n          <div><h3 class=\"text-sm font-medium text-gray-900 dark:text-white\">Dark Mode</h3><p class=\"text-xs text-gray-400\">Switch between light and dark themes</p></div>\n          <button onclick=\"this.dataset.on=this.dataset.on==='true'?'false':'true';this.classList.toggle('bg-indigo-600');this.classList.toggle('bg-gray-300');this.querySelector('span').classList.toggle('translate-x-5');document.documentElement.classList.toggle('dark')\" data-on=\"false\" class=\"w-11 h-6 bg-gray-300 rounded-full relative transition\"><span class=\"absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition\"></span></button>\n        </div>\n        <div class=\"pt-4 border-t border-gray-200 dark:border-gray-700 flex gap-3\">\n          <button class=\"px-5 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition\">Save Changes</button>\n          <button class=\"px-5 py-2 border border-gray-300 dark:border-gray-600 rounded-xl text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition text-gray-700 dark:text-gray-300\">Cancel</button>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</body>\n</html>\n```\n\n## Customization Guide\n- **Form actions**: Replace `action=\"/api/...\"` with your endpoint (Formspree, Netlify, custom)\n- **Validation**: Add `pattern`, `minlength`, `maxlength` attributes for client-side validation\n- **Social login**: Replace button text with SVG icons for Google, GitHub, Apple\n- **Wizard steps**: Add JS to show/hide step content and update step indicator colors\n- **Toggle switches**: The inline `onclick` handlers work standalone; replace with React/Vue state in frameworks\n- **Accessibility**: Add `aria-label`, `aria-required`, and proper `id`/`for` pairings for screen readers\n\n## 2026 Trend Notes\n- Rounded input fields (`rounded-xl`) with subtle borders are the current standard\n- Social login divider (\"or continue with\") is expected UX for auth forms\n- Keyboard shortcut hint in search bar (`Ctrl+K`) follows the command palette pattern\n- Toggle switches with inline JS provide framework-agnostic interactivity\n- Multi-step wizards with numbered indicators reduce form abandonment\n"
    },
    {
      "filename": "git-workflow.md",
      "title": "Git Workflow Guide",
      "description": "Git workflow with branching strategy, commit conventions, PR template, and common operations",
      "category": "dev-methodology",
      "tags": [
        "git",
        "branching",
        "commits",
        "pull-request",
        "workflow"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/git-workflow.md",
      "content": "# Git Workflow Guide\n> Git workflow with branching strategy, commit conventions, PR template, and common operations\n> 브랜칭 전략, 커밋 컨벤션, PR 템플릿, 자주 쓰는 Git 명령어 가이드\n\n**Category**: Dev Methodology | **Tags**: git, branching, commits, pull-request, workflow | **Difficulty**: Beginner\n\n## Preview\n```\nmain ─────●──────●──────●──────●─────\n           \\    /        \\    /\nfeature/x   ●──●    fix/y ●──●\n```\n\n## Quick Start\n```bash\n# Start new feature\ngit checkout -b feature/add-user-auth\n# ... make changes, commit often ...\ngit push -u origin feature/add-user-auth\n# Open PR on GitHub, get review, merge\n\n# Sync with main\ngit checkout main && git pull\ngit checkout feature/my-branch && git rebase main\n```\n\n## Branching Strategy\n\n### Trunk-Based Development (Recommended for Small Teams)\n\n```\nmain (production-ready, always deployable)\n  |\n  +-- feature/add-user-auth     (short-lived, 1-3 days max)\n  +-- fix/login-redirect-loop   (bug fixes)\n  +-- chore/upgrade-deps        (maintenance)\n```\n\n### Branch Naming Convention\n\n| Prefix | Purpose | Example |\n|--------|---------|---------|\n| `feature/` | New functionality | `feature/add-payment-flow` |\n| `fix/` | Bug fixes | `fix/null-pointer-on-login` |\n| `chore/` | Maintenance, deps | `chore/upgrade-react-19` |\n| `docs/` | Documentation | `docs/update-api-reference` |\n| `refactor/` | Code restructuring | `refactor/extract-auth-service` |\n| `test/` | Adding tests | `test/user-service-edge-cases` |\n| `hotfix/` | Critical prod fix | `hotfix/payment-timeout` |\n\n### Rules\n\n```\n1. main is always deployable (protected, requires PR)\n2. Feature branches are short-lived (merge within 1-3 days)\n3. No direct commits to main (always via PR)\n4. Delete branches after merge\n5. Rebase before merge to keep history clean\n```\n\n## Commit Message Convention\n\n### Format: Conventional Commits\n\n```\n<type>(<scope>): <description>\n\n[optional body]\n\n[optional footer]\n```\n\n### Types\n\n| Type | Description | Example |\n|------|-------------|---------|\n| `feat` | New feature | `feat(auth): add OAuth2 Google login` |\n| `fix` | Bug fix | `fix(api): handle null user in GET /profile` |\n| `docs` | Documentation | `docs(readme): add deployment instructions` |\n| `style` | Formatting only | `style: fix indentation in user_service.py` |\n| `refactor` | Code restructuring | `refactor(db): extract query builder class` |\n| `test` | Adding tests | `test(auth): add edge cases for token expiry` |\n| `chore` | Build/tooling | `chore(deps): upgrade fastapi to 0.110` |\n| `perf` | Performance | `perf(query): add index on users.email` |\n| `ci` | CI/CD changes | `ci: add Python 3.12 to test matrix` |\n\n### Good vs Bad Commit Messages\n\n```bash\n# BAD\ngit commit -m \"fix bug\"\ngit commit -m \"update code\"\ngit commit -m \"WIP\"\ngit commit -m \"changes\"\n\n# GOOD\ngit commit -m \"fix(auth): prevent token refresh race condition\"\ngit commit -m \"feat(api): add pagination to GET /users endpoint\"\ngit commit -m \"refactor(db): replace raw SQL with SQLAlchemy ORM\"\ngit commit -m \"test(payment): add Stripe webhook signature verification test\"\n```\n\n## Pull Request Template\n\nSave as `.github/PULL_REQUEST_TEMPLATE.md`:\n\n```markdown\n## Summary\n<!-- What does this PR do? Why? -->\n\n## Changes\n- [ ] Change 1\n- [ ] Change 2\n\n## Type\n- [ ] Feature\n- [ ] Bug fix\n- [ ] Refactor\n- [ ] Documentation\n- [ ] CI/CD\n\n## Testing\n- [ ] Unit tests added/updated\n- [ ] Integration tests added/updated\n- [ ] Manual testing performed\n\n## Screenshots\n<!-- For UI changes, add before/after screenshots -->\n\n## Checklist\n- [ ] Code follows project style guidelines\n- [ ] Self-reviewed my own code\n- [ ] No new warnings introduced\n- [ ] Documentation updated (if applicable)\n- [ ] Database migration included (if applicable)\n\n## Related Issues\n<!-- Closes #123, Fixes #456 -->\n```\n\n## Common Git Operations\n\n### Daily Workflow\n\n```bash\n# Start your day: sync with remote\ngit checkout main\ngit pull --rebase\n\n# Create feature branch\ngit checkout -b feature/my-feature\n\n# Work, commit frequently\ngit add -p                          # Stage interactively (review each hunk)\ngit commit -m \"feat(scope): description\"\n\n# Push and create PR\ngit push -u origin feature/my-feature\ngh pr create --title \"feat: my feature\" --body \"Description here\"\n```\n\n### Sync and Rebase\n\n```bash\n# Update feature branch with latest main\ngit checkout main\ngit pull --rebase\ngit checkout feature/my-feature\ngit rebase main\n\n# If conflicts arise:\n# 1. Fix conflicts in editor\n# 2. git add <resolved-files>\n# 3. git rebase --continue\n```\n\n### Fix Mistakes\n\n```bash\n# Amend last commit (before push)\ngit add .\ngit commit --amend --no-edit\n\n# Undo last commit (keep changes)\ngit reset --soft HEAD~1\n\n# Discard all local changes\ngit checkout -- .\n\n# Interactive rebase (squash commits before PR)\ngit rebase -i HEAD~3\n# Change 'pick' to 'squash' for commits to combine\n```\n\n### Useful Aliases\n\n```bash\n# Add to ~/.gitconfig\n[alias]\n  co = checkout\n  br = branch\n  ci = commit\n  st = status\n  lg = log --oneline --graph --decorate --all -20\n  unstage = reset HEAD --\n  last = log -1 HEAD --stat\n  amend = commit --amend --no-edit\n  wip = !git add -A && git commit -m \"WIP: work in progress\"\n  undo = reset --soft HEAD~1\n```\n\n## Customization Guide\n- **Branch strategy**: For larger teams, consider Gitflow (develop + release branches)\n- **Commit hooks**: Add `commitlint` + `husky` for automatic commit message validation\n- **PR size**: Aim for <400 lines changed per PR (easier to review, faster to merge)\n- **Squash policy**: \"Squash and merge\" keeps main history clean; \"Rebase and merge\" preserves individual commits\n- **Protected branches**: Enable \"Require PR reviews\" and \"Require status checks\" on main\n\n## 2026 Trend Notes\n- Trunk-based development is the dominant strategy for teams practicing continuous delivery\n- Conventional Commits enable automatic changelog generation and semantic versioning\n- GitHub CLI (`gh`) is faster than web UI for creating PRs and checking CI status\n- `git add -p` (interactive staging) encourages reviewing changes before committing\n- Ship/Show/Ask framework: trivial changes (typos, deps) can merge without review\n"
    },
    {
      "filename": "hero-components.md",
      "title": "Hero Section Components",
      "description": "Hero section variants: centered text, split layout, video background, animated gradient, and minimal",
      "category": "components",
      "tags": [
        "hero",
        "header",
        "above-fold",
        "animation",
        "tailwind"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/hero-components.md",
      "content": "# Hero Section Components\n> Hero section variants: centered text, split layout, video background, animated gradient, and minimal\n> 히어로 섹션 변형: 중앙 텍스트, 분할 레이아웃, 비디오 배경, 애니메이션 그라디언트, 미니멀\n\n**Category**: Components | **Tags**: hero, header, above-fold, animation, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+---- Centered Hero ----+  +---- Split Hero ------+\n| Build Amazing Things  |  | Text     |  [Image]  |\n| [CTA]   [Secondary]  |  | CTA      |           |\n+-----------------------+  +----------------------+\n\n+---- Gradient Hero ----+  +---- Minimal Hero ----+\n| ~~~animated colors~~~ |  |                      |\n| Bold Statement        |  | One line. That's it. |\n| [CTA]                 |  |        [CTA]         |\n+-----------------------+  +----------------------+\n```\n\n## Quick Start\n```bash\n# 1. Pick a hero style and copy the HTML block\n# 2. Replace headline, subtext, and CTA buttons\n# 3. Each hero is self-contained (no dependencies between them)\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Hero Components</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <style>\n    @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }\n    .animate-gradient { background-size: 200% 200%; animation: gradient 6s ease infinite; }\n    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }\n    .float { animation: float 3s ease-in-out infinite; }\n  </style>\n</head>\n<body class=\"bg-gray-950 text-white space-y-4\">\n\n  <!-- 1. Centered Hero -->\n  <section class=\"min-h-[80vh] flex items-center px-6 bg-gray-950 relative overflow-hidden\">\n    <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.15),transparent_70%)]\"></div>\n    <div class=\"max-w-3xl mx-auto text-center relative\">\n      <div class=\"inline-block px-4 py-1 mb-6 text-xs font-medium bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 rounded-full\">Announcing v3.0</div>\n      <h1 class=\"text-5xl md:text-7xl font-extrabold tracking-tight leading-[1.1]\">Build Amazing<br>Things <span class=\"text-indigo-400\">Faster</span></h1>\n      <p class=\"mt-6 text-lg text-gray-400 max-w-xl mx-auto\">The developer platform that helps you ship products 10x faster with AI-powered tools and seamless collaboration.</p>\n      <div class=\"mt-10 flex flex-col sm:flex-row gap-4 justify-center\">\n        <a href=\"#\" class=\"px-8 py-3.5 bg-indigo-600 font-semibold rounded-xl hover:bg-indigo-700 shadow-lg shadow-indigo-600/25 transition\">Get Started Free</a>\n        <a href=\"#\" class=\"px-8 py-3.5 border border-gray-700 rounded-xl font-semibold hover:bg-gray-800 transition flex items-center gap-2 justify-center\">Live Demo <span>&#8594;</span></a>\n      </div>\n    </div>\n  </section>\n\n  <!-- 2. Split Hero (Text + Visual) -->\n  <section class=\"min-h-[80vh] flex items-center px-6 bg-gray-900\">\n    <div class=\"max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center\">\n      <div>\n        <span class=\"text-sm font-bold text-emerald-400 uppercase tracking-wider\">For Developers</span>\n        <h1 class=\"mt-4 text-4xl md:text-5xl font-extrabold tracking-tight leading-tight\">Ship Code<br>With Confidence</h1>\n        <p class=\"mt-6 text-lg text-gray-400\">Automated testing, deployment pipelines, and real-time monitoring in one platform. Push code and sleep well.</p>\n        <div class=\"mt-8 flex gap-4\">\n          <a href=\"#\" class=\"px-6 py-3 bg-emerald-600 font-semibold rounded-xl hover:bg-emerald-700 transition\">Start Building</a>\n          <a href=\"#\" class=\"px-6 py-3 text-gray-400 font-semibold hover:text-white transition\">Read Docs &#8594;</a>\n        </div>\n        <div class=\"mt-8 flex gap-8 text-sm text-gray-500\">\n          <div><span class=\"text-white font-bold text-lg\">99.99%</span><br>Uptime SLA</div>\n          <div><span class=\"text-white font-bold text-lg\">50ms</span><br>Avg Latency</div>\n          <div><span class=\"text-white font-bold text-lg\">10K+</span><br>Teams</div>\n        </div>\n      </div>\n      <div class=\"float\">\n        <div class=\"bg-gray-800 rounded-2xl p-6 border border-gray-700 shadow-xl\">\n          <div class=\"flex items-center gap-2 mb-4\"><div class=\"w-3 h-3 bg-red-500 rounded-full\"></div><div class=\"w-3 h-3 bg-yellow-500 rounded-full\"></div><div class=\"w-3 h-3 bg-green-500 rounded-full\"></div></div>\n          <pre class=\"text-sm text-gray-300 font-mono leading-relaxed\"><code><span class=\"text-emerald-400\">$</span> npx create-app my-project\n<span class=\"text-gray-500\">Creating project...</span>\n<span class=\"text-emerald-400\">&#10003;</span> Dependencies installed\n<span class=\"text-emerald-400\">&#10003;</span> CI/CD configured\n<span class=\"text-emerald-400\">&#10003;</span> Monitoring enabled\n\n<span class=\"text-emerald-400\">$</span> git push origin main\n<span class=\"text-blue-400\">Deploying to production...</span>\n<span class=\"text-emerald-400\">&#10003;</span> Live at https://my-project.app</code></pre>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- 3. Animated Gradient Hero -->\n  <section class=\"min-h-[80vh] flex items-center px-6 animate-gradient bg-gradient-to-br from-purple-900 via-indigo-900 to-cyan-900 relative\">\n    <div class=\"max-w-3xl mx-auto text-center\">\n      <h1 class=\"text-5xl md:text-7xl font-black tracking-tight\">The Future of <span class=\"bg-gradient-to-r from-cyan-300 to-purple-300 bg-clip-text text-transparent\">AI Development</span></h1>\n      <p class=\"mt-6 text-lg text-gray-300 max-w-xl mx-auto\">Build, train, and deploy AI models with zero infrastructure. From prototype to production in minutes.</p>\n      <a href=\"#\" class=\"inline-block mt-10 px-10 py-4 bg-white text-gray-900 font-bold rounded-2xl hover:bg-gray-100 transition shadow-2xl\">Start Free Trial</a>\n      <p class=\"mt-4 text-xs text-gray-400\">No credit card required</p>\n    </div>\n  </section>\n\n  <!-- 4. Video Background Hero -->\n  <section class=\"min-h-[80vh] flex items-center px-6 bg-gray-950 relative overflow-hidden\">\n    <!-- Replace with: <video autoplay muted loop class=\"absolute inset-0 w-full h-full object-cover opacity-30\"><source src=\"bg.mp4\" type=\"video/mp4\"></video> -->\n    <div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-gray-950/50 to-gray-950\"></div>\n    <div class=\"absolute inset-0 bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22rgba(255%2C255%2C255%2C0.05)%22%2F%3E%3C%2Fsvg%3E')] opacity-50\"></div>\n    <div class=\"max-w-4xl mx-auto text-center relative\">\n      <h1 class=\"text-5xl md:text-7xl font-black tracking-tight\">Create Without<br>Limits</h1>\n      <p class=\"mt-6 text-xl text-gray-300\">The creative platform for the next generation of makers.</p>\n      <div class=\"mt-10 flex gap-4 justify-center\">\n        <a href=\"#\" class=\"px-8 py-3 bg-white text-gray-900 font-bold rounded-xl hover:bg-gray-100 transition\">Get Started</a>\n        <a href=\"#\" class=\"px-8 py-3 border border-white/30 rounded-xl font-semibold hover:bg-white/10 transition flex items-center gap-2\">Watch Video <span>&#9654;</span></a>\n      </div>\n    </div>\n  </section>\n\n  <!-- 5. Minimal Hero -->\n  <section class=\"min-h-[60vh] flex items-center px-6 bg-white\">\n    <div class=\"max-w-2xl mx-auto text-center\">\n      <h1 class=\"text-4xl md:text-6xl font-extrabold tracking-tight text-gray-900\">Simple tools for<br>complex work.</h1>\n      <p class=\"mt-6 text-lg text-gray-500\">Less noise. More focus. The workspace that gets out of your way.</p>\n      <a href=\"#\" class=\"inline-block mt-8 px-8 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition\">Try It Free</a>\n    </div>\n  </section>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Centered hero**: Add a background image with `bg-[url('...')]` and overlay with gradient\n- **Split hero**: Replace the terminal mockup with a product screenshot or illustration\n- **Gradient hero**: Change gradient colors in the `from-` `via-` `to-` classes\n- **Video hero**: Uncomment the `<video>` tag and provide your video file\n- **Minimal hero**: Works great on light backgrounds; change to dark by swapping colors\n- **Heights**: Adjust `min-h-[80vh]` to `min-h-screen` for full viewport height\n\n## 2026 Trend Notes\n- Radial gradient backgrounds add depth without images\n- Animated gradients (`background-size: 200% + animation`) create visual interest\n- Split hero with code/terminal mockup is popular for developer tools\n- Floating animation on visual elements adds subtle motion\n- Minimal heroes with high contrast text are trending for productivity tools\n"
    },
    {
      "filename": "modal-components.md",
      "title": "Modal Components",
      "description": "Modal patterns: confirm dialog, form modal, image gallery, notification toast, and bottom sheet",
      "category": "components",
      "tags": [
        "modal",
        "dialog",
        "toast",
        "popup",
        "tailwind"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/modal-components.md",
      "content": "# Modal Components\n> Modal patterns: confirm dialog, form modal, image gallery, notification toast, and bottom sheet\n> 모달 패턴: 확인 다이얼로그, 폼 모달, 이미지 갤러리, 알림 토스트, 바텀 시트\n\n**Category**: Components | **Tags**: modal, dialog, toast, popup, tailwind | **Difficulty**: Intermediate\n\n## Preview\n```\n+-------- Confirm Dialog ---------+\n|  Are you sure?                  |\n|  This action cannot be undone.  |\n|      [Cancel]  [Delete]         |\n+---------------------------------+\n\n+--- Toast Notifications ---+\n| [OK] File saved           |\n| [WARN] Low storage        |\n| [ERR] Upload failed       |\n+---------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Copy any modal component you need\n# 2. Modals use vanilla JS (onclick toggle) - no framework required\n# 3. Use data-modal-target for multiple modals on one page\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Modal Components</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <style>\n    .modal-backdrop { transition: opacity 0.2s; }\n    .modal-panel { transition: transform 0.2s, opacity 0.2s; }\n    .toast-enter { animation: slideInRight 0.3s ease; }\n    @keyframes slideInRight { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }\n    .sheet-enter { animation: slideUp 0.3s ease; }\n    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }\n  </style>\n</head>\n<body class=\"bg-gray-100 dark:bg-gray-900 p-8 min-h-screen\">\n  <div class=\"max-w-4xl mx-auto space-y-8\">\n\n    <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Modal Components</h1>\n\n    <!-- Trigger Buttons -->\n    <div class=\"flex flex-wrap gap-3\">\n      <button onclick=\"document.getElementById('confirm-modal').classList.remove('hidden')\" class=\"px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition\">Open Confirm</button>\n      <button onclick=\"document.getElementById('form-modal').classList.remove('hidden')\" class=\"px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition\">Open Form Modal</button>\n      <button onclick=\"document.getElementById('gallery-modal').classList.remove('hidden')\" class=\"px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 transition\">Open Gallery</button>\n      <button onclick=\"showToast('success')\" class=\"px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition\">Show Toast (OK)</button>\n      <button onclick=\"showToast('error')\" class=\"px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition\">Show Toast (Error)</button>\n      <button onclick=\"document.getElementById('bottom-sheet').classList.remove('hidden')\" class=\"px-4 py-2 bg-gray-700 text-white rounded-lg text-sm font-medium hover:bg-gray-600 transition\">Open Bottom Sheet</button>\n    </div>\n\n    <!-- 1. Confirm Dialog -->\n    <div id=\"confirm-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div class=\"modal-backdrop absolute inset-0 bg-black/50\" onclick=\"this.parentElement.classList.add('hidden')\"></div>\n      <div class=\"modal-panel relative bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-sm shadow-xl border border-gray-200 dark:border-gray-700\">\n        <div class=\"w-12 h-12 mx-auto bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center text-red-600 text-xl mb-4\">&#9888;</div>\n        <h3 class=\"text-lg font-bold text-center text-gray-900 dark:text-white\">Delete Project?</h3>\n        <p class=\"mt-2 text-sm text-gray-500 text-center\">This action cannot be undone. All data associated with this project will be permanently removed.</p>\n        <div class=\"mt-6 flex gap-3\">\n          <button onclick=\"this.closest('#confirm-modal').classList.add('hidden')\" class=\"flex-1 py-2.5 border border-gray-300 dark:border-gray-600 rounded-xl text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition text-gray-700 dark:text-gray-300\">Cancel</button>\n          <button onclick=\"this.closest('#confirm-modal').classList.add('hidden')\" class=\"flex-1 py-2.5 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition\">Delete</button>\n        </div>\n      </div>\n    </div>\n\n    <!-- 2. Form Modal -->\n    <div id=\"form-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div class=\"modal-backdrop absolute inset-0 bg-black/50\" onclick=\"this.parentElement.classList.add('hidden')\"></div>\n      <div class=\"modal-panel relative bg-white dark:bg-gray-800 rounded-2xl w-full max-w-md shadow-xl border border-gray-200 dark:border-gray-700\">\n        <div class=\"p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between\">\n          <h3 class=\"text-lg font-bold text-gray-900 dark:text-white\">Create New Task</h3>\n          <button onclick=\"this.closest('#form-modal').classList.add('hidden')\" class=\"text-gray-400 hover:text-gray-600 text-xl\">&times;</button>\n        </div>\n        <form class=\"p-6 space-y-4\">\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Task Name</label><input type=\"text\" required class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\" placeholder=\"Enter task name\"></div>\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Priority</label><select class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500\"><option>Low</option><option>Medium</option><option selected>High</option><option>Urgent</option></select></div>\n          <div><label class=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1\">Description</label><textarea rows=\"3\" class=\"w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none\" placeholder=\"Describe the task...\"></textarea></div>\n        </form>\n        <div class=\"px-6 pb-6 flex gap-3 justify-end\">\n          <button onclick=\"this.closest('#form-modal').classList.add('hidden')\" class=\"px-4 py-2 text-sm text-gray-500 hover:text-gray-700 transition\">Cancel</button>\n          <button onclick=\"this.closest('#form-modal').classList.add('hidden')\" class=\"px-5 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition\">Create Task</button>\n        </div>\n      </div>\n    </div>\n\n    <!-- 3. Gallery / Lightbox Modal -->\n    <div id=\"gallery-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div class=\"modal-backdrop absolute inset-0 bg-black/80\" onclick=\"this.parentElement.classList.add('hidden')\"></div>\n      <div class=\"modal-panel relative max-w-3xl w-full\">\n        <button onclick=\"this.closest('#gallery-modal').classList.add('hidden')\" class=\"absolute -top-10 right-0 text-white text-2xl hover:text-gray-300\">&times;</button>\n        <div class=\"aspect-video bg-gray-800 rounded-2xl overflow-hidden flex items-center justify-center\">\n          <div class=\"text-center\"><div class=\"text-6xl mb-4\">&#128444;</div><p class=\"text-gray-400 text-sm\">Image preview placeholder</p><p class=\"text-xs text-gray-500 mt-1\">Replace with &lt;img&gt; tag</p></div>\n        </div>\n        <p class=\"mt-3 text-center text-white text-sm\">Photo 1 of 5 - Mountain Landscape</p>\n        <div class=\"flex justify-center gap-4 mt-4\">\n          <button class=\"px-4 py-2 bg-white/10 rounded-lg text-white text-sm hover:bg-white/20 transition\">&#8592; Previous</button>\n          <button class=\"px-4 py-2 bg-white/10 rounded-lg text-white text-sm hover:bg-white/20 transition\">Next &#8594;</button>\n        </div>\n      </div>\n    </div>\n\n    <!-- 4. Toast Notifications Container -->\n    <div id=\"toast-container\" class=\"fixed top-4 right-4 z-50 space-y-3 pointer-events-none\"></div>\n\n    <!-- 5. Bottom Sheet -->\n    <div id=\"bottom-sheet\" class=\"hidden fixed inset-0 z-50 flex items-end\">\n      <div class=\"absolute inset-0 bg-black/50\" onclick=\"this.parentElement.classList.add('hidden')\"></div>\n      <div class=\"sheet-enter relative w-full bg-white dark:bg-gray-800 rounded-t-3xl max-h-[70vh] overflow-auto border-t border-gray-200 dark:border-gray-700\">\n        <div class=\"flex justify-center py-3\"><div class=\"w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full\"></div></div>\n        <div class=\"px-6 pb-8\">\n          <h3 class=\"text-lg font-bold text-gray-900 dark:text-white mb-4\">Share this page</h3>\n          <div class=\"grid grid-cols-4 gap-4 text-center\">\n            <button class=\"flex flex-col items-center gap-2\"><div class=\"w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-600\">&#128279;</div><span class=\"text-xs text-gray-500\">Copy Link</span></button>\n            <button class=\"flex flex-col items-center gap-2\"><div class=\"w-12 h-12 bg-sky-100 dark:bg-sky-900/30 rounded-full flex items-center justify-center text-sky-600\">&#128172;</div><span class=\"text-xs text-gray-500\">Twitter</span></button>\n            <button class=\"flex flex-col items-center gap-2\"><div class=\"w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-blue-700\">&#128101;</div><span class=\"text-xs text-gray-500\">Facebook</span></button>\n            <button class=\"flex flex-col items-center gap-2\"><div class=\"w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-600\">&#9993;</div><span class=\"text-xs text-gray-500\">Email</span></button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <script>\n    function showToast(type) {\n      const container = document.getElementById('toast-container');\n      const colors = { success: 'bg-green-600', error: 'bg-red-600', warn: 'bg-amber-500' };\n      const icons = { success: '&#10003;', error: '&#10007;', warn: '&#9888;' };\n      const msgs = { success: 'Operation completed successfully!', error: 'Something went wrong. Please try again.', warn: 'Storage space running low.' };\n      const toast = document.createElement('div');\n      toast.className = `toast-enter pointer-events-auto flex items-center gap-3 px-4 py-3 ${colors[type]} text-white rounded-xl shadow-lg text-sm min-w-[280px]`;\n      toast.innerHTML = `<span class=\"text-lg\">${icons[type]}</span><span class=\"flex-1\">${msgs[type]}</span><button onclick=\"this.parentElement.remove()\" class=\"text-white/70 hover:text-white\">&times;</button>`;\n      container.appendChild(toast);\n      setTimeout(() => toast.remove(), 4000);\n    }\n  </script>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Confirm modal**: Change icon, title, and button text/colors for different actions (delete, archive, logout)\n- **Form modal**: Add more fields; wire form submission to your API with `fetch()`\n- **Gallery**: Replace placeholder with `<img>` elements; add prev/next logic with JS array index\n- **Toasts**: Adjust position (`top-4 right-4`) to `bottom-4 left-4` or centered\n- **Bottom sheet**: Change max-height with `max-h-[70vh]`; add drag-to-dismiss with touch events\n- **Animations**: Adjust timing in CSS transitions for faster/slower open/close\n\n## 2026 Trend Notes\n- Modals use `fixed inset-0` with flex centering (no absolute positioning math)\n- Click-outside-to-close on backdrop is standard UX expectation\n- Toast notifications auto-dismiss after 4 seconds with smooth slide-in animation\n- Bottom sheets (mobile pattern) are increasingly used on desktop for contextual actions\n- Separate header/body/footer in form modals follows dialog best practices\n"
    },
    {
      "filename": "monitoring-dashboard.md",
      "title": "System Monitoring Dashboard",
      "description": "System monitoring dashboard with status indicators, uptime metrics, alerts log, and service health",
      "category": "dashboard",
      "tags": [
        "monitoring",
        "devops",
        "status",
        "uptime",
        "alerts"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/monitoring-dashboard.md",
      "content": "# System Monitoring Dashboard\n> System monitoring dashboard with status indicators, uptime metrics, alerts log, and service health\n> 상태 표시기, 업타임 지표, 알림 로그, 서비스 헬스 체크가 포함된 시스템 모니터링 대시보드\n\n**Category**: Dashboard | **Tags**: monitoring, devops, status, uptime, alerts | **Difficulty**: Intermediate\n\n## Preview\n```\n+--------------------------------------------------+\n|  System Monitor         [All Systems Operational] |\n+--------------------------------------------------+\n| API: [GREEN] 99.99%   DB: [GREEN] 99.95%         |\n| CDN: [GREEN] 100%     Queue: [YELLOW] 98.2%      |\n+--------------------------------------------------+\n|                                                    |\n| +--- Response Time ---+  +--- Error Rate ----+   |\n| | [area chart]        |  | [area chart]      |   |\n| +---------------------+  +-------------------+   |\n|                                                    |\n| +--- Recent Alerts -------------------------+     |\n| | WARN  Queue latency high   2m ago         |     |\n| | OK    API restored         15m ago        |     |\n| | CRIT  DB connection spike  1h ago         |     |\n| +-------------------------------------------+     |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Save as index.html, open in browser\n# 2. Replace static data with polling from your /health endpoints\n# 3. Add WebSocket connection for real-time alerts\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>System Monitor</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <style>\n    @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }\n    .pulse-green { animation: pulse-green 2s infinite; }\n    @keyframes pulse-yellow { 0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0.4); } 50% { box-shadow: 0 0 0 6px rgba(234,179,8,0); } }\n    .pulse-yellow { animation: pulse-yellow 2s infinite; }\n    @keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }\n    .pulse-red { animation: pulse-red 1.5s infinite; }\n  </style>\n</head>\n<body class=\"bg-gray-950 text-gray-100 min-h-screen p-6\">\n\n  <div class=\"max-w-6xl mx-auto\">\n    <!-- Header -->\n    <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-8\">\n      <div>\n        <h1 class=\"text-2xl font-bold\">System Monitor</h1>\n        <p class=\"text-sm text-gray-400\">Real-time infrastructure health</p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <span class=\"flex items-center gap-2 px-4 py-2 bg-green-900/30 border border-green-800 rounded-lg text-sm text-green-400\">\n          <span class=\"w-2.5 h-2.5 bg-green-500 rounded-full pulse-green\"></span>\n          All Systems Operational\n        </span>\n        <span class=\"text-xs text-gray-500\">Updated 5s ago</span>\n      </div>\n    </div>\n\n    <!-- Service Status Grid -->\n    <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 mb-8\">\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-5\">\n        <div class=\"flex items-center gap-2 mb-3\">\n          <span class=\"w-3 h-3 bg-green-500 rounded-full pulse-green\"></span>\n          <span class=\"text-sm font-medium\">API Server</span>\n        </div>\n        <div class=\"text-2xl font-bold text-green-400\">99.99%</div>\n        <div class=\"text-xs text-gray-500 mt-1\">Uptime (30d)</div>\n        <div class=\"mt-3 text-xs text-gray-400\">Latency: <span class=\"text-white font-medium\">42ms</span></div>\n      </div>\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-5\">\n        <div class=\"flex items-center gap-2 mb-3\">\n          <span class=\"w-3 h-3 bg-green-500 rounded-full pulse-green\"></span>\n          <span class=\"text-sm font-medium\">Database</span>\n        </div>\n        <div class=\"text-2xl font-bold text-green-400\">99.95%</div>\n        <div class=\"text-xs text-gray-500 mt-1\">Uptime (30d)</div>\n        <div class=\"mt-3 text-xs text-gray-400\">Connections: <span class=\"text-white font-medium\">48/100</span></div>\n      </div>\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-5\">\n        <div class=\"flex items-center gap-2 mb-3\">\n          <span class=\"w-3 h-3 bg-green-500 rounded-full pulse-green\"></span>\n          <span class=\"text-sm font-medium\">CDN</span>\n        </div>\n        <div class=\"text-2xl font-bold text-green-400\">100%</div>\n        <div class=\"text-xs text-gray-500 mt-1\">Uptime (30d)</div>\n        <div class=\"mt-3 text-xs text-gray-400\">Hit Rate: <span class=\"text-white font-medium\">94.2%</span></div>\n      </div>\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-5\">\n        <div class=\"flex items-center gap-2 mb-3\">\n          <span class=\"w-3 h-3 bg-yellow-500 rounded-full pulse-yellow\"></span>\n          <span class=\"text-sm font-medium\">Queue</span>\n        </div>\n        <div class=\"text-2xl font-bold text-yellow-400\">98.2%</div>\n        <div class=\"text-xs text-gray-500 mt-1\">Uptime (30d)</div>\n        <div class=\"mt-3 text-xs text-gray-400\">Depth: <span class=\"text-yellow-300 font-medium\">1,240 msgs</span></div>\n      </div>\n    </div>\n\n    <!-- Metrics Row -->\n    <div class=\"grid md:grid-cols-2 gap-4 mb-8\">\n      <!-- Response Time -->\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-6\">\n        <div class=\"flex items-center justify-between mb-4\">\n          <h2 class=\"font-semibold\">Response Time (p95)</h2>\n          <span class=\"text-sm text-emerald-400 font-medium\">42ms avg</span>\n        </div>\n        <div class=\"flex items-end gap-1 h-32\">\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:60%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:55%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:70%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:45%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:80%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:65%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:50%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:42%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:58%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:75%\"></div>\n          <div class=\"flex-1 bg-emerald-900/40 rounded-t\" style=\"height:35%\"></div>\n          <div class=\"flex-1 bg-emerald-500 rounded-t\" style=\"height:42%\"></div>\n        </div>\n        <div class=\"flex justify-between text-xs text-gray-500 mt-2\"><span>12h ago</span><span>Now</span></div>\n      </div>\n      <!-- Error Rate -->\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-6\">\n        <div class=\"flex items-center justify-between mb-4\">\n          <h2 class=\"font-semibold\">Error Rate</h2>\n          <span class=\"text-sm text-emerald-400 font-medium\">0.02%</span>\n        </div>\n        <div class=\"flex items-end gap-1 h-32\">\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:10%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:8%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:15%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:12%\"></div>\n          <div class=\"flex-1 bg-red-500/40 rounded-t\" style=\"height:45%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:18%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:5%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:3%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:7%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:4%\"></div>\n          <div class=\"flex-1 bg-red-900/30 rounded-t\" style=\"height:2%\"></div>\n          <div class=\"flex-1 bg-red-500 rounded-t\" style=\"height:2%\"></div>\n        </div>\n        <div class=\"flex justify-between text-xs text-gray-500 mt-2\"><span>12h ago</span><span>Now</span></div>\n      </div>\n    </div>\n\n    <!-- System Resources -->\n    <div class=\"grid grid-cols-3 gap-4 mb-8\">\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-5 text-center\">\n        <div class=\"text-sm text-gray-400 mb-2\">CPU Usage</div>\n        <div class=\"relative w-20 h-20 mx-auto\">\n          <svg class=\"w-20 h-20 -rotate-90\" viewBox=\"0 0 36 36\">\n            <path d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke=\"#1f2937\" stroke-width=\"3\"/>\n            <path d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"3\" stroke-dasharray=\"34, 100\"/>\n          </svg>\n          <div class=\"absolute inset-0 flex items-center justify-center text-lg font-bold\">34%</div>\n        </div>\n        <div class=\"text-xs text-gray-500 mt-2\">4 cores / 8 threads</div>\n      </div>\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-5 text-center\">\n        <div class=\"text-sm text-gray-400 mb-2\">Memory</div>\n        <div class=\"relative w-20 h-20 mx-auto\">\n          <svg class=\"w-20 h-20 -rotate-90\" viewBox=\"0 0 36 36\">\n            <path d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke=\"#1f2937\" stroke-width=\"3\"/>\n            <path d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"3\" stroke-dasharray=\"67, 100\"/>\n          </svg>\n          <div class=\"absolute inset-0 flex items-center justify-center text-lg font-bold\">67%</div>\n        </div>\n        <div class=\"text-xs text-gray-500 mt-2\">10.7 / 16 GB</div>\n      </div>\n      <div class=\"bg-gray-900 border border-gray-800 rounded-xl p-5 text-center\">\n        <div class=\"text-sm text-gray-400 mb-2\">Disk</div>\n        <div class=\"relative w-20 h-20 mx-auto\">\n          <svg class=\"w-20 h-20 -rotate-90\" viewBox=\"0 0 36 36\">\n            <path d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke=\"#1f2937\" stroke-width=\"3\"/>\n            <path d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"3\" stroke-dasharray=\"52, 100\"/>\n          </svg>\n          <div class=\"absolute inset-0 flex items-center justify-center text-lg font-bold\">52%</div>\n        </div>\n        <div class=\"text-xs text-gray-500 mt-2\">260 / 500 GB</div>\n      </div>\n    </div>\n\n    <!-- Recent Alerts -->\n    <div class=\"bg-gray-900 border border-gray-800 rounded-xl overflow-hidden\">\n      <div class=\"p-4 border-b border-gray-800 flex items-center justify-between\">\n        <h2 class=\"font-semibold\">Recent Alerts</h2>\n        <span class=\"text-xs text-gray-500\">Last 24 hours</span>\n      </div>\n      <div class=\"divide-y divide-gray-800\">\n        <div class=\"px-4 py-3 flex items-center gap-4\">\n          <span class=\"px-2 py-0.5 bg-yellow-900/50 text-yellow-400 text-xs font-bold rounded\">WARN</span>\n          <span class=\"flex-1 text-sm\">Queue latency exceeded 500ms threshold</span>\n          <span class=\"text-xs text-gray-500\">2 min ago</span>\n        </div>\n        <div class=\"px-4 py-3 flex items-center gap-4\">\n          <span class=\"px-2 py-0.5 bg-green-900/50 text-green-400 text-xs font-bold rounded\">OK</span>\n          <span class=\"flex-1 text-sm\">API Server response time normalized</span>\n          <span class=\"text-xs text-gray-500\">15 min ago</span>\n        </div>\n        <div class=\"px-4 py-3 flex items-center gap-4\">\n          <span class=\"px-2 py-0.5 bg-red-900/50 text-red-400 text-xs font-bold rounded\">CRIT</span>\n          <span class=\"flex-1 text-sm\">Database connection pool exhausted (48/100 connections)</span>\n          <span class=\"text-xs text-gray-500\">1 hour ago</span>\n        </div>\n        <div class=\"px-4 py-3 flex items-center gap-4\">\n          <span class=\"px-2 py-0.5 bg-green-900/50 text-green-400 text-xs font-bold rounded\">OK</span>\n          <span class=\"flex-1 text-sm\">CDN cache purge completed successfully</span>\n          <span class=\"text-xs text-gray-500\">3 hours ago</span>\n        </div>\n        <div class=\"px-4 py-3 flex items-center gap-4\">\n          <span class=\"px-2 py-0.5 bg-blue-900/50 text-blue-400 text-xs font-bold rounded\">INFO</span>\n          <span class=\"flex-1 text-sm\">Deployment v2.4.1 rolled out to production</span>\n          <span class=\"text-xs text-gray-500\">6 hours ago</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Status colors**: Green = healthy, Yellow = degraded, Red = down. Change the pulse animation class accordingly\n- **Circular gauges**: Adjust `stroke-dasharray` value (first number = percentage, out of 100)\n- **Bar charts**: Replace static `<div>` bars with Chart.js or D3 for interactive charts\n- **Alerts**: Connect to your alerting system (PagerDuty, Opsgenie) via WebSocket\n- **Auto-refresh**: Add `setInterval(() => fetchStatus(), 5000)` for live polling\n- **Thresholds**: Color-code metrics based on thresholds (green < 70%, yellow < 90%, red >= 90%)\n\n## 2026 Trend Notes\n- Pulsing status dots provide immediate visual health indication\n- SVG circular progress gauges are pure CSS (no library needed)\n- Dark theme is standard for DevOps monitoring dashboards\n- Alert severity levels (CRIT/WARN/OK/INFO) follow industry standards\n- Bar chart built with pure CSS flex for lightweight initial load\n"
    },
    {
      "filename": "navigation-components.md",
      "title": "Navigation Components",
      "description": "Nav patterns: top bar, sidebar, mobile hamburger, breadcrumb, and tabbed navigation",
      "category": "components",
      "tags": [
        "navigation",
        "navbar",
        "sidebar",
        "tabs",
        "breadcrumb",
        "tailwind"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/navigation-components.md",
      "content": "# Navigation Components\n> Nav patterns: top bar, sidebar, mobile hamburger, breadcrumb, and tabbed navigation\n> 네비게이션 패턴: 상단바, 사이드바, 모바일 햄버거, 브레드크럼, 탭 네비게이션\n\n**Category**: Components | **Tags**: navigation, navbar, sidebar, tabs, breadcrumb, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+-- Top Bar ----------------------------------+\n| Logo   Home  Products  Pricing  [Sign Up]   |\n+---------------------------------------------+\n+-- Sidebar ---------+  +-- Tabs ----------+\n| Logo               |  | Tab1 | Tab2 | Tab3|\n| > Dashboard        |  | [  content     ] |\n|   Analytics        |  +------------------+\n|   Settings         |  +-- Breadcrumb -----+\n+--------------------+  | Home > Docs > API  |\n```\n\n## Quick Start\n```bash\n# 1. Pick the nav pattern you need\n# 2. Copy the HTML block into your layout\n# 3. Mobile hamburger uses pure JS toggle (no framework needed)\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Navigation Components</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-100 dark:bg-gray-900 min-h-screen\">\n  <div class=\"max-w-6xl mx-auto p-8 space-y-12\">\n\n    <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Navigation Components</h1>\n\n    <!-- 1. Top Navbar (Transparent + Blur) -->\n    <div>\n      <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">Top Navbar</h2>\n      <nav class=\"bg-white/80 dark:bg-gray-800/80 backdrop-blur rounded-2xl border border-gray-200 dark:border-gray-700 px-6 h-16 flex items-center justify-between\">\n        <a href=\"#\" class=\"text-xl font-bold text-indigo-600\">Brand</a>\n        <div class=\"hidden md:flex items-center gap-8\">\n          <a href=\"#\" class=\"text-sm font-medium text-gray-900 dark:text-white\">Home</a>\n          <a href=\"#\" class=\"text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition\">Products</a>\n          <a href=\"#\" class=\"text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition\">Pricing</a>\n          <a href=\"#\" class=\"text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition\">Docs</a>\n        </div>\n        <div class=\"hidden md:flex items-center gap-3\">\n          <a href=\"#\" class=\"text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition\">Log in</a>\n          <a href=\"#\" class=\"px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg font-medium hover:bg-indigo-700 transition\">Sign Up</a>\n        </div>\n        <button class=\"md:hidden\" onclick=\"document.getElementById('mob-menu').classList.toggle('hidden')\">\n          <svg class=\"w-6 h-6 text-gray-900 dark:text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"/></svg>\n        </button>\n      </nav>\n      <div id=\"mob-menu\" class=\"hidden md:hidden mt-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3\">\n        <a href=\"#\" class=\"block text-sm font-medium text-gray-900 dark:text-white\">Home</a>\n        <a href=\"#\" class=\"block text-sm text-gray-500\">Products</a>\n        <a href=\"#\" class=\"block text-sm text-gray-500\">Pricing</a>\n        <a href=\"#\" class=\"block text-sm text-gray-500\">Docs</a>\n        <hr class=\"border-gray-200 dark:border-gray-700\">\n        <a href=\"#\" class=\"block px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg text-center font-medium\">Sign Up</a>\n      </div>\n    </div>\n\n    <!-- 2. Sidebar Navigation -->\n    <div>\n      <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">Sidebar Navigation</h2>\n      <div class=\"w-64 bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-4\">\n        <div class=\"px-3 mb-6\"><span class=\"text-lg font-bold text-indigo-600\">AppName</span></div>\n        <nav class=\"space-y-1\">\n          <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded-lg text-sm font-medium\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"/></svg>\n            Dashboard</a>\n          <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"/></svg>\n            Analytics</a>\n          <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm\">\n            <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"/></svg>\n            Users</a>\n          <div class=\"pt-3 mt-3 border-t border-gray-200 dark:border-gray-700\">\n            <a href=\"#\" class=\"flex items-center gap-3 px-3 py-2.5 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm\">\n              <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"/></svg>\n              Settings</a>\n          </div>\n        </nav>\n      </div>\n    </div>\n\n    <!-- 3. Breadcrumb -->\n    <div>\n      <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">Breadcrumb</h2>\n      <nav class=\"bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 px-4 py-3\">\n        <ol class=\"flex items-center gap-2 text-sm\">\n          <li><a href=\"#\" class=\"text-gray-500 hover:text-indigo-600 transition\">Home</a></li>\n          <li class=\"text-gray-300\">/</li>\n          <li><a href=\"#\" class=\"text-gray-500 hover:text-indigo-600 transition\">Documentation</a></li>\n          <li class=\"text-gray-300\">/</li>\n          <li><a href=\"#\" class=\"text-gray-500 hover:text-indigo-600 transition\">API Reference</a></li>\n          <li class=\"text-gray-300\">/</li>\n          <li class=\"text-gray-900 dark:text-white font-medium\">Authentication</li>\n        </ol>\n      </nav>\n    </div>\n\n    <!-- 4. Tabs -->\n    <div>\n      <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">Tabs</h2>\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden\">\n        <div class=\"flex border-b border-gray-200 dark:border-gray-700\">\n          <button class=\"px-6 py-3 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600\">Overview</button>\n          <button class=\"px-6 py-3 text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition\">Analytics</button>\n          <button class=\"px-6 py-3 text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition\">Reports</button>\n          <button class=\"px-6 py-3 text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition\">Settings</button>\n        </div>\n        <div class=\"p-6\">\n          <p class=\"text-sm text-gray-600 dark:text-gray-400\">Tab content goes here. Each tab shows different content by toggling visibility.</p>\n        </div>\n      </div>\n\n      <!-- Pill Tabs Variant -->\n      <div class=\"mt-4 flex gap-1 bg-gray-200 dark:bg-gray-700 p-1 rounded-xl w-fit\">\n        <button class=\"px-4 py-2 bg-white dark:bg-gray-800 rounded-lg text-sm font-medium shadow-sm text-gray-900 dark:text-white\">Daily</button>\n        <button class=\"px-4 py-2 text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition rounded-lg\">Weekly</button>\n        <button class=\"px-4 py-2 text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white transition rounded-lg\">Monthly</button>\n      </div>\n    </div>\n\n  </div>\n</body>\n</html>\n```\n\n## Customization Guide\n- **Active state**: Change the active nav link background to match your brand (`bg-indigo-50` to `bg-blue-50`, etc.)\n- **Icons**: Replace inline SVGs with your icon library (Heroicons, Lucide, Phosphor)\n- **Mobile menu**: The hamburger toggles a hidden div; wire up click-outside to close\n- **Tabs**: Add JS to toggle `hidden` class on tab panels and update active tab styling\n- **Breadcrumb separator**: Change `/` to `>` or an SVG chevron icon\n- **Sidebar width**: Adjust `w-64` for wider/narrower sidebar\n\n## 2026 Trend Notes\n- Backdrop blur navbar (`backdrop-blur bg-white/80`) for modern transparency effect\n- Pill tabs with segmented control look (background container + active pill) is the dominant pattern\n- Sidebar active state uses soft background color + border accent\n- Mobile menu slides in below nav (not overlay) for simpler implementation\n- Breadcrumbs with semantic `<ol>` element for accessibility\n"
    },
    {
      "filename": "performance-checklist.md",
      "title": "Performance Optimization Checklist",
      "description": "Performance checklist covering frontend, backend, database, caching, and infrastructure",
      "category": "refactoring",
      "tags": [
        "performance",
        "optimization",
        "caching",
        "database",
        "frontend"
      ],
      "difficulty": "advanced",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/performance-checklist.md",
      "content": "# Performance Optimization Checklist\n> Performance checklist covering frontend, backend, database, caching, and infrastructure\n> 프론트엔드, 백엔드, 데이터베이스, 캐싱, 인프라를 다루는 성능 최적화 체크리스트\n\n**Category**: Refactoring | **Tags**: performance, optimization, caching, database, frontend | **Difficulty**: Advanced\n\n## Preview\n```\nPerformance Audit:\n[x] Frontend: Images optimized, JS split\n[x] Backend: N+1 eliminated, async I/O\n[x] Database: Indexes added, queries analyzed\n[x] Caching: Redis layer, HTTP headers set\n[x] Infra: CDN, compression, edge deploy\n```\n\n## Quick Start\n```bash\n# 1. Use this checklist during performance audits\n# 2. Check items relevant to your stack\n# 3. Prioritize items by impact (marked with impact level)\n# Measure first, optimize second - always benchmark before and after\n```\n\n## Full Checklist\n\n### Frontend Performance\n\n```markdown\n## Frontend (Browser)\n\n### Critical Rendering Path\n- [ ] **[HIGH]** Bundle size analyzed (webpack-bundle-analyzer / vite-plugin-visualizer)\n- [ ] **[HIGH]** Code splitting: route-based lazy loading (`React.lazy`, dynamic `import()`)\n- [ ] **[HIGH]** Tree shaking enabled (ES modules, sideEffects: false in package.json)\n- [ ] **[MEDIUM]** Critical CSS inlined, non-critical CSS deferred\n- [ ] **[MEDIUM]** Font loading optimized (`font-display: swap`, preloaded, subset)\n- [ ] **[LOW]** Third-party scripts loaded async or deferred\n\n### Images & Media\n- [ ] **[HIGH]** Images in modern format (WebP/AVIF with fallback)\n- [ ] **[HIGH]** Responsive images (`srcset`, `sizes` attributes or Next/Image)\n- [ ] **[HIGH]** Lazy loading for below-fold images (`loading=\"lazy\"`)\n- [ ] **[MEDIUM]** Image dimensions specified (prevents layout shift, CLS)\n- [ ] **[MEDIUM]** SVG used for icons (not PNG icon sprites)\n- [ ] **[LOW]** Video: poster image set, not auto-playing on mobile\n\n### JavaScript\n- [ ] **[HIGH]** No blocking JavaScript in `<head>` (use `defer` or `async`)\n- [ ] **[HIGH]** Heavy computations moved to Web Workers\n- [ ] **[MEDIUM]** Debounce/throttle on scroll, resize, and input handlers\n- [ ] **[MEDIUM]** Virtual scrolling for long lists (>100 items)\n- [ ] **[MEDIUM]** No memory leaks (event listeners cleaned up, intervals cleared)\n- [ ] **[LOW]** `requestAnimationFrame` used for animations (not setInterval)\n\n### Core Web Vitals Targets\n| Metric | Target | Measures |\n|--------|--------|----------|\n| LCP (Largest Contentful Paint) | < 2.5s | Loading speed |\n| FID (First Input Delay) | < 100ms | Interactivity |\n| CLS (Cumulative Layout Shift) | < 0.1 | Visual stability |\n| TTFB (Time to First Byte) | < 800ms | Server response |\n```\n\n### Backend Performance\n\n```markdown\n## Backend (Server)\n\n### API Response Time\n- [ ] **[HIGH]** Response time p95 < 200ms for simple reads, < 1s for complex\n- [ ] **[HIGH]** N+1 queries eliminated (use eager loading, DataLoader pattern)\n- [ ] **[HIGH]** Async I/O for all external calls (DB, HTTP, file system)\n- [ ] **[MEDIUM]** Connection pooling for database (pool size = CPU cores * 2 + 1)\n- [ ] **[MEDIUM]** Response compression (gzip/brotli) enabled at proxy level\n- [ ] **[MEDIUM]** Pagination on all list endpoints (max 100 items per page)\n\n### Concurrency\n- [ ] **[HIGH]** No blocking operations in async handlers\n- [ ] **[MEDIUM]** Worker processes = CPU cores (uvicorn, gunicorn, PM2)\n- [ ] **[MEDIUM]** Background jobs for heavy processing (Celery, BullMQ, Temporal)\n- [ ] **[LOW]** Rate limiting per client to prevent abuse\n\n### Data Serialization\n- [ ] **[MEDIUM]** Only return needed fields (no `SELECT *` to API response)\n- [ ] **[MEDIUM]** JSON serialization optimized (orjson for Python, fast-json-stringify for Node)\n- [ ] **[LOW]** Consider Protocol Buffers for internal service communication\n```\n\n### Database Performance\n\n```markdown\n## Database\n\n### Indexing\n- [ ] **[HIGH]** Indexes on all columns used in WHERE clauses\n- [ ] **[HIGH]** Indexes on all columns used in JOIN conditions\n- [ ] **[HIGH]** Composite indexes for multi-column queries (order matters)\n- [ ] **[MEDIUM]** Partial indexes for filtered queries (e.g., active users only)\n- [ ] **[LOW]** Unused indexes removed (they slow down writes)\n\n### Query Optimization\n- [ ] **[HIGH]** Slow queries identified (`pg_stat_statements`, slow query log)\n- [ ] **[HIGH]** EXPLAIN ANALYZE run on all complex queries\n- [ ] **[MEDIUM]** Batch inserts/updates instead of row-by-row loops\n- [ ] **[MEDIUM]** COUNT queries avoided on large tables (use estimates or cache)\n- [ ] **[MEDIUM]** Subqueries replaced with JOINs where beneficial\n\n### Schema Design\n- [ ] **[HIGH]** Proper data types (don't store numbers as strings)\n- [ ] **[MEDIUM]** Denormalization where read performance is critical\n- [ ] **[MEDIUM]** Archive old data to separate tables/partitions\n- [ ] **[LOW]** UUID v7 used for sortable primary keys (not UUID v4)\n\n### Connection Management\n- [ ] **[HIGH]** Connection pooling (PgBouncer, built-in ORM pooling)\n- [ ] **[MEDIUM]** Read replicas for read-heavy workloads\n- [ ] **[LOW]** Statement-level connection pooling for high concurrency\n```\n\n### Caching Strategy\n\n```markdown\n## Caching\n\n### Application Cache\n- [ ] **[HIGH]** Hot data cached in Redis/Memcached (user sessions, config)\n- [ ] **[HIGH]** Cache invalidation strategy defined (TTL, event-based, or both)\n- [ ] **[MEDIUM]** Cache-aside pattern implemented (check cache -> miss -> query DB -> set cache)\n- [ ] **[MEDIUM]** Cache stampede prevention (locking, probabilistic early expiration)\n- [ ] **[LOW]** Multi-level cache (in-memory L1 -> Redis L2 -> DB)\n\n### HTTP Caching\n- [ ] **[HIGH]** Static assets: `Cache-Control: public, max-age=31536000, immutable`\n- [ ] **[HIGH]** API responses: `Cache-Control` headers set appropriately\n- [ ] **[MEDIUM]** ETag/Last-Modified for conditional requests (304 Not Modified)\n- [ ] **[MEDIUM]** CDN configured for static assets and cacheable API responses\n- [ ] **[LOW]** `stale-while-revalidate` for non-critical data freshness\n\n### Cache TTL Guidelines\n| Data Type | TTL | Strategy |\n|-----------|-----|----------|\n| Static assets (JS, CSS, images) | 1 year | Immutable, bust via filename hash |\n| User session | 24 hours | Refresh on activity |\n| API config/settings | 5 minutes | TTL + event invalidation |\n| Search results | 1-5 minutes | TTL only |\n| User profile | 5 minutes | Invalidate on update |\n| Dashboard metrics | 30 seconds | Short TTL, background refresh |\n```\n\n### Infrastructure\n\n```markdown\n## Infrastructure\n\n### CDN & Edge\n- [ ] **[HIGH]** CDN for static assets (CloudFront, Cloudflare, Vercel Edge)\n- [ ] **[HIGH]** Brotli/gzip compression at CDN level\n- [ ] **[MEDIUM]** Edge functions for geo-specific logic (redirects, A/B tests)\n- [ ] **[LOW]** Image CDN with auto-format and resize (Cloudinary, imgix)\n\n### Monitoring\n- [ ] **[HIGH]** APM tool installed (Datadog, New Relic, or open-source alternatives)\n- [ ] **[HIGH]** Alerting on p95 latency spikes and error rate increases\n- [ ] **[MEDIUM]** Real User Monitoring (RUM) for frontend performance\n- [ ] **[MEDIUM]** Database query performance tracked (slow query alerts)\n- [ ] **[LOW]** Synthetic monitoring for critical user flows\n```\n\n## Measurement Tools\n\n| Category | Tool | Purpose |\n|----------|------|---------|\n| Frontend | Lighthouse | Overall web performance score |\n| Frontend | WebPageTest | Detailed waterfall analysis |\n| Frontend | Chrome DevTools Performance | Runtime performance profiling |\n| Backend | `wrk` or `k6` | HTTP load testing |\n| Database | `EXPLAIN ANALYZE` | Query execution plan |\n| Database | `pg_stat_statements` | Slow query identification |\n| Caching | `redis-cli INFO` | Cache hit rate monitoring |\n| Full stack | Datadog / Grafana | End-to-end APM |\n\n## Customization Guide\n- **Stack-specific**: Remove sections not relevant to your stack (no frontend for API-only projects)\n- **Priority order**: Address HIGH items first - they typically yield the biggest improvements\n- **Baseline first**: Always measure current performance before optimizing\n- **One change at a time**: Measure impact of each optimization individually\n- **Regression prevention**: Add performance budgets to CI (Lighthouse CI, bundle size limits)\n\n## 2026 Trend Notes\n- Core Web Vitals directly impact SEO rankings (Google)\n- Edge computing (Vercel Edge, Cloudflare Workers) reduces latency globally\n- UUID v7 (time-sortable) is replacing UUID v4 for better index performance\n- Brotli compression offers 15-20% better compression than gzip\n- Streaming SSR (React Server Components) reduces TTFB for dynamic pages\n"
    },
    {
      "filename": "portfolio-landing.md",
      "title": "Developer Portfolio Landing Page",
      "description": "Clean developer portfolio with project grid, skills visualization, and contact form",
      "category": "landing-pages",
      "tags": [
        "portfolio",
        "developer",
        "tailwind",
        "responsive",
        "minimal"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/portfolio-landing.md",
      "content": "# Developer Portfolio Landing Page\n> Clean developer portfolio with project grid, skills visualization, and contact form\n> 프로젝트 그리드, 스킬 시각화, 연락 폼을 갖춘 개발자 포트폴리오 페이지\n\n**Category**: Landing Pages | **Tags**: portfolio, developer, tailwind, responsive, minimal | **Difficulty**: Beginner\n\n## Preview\n```\n+--------------------------------------------------+\n|  JD    About  Projects  Skills  Contact           |\n+--------------------------------------------------+\n|                                                    |\n|    Hi, I'm Jane Doe                                |\n|    Full-stack Developer & Open Source Contributor   |\n|    [GitHub] [LinkedIn] [Resume]                    |\n|                                                    |\n|   +--------+  +--------+  +--------+               |\n|   |Project1|  |Project2|  |Project3|               |\n|   |  img   |  |  img   |  |  img   |               |\n|   +--------+  +--------+  +--------+               |\n|                                                    |\n|    React ====90%    Python ===85%                   |\n|                                                    |\n|    [Name] [Email] [Message] [Send]                 |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Copy the HTML below into index.html\n# 2. Replace name, bio, project links, and skill percentages\n# 3. Open in browser — fully responsive, zero dependencies beyond Tailwind CDN\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Jane Doe - Developer Portfolio</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <style>\n    .skill-bar { transition: width 1.2s cubic-bezier(0.4,0,0.2,1); }\n    @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }\n    .fade-up { animation: fadeUp 0.6s ease forwards; }\n  </style>\n</head>\n<body class=\"bg-gray-950 text-gray-100\">\n\n  <!-- Nav -->\n  <nav class=\"fixed w-full top-0 z-50 bg-gray-950/80 backdrop-blur border-b border-gray-800\">\n    <div class=\"max-w-5xl mx-auto px-6 h-14 flex items-center justify-between\">\n      <a href=\"#\" class=\"text-lg font-bold text-emerald-400\">JD</a>\n      <div class=\"flex gap-6 text-sm text-gray-400\">\n        <a href=\"#about\" class=\"hover:text-white transition\">About</a>\n        <a href=\"#projects\" class=\"hover:text-white transition\">Projects</a>\n        <a href=\"#skills\" class=\"hover:text-white transition\">Skills</a>\n        <a href=\"#contact\" class=\"hover:text-white transition\">Contact</a>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Hero / About -->\n  <section id=\"about\" class=\"pt-32 pb-20 px-6\">\n    <div class=\"max-w-3xl mx-auto text-center fade-up\">\n      <div class=\"w-24 h-24 mx-auto rounded-full bg-gradient-to-br from-emerald-400 to-cyan-400 flex items-center justify-center text-3xl font-bold text-gray-950 mb-6\">JD</div>\n      <h1 class=\"text-4xl md:text-5xl font-bold\">Hi, I'm <span class=\"text-emerald-400\">Jane Doe</span></h1>\n      <p class=\"mt-4 text-lg text-gray-400\">Full-stack developer specializing in React, Python, and cloud infrastructure. Open source contributor with 5+ years of experience building products used by thousands.</p>\n      <div class=\"mt-8 flex gap-4 justify-center\">\n        <a href=\"https://github.com\" target=\"_blank\" class=\"px-5 py-2 bg-gray-800 rounded-lg text-sm hover:bg-gray-700 transition\">GitHub</a>\n        <a href=\"https://linkedin.com\" target=\"_blank\" class=\"px-5 py-2 bg-gray-800 rounded-lg text-sm hover:bg-gray-700 transition\">LinkedIn</a>\n        <a href=\"#\" class=\"px-5 py-2 bg-emerald-600 rounded-lg text-sm hover:bg-emerald-700 transition\">Resume</a>\n      </div>\n    </div>\n  </section>\n\n  <!-- Projects -->\n  <section id=\"projects\" class=\"py-20 px-6 bg-gray-900\">\n    <div class=\"max-w-5xl mx-auto\">\n      <h2 class=\"text-2xl font-bold text-center mb-12\">Featured Projects</h2>\n      <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n\n        <div class=\"group bg-gray-800 rounded-xl overflow-hidden hover:ring-2 hover:ring-emerald-400 transition\">\n          <div class=\"h-40 bg-gradient-to-br from-emerald-900 to-cyan-900 flex items-center justify-center text-4xl\">&#128187;</div>\n          <div class=\"p-5\">\n            <div class=\"flex items-center justify-between\">\n              <h3 class=\"font-semibold\">DevFlow CLI</h3>\n              <span class=\"text-xs px-2 py-0.5 bg-emerald-900 text-emerald-300 rounded-full\">Open Source</span>\n            </div>\n            <p class=\"mt-2 text-sm text-gray-400\">A Git workflow automation tool used by 3,000+ developers. Built with Python and Click.</p>\n            <div class=\"mt-4 flex gap-2 text-xs text-gray-500\">\n              <span class=\"px-2 py-0.5 bg-gray-700 rounded\">Python</span>\n              <span class=\"px-2 py-0.5 bg-gray-700 rounded\">CLI</span>\n            </div>\n            <div class=\"mt-4 flex gap-3\">\n              <a href=\"#\" class=\"text-sm text-emerald-400 hover:underline\">Demo</a>\n              <a href=\"#\" class=\"text-sm text-gray-400 hover:underline\">Source</a>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"group bg-gray-800 rounded-xl overflow-hidden hover:ring-2 hover:ring-emerald-400 transition\">\n          <div class=\"h-40 bg-gradient-to-br from-purple-900 to-pink-900 flex items-center justify-center text-4xl\">&#128200;</div>\n          <div class=\"p-5\">\n            <div class=\"flex items-center justify-between\">\n              <h3 class=\"font-semibold\">TradeViz</h3>\n              <span class=\"text-xs px-2 py-0.5 bg-purple-900 text-purple-300 rounded-full\">SaaS</span>\n            </div>\n            <p class=\"mt-2 text-sm text-gray-400\">Real-time trading dashboard with candlestick charts and portfolio analytics.</p>\n            <div class=\"mt-4 flex gap-2 text-xs text-gray-500\">\n              <span class=\"px-2 py-0.5 bg-gray-700 rounded\">React</span>\n              <span class=\"px-2 py-0.5 bg-gray-700 rounded\">D3.js</span>\n              <span class=\"px-2 py-0.5 bg-gray-700 rounded\">FastAPI</span>\n            </div>\n            <div class=\"mt-4 flex gap-3\">\n              <a href=\"#\" class=\"text-sm text-emerald-400 hover:underline\">Live App</a>\n              <a href=\"#\" class=\"text-sm text-gray-400 hover:underline\">Source</a>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"group bg-gray-800 rounded-xl overflow-hidden hover:ring-2 hover:ring-emerald-400 transition\">\n          <div class=\"h-40 bg-gradient-to-br from-orange-900 to-yellow-900 flex items-center justify-center text-4xl\">&#129302;</div>\n          <div class=\"p-5\">\n            <div class=\"flex items-center justify-between\">\n              <h3 class=\"font-semibold\">AgentKit</h3>\n              <span class=\"text-xs px-2 py-0.5 bg-orange-900 text-orange-300 rounded-full\">AI</span>\n            </div>\n            <p class=\"mt-2 text-sm text-gray-400\">Multi-agent AI orchestration framework with tool-use and memory persistence.</p>\n            <div class=\"mt-4 flex gap-2 text-xs text-gray-500\">\n              <span class=\"px-2 py-0.5 bg-gray-700 rounded\">TypeScript</span>\n              <span class=\"px-2 py-0.5 bg-gray-700 rounded\">LangChain</span>\n            </div>\n            <div class=\"mt-4 flex gap-3\">\n              <a href=\"#\" class=\"text-sm text-emerald-400 hover:underline\">Docs</a>\n              <a href=\"#\" class=\"text-sm text-gray-400 hover:underline\">Source</a>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </section>\n\n  <!-- Skills -->\n  <section id=\"skills\" class=\"py-20 px-6\">\n    <div class=\"max-w-3xl mx-auto\">\n      <h2 class=\"text-2xl font-bold text-center mb-12\">Skills</h2>\n      <div class=\"space-y-5\">\n        <div><div class=\"flex justify-between text-sm mb-1\"><span>React / Next.js</span><span class=\"text-gray-500\">92%</span></div><div class=\"h-2 bg-gray-800 rounded-full\"><div class=\"skill-bar h-2 bg-emerald-500 rounded-full\" style=\"width:92%\"></div></div></div>\n        <div><div class=\"flex justify-between text-sm mb-1\"><span>Python / FastAPI</span><span class=\"text-gray-500\">88%</span></div><div class=\"h-2 bg-gray-800 rounded-full\"><div class=\"skill-bar h-2 bg-cyan-500 rounded-full\" style=\"width:88%\"></div></div></div>\n        <div><div class=\"flex justify-between text-sm mb-1\"><span>TypeScript</span><span class=\"text-gray-500\">85%</span></div><div class=\"h-2 bg-gray-800 rounded-full\"><div class=\"skill-bar h-2 bg-blue-500 rounded-full\" style=\"width:85%\"></div></div></div>\n        <div><div class=\"flex justify-between text-sm mb-1\"><span>PostgreSQL / Redis</span><span class=\"text-gray-500\">80%</span></div><div class=\"h-2 bg-gray-800 rounded-full\"><div class=\"skill-bar h-2 bg-purple-500 rounded-full\" style=\"width:80%\"></div></div></div>\n        <div><div class=\"flex justify-between text-sm mb-1\"><span>AWS / Docker / K8s</span><span class=\"text-gray-500\">78%</span></div><div class=\"h-2 bg-gray-800 rounded-full\"><div class=\"skill-bar h-2 bg-orange-500 rounded-full\" style=\"width:78%\"></div></div></div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Contact -->\n  <section id=\"contact\" class=\"py-20 px-6 bg-gray-900\">\n    <div class=\"max-w-lg mx-auto\">\n      <h2 class=\"text-2xl font-bold text-center mb-8\">Get In Touch</h2>\n      <form class=\"space-y-4\" action=\"https://formspree.io/f/YOUR_ID\" method=\"POST\">\n        <input name=\"name\" type=\"text\" placeholder=\"Your Name\" required class=\"w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500\">\n        <input name=\"email\" type=\"email\" placeholder=\"your@email.com\" required class=\"w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500\">\n        <textarea name=\"message\" rows=\"4\" placeholder=\"Your message...\" required class=\"w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 resize-none\"></textarea>\n        <button type=\"submit\" class=\"w-full py-3 bg-emerald-600 rounded-xl font-semibold hover:bg-emerald-700 transition\">Send Message</button>\n      </form>\n    </div>\n  </section>\n\n  <!-- Footer -->\n  <footer class=\"py-8 px-6 text-center text-sm text-gray-500\">\n    Built with Tailwind CSS. &copy; 2026 Jane Doe. All rights reserved.\n  </footer>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Avatar**: Replace the initials div with an `<img src=\"your-photo.jpg\" class=\"w-24 h-24 rounded-full object-cover\">`\n- **Projects**: Duplicate a project card block and change content; use real screenshot images for the gradient placeholders\n- **Skills**: Adjust percentage widths and label text; change bar colors per skill\n- **Contact form**: Replace `formspree.io/f/YOUR_ID` with your Formspree, Netlify Forms, or custom endpoint\n- **Color theme**: Change `emerald` to any Tailwind color (`blue`, `violet`, `rose`)\n- **Add blog section**: Insert a new `<section>` with grid of blog post cards\n\n## 2026 Trend Notes\n- Dark-first design reflects developer aesthetic preferences\n- Subtle ring hover effects (`hover:ring-2`) instead of heavy box shadows\n- Gradient mesh backgrounds on project cards for visual interest without images\n- Native form validation with `required` attribute (no JS needed)\n- Formspree integration for serverless form handling\n"
    },
    {
      "filename": "pricing-components.md",
      "title": "Pricing Table Components",
      "description": "Pricing patterns: 3-tier cards, monthly/yearly toggle, feature comparison, and enterprise CTA",
      "category": "components",
      "tags": [
        "pricing",
        "plans",
        "toggle",
        "comparison",
        "tailwind"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/pricing-components.md",
      "content": "# Pricing Table Components\n> Pricing patterns: 3-tier cards, monthly/yearly toggle, feature comparison, and enterprise CTA\n> 가격표 패턴: 3단계 카드, 월/연 토글, 기능 비교, 엔터프라이즈 CTA\n\n**Category**: Components | **Tags**: pricing, plans, toggle, comparison, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+--------+  +----------+  +----------+\n| Starter|  |   Pro    |  |Enterprise|\n|  $9/mo |  | $29/mo   |  |  Custom  |\n| [...]  |  | POPULAR  |  | [...]    |\n| [CTA]  |  | [CTA]    |  | [CTA]   |\n+--------+  +----------+  +----------+\n\n[Monthly] / [Yearly - Save 20%]\n```\n\n## Quick Start\n```bash\n# 1. Copy the pricing section you prefer\n# 2. Replace plan names, prices, and features\n# 3. Monthly/yearly toggle uses vanilla JS (framework-agnostic)\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Pricing Components</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-50 dark:bg-gray-900 p-8 min-h-screen\">\n  <div class=\"max-w-6xl mx-auto space-y-20\">\n\n    <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Pricing Components</h1>\n\n    <!-- 1. Three-Tier Pricing with Toggle -->\n    <section>\n      <div class=\"text-center mb-10\">\n        <h2 class=\"text-3xl font-bold text-gray-900 dark:text-white\">Simple, transparent pricing</h2>\n        <p class=\"mt-2 text-gray-500\">Choose the plan that fits your needs. Cancel anytime.</p>\n        <!-- Toggle -->\n        <div class=\"mt-6 inline-flex items-center gap-3 bg-gray-200 dark:bg-gray-700 p-1 rounded-xl\">\n          <button id=\"btn-monthly\" onclick=\"togglePricing('monthly')\" class=\"px-4 py-2 bg-white dark:bg-gray-800 rounded-lg text-sm font-medium shadow-sm text-gray-900 dark:text-white\">Monthly</button>\n          <button id=\"btn-yearly\" onclick=\"togglePricing('yearly')\" class=\"px-4 py-2 text-sm text-gray-500 rounded-lg\">Yearly <span class=\"text-xs text-emerald-600 font-bold\">-20%</span></button>\n        </div>\n      </div>\n\n      <div class=\"grid md:grid-cols-3 gap-6 max-w-5xl mx-auto\">\n        <!-- Starter -->\n        <div class=\"bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700\">\n          <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">Starter</h3>\n          <p class=\"mt-1 text-sm text-gray-500\">For individuals and side projects</p>\n          <div class=\"mt-6\">\n            <span class=\"price-monthly text-4xl font-black text-gray-900 dark:text-white\">$9</span>\n            <span class=\"price-yearly text-4xl font-black text-gray-900 dark:text-white hidden\">$7</span>\n            <span class=\"text-gray-400\">/month</span>\n          </div>\n          <ul class=\"mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-400\">\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> Up to 3 projects</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> 5GB storage</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> Community support</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> Basic analytics</li>\n            <li class=\"flex gap-2\"><span class=\"text-gray-300\">&#10007;</span><span class=\"text-gray-400\">Custom domains</span></li>\n            <li class=\"flex gap-2\"><span class=\"text-gray-300\">&#10007;</span><span class=\"text-gray-400\">Team members</span></li>\n          </ul>\n          <button class=\"mt-8 w-full py-3 border border-gray-300 dark:border-gray-600 rounded-xl font-semibold text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition text-gray-900 dark:text-white\">Get Started</button>\n        </div>\n\n        <!-- Pro (Popular) -->\n        <div class=\"bg-indigo-600 text-white rounded-2xl p-8 shadow-xl shadow-indigo-600/20 relative\">\n          <span class=\"absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-amber-400 text-amber-900 text-xs font-bold rounded-full\">Most Popular</span>\n          <h3 class=\"text-lg font-semibold\">Pro</h3>\n          <p class=\"mt-1 text-sm text-indigo-200\">For growing teams and businesses</p>\n          <div class=\"mt-6\">\n            <span class=\"price-monthly text-4xl font-black\">$29</span>\n            <span class=\"price-yearly text-4xl font-black hidden\">$23</span>\n            <span class=\"text-indigo-200\">/month</span>\n          </div>\n          <ul class=\"mt-6 space-y-3 text-sm text-indigo-100\">\n            <li class=\"flex gap-2\"><span class=\"text-emerald-300\">&#10003;</span> Unlimited projects</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-300\">&#10003;</span> 100GB storage</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-300\">&#10003;</span> Priority support</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-300\">&#10003;</span> Advanced analytics</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-300\">&#10003;</span> Custom domains</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-300\">&#10003;</span> Up to 10 team members</li>\n          </ul>\n          <button class=\"mt-8 w-full py-3 bg-white text-indigo-700 rounded-xl font-bold text-sm hover:bg-indigo-50 transition\">Start Free Trial</button>\n        </div>\n\n        <!-- Enterprise -->\n        <div class=\"bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700\">\n          <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">Enterprise</h3>\n          <p class=\"mt-1 text-sm text-gray-500\">For large organizations</p>\n          <div class=\"mt-6\">\n            <span class=\"text-4xl font-black text-gray-900 dark:text-white\">Custom</span>\n          </div>\n          <ul class=\"mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-400\">\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> Everything in Pro</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> Unlimited storage</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> Dedicated support</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> SSO / SAML</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> SLA guarantee</li>\n            <li class=\"flex gap-2\"><span class=\"text-emerald-500\">&#10003;</span> Unlimited team members</li>\n          </ul>\n          <button class=\"mt-8 w-full py-3 border border-gray-300 dark:border-gray-600 rounded-xl font-semibold text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition text-gray-900 dark:text-white\">Contact Sales</button>\n        </div>\n      </div>\n    </section>\n\n    <!-- 2. Feature Comparison Table -->\n    <section>\n      <h2 class=\"text-xl font-bold text-gray-900 dark:text-white mb-6\">Feature Comparison</h2>\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-x-auto\">\n        <table class=\"w-full text-sm\">\n          <thead>\n            <tr class=\"border-b border-gray-200 dark:border-gray-700\">\n              <th class=\"text-left px-6 py-4 font-medium text-gray-500 w-1/4\">Feature</th>\n              <th class=\"text-center px-6 py-4 font-medium text-gray-500\">Starter</th>\n              <th class=\"text-center px-6 py-4 font-medium text-indigo-600\">Pro</th>\n              <th class=\"text-center px-6 py-4 font-medium text-gray-500\">Enterprise</th>\n            </tr>\n          </thead>\n          <tbody class=\"divide-y divide-gray-100 dark:divide-gray-700\">\n            <tr><td class=\"px-6 py-3 text-gray-700 dark:text-gray-300\">Projects</td><td class=\"px-6 py-3 text-center\">3</td><td class=\"px-6 py-3 text-center font-medium text-indigo-600\">Unlimited</td><td class=\"px-6 py-3 text-center\">Unlimited</td></tr>\n            <tr><td class=\"px-6 py-3 text-gray-700 dark:text-gray-300\">Storage</td><td class=\"px-6 py-3 text-center\">5 GB</td><td class=\"px-6 py-3 text-center font-medium text-indigo-600\">100 GB</td><td class=\"px-6 py-3 text-center\">Unlimited</td></tr>\n            <tr><td class=\"px-6 py-3 text-gray-700 dark:text-gray-300\">Team members</td><td class=\"px-6 py-3 text-center\">1</td><td class=\"px-6 py-3 text-center font-medium text-indigo-600\">10</td><td class=\"px-6 py-3 text-center\">Unlimited</td></tr>\n            <tr><td class=\"px-6 py-3 text-gray-700 dark:text-gray-300\">Custom domains</td><td class=\"px-6 py-3 text-center text-gray-300\">&#10007;</td><td class=\"px-6 py-3 text-center text-emerald-500\">&#10003;</td><td class=\"px-6 py-3 text-center text-emerald-500\">&#10003;</td></tr>\n            <tr><td class=\"px-6 py-3 text-gray-700 dark:text-gray-300\">SSO / SAML</td><td class=\"px-6 py-3 text-center text-gray-300\">&#10007;</td><td class=\"px-6 py-3 text-center text-gray-300\">&#10007;</td><td class=\"px-6 py-3 text-center text-emerald-500\">&#10003;</td></tr>\n            <tr><td class=\"px-6 py-3 text-gray-700 dark:text-gray-300\">SLA</td><td class=\"px-6 py-3 text-center text-gray-300\">&#10007;</td><td class=\"px-6 py-3 text-center text-gray-300\">&#10007;</td><td class=\"px-6 py-3 text-center text-emerald-500\">99.99%</td></tr>\n            <tr><td class=\"px-6 py-3 text-gray-700 dark:text-gray-300\">Support</td><td class=\"px-6 py-3 text-center\">Community</td><td class=\"px-6 py-3 text-center font-medium text-indigo-600\">Priority</td><td class=\"px-6 py-3 text-center\">Dedicated</td></tr>\n          </tbody>\n        </table>\n      </div>\n    </section>\n\n  </div>\n\n  <script>\n    function togglePricing(period) {\n      const monthly = document.querySelectorAll('.price-monthly');\n      const yearly = document.querySelectorAll('.price-yearly');\n      const btnM = document.getElementById('btn-monthly');\n      const btnY = document.getElementById('btn-yearly');\n      if (period === 'yearly') {\n        monthly.forEach(el => el.classList.add('hidden'));\n        yearly.forEach(el => el.classList.remove('hidden'));\n        btnM.className = 'px-4 py-2 text-sm text-gray-500 rounded-lg';\n        btnY.className = 'px-4 py-2 bg-white dark:bg-gray-800 rounded-lg text-sm font-medium shadow-sm text-gray-900 dark:text-white';\n      } else {\n        monthly.forEach(el => el.classList.remove('hidden'));\n        yearly.forEach(el => el.classList.add('hidden'));\n        btnM.className = 'px-4 py-2 bg-white dark:bg-gray-800 rounded-lg text-sm font-medium shadow-sm text-gray-900 dark:text-white';\n        btnY.className = 'px-4 py-2 text-sm text-gray-500 rounded-lg';\n      }\n    }\n  </script>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Prices**: Update dollar amounts in both monthly and yearly spans\n- **Toggle discount**: Change the \"20%\" discount in the yearly button badge\n- **Features**: Add or remove `<li>` items in each plan; use `&#10003;` for included, `&#10007;` for excluded\n- **Popular badge**: Move to a different plan or remove by deleting the `<span>` element\n- **Comparison table**: Add rows for more features; highlight the recommended column\n- **Payment links**: Replace button `onclick` with Stripe Checkout or Paddle links\n\n## 2026 Trend Notes\n- Monthly/yearly toggle is expected UX for SaaS pricing\n- Highlighted popular plan with contrasting color drives conversions\n- Feature comparison table below cards addresses \"which plan\" questions\n- Enterprise plan with \"Custom\" pricing and \"Contact Sales\" is standard B2B pattern\n- Checkmark/cross indicators provide instant visual scanning\n"
    },
    {
      "filename": "product-landing.md",
      "title": "Product Launch Landing Page",
      "description": "Product launch page with hero video area, feature carousel, and testimonials",
      "category": "landing-pages",
      "tags": [
        "product",
        "launch",
        "video",
        "testimonials",
        "tailwind"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/product-landing.md",
      "content": "# Product Launch Landing Page\n> Product launch page with hero video area, feature carousel, and testimonials\n> 히어로 비디오 영역, 기능 캐러셀, 후기 섹션이 포함된 제품 출시 랜딩 페이지\n\n**Category**: Landing Pages | **Tags**: product, launch, video, testimonials, tailwind | **Difficulty**: Intermediate\n\n## Preview\n```\n+--------------------------------------------------+\n|  Brand   Features  Reviews   [Pre-Order ->]       |\n+--------------------------------------------------+\n|                                                    |\n|    Introducing ProductX                            |\n|    [ ========= VIDEO ========= ]                  |\n|                                                    |\n|   << Feature 1  |  Feature 2  |  Feature 3 >>     |\n|                                                    |\n|   \"Amazing product\" - User A                       |\n|   \"Changed my life\" - User B                       |\n|                                                    |\n|        [Pre-Order Now - $99]                       |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Save as index.html\n# 2. Replace video placeholder with your <video> or YouTube embed\n# 3. Carousel uses pure CSS scroll-snap (no JS library needed)\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>ProductX - The Future Is Here</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <style>\n    .carousel { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }\n    .carousel > div { scroll-snap-align: start; }\n    .carousel::-webkit-scrollbar { display: none; }\n  </style>\n</head>\n<body class=\"bg-black text-white\">\n\n  <!-- Nav -->\n  <nav class=\"fixed w-full top-0 z-50 bg-black/70 backdrop-blur\">\n    <div class=\"max-w-6xl mx-auto px-6 h-16 flex items-center justify-between\">\n      <span class=\"text-xl font-bold\">Product<span class=\"text-rose-500\">X</span></span>\n      <div class=\"hidden md:flex items-center gap-8 text-sm text-gray-300\">\n        <a href=\"#features\" class=\"hover:text-white\">Features</a>\n        <a href=\"#reviews\" class=\"hover:text-white\">Reviews</a>\n        <a href=\"#order\" class=\"px-5 py-2 bg-rose-600 rounded-full font-medium hover:bg-rose-700 transition text-white\">Pre-Order</a>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Hero with Video -->\n  <section class=\"pt-28 pb-16 px-6\">\n    <div class=\"max-w-4xl mx-auto text-center\">\n      <p class=\"text-rose-400 text-sm font-medium tracking-wider uppercase mb-4\">Launching March 2026</p>\n      <h1 class=\"text-5xl md:text-7xl font-black tracking-tight\">The Future<br>Is <span class=\"text-rose-500\">Here</span></h1>\n      <p class=\"mt-6 text-lg text-gray-400 max-w-xl mx-auto\">ProductX redefines what's possible. Precision-engineered with cutting-edge technology for the modern creator.</p>\n    </div>\n    <!-- Video Placeholder -->\n    <div class=\"max-w-4xl mx-auto mt-12 aspect-video bg-gray-900 rounded-2xl overflow-hidden border border-gray-800 relative group cursor-pointer\">\n      <div class=\"absolute inset-0 flex items-center justify-center\">\n        <div class=\"w-20 h-20 bg-rose-600 rounded-full flex items-center justify-center group-hover:scale-110 transition shadow-lg shadow-rose-600/30\">\n          <svg class=\"w-8 h-8 text-white ml-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"/></svg>\n        </div>\n      </div>\n      <div class=\"absolute inset-0 bg-gradient-to-t from-black/60 to-transparent\"></div>\n      <!-- Replace with: <video src=\"hero.mp4\" autoplay muted loop class=\"w-full h-full object-cover\"> -->\n      <!-- Or: <iframe src=\"https://youtube.com/embed/VIDEO_ID\" class=\"w-full h-full\"></iframe> -->\n    </div>\n  </section>\n\n  <!-- Feature Carousel -->\n  <section id=\"features\" class=\"py-20 px-6\">\n    <div class=\"max-w-6xl mx-auto\">\n      <h2 class=\"text-3xl font-bold text-center mb-12\">Built Different</h2>\n      <div class=\"carousel flex gap-6 overflow-x-auto pb-4\">\n        <div class=\"min-w-[300px] md:min-w-[350px] bg-gray-900 rounded-2xl p-8 border border-gray-800 flex-shrink-0\">\n          <div class=\"text-4xl mb-4\">&#9889;</div>\n          <h3 class=\"text-xl font-bold\">Blazing Performance</h3>\n          <p class=\"mt-3 text-gray-400 text-sm leading-relaxed\">Our custom M4 chip delivers 3x the speed of competitors while using 50% less power. Benchmarks don't lie.</p>\n          <div class=\"mt-6 text-rose-400 font-bold text-2xl\">3x Faster</div>\n        </div>\n        <div class=\"min-w-[300px] md:min-w-[350px] bg-gray-900 rounded-2xl p-8 border border-gray-800 flex-shrink-0\">\n          <div class=\"text-4xl mb-4\">&#128267;</div>\n          <h3 class=\"text-xl font-bold\">48hr Battery</h3>\n          <p class=\"mt-3 text-gray-400 text-sm leading-relaxed\">Go two full days without charging. Our next-gen battery technology adapts to your usage patterns in real-time.</p>\n          <div class=\"mt-6 text-rose-400 font-bold text-2xl\">48 Hours</div>\n        </div>\n        <div class=\"min-w-[300px] md:min-w-[350px] bg-gray-900 rounded-2xl p-8 border border-gray-800 flex-shrink-0\">\n          <div class=\"text-4xl mb-4\">&#128247;</div>\n          <h3 class=\"text-xl font-bold\">200MP Camera</h3>\n          <p class=\"mt-3 text-gray-400 text-sm leading-relaxed\">Capture every detail with our quad-lens system. AI-enhanced night mode makes darkness irrelevant.</p>\n          <div class=\"mt-6 text-rose-400 font-bold text-2xl\">200 MP</div>\n        </div>\n        <div class=\"min-w-[300px] md:min-w-[350px] bg-gray-900 rounded-2xl p-8 border border-gray-800 flex-shrink-0\">\n          <div class=\"text-4xl mb-4\">&#128737;</div>\n          <h3 class=\"text-xl font-bold\">Military-Grade Build</h3>\n          <p class=\"mt-3 text-gray-400 text-sm leading-relaxed\">Titanium frame with sapphire glass. IP69 water and dust resistant. Built to survive anything life throws at it.</p>\n          <div class=\"mt-6 text-rose-400 font-bold text-2xl\">IP69</div>\n        </div>\n      </div>\n      <div class=\"flex justify-center gap-2 mt-6\">\n        <div class=\"w-8 h-1 bg-rose-500 rounded-full\"></div>\n        <div class=\"w-8 h-1 bg-gray-700 rounded-full\"></div>\n        <div class=\"w-8 h-1 bg-gray-700 rounded-full\"></div>\n        <div class=\"w-8 h-1 bg-gray-700 rounded-full\"></div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Testimonials -->\n  <section id=\"reviews\" class=\"py-20 px-6 bg-gray-950\">\n    <div class=\"max-w-5xl mx-auto\">\n      <h2 class=\"text-3xl font-bold text-center mb-12\">What Early Reviewers Say</h2>\n      <div class=\"grid md:grid-cols-3 gap-6\">\n        <div class=\"bg-gray-900 rounded-2xl p-6 border border-gray-800\">\n          <div class=\"flex gap-1 text-yellow-400 mb-4\">&#9733;&#9733;&#9733;&#9733;&#9733;</div>\n          <p class=\"text-gray-300 text-sm\">\"The performance is unreal. I edited a 4K video on this thing faster than my desktop. Game changer.\"</p>\n          <div class=\"mt-4 flex items-center gap-3\">\n            <div class=\"w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center font-bold text-sm\">MK</div>\n            <div><p class=\"text-sm font-medium\">MKBHD</p><p class=\"text-xs text-gray-500\">Tech Reviewer</p></div>\n          </div>\n        </div>\n        <div class=\"bg-gray-900 rounded-2xl p-6 border border-gray-800\">\n          <div class=\"flex gap-1 text-yellow-400 mb-4\">&#9733;&#9733;&#9733;&#9733;&#9733;</div>\n          <p class=\"text-gray-300 text-sm\">\"Best camera system I've tested in 2026. Night mode photos look like they were taken in daylight.\"</p>\n          <div class=\"mt-4 flex items-center gap-3\">\n            <div class=\"w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center font-bold text-sm\">TG</div>\n            <div><p class=\"text-sm font-medium\">The Verge</p><p class=\"text-xs text-gray-500\">Publication</p></div>\n          </div>\n        </div>\n        <div class=\"bg-gray-900 rounded-2xl p-6 border border-gray-800\">\n          <div class=\"flex gap-1 text-yellow-400 mb-4\">&#9733;&#9733;&#9733;&#9733;&#9734;</div>\n          <p class=\"text-gray-300 text-sm\">\"Two days of battery life isn't marketing speak - I actually got 47 hours with heavy use. Impressive.\"</p>\n          <div class=\"mt-4 flex items-center gap-3\">\n            <div class=\"w-10 h-10 bg-emerald-600 rounded-full flex items-center justify-center font-bold text-sm\">AH</div>\n            <div><p class=\"text-sm font-medium\">Ars Technica</p><p class=\"text-xs text-gray-500\">Publication</p></div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Pre-Order CTA -->\n  <section id=\"order\" class=\"py-24 px-6\">\n    <div class=\"max-w-2xl mx-auto text-center\">\n      <h2 class=\"text-4xl font-black\">Ready to Experience It?</h2>\n      <p class=\"mt-4 text-gray-400\">Ships worldwide starting April 2026. Reserve yours today.</p>\n      <div class=\"mt-10 inline-flex flex-col items-center\">\n        <div class=\"text-5xl font-black\">$999</div>\n        <div class=\"text-sm text-gray-500 mt-1\">Starting price &middot; Free shipping</div>\n        <a href=\"#\" class=\"mt-6 px-10 py-4 bg-rose-600 text-lg font-bold rounded-full hover:bg-rose-700 shadow-xl shadow-rose-600/25 transition\">Pre-Order Now</a>\n        <p class=\"mt-3 text-xs text-gray-500\">$99 deposit &middot; Full refund if you cancel</p>\n      </div>\n    </div>\n  </section>\n\n  <footer class=\"py-8 px-6 border-t border-gray-800 text-center text-xs text-gray-500\">\n    &copy; 2026 ProductX Inc. All rights reserved. | <a href=\"#\" class=\"hover:text-white\">Privacy</a> | <a href=\"#\" class=\"hover:text-white\">Terms</a>\n  </footer>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Video**: Replace the placeholder `<div>` with `<video autoplay muted loop>` or a YouTube `<iframe>`\n- **Carousel**: Add or remove feature cards; the CSS scroll-snap handles alignment\n- **Testimonials**: Replace reviewer info with real quotes and avatars\n- **Price**: Update the `$999` and deposit amount\n- **Color accent**: Change `rose` to `violet`, `amber`, or any Tailwind color\n- **Countdown timer**: Add a JS countdown before the pre-order CTA for urgency\n\n## 2026 Trend Notes\n- Pure CSS carousel with `scroll-snap-type` eliminates the need for Swiper/Slick\n- Full-black background with high-contrast text is standard for premium product pages\n- Large stat numbers in feature cards provide visual anchors\n- Play button overlay on video area encourages interaction\n- Deposit model with refund policy reduces purchase friction\n"
    },
    {
      "filename": "readme-template.md",
      "title": "README Template",
      "description": "Comprehensive README.md template with badges, install instructions, usage, API docs, and contributing guide",
      "category": "project-setup",
      "tags": [
        "readme",
        "documentation",
        "open-source",
        "markdown",
        "badges"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/readme-template.md",
      "content": "# README Template\n> Comprehensive README.md template with badges, install instructions, usage, API docs, and contributing guide\n> 배지, 설치 가이드, 사용법, API 문서, 기여 가이드가 포함된 종합 README 템플릿\n\n**Category**: Project Setup | **Tags**: readme, documentation, open-source, markdown, badges | **Difficulty**: Beginner\n\n## Preview\n```\n# Project Name\n[badges: build, coverage, npm, license]\n\nDescription paragraph\n\n## Features | Install | Usage | API | Contributing\n```\n\n## Quick Start\n```bash\n# 1. Copy the template below into your project's README.md\n# 2. Replace all [PLACEHOLDER] values with your project info\n# 3. Remove sections that don't apply (e.g., API if it's a CLI tool)\n```\n\n## Full Code\n\n````markdown\n# [Project Name]\n\n[![CI](https://github.com/[OWNER]/[REPO]/actions/workflows/ci.yml/badge.svg)](https://github.com/[OWNER]/[REPO]/actions)\n[![Coverage](https://codecov.io/gh/[OWNER]/[REPO]/branch/main/graph/badge.svg)](https://codecov.io/gh/[OWNER]/[REPO])\n[![npm](https://img.shields.io/npm/v/[PACKAGE_NAME])](https://www.npmjs.com/package/[PACKAGE_NAME])\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n\n> [One-line description of what this project does and who it's for.]\n\n[Project Name] is a [type of tool/library/framework] that helps you [primary benefit]. Built with [key technologies], it provides [key differentiator].\n\n## Features\n\n- **Feature 1** - Brief description of the feature\n- **Feature 2** - Brief description of the feature\n- **Feature 3** - Brief description of the feature\n- **Feature 4** - Brief description of the feature\n\n## Installation\n\n### Prerequisites\n\n- Node.js >= 20 (or Python >= 3.11)\n- npm or yarn or pnpm\n\n### Install\n\n```bash\n# npm\nnpm install [package-name]\n\n# yarn\nyarn add [package-name]\n\n# pnpm\npnpm add [package-name]\n```\n\n### From source\n\n```bash\ngit clone https://github.com/[OWNER]/[REPO].git\ncd [REPO]\nnpm install\nnpm run build\n```\n\n## Quick Start\n\n```javascript\nimport { Client } from '[package-name]';\n\nconst client = new Client({ apiKey: process.env.API_KEY });\n\n// Create a resource\nconst result = await client.create({\n  name: 'My Resource',\n  type: 'example',\n});\n\nconsole.log(result);\n// { id: 'res_abc123', name: 'My Resource', created_at: '2026-03-28T...' }\n```\n\n## Usage\n\n### Basic Example\n\n```javascript\n// Initialize\nconst app = new App({ debug: true });\n\n// Add middleware\napp.use(logger());\napp.use(cors());\n\n// Define routes\napp.get('/health', () => ({ status: 'ok' }));\napp.post('/users', async (req) => {\n  return await createUser(req.body);\n});\n\n// Start\napp.listen(3000);\n```\n\n### Configuration\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `apiKey` | `string` | - | Your API key (required) |\n| `baseUrl` | `string` | `https://api.example.com` | API base URL |\n| `timeout` | `number` | `30000` | Request timeout in ms |\n| `retries` | `number` | `3` | Number of retry attempts |\n| `debug` | `boolean` | `false` | Enable debug logging |\n\n### Environment Variables\n\n```bash\n# .env\nAPI_KEY=your_api_key_here\nDATABASE_URL=postgresql://user:pass@localhost:5432/db\nLOG_LEVEL=info\n```\n\n## API Reference\n\n### `client.create(options)`\n\nCreates a new resource.\n\n**Parameters:**\n\n| Name | Type | Required | Description |\n|------|------|----------|-------------|\n| `name` | `string` | Yes | Resource name |\n| `type` | `string` | Yes | Resource type |\n| `metadata` | `object` | No | Additional key-value pairs |\n\n**Returns:** `Promise<Resource>`\n\n**Example:**\n\n```javascript\nconst resource = await client.create({\n  name: 'Example',\n  type: 'demo',\n  metadata: { env: 'production' }\n});\n```\n\n### `client.list(filters?)`\n\nLists resources with optional filtering.\n\n**Parameters:**\n\n| Name | Type | Required | Description |\n|------|------|----------|-------------|\n| `limit` | `number` | No | Max results (default: 20) |\n| `cursor` | `string` | No | Pagination cursor |\n| `type` | `string` | No | Filter by type |\n\n**Returns:** `Promise<{ data: Resource[], pagination: Pagination }>`\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run in development mode\nnpm run dev\n\n# Run tests\nnpm test\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Lint\nnpm run lint\n\n# Build for production\nnpm run build\n```\n\n### Project Structure\n\n```\nsrc/\n├── index.ts          # Main entry point\n├── client.ts         # API client\n├── types.ts          # TypeScript types\n├── utils/            # Utility functions\n│   ├── validator.ts\n│   └── logger.ts\n└── errors.ts         # Custom error classes\n\ntests/\n├── client.test.ts\n├── utils.test.ts\n└── fixtures/         # Test fixtures\n```\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) before submitting a PR.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'feat: add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n### Commit Convention\n\nThis project uses [Conventional Commits](https://www.conventionalcommits.org/):\n\n- `feat:` New feature\n- `fix:` Bug fix\n- `docs:` Documentation\n- `test:` Tests\n- `chore:` Maintenance\n\n## Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md) for release history.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- [Library/tool that helped](https://example.com) - Brief credit\n- Inspired by [project](https://example.com)\n````\n\n## Customization Guide\n- **Badges**: Replace `[OWNER]/[REPO]` with your GitHub org/repo; add PyPI, Docker Hub, or custom badges\n- **Install section**: Adjust for your package manager (pip, cargo, go get)\n- **API Reference**: Expand with all public methods; use TypeDoc/Sphinx for auto-generation\n- **Project structure**: Update to match your actual directory layout\n- **License**: Change MIT to Apache-2.0, GPL, or your chosen license\n- **Remove sections**: If not applicable (e.g., no API for a CLI tool), remove those sections\n\n## 2026 Trend Notes\n- README-driven development: write the README first to clarify the API before coding\n- Status badges at the top give instant project health visibility\n- Quick Start section with copy-paste code is essential for adoption\n- Configuration table format is easier to scan than prose descriptions\n- Contributing section with commit convention ensures consistent history\n"
    },
    {
      "filename": "saas-landing.md",
      "title": "SaaS Landing Page",
      "description": "Modern SaaS landing page with hero, features, pricing, and CTA sections built with Tailwind CSS",
      "category": "landing-pages",
      "tags": [
        "saas",
        "tailwind",
        "landing",
        "responsive",
        "dark-mode"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/saas-landing.md",
      "content": "# SaaS Landing Page\n> Modern SaaS landing page with hero, features, pricing, and CTA sections built with Tailwind CSS\n> Tailwind CSS 기반 모던 SaaS 랜딩 페이지 (히어로, 기능, 가격, CTA 섹션 포함)\n\n**Category**: Landing Pages | **Tags**: saas, tailwind, landing, responsive, dark-mode | **Difficulty**: Beginner\n\n## Preview\n```\n+--------------------------------------------------+\n|  Logo    Features  Pricing  Login  [Get Started]  |\n+--------------------------------------------------+\n|                                                    |\n|        Build Faster. Ship Smarter.                 |\n|   The all-in-one platform for modern teams         |\n|                                                    |\n|     [Start Free Trial]  [Watch Demo ->]            |\n|                                                    |\n|     +--------+  +--------+  +--------+             |\n|     |Feature1|  |Feature2|  |Feature3|             |\n|     +--------+  +--------+  +--------+             |\n|                                                    |\n|   Starter $9   Pro $29   Enterprise $99            |\n|                                                    |\n|        Ready to get started? [Sign Up]             |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Create index.html and paste the Full Code below\n# 2. Open in browser - no build step needed\n# 3. Tailwind loads via CDN (swap to local build for production)\n# Tip: Replace colors by changing \"indigo\" to your brand color\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>SaaSify - Build Faster. Ship Smarter.</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <script>\n    tailwind.config = {\n      darkMode: 'class',\n      theme: {\n        extend: {\n          colors: { brand: { 50:'#eef2ff',100:'#e0e7ff',500:'#6366f1',600:'#4f46e5',700:'#4338ca',900:'#312e81' } }\n        }\n      }\n    }\n  </script>\n</head>\n<body class=\"bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100\">\n\n  <!-- Navbar -->\n  <nav class=\"fixed w-full top-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur border-b border-gray-200 dark:border-gray-800\">\n    <div class=\"max-w-7xl mx-auto px-6 h-16 flex items-center justify-between\">\n      <a href=\"#\" class=\"text-xl font-bold text-brand-600\">SaaSify</a>\n      <div class=\"hidden md:flex items-center gap-8\">\n        <a href=\"#features\" class=\"text-sm hover:text-brand-600 transition\">Features</a>\n        <a href=\"#pricing\" class=\"text-sm hover:text-brand-600 transition\">Pricing</a>\n        <a href=\"#faq\" class=\"text-sm hover:text-brand-600 transition\">FAQ</a>\n        <a href=\"#\" class=\"text-sm text-gray-500\">Log in</a>\n        <a href=\"#\" class=\"px-4 py-2 bg-brand-600 text-white text-sm rounded-lg hover:bg-brand-700 transition\">Get Started</a>\n      </div>\n      <button id=\"menu-btn\" class=\"md:hidden p-2\" onclick=\"document.getElementById('mobile-menu').classList.toggle('hidden')\">\n        <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"/></svg>\n      </button>\n    </div>\n    <div id=\"mobile-menu\" class=\"hidden md:hidden px-6 pb-4 space-y-3\">\n      <a href=\"#features\" class=\"block text-sm\">Features</a>\n      <a href=\"#pricing\" class=\"block text-sm\">Pricing</a>\n      <a href=\"#\" class=\"block px-4 py-2 bg-brand-600 text-white text-sm rounded-lg text-center\">Get Started</a>\n    </div>\n  </nav>\n\n  <!-- Hero -->\n  <section class=\"pt-32 pb-20 px-6\">\n    <div class=\"max-w-4xl mx-auto text-center\">\n      <div class=\"inline-block px-4 py-1 mb-6 text-xs font-medium bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-100 rounded-full\">New: AI-powered workflows</div>\n      <h1 class=\"text-5xl md:text-6xl font-extrabold tracking-tight leading-tight\">Build Faster.<br><span class=\"text-brand-600\">Ship Smarter.</span></h1>\n      <p class=\"mt-6 text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto\">The all-in-one platform that helps modern teams automate workflows, collaborate in real-time, and ship products 10x faster.</p>\n      <div class=\"mt-10 flex flex-col sm:flex-row gap-4 justify-center\">\n        <a href=\"#\" class=\"px-8 py-3 bg-brand-600 text-white font-semibold rounded-xl hover:bg-brand-700 shadow-lg shadow-brand-600/25 transition\">Start Free Trial</a>\n        <a href=\"#\" class=\"px-8 py-3 border border-gray-300 dark:border-gray-700 rounded-xl font-semibold hover:bg-gray-50 dark:hover:bg-gray-900 transition flex items-center gap-2 justify-center\">Watch Demo <span>&#8594;</span></a>\n      </div>\n      <p class=\"mt-4 text-xs text-gray-400\">No credit card required. 14-day free trial.</p>\n    </div>\n  </section>\n\n  <!-- Logos -->\n  <section class=\"py-12 border-y border-gray-100 dark:border-gray-800\">\n    <div class=\"max-w-5xl mx-auto px-6 text-center\">\n      <p class=\"text-xs uppercase tracking-widest text-gray-400 mb-6\">Trusted by 2,000+ teams worldwide</p>\n      <div class=\"flex flex-wrap justify-center gap-10 opacity-40 grayscale text-2xl font-bold\">\n        <span>Stripe</span><span>Vercel</span><span>Linear</span><span>Notion</span><span>Figma</span>\n      </div>\n    </div>\n  </section>\n\n  <!-- Features -->\n  <section id=\"features\" class=\"py-24 px-6\">\n    <div class=\"max-w-6xl mx-auto\">\n      <h2 class=\"text-3xl font-bold text-center\">Everything you need to ship fast</h2>\n      <p class=\"text-center text-gray-500 mt-3 max-w-xl mx-auto\">Powerful tools that integrate seamlessly into your existing workflow.</p>\n      <div class=\"mt-16 grid md:grid-cols-3 gap-8\">\n        <div class=\"p-6 rounded-2xl border border-gray-200 dark:border-gray-800 hover:shadow-lg transition\">\n          <div class=\"w-12 h-12 bg-brand-50 dark:bg-brand-900/30 rounded-xl flex items-center justify-center text-brand-600 text-xl mb-4\">&#9889;</div>\n          <h3 class=\"font-semibold text-lg\">Lightning Fast</h3>\n          <p class=\"mt-2 text-sm text-gray-500\">Sub-100ms response times with edge computing and smart caching built in.</p>\n        </div>\n        <div class=\"p-6 rounded-2xl border border-gray-200 dark:border-gray-800 hover:shadow-lg transition\">\n          <div class=\"w-12 h-12 bg-green-50 dark:bg-green-900/30 rounded-xl flex items-center justify-center text-green-600 text-xl mb-4\">&#128274;</div>\n          <h3 class=\"font-semibold text-lg\">Enterprise Security</h3>\n          <p class=\"mt-2 text-sm text-gray-500\">SOC2 Type II certified. End-to-end encryption. SSO and RBAC included.</p>\n        </div>\n        <div class=\"p-6 rounded-2xl border border-gray-200 dark:border-gray-800 hover:shadow-lg transition\">\n          <div class=\"w-12 h-12 bg-purple-50 dark:bg-purple-900/30 rounded-xl flex items-center justify-center text-purple-600 text-xl mb-4\">&#128640;</div>\n          <h3 class=\"font-semibold text-lg\">AI Workflows</h3>\n          <p class=\"mt-2 text-sm text-gray-500\">Automate repetitive tasks with AI-powered pipelines that learn your patterns.</p>\n        </div>\n        <div class=\"p-6 rounded-2xl border border-gray-200 dark:border-gray-800 hover:shadow-lg transition\">\n          <div class=\"w-12 h-12 bg-orange-50 dark:bg-orange-900/30 rounded-xl flex items-center justify-center text-orange-600 text-xl mb-4\">&#128295;</div>\n          <h3 class=\"font-semibold text-lg\">API First</h3>\n          <p class=\"mt-2 text-sm text-gray-500\">RESTful and GraphQL APIs with SDKs for Python, Node.js, Go, and Rust.</p>\n        </div>\n        <div class=\"p-6 rounded-2xl border border-gray-200 dark:border-gray-800 hover:shadow-lg transition\">\n          <div class=\"w-12 h-12 bg-cyan-50 dark:bg-cyan-900/30 rounded-xl flex items-center justify-center text-cyan-600 text-xl mb-4\">&#128202;</div>\n          <h3 class=\"font-semibold text-lg\">Real-time Analytics</h3>\n          <p class=\"mt-2 text-sm text-gray-500\">Live dashboards, custom reports, and automated alerts for your key metrics.</p>\n        </div>\n        <div class=\"p-6 rounded-2xl border border-gray-200 dark:border-gray-800 hover:shadow-lg transition\">\n          <div class=\"w-12 h-12 bg-pink-50 dark:bg-pink-900/30 rounded-xl flex items-center justify-center text-pink-600 text-xl mb-4\">&#127760;</div>\n          <h3 class=\"font-semibold text-lg\">Global Scale</h3>\n          <p class=\"mt-2 text-sm text-gray-500\">Deploy to 30+ edge regions. Auto-scaling handles traffic spikes seamlessly.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Pricing -->\n  <section id=\"pricing\" class=\"py-24 px-6 bg-gray-50 dark:bg-gray-900\">\n    <div class=\"max-w-5xl mx-auto text-center\">\n      <h2 class=\"text-3xl font-bold\">Simple, transparent pricing</h2>\n      <p class=\"text-gray-500 mt-3\">No hidden fees. Cancel anytime.</p>\n      <div class=\"mt-16 grid md:grid-cols-3 gap-8\">\n        <!-- Starter -->\n        <div class=\"bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 text-left\">\n          <h3 class=\"font-semibold text-lg\">Starter</h3>\n          <div class=\"mt-4\"><span class=\"text-4xl font-bold\">$9</span><span class=\"text-gray-400\">/mo</span></div>\n          <ul class=\"mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-400\">\n            <li>&#10003; Up to 5 users</li><li>&#10003; 10GB storage</li><li>&#10003; Basic analytics</li><li>&#10003; Email support</li>\n          </ul>\n          <a href=\"#\" class=\"mt-8 block text-center py-2.5 border border-gray-300 dark:border-gray-600 rounded-xl font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition\">Get Started</a>\n        </div>\n        <!-- Pro (popular) -->\n        <div class=\"bg-brand-600 text-white rounded-2xl p-8 shadow-xl shadow-brand-600/20 text-left relative\">\n          <span class=\"absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 bg-yellow-400 text-yellow-900 text-xs font-bold rounded-full\">Most Popular</span>\n          <h3 class=\"font-semibold text-lg\">Pro</h3>\n          <div class=\"mt-4\"><span class=\"text-4xl font-bold\">$29</span><span class=\"text-indigo-200\">/mo</span></div>\n          <ul class=\"mt-6 space-y-3 text-sm text-indigo-100\">\n            <li>&#10003; Up to 25 users</li><li>&#10003; 100GB storage</li><li>&#10003; Advanced analytics</li><li>&#10003; Priority support</li><li>&#10003; AI workflows</li>\n          </ul>\n          <a href=\"#\" class=\"mt-8 block text-center py-2.5 bg-white text-brand-700 rounded-xl font-bold hover:bg-indigo-50 transition\">Start Free Trial</a>\n        </div>\n        <!-- Enterprise -->\n        <div class=\"bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 text-left\">\n          <h3 class=\"font-semibold text-lg\">Enterprise</h3>\n          <div class=\"mt-4\"><span class=\"text-4xl font-bold\">$99</span><span class=\"text-gray-400\">/mo</span></div>\n          <ul class=\"mt-6 space-y-3 text-sm text-gray-600 dark:text-gray-400\">\n            <li>&#10003; Unlimited users</li><li>&#10003; 1TB storage</li><li>&#10003; Custom integrations</li><li>&#10003; Dedicated support</li><li>&#10003; SSO & RBAC</li>\n          </ul>\n          <a href=\"#\" class=\"mt-8 block text-center py-2.5 border border-gray-300 dark:border-gray-600 rounded-xl font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition\">Contact Sales</a>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CTA -->\n  <section class=\"py-24 px-6\">\n    <div class=\"max-w-3xl mx-auto text-center\">\n      <h2 class=\"text-3xl font-bold\">Ready to build something amazing?</h2>\n      <p class=\"mt-4 text-gray-500\">Join 2,000+ teams already shipping faster with SaaSify.</p>\n      <a href=\"#\" class=\"inline-block mt-8 px-8 py-3 bg-brand-600 text-white font-semibold rounded-xl hover:bg-brand-700 shadow-lg shadow-brand-600/25 transition\">Start Your Free Trial</a>\n    </div>\n  </section>\n\n  <!-- Footer -->\n  <footer class=\"py-12 px-6 border-t border-gray-200 dark:border-gray-800\">\n    <div class=\"max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-8 text-sm text-gray-500\">\n      <div><span class=\"font-bold text-gray-900 dark:text-white\">SaaSify</span> &copy; 2026</div>\n      <div class=\"flex gap-6\"><a href=\"#\" class=\"hover:text-gray-900 dark:hover:text-white\">Privacy</a><a href=\"#\" class=\"hover:text-gray-900 dark:hover:text-white\">Terms</a><a href=\"#\" class=\"hover:text-gray-900 dark:hover:text-white\">Twitter</a><a href=\"#\" class=\"hover:text-gray-900 dark:hover:text-white\">GitHub</a></div>\n    </div>\n  </footer>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Brand color**: Replace all `brand-` / `indigo-` classes with your color (`emerald`, `rose`, `amber`, etc.)\n- **Dark mode**: Toggle by adding/removing `dark` class on `<html>` element\n- **Add sections**: Copy any section block and modify content\n- **Logo**: Replace the text \"SaaSify\" with an `<img>` or SVG\n- **Forms**: Add email capture by inserting an `<input>` + `<button>` in the hero section\n- **Analytics**: Add `<script>` tag for Plausible/PostHog before `</head>`\n\n## 2026 Trend Notes\n- Glassmorphism navbar with `backdrop-blur` for modern transparent feel\n- `scroll-smooth` for native smooth scrolling without JS\n- Shadow with brand color (`shadow-brand-600/25`) for depth\n- Edge-to-edge sections with contained content (`max-w-7xl mx-auto`)\n- CDN Tailwind for prototyping; swap to `@tailwindcss/cli` for production\n"
    },
    {
      "filename": "security-audit.md",
      "title": "Security Audit Checklist",
      "description": "Security audit checklist based on OWASP Top 10: auth, input validation, secrets, and infrastructure",
      "category": "refactoring",
      "tags": [
        "security",
        "owasp",
        "authentication",
        "encryption",
        "audit"
      ],
      "difficulty": "advanced",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/security-audit.md",
      "content": "# Security Audit Checklist\n> Security audit checklist based on OWASP Top 10: auth, input validation, secrets, and infrastructure\n> OWASP Top 10 기반 보안 감사 체크리스트: 인증, 입력 검증, 시크릿, 인프라\n\n**Category**: Refactoring | **Tags**: security, owasp, authentication, encryption, audit | **Difficulty**: Advanced\n\n## Preview\n```\nSecurity Audit Score: 85/100\n[PASS] Authentication & Authorization\n[PASS] Input Validation & Injection\n[WARN] Secrets Management (1 issue)\n[PASS] Data Protection\n[PASS] Infrastructure Security\n```\n\n## Quick Start\n```bash\n# 1. Review each section against your codebase\n# 2. Mark items as PASS, WARN, or FAIL\n# 3. Prioritize CRITICAL items (immediate fix required)\n# 4. Schedule HIGH items for next sprint\n# Run automated checks where possible:\nnpm audit        # Node.js dependency vulnerabilities\npip audit        # Python dependency vulnerabilities\n```\n\n## Full Checklist\n\n### 1. Authentication & Authorization (OWASP A01, A07)\n\n```markdown\n## Authentication\n\n### Password Security\n- [ ] **[CRITICAL]** Passwords hashed with bcrypt/argon2 (NOT md5/sha256)\n- [ ] **[CRITICAL]** Minimum password length: 8 characters\n- [ ] **[HIGH]** Password complexity requirements (or NIST: length > complexity)\n- [ ] **[HIGH]** Account lockout after 5 failed attempts (with cooldown, not permanent)\n- [ ] **[MEDIUM]** Breached password check (Have I Been Pwned API)\n\n### Session Management\n- [ ] **[CRITICAL]** Session tokens are cryptographically random (min 128 bits)\n- [ ] **[CRITICAL]** Session invalidated on logout (server-side)\n- [ ] **[HIGH]** Session timeout: 30 min idle, 24 hour absolute\n- [ ] **[HIGH]** New session ID issued after login (prevent session fixation)\n- [ ] **[MEDIUM]** Concurrent session limit (or notify on new login)\n\n### JWT (if applicable)\n- [ ] **[CRITICAL]** JWT secret is strong (256+ bits random)\n- [ ] **[CRITICAL]** Algorithm specified explicitly (HS256/RS256, not \"none\")\n- [ ] **[HIGH]** Short expiry (15 min access token, 7 day refresh token)\n- [ ] **[HIGH]** Refresh token rotation (one-time use)\n- [ ] **[MEDIUM]** JWT stored in httpOnly cookie (not localStorage)\n\n### Authorization\n- [ ] **[CRITICAL]** Every API endpoint checks authorization (not just authentication)\n- [ ] **[CRITICAL]** No IDOR: users cannot access other users' resources by changing IDs\n- [ ] **[HIGH]** Role-based access control (RBAC) enforced server-side\n- [ ] **[HIGH]** Admin endpoints on separate route with extra auth checks\n- [ ] **[MEDIUM]** Principle of least privilege applied to service accounts\n```\n\n### 2. Input Validation & Injection (OWASP A03)\n\n```markdown\n## Input Validation\n\n### SQL Injection\n- [ ] **[CRITICAL]** All DB queries use parameterized queries / ORM (no string concatenation)\n- [ ] **[CRITICAL]** No raw SQL with user input\n- [ ] **[HIGH]** Database user has minimal permissions (no DROP, no GRANT)\n\n### XSS (Cross-Site Scripting)\n- [ ] **[CRITICAL]** All user input escaped/encoded in HTML output\n- [ ] **[CRITICAL]** Content-Security-Policy header set (restricts inline scripts)\n- [ ] **[HIGH]** `httpOnly` flag on all cookies containing tokens\n- [ ] **[HIGH]** React/Vue/Angular auto-escaping relied upon (no `dangerouslySetInnerHTML`)\n\n### Command Injection\n- [ ] **[CRITICAL]** No shell commands constructed from user input\n- [ ] **[CRITICAL]** No `eval()`, `exec()`, or `Function()` with user input\n- [ ] **[HIGH]** Subprocess calls use array form (not shell string)\n\n### File Upload\n- [ ] **[HIGH]** File type validated server-side (not just extension)\n- [ ] **[HIGH]** File size limited (max 10MB or appropriate)\n- [ ] **[HIGH]** Uploaded files stored outside web root (or in S3)\n- [ ] **[MEDIUM]** Filename sanitized (no path traversal: `../../etc/passwd`)\n- [ ] **[MEDIUM]** Antivirus scan on uploads (ClamAV or cloud service)\n\n### General Validation\n- [ ] **[HIGH]** Schema validation on all API inputs (Zod, Pydantic, Joi)\n- [ ] **[HIGH]** Request size limits set (body, headers, URL length)\n- [ ] **[MEDIUM]** Allow-list validation preferred over deny-list\n- [ ] **[MEDIUM]** Unicode normalization applied before validation\n```\n\n### 3. Secrets Management (OWASP A02)\n\n```markdown\n## Secrets\n\n### Storage\n- [ ] **[CRITICAL]** No secrets in source code (API keys, passwords, tokens)\n- [ ] **[CRITICAL]** No secrets in git history (run `git log -p | grep -i \"password\\|secret\\|key\"`)\n- [ ] **[CRITICAL]** `.env` file in `.gitignore`\n- [ ] **[HIGH]** Secrets in environment variables or vault (not config files)\n- [ ] **[HIGH]** Production secrets different from development\n\n### Rotation\n- [ ] **[HIGH]** API keys rotatable without downtime\n- [ ] **[MEDIUM]** Secret rotation schedule documented (quarterly recommended)\n- [ ] **[MEDIUM]** Automated secret scanning in CI (GitHub Secret Scanning, Gitleaks)\n\n### Logging\n- [ ] **[CRITICAL]** Secrets never logged (mask patterns: sk-*, API keys, tokens)\n- [ ] **[HIGH]** PII (email, phone, SSN) masked in logs\n- [ ] **[MEDIUM]** Log access restricted to authorized personnel\n```\n\n### 4. Data Protection (OWASP A02, A04)\n\n```markdown\n## Data Protection\n\n### Encryption\n- [ ] **[CRITICAL]** HTTPS everywhere (no HTTP in production)\n- [ ] **[CRITICAL]** TLS 1.2+ only (TLS 1.0/1.1 disabled)\n- [ ] **[HIGH]** Sensitive data encrypted at rest (database-level or application-level)\n- [ ] **[HIGH]** Strong cipher suites (ECDHE, AES-256-GCM)\n- [ ] **[MEDIUM]** HSTS header set (Strict-Transport-Security)\n\n### Data Handling\n- [ ] **[HIGH]** PII minimization: collect only what's needed\n- [ ] **[HIGH]** Data retention policy: auto-delete old data\n- [ ] **[MEDIUM]** Backups encrypted and access-controlled\n- [ ] **[MEDIUM]** Data export/deletion capability (GDPR right to erasure)\n\n### API Security\n- [ ] **[HIGH]** Rate limiting on all endpoints (per IP and per user)\n- [ ] **[HIGH]** CORS configured with specific origins (not `*` in production)\n- [ ] **[HIGH]** API responses don't leak internal info (stack traces, DB schemas)\n- [ ] **[MEDIUM]** Request/response size limits set\n- [ ] **[MEDIUM]** API versioning to prevent breaking changes\n```\n\n### 5. Infrastructure & Dependencies (OWASP A05, A06, A08)\n\n```markdown\n## Infrastructure\n\n### Dependencies\n- [ ] **[HIGH]** `npm audit` / `pip audit` shows 0 critical vulnerabilities\n- [ ] **[HIGH]** Dependency updates automated (Dependabot, Renovate)\n- [ ] **[MEDIUM]** Lock file committed (package-lock.json, requirements.txt with pinned versions)\n- [ ] **[MEDIUM]** Minimal dependencies (no unused packages)\n\n### Server/Container\n- [ ] **[HIGH]** Non-root user in Docker containers\n- [ ] **[HIGH]** Base images regularly updated (Alpine/Distroless preferred)\n- [ ] **[HIGH]** No unnecessary ports exposed\n- [ ] **[MEDIUM]** Security headers set (X-Frame-Options, X-Content-Type-Options)\n- [ ] **[MEDIUM]** Container resource limits (CPU, memory) prevent DoS\n\n### Security Headers Checklist\n| Header | Value | Purpose |\n|--------|-------|---------|\n| `Strict-Transport-Security` | `max-age=31536000; includeSubDomains` | Force HTTPS |\n| `X-Content-Type-Options` | `nosniff` | Prevent MIME sniffing |\n| `X-Frame-Options` | `DENY` or `SAMEORIGIN` | Prevent clickjacking |\n| `Content-Security-Policy` | `default-src 'self'` | Prevent XSS |\n| `Referrer-Policy` | `strict-origin-when-cross-origin` | Control referrer info |\n| `Permissions-Policy` | `camera=(), microphone=()` | Restrict browser features |\n```\n\n## Automated Security Tools\n\n| Tool | Type | Integration |\n|------|------|-------------|\n| **Gitleaks** | Secret scanning | CI pre-commit hook |\n| **Snyk** | Dependency vulnerabilities | GitHub integration |\n| **OWASP ZAP** | Dynamic application security testing | CI or manual |\n| **Semgrep** | Static analysis (SAST) | CI action |\n| **Trivy** | Container image scanning | CI action |\n| **npm audit / pip audit** | Package vulnerabilities | CI step |\n\n## Severity & Response Time\n\n| Severity | Response Time | Example |\n|----------|--------------|---------|\n| **CRITICAL** | Fix immediately (same day) | SQL injection, hardcoded secrets, auth bypass |\n| **HIGH** | Fix within 1 week | Missing rate limiting, weak password policy |\n| **MEDIUM** | Fix within 1 month | Missing security headers, verbose error messages |\n| **LOW** | Fix in next quarter | Minor info disclosure, cosmetic security improvements |\n\n## Customization Guide\n- **Stack-specific**: Add checks for your framework (Django CSRF, Rails strong params)\n- **Compliance**: Add GDPR/HIPAA/SOC2-specific items if applicable\n- **Automated**: Move items to CI wherever possible (Gitleaks, npm audit, Semgrep)\n- **Regular cadence**: Run full audit quarterly; dependency checks weekly\n- **Incident response**: Add your team's incident response procedure reference\n\n## 2026 Trend Notes\n- Supply chain attacks (compromised npm/PyPI packages) are the top threat\n- Passkeys (WebAuthn) are replacing passwords for consumer apps\n- Zero-trust architecture assumes breach; verify every request\n- AI-powered vulnerability scanning catches more complex patterns\n- SBOM (Software Bill of Materials) required for government/enterprise contracts\n"
    },
    {
      "filename": "startup-landing.md",
      "title": "Startup Pitch Landing Page",
      "description": "Startup pitch page with problem/solution framework, team section, and investor highlights",
      "category": "landing-pages",
      "tags": [
        "startup",
        "pitch",
        "investors",
        "team",
        "tailwind"
      ],
      "difficulty": "beginner",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/startup-landing.md",
      "content": "# Startup Pitch Landing Page\n> Startup pitch page with problem/solution framework, team section, and investor highlights\n> 문제/해결 프레임워크, 팀 소개, 투자자 하이라이트가 포함된 스타트업 피치 랜딩 페이지\n\n**Category**: Landing Pages | **Tags**: startup, pitch, investors, team, tailwind | **Difficulty**: Beginner\n\n## Preview\n```\n+--------------------------------------------------+\n|  StartupName                  [Request Demo]       |\n+--------------------------------------------------+\n|                                                    |\n|    We're solving [PROBLEM]                         |\n|    for [TARGET MARKET]                             |\n|                                                    |\n|    PROBLEM            SOLUTION                     |\n|    [pain point 1]     [feature 1]                  |\n|    [pain point 2]     [feature 2]                  |\n|                                                    |\n|    $2.4B TAM   |  10x Growth  |  500+ Users       |\n|                                                    |\n|    Team: CEO  CTO  Head of Product                 |\n|                                                    |\n|    Backed by: Y Combinator, a16z, Sequoia          |\n+--------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Paste HTML into index.html\n# 2. Replace company name, problem/solution statements, metrics, team\n# 3. Send the link to investors alongside your pitch deck\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\" class=\"scroll-smooth\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>NexaAI - AI-Powered Enterprise Automation</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-white text-gray-900\">\n\n  <!-- Nav -->\n  <nav class=\"fixed w-full top-0 z-50 bg-white/90 backdrop-blur border-b border-gray-100\">\n    <div class=\"max-w-6xl mx-auto px-6 h-16 flex items-center justify-between\">\n      <span class=\"text-xl font-bold\">Nexa<span class=\"text-blue-600\">AI</span></span>\n      <div class=\"flex items-center gap-6 text-sm\">\n        <a href=\"#problem\" class=\"hidden md:inline text-gray-500 hover:text-gray-900\">Problem</a>\n        <a href=\"#solution\" class=\"hidden md:inline text-gray-500 hover:text-gray-900\">Solution</a>\n        <a href=\"#team\" class=\"hidden md:inline text-gray-500 hover:text-gray-900\">Team</a>\n        <a href=\"#cta\" class=\"px-5 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition\">Request Demo</a>\n      </div>\n    </div>\n  </nav>\n\n  <!-- Hero -->\n  <section class=\"pt-32 pb-20 px-6\">\n    <div class=\"max-w-3xl mx-auto text-center\">\n      <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-blue-50 text-blue-700 text-xs font-medium rounded-full mb-6\">\n        <span class=\"w-2 h-2 bg-blue-500 rounded-full animate-pulse\"></span> Y Combinator W26 Batch\n      </div>\n      <h1 class=\"text-4xl md:text-6xl font-extrabold tracking-tight leading-tight\">Enterprise teams waste<br><span class=\"text-blue-600\">40% of time</span> on repetitive tasks</h1>\n      <p class=\"mt-6 text-lg text-gray-500\">NexaAI automates complex workflows with AI agents that learn from your team's patterns. Save 15+ hours per employee per week.</p>\n      <div class=\"mt-8 flex flex-col sm:flex-row gap-3 justify-center\">\n        <a href=\"#cta\" class=\"px-8 py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition\">Request Demo</a>\n        <a href=\"#\" class=\"px-8 py-3 border border-gray-200 rounded-xl font-semibold hover:bg-gray-50 transition\">Read Our Deck</a>\n      </div>\n    </div>\n  </section>\n\n  <!-- Problem / Solution -->\n  <section id=\"problem\" class=\"py-20 px-6 bg-gray-50\">\n    <div class=\"max-w-5xl mx-auto grid md:grid-cols-2 gap-12\">\n      <div>\n        <span class=\"text-xs font-bold text-red-500 uppercase tracking-wider\">The Problem</span>\n        <h2 class=\"text-3xl font-bold mt-3\">Manual Processes Are Killing Productivity</h2>\n        <ul class=\"mt-6 space-y-4\">\n          <li class=\"flex gap-3\"><span class=\"text-red-400 text-lg mt-0.5\">&#10007;</span><div><p class=\"font-medium\">Data entry consumes 12 hours/week per employee</p><p class=\"text-sm text-gray-500 mt-1\">Teams manually copy data between 5+ tools daily</p></div></li>\n          <li class=\"flex gap-3\"><span class=\"text-red-400 text-lg mt-0.5\">&#10007;</span><div><p class=\"font-medium\">$50K+/year wasted on failed automation attempts</p><p class=\"text-sm text-gray-500 mt-1\">Traditional RPA breaks when workflows change</p></div></li>\n          <li class=\"flex gap-3\"><span class=\"text-red-400 text-lg mt-0.5\">&#10007;</span><div><p class=\"font-medium\">Top talent quits due to tedious work</p><p class=\"text-sm text-gray-500 mt-1\">35% of knowledge workers cite \"boring tasks\" as reason for leaving</p></div></li>\n        </ul>\n      </div>\n      <div id=\"solution\">\n        <span class=\"text-xs font-bold text-green-600 uppercase tracking-wider\">Our Solution</span>\n        <h2 class=\"text-3xl font-bold mt-3\">AI Agents That Adapt and Learn</h2>\n        <ul class=\"mt-6 space-y-4\">\n          <li class=\"flex gap-3\"><span class=\"text-green-500 text-lg mt-0.5\">&#10003;</span><div><p class=\"font-medium\">Watch and learn from employee actions</p><p class=\"text-sm text-gray-500 mt-1\">Our agents observe workflows and suggest automations</p></div></li>\n          <li class=\"flex gap-3\"><span class=\"text-green-500 text-lg mt-0.5\">&#10003;</span><div><p class=\"font-medium\">Self-healing when tools or processes change</p><p class=\"text-sm text-gray-500 mt-1\">AI detects UI changes and adapts automatically</p></div></li>\n          <li class=\"flex gap-3\"><span class=\"text-green-500 text-lg mt-0.5\">&#10003;</span><div><p class=\"font-medium\">ROI visible within 2 weeks</p><p class=\"text-sm text-gray-500 mt-1\">Average customer saves 15 hours/employee/week by week 3</p></div></li>\n        </ul>\n      </div>\n    </div>\n  </section>\n\n  <!-- Traction / Metrics -->\n  <section class=\"py-20 px-6\">\n    <div class=\"max-w-4xl mx-auto\">\n      <h2 class=\"text-2xl font-bold text-center mb-12\">Traction</h2>\n      <div class=\"grid grid-cols-2 md:grid-cols-4 gap-6 text-center\">\n        <div class=\"p-6 bg-blue-50 rounded-2xl\"><div class=\"text-3xl font-black text-blue-600\">$2.4B</div><div class=\"text-sm text-gray-500 mt-1\">TAM (Enterprise Automation)</div></div>\n        <div class=\"p-6 bg-green-50 rounded-2xl\"><div class=\"text-3xl font-black text-green-600\">10x</div><div class=\"text-sm text-gray-500 mt-1\">YoY Revenue Growth</div></div>\n        <div class=\"p-6 bg-purple-50 rounded-2xl\"><div class=\"text-3xl font-black text-purple-600\">500+</div><div class=\"text-sm text-gray-500 mt-1\">Active Users</div></div>\n        <div class=\"p-6 bg-orange-50 rounded-2xl\"><div class=\"text-3xl font-black text-orange-600\">$1.2M</div><div class=\"text-sm text-gray-500 mt-1\">ARR</div></div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Team -->\n  <section id=\"team\" class=\"py-20 px-6 bg-gray-50\">\n    <div class=\"max-w-4xl mx-auto\">\n      <h2 class=\"text-2xl font-bold text-center mb-12\">Built by World-Class Team</h2>\n      <div class=\"grid md:grid-cols-3 gap-8\">\n        <div class=\"text-center\">\n          <div class=\"w-24 h-24 mx-auto bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-3xl font-bold text-white\">SK</div>\n          <h3 class=\"mt-4 font-bold\">Sarah Kim</h3>\n          <p class=\"text-sm text-gray-500\">CEO &middot; Ex-Google PM</p>\n          <p class=\"text-xs text-gray-400 mt-2\">Led Google Workspace automation. Stanford CS.</p>\n        </div>\n        <div class=\"text-center\">\n          <div class=\"w-24 h-24 mx-auto bg-gradient-to-br from-emerald-500 to-teal-600 rounded-full flex items-center justify-center text-3xl font-bold text-white\">JL</div>\n          <h3 class=\"mt-4 font-bold\">James Lee</h3>\n          <p class=\"text-sm text-gray-500\">CTO &middot; Ex-OpenAI</p>\n          <p class=\"text-xs text-gray-400 mt-2\">Core contributor to GPT-4 fine-tuning. MIT PhD.</p>\n        </div>\n        <div class=\"text-center\">\n          <div class=\"w-24 h-24 mx-auto bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center text-3xl font-bold text-white\">MP</div>\n          <h3 class=\"mt-4 font-bold\">Maya Patel</h3>\n          <p class=\"text-sm text-gray-500\">Head of Product &middot; Ex-Notion</p>\n          <p class=\"text-xs text-gray-400 mt-2\">Built Notion AI from 0 to 1M users. Berkeley MBA.</p>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Investors -->\n  <section class=\"py-16 px-6\">\n    <div class=\"max-w-4xl mx-auto text-center\">\n      <p class=\"text-xs uppercase tracking-widest text-gray-400 mb-6\">Backed by</p>\n      <div class=\"flex flex-wrap justify-center gap-10 text-xl font-bold text-gray-300\">\n        <span>Y Combinator</span><span>a16z</span><span>Sequoia</span><span>Founders Fund</span>\n      </div>\n    </div>\n  </section>\n\n  <!-- CTA -->\n  <section id=\"cta\" class=\"py-20 px-6 bg-blue-600 text-white\">\n    <div class=\"max-w-2xl mx-auto text-center\">\n      <h2 class=\"text-3xl font-bold\">Ready to Eliminate Busywork?</h2>\n      <p class=\"mt-4 text-blue-100\">Schedule a 15-minute demo and see NexaAI in action on your workflows.</p>\n      <form class=\"mt-8 flex flex-col sm:flex-row gap-3 max-w-md mx-auto\">\n        <input type=\"email\" placeholder=\"work@company.com\" class=\"flex-1 px-4 py-3 rounded-xl text-gray-900 text-sm focus:outline-none focus:ring-2 focus:ring-blue-300\">\n        <button class=\"px-6 py-3 bg-white text-blue-700 font-bold rounded-xl hover:bg-blue-50 transition\">Book Demo</button>\n      </form>\n    </div>\n  </section>\n\n  <footer class=\"py-8 px-6 text-center text-sm text-gray-400\">\n    &copy; 2026 NexaAI Inc. &middot; <a href=\"#\" class=\"hover:text-gray-900\">Privacy</a> &middot; <a href=\"#\" class=\"hover:text-gray-900\">Terms</a>\n  </footer>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Problem/Solution**: Replace bullet points with your specific pain points and value propositions\n- **Metrics**: Update the 4 traction stats with your real numbers\n- **Team**: Replace names, titles, and backgrounds; add real headshot images\n- **Investors**: Replace investor names with actual backers or remove section if pre-funding\n- **Industry**: Change from \"Enterprise Automation\" to your vertical\n- **CTA form**: Connect to your CRM (HubSpot, Pipedrive) or calendar booking (Calendly)\n\n## 2026 Trend Notes\n- Problem/Solution side-by-side layout is the standard pitch page pattern for investors\n- Animated pulse dot on badge creates urgency (YC batch indicator)\n- Colored stat cards with large numbers follow the \"metrics wall\" pattern popular in pitch decks\n- Clean white design conveys trust and professionalism for B2B/enterprise\n- Email capture in colored CTA section drives conversions\n"
    },
    {
      "filename": "table-components.md",
      "title": "Table Components",
      "description": "Table patterns: sortable, filterable, paginated, responsive, and expandable row tables",
      "category": "components",
      "tags": [
        "table",
        "data",
        "sortable",
        "pagination",
        "responsive",
        "tailwind"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/table-components.md",
      "content": "# Table Components\n> Table patterns: sortable, filterable, paginated, responsive, and expandable row tables\n> 테이블 패턴: 정렬, 필터링, 페이지네이션, 반응형, 확장 가능한 행 테이블\n\n**Category**: Components | **Tags**: table, data, sortable, pagination, responsive, tailwind | **Difficulty**: Intermediate\n\n## Preview\n```\n+--- Sortable Table --------------------------------+\n| Name ^   | Email       | Role   | Status | Action |\n|----------|-------------|--------|--------|--------|\n| Alice    | a@corp.com  | Admin  | Active |  ...   |\n| Bob      | b@corp.com  | User   | Paused |  ...   |\n+---------------------------------------------------+\n| Showing 1-10 of 248    [< 1 2 3 ... 25 >]        |\n+---------------------------------------------------+\n```\n\n## Quick Start\n```bash\n# 1. Copy the table variant you need\n# 2. Sort and filter use vanilla JS (no dependencies)\n# 3. Replace static rows with data from your API using JS template literals\n```\n\n## Full Code\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Table Components</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n</head>\n<body class=\"bg-gray-100 dark:bg-gray-900 p-8 min-h-screen\">\n  <div class=\"max-w-6xl mx-auto space-y-12\">\n\n    <h1 class=\"text-2xl font-bold text-gray-900 dark:text-white\">Table Components</h1>\n\n    <!-- Full-Featured Table with Sort, Filter, Pagination -->\n    <div class=\"bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm\">\n      <!-- Toolbar -->\n      <div class=\"p-4 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between\">\n        <div class=\"flex items-center gap-3\">\n          <h2 class=\"font-semibold text-gray-900 dark:text-white\">Users</h2>\n          <span class=\"text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-full text-gray-500\">248 total</span>\n        </div>\n        <div class=\"flex gap-2\">\n          <input id=\"tableSearch\" type=\"text\" placeholder=\"Search...\" oninput=\"filterTable()\" class=\"px-3 py-1.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 w-48\">\n          <select class=\"px-3 py-1.5 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg text-sm\">\n            <option>All Roles</option><option>Admin</option><option>Editor</option><option>Viewer</option>\n          </select>\n          <button class=\"px-3 py-1.5 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700 transition\">Export</button>\n        </div>\n      </div>\n\n      <!-- Table -->\n      <div class=\"overflow-x-auto\">\n        <table id=\"dataTable\" class=\"w-full text-sm\">\n          <thead class=\"bg-gray-50 dark:bg-gray-700/50\">\n            <tr>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500\"><input type=\"checkbox\" class=\"rounded\"></th>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500 cursor-pointer hover:text-gray-900 dark:hover:text-white select-none\" onclick=\"sortTable(1)\">Name <span class=\"text-xs\">&#8645;</span></th>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500 cursor-pointer hover:text-gray-900 dark:hover:text-white select-none\" onclick=\"sortTable(2)\">Email <span class=\"text-xs\">&#8645;</span></th>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Role</th>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500 cursor-pointer hover:text-gray-900 dark:hover:text-white select-none\" onclick=\"sortTable(4)\">Status <span class=\"text-xs\">&#8645;</span></th>\n              <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Joined</th>\n              <th class=\"text-right px-4 py-3 font-medium text-gray-500\">Actions</th>\n            </tr>\n          </thead>\n          <tbody class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n            <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30 transition\">\n              <td class=\"px-4 py-3\"><input type=\"checkbox\" class=\"rounded\"></td>\n              <td class=\"px-4 py-3 font-medium text-gray-900 dark:text-white flex items-center gap-3\"><div class=\"w-8 h-8 bg-indigo-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0\">AK</div>Alice Kim</td>\n              <td class=\"px-4 py-3 text-gray-500\">alice@company.com</td>\n              <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded-full font-medium\">Admin</span></td>\n              <td class=\"px-4 py-3\"><span class=\"flex items-center gap-1.5\"><span class=\"w-2 h-2 bg-green-500 rounded-full\"></span><span class=\"text-green-600 text-xs font-medium\">Active</span></span></td>\n              <td class=\"px-4 py-3 text-gray-400 text-xs\">Mar 15, 2026</td>\n              <td class=\"px-4 py-3 text-right\"><button class=\"text-gray-400 hover:text-gray-600 text-sm\">Edit</button> <button class=\"text-red-400 hover:text-red-600 text-sm ml-2\">Delete</button></td>\n            </tr>\n            <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30 transition\">\n              <td class=\"px-4 py-3\"><input type=\"checkbox\" class=\"rounded\"></td>\n              <td class=\"px-4 py-3 font-medium text-gray-900 dark:text-white flex items-center gap-3\"><div class=\"w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0\">BW</div>Bob Wilson</td>\n              <td class=\"px-4 py-3 text-gray-500\">bob@company.com</td>\n              <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full font-medium\">Editor</span></td>\n              <td class=\"px-4 py-3\"><span class=\"flex items-center gap-1.5\"><span class=\"w-2 h-2 bg-green-500 rounded-full\"></span><span class=\"text-green-600 text-xs font-medium\">Active</span></span></td>\n              <td class=\"px-4 py-3 text-gray-400 text-xs\">Feb 28, 2026</td>\n              <td class=\"px-4 py-3 text-right\"><button class=\"text-gray-400 hover:text-gray-600 text-sm\">Edit</button> <button class=\"text-red-400 hover:text-red-600 text-sm ml-2\">Delete</button></td>\n            </tr>\n            <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30 transition\">\n              <td class=\"px-4 py-3\"><input type=\"checkbox\" class=\"rounded\"></td>\n              <td class=\"px-4 py-3 font-medium text-gray-900 dark:text-white flex items-center gap-3\"><div class=\"w-8 h-8 bg-rose-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0\">CJ</div>Carol Jones</td>\n              <td class=\"px-4 py-3 text-gray-500\">carol@company.com</td>\n              <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-gray-100 text-gray-700 text-xs rounded-full font-medium\">Viewer</span></td>\n              <td class=\"px-4 py-3\"><span class=\"flex items-center gap-1.5\"><span class=\"w-2 h-2 bg-yellow-500 rounded-full\"></span><span class=\"text-yellow-600 text-xs font-medium\">Pending</span></span></td>\n              <td class=\"px-4 py-3 text-gray-400 text-xs\">Mar 10, 2026</td>\n              <td class=\"px-4 py-3 text-right\"><button class=\"text-gray-400 hover:text-gray-600 text-sm\">Edit</button> <button class=\"text-red-400 hover:text-red-600 text-sm ml-2\">Delete</button></td>\n            </tr>\n            <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30 transition\">\n              <td class=\"px-4 py-3\"><input type=\"checkbox\" class=\"rounded\"></td>\n              <td class=\"px-4 py-3 font-medium text-gray-900 dark:text-white flex items-center gap-3\"><div class=\"w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0\">DL</div>David Lee</td>\n              <td class=\"px-4 py-3 text-gray-500\">david@company.com</td>\n              <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full font-medium\">Editor</span></td>\n              <td class=\"px-4 py-3\"><span class=\"flex items-center gap-1.5\"><span class=\"w-2 h-2 bg-red-500 rounded-full\"></span><span class=\"text-red-600 text-xs font-medium\">Inactive</span></span></td>\n              <td class=\"px-4 py-3 text-gray-400 text-xs\">Jan 05, 2026</td>\n              <td class=\"px-4 py-3 text-right\"><button class=\"text-gray-400 hover:text-gray-600 text-sm\">Edit</button> <button class=\"text-red-400 hover:text-red-600 text-sm ml-2\">Delete</button></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <!-- Pagination -->\n      <div class=\"p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-gray-500\">\n        <span>Showing <b class=\"text-gray-900 dark:text-white\">1-10</b> of <b class=\"text-gray-900 dark:text-white\">248</b> results</span>\n        <div class=\"flex items-center gap-1\">\n          <button class=\"px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition disabled:opacity-40\" disabled>&laquo;</button>\n          <button class=\"px-3 py-1.5 bg-indigo-600 text-white rounded-lg font-medium\">1</button>\n          <button class=\"px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition\">2</button>\n          <button class=\"px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition\">3</button>\n          <span class=\"px-2\">...</span>\n          <button class=\"px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition\">25</button>\n          <button class=\"px-3 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition\">&raquo;</button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Expandable Row Table -->\n    <div>\n      <h2 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">Expandable Rows</h2>\n      <div class=\"bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden\">\n        <table class=\"w-full text-sm\">\n          <thead class=\"bg-gray-50 dark:bg-gray-700/50\"><tr>\n            <th class=\"w-10 px-4 py-3\"></th>\n            <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Order</th>\n            <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Customer</th>\n            <th class=\"text-right px-4 py-3 font-medium text-gray-500\">Total</th>\n            <th class=\"text-left px-4 py-3 font-medium text-gray-500\">Status</th>\n          </tr></thead>\n          <tbody class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n            <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer\" onclick=\"this.nextElementSibling.classList.toggle('hidden')\">\n              <td class=\"px-4 py-3 text-gray-400\">&#9654;</td>\n              <td class=\"px-4 py-3 font-medium text-gray-900 dark:text-white\">#ORD-001</td>\n              <td class=\"px-4 py-3 text-gray-500\">Alice Kim</td>\n              <td class=\"px-4 py-3 text-right font-medium text-gray-900 dark:text-white\">$249.00</td>\n              <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full\">Shipped</span></td>\n            </tr>\n            <tr class=\"hidden bg-gray-50 dark:bg-gray-700/20\">\n              <td colspan=\"5\" class=\"px-4 py-4\">\n                <div class=\"ml-10 grid grid-cols-3 gap-4 text-xs\">\n                  <div><span class=\"text-gray-400 block\">Product</span><span class=\"text-gray-900 dark:text-white\">Widget Pro X2</span></div>\n                  <div><span class=\"text-gray-400 block\">Quantity</span><span class=\"text-gray-900 dark:text-white\">2</span></div>\n                  <div><span class=\"text-gray-400 block\">Tracking</span><a href=\"#\" class=\"text-indigo-600 hover:underline\">UPS-1Z999AA10</a></div>\n                </div>\n              </td>\n            </tr>\n            <tr class=\"hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer\" onclick=\"this.nextElementSibling.classList.toggle('hidden')\">\n              <td class=\"px-4 py-3 text-gray-400\">&#9654;</td>\n              <td class=\"px-4 py-3 font-medium text-gray-900 dark:text-white\">#ORD-002</td>\n              <td class=\"px-4 py-3 text-gray-500\">Bob Wilson</td>\n              <td class=\"px-4 py-3 text-right font-medium text-gray-900 dark:text-white\">$89.00</td>\n              <td class=\"px-4 py-3\"><span class=\"px-2 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded-full\">Processing</span></td>\n            </tr>\n            <tr class=\"hidden bg-gray-50 dark:bg-gray-700/20\">\n              <td colspan=\"5\" class=\"px-4 py-4\">\n                <div class=\"ml-10 grid grid-cols-3 gap-4 text-xs\">\n                  <div><span class=\"text-gray-400 block\">Product</span><span class=\"text-gray-900 dark:text-white\">Widget Mini</span></div>\n                  <div><span class=\"text-gray-400 block\">Quantity</span><span class=\"text-gray-900 dark:text-white\">1</span></div>\n                  <div><span class=\"text-gray-400 block\">ETA</span><span class=\"text-gray-900 dark:text-white\">Mar 30, 2026</span></div>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n  </div>\n\n  <script>\n    let sortDir = {};\n    function sortTable(colIdx) {\n      const table = document.getElementById('dataTable');\n      const tbody = table.querySelector('tbody');\n      const rows = Array.from(tbody.querySelectorAll('tr'));\n      sortDir[colIdx] = !sortDir[colIdx];\n      rows.sort((a, b) => {\n        const aText = a.cells[colIdx]?.textContent.trim() || '';\n        const bText = b.cells[colIdx]?.textContent.trim() || '';\n        return sortDir[colIdx] ? aText.localeCompare(bText) : bText.localeCompare(aText);\n      });\n      rows.forEach(r => tbody.appendChild(r));\n    }\n    function filterTable() {\n      const query = document.getElementById('tableSearch').value.toLowerCase();\n      const rows = document.querySelectorAll('#dataTable tbody tr');\n      rows.forEach(r => { r.style.display = r.textContent.toLowerCase().includes(query) ? '' : 'none'; });\n    }\n  </script>\n\n</body>\n</html>\n```\n\n## Customization Guide\n- **Columns**: Add or remove `<th>` and corresponding `<td>` elements\n- **Sorting**: The `sortTable()` function works on any text column; for numeric sorting add `parseFloat()`\n- **Pagination**: Wire up page buttons to slice your data array or call paginated API\n- **Bulk actions**: Use the checkboxes to collect selected row IDs for bulk operations\n- **Responsive**: On mobile, wrap table in `overflow-x-auto` for horizontal scroll\n- **Expandable rows**: The toggle `onclick` uses `nextElementSibling` - ensure detail row is immediately after\n\n## 2026 Trend Notes\n- Toolbar with search + filter + export above the table is the standard data table pattern\n- Status badges with colored dots provide instant visual feedback\n- Checkbox column enables bulk operations (delete, export, assign)\n- Expandable rows eliminate the need for separate detail pages\n- Vanilla JS sort/filter keeps the template framework-agnostic\n"
    },
    {
      "filename": "tdd-guide.md",
      "title": "TDD Workflow Guide",
      "description": "Test-Driven Development workflow: Red-Green-Refactor cycle, testing pyramid, and practical patterns",
      "category": "dev-methodology",
      "tags": [
        "tdd",
        "testing",
        "red-green-refactor",
        "pytest",
        "jest"
      ],
      "difficulty": "intermediate",
      "download_url": "https://jeromwolf.github.io/templateclaw/templates/tdd-guide.md",
      "content": "# TDD Workflow Guide\n> Test-Driven Development workflow: Red-Green-Refactor cycle, testing pyramid, and practical patterns\n> TDD 워크플로우: Red-Green-Refactor 사이클, 테스팅 피라미드, 실전 패턴\n\n**Category**: Dev Methodology | **Tags**: tdd, testing, red-green-refactor, pytest, jest | **Difficulty**: Intermediate\n\n## Preview\n```\nRED (Write failing test)\n  |\n  v\nGREEN (Write minimal code to pass)\n  |\n  v\nREFACTOR (Improve code, keep tests green)\n  |\n  v\nREPEAT\n```\n\n## Quick Start\n```bash\n# Python (pytest)\npip install pytest pytest-cov\npytest --cov=src tests/ -v\n\n# JavaScript (Jest)\nnpm install --save-dev jest\nnpx jest --coverage\n\n# Run in watch mode during development\npytest --watch  # or: npx jest --watch\n```\n\n## The TDD Cycle\n\n### Step 1: RED - Write a Failing Test First\n\n```python\n# tests/test_user_service.py\nimport pytest\nfrom src.user_service import UserService\n\nclass TestUserService:\n    def setup_method(self):\n        self.service = UserService()\n\n    def test_create_user_returns_user_with_id(self):\n        user = self.service.create(\"alice@test.com\", \"Alice\")\n        assert user.id is not None\n        assert user.email == \"alice@test.com\"\n        assert user.name == \"Alice\"\n\n    def test_create_user_rejects_duplicate_email(self):\n        self.service.create(\"alice@test.com\", \"Alice\")\n        with pytest.raises(ValueError, match=\"Email already exists\"):\n            self.service.create(\"alice@test.com\", \"Bob\")\n\n    def test_create_user_rejects_invalid_email(self):\n        with pytest.raises(ValueError, match=\"Invalid email\"):\n            self.service.create(\"not-an-email\", \"Alice\")\n```\n\n### Step 2: GREEN - Write Minimal Code to Pass\n\n```python\n# src/user_service.py\nimport re\nimport uuid\nfrom dataclasses import dataclass\n\n@dataclass\nclass User:\n    id: str\n    email: str\n    name: str\n\nclass UserService:\n    def __init__(self):\n        self._users: dict[str, User] = {}\n\n    def create(self, email: str, name: str) -> User:\n        if not re.match(r\"^[^@]+@[^@]+\\.[^@]+$\", email):\n            raise ValueError(\"Invalid email\")\n        if email in self._users:\n            raise ValueError(\"Email already exists\")\n        user = User(id=str(uuid.uuid4()), email=email, name=name)\n        self._users[email] = user\n        return user\n```\n\n### Step 3: REFACTOR - Improve While Tests Stay Green\n\n```python\n# Refactored: Extract validation, add type hints\nclass UserService:\n    EMAIL_PATTERN = re.compile(r\"^[^@]+@[^@]+\\.[^@]+$\")\n\n    def __init__(self):\n        self._users: dict[str, User] = {}\n\n    def create(self, email: str, name: str) -> User:\n        self._validate_email(email)\n        self._check_unique(email)\n        user = User(id=str(uuid.uuid4()), email=email, name=name)\n        self._users[email] = user\n        return user\n\n    def _validate_email(self, email: str) -> None:\n        if not self.EMAIL_PATTERN.match(email):\n            raise ValueError(\"Invalid email\")\n\n    def _check_unique(self, email: str) -> None:\n        if email in self._users:\n            raise ValueError(\"Email already exists\")\n```\n\n## Testing Pyramid\n\n```\n        /  E2E  \\           Few, slow, expensive\n       / -------  \\         (Playwright, Selenium)\n      / Integration \\       Moderate count\n     / ------------- \\      (API tests, DB tests)\n    /    Unit Tests    \\    Many, fast, cheap\n   /____________________\\   (pytest, Jest)\n```\n\n| Layer | Count | Speed | What to Test |\n|-------|-------|-------|-------------|\n| **Unit** | 70-80% | <1ms each | Business logic, pure functions, edge cases |\n| **Integration** | 15-20% | <1s each | API endpoints, database queries, external services |\n| **E2E** | 5-10% | <30s each | Critical user flows, happy paths only |\n\n## Practical Test Patterns\n\n### Pattern 1: Arrange-Act-Assert (AAA)\n\n```python\ndef test_discount_applies_to_order():\n    # Arrange\n    order = Order(items=[Item(\"Widget\", price=100)])\n    discount = Discount(percentage=20)\n\n    # Act\n    order.apply_discount(discount)\n\n    # Assert\n    assert order.total == 80\n    assert order.discount_applied is True\n```\n\n### Pattern 2: Test Fixtures and Factories\n\n```python\nimport pytest\n\n@pytest.fixture\ndef sample_user():\n    return User(id=\"usr_123\", email=\"test@example.com\", name=\"Test User\")\n\n@pytest.fixture\ndef user_service(sample_user):\n    service = UserService()\n    service._users[sample_user.email] = sample_user\n    return service\n\ndef test_find_user_by_email(user_service, sample_user):\n    found = user_service.find_by_email(\"test@example.com\")\n    assert found == sample_user\n```\n\n### Pattern 3: Parameterized Tests\n\n```python\n@pytest.mark.parametrize(\"email,valid\", [\n    (\"user@example.com\", True),\n    (\"user@sub.example.com\", True),\n    (\"user+tag@example.com\", True),\n    (\"@example.com\", False),\n    (\"user@\", False),\n    (\"plaintext\", False),\n    (\"\", False),\n])\ndef test_email_validation(email, valid):\n    if valid:\n        assert validate_email(email) is True\n    else:\n        with pytest.raises(ValueError):\n            validate_email(email)\n```\n\n### Pattern 4: Mocking External Services\n\n```python\nfrom unittest.mock import patch, MagicMock\n\ndef test_send_welcome_email(sample_user):\n    with patch(\"src.email_service.send\") as mock_send:\n        mock_send.return_value = {\"status\": \"sent\"}\n\n        result = onboard_user(sample_user)\n\n        mock_send.assert_called_once_with(\n            to=sample_user.email,\n            template=\"welcome\",\n        )\n        assert result.onboarded is True\n```\n\n## TDD Rules of Thumb\n\n| Rule | Description |\n|------|-------------|\n| **One assertion per test** | Test one behavior, not one method |\n| **Test behavior, not implementation** | Don't test private methods directly |\n| **Name tests descriptively** | `test_expired_coupon_raises_error` not `test_coupon_3` |\n| **Keep tests independent** | No shared mutable state between tests |\n| **Fast feedback loop** | Unit test suite should run in <10 seconds |\n| **Test edge cases** | Empty input, null, boundaries, overflow |\n| **Don't test framework code** | Trust that Django ORM or React useState works |\n\n## Customization Guide\n- **Language**: Adapt patterns to your stack (Jest for JS, Go testing, Rust #[test])\n- **CI integration**: Add `pytest --cov --cov-fail-under=80` to your CI pipeline\n- **Coverage target**: Start with 80% line coverage, increase gradually\n- **Mutation testing**: Add `mutmut` (Python) or `Stryker` (JS) for deeper quality checks\n\n## 2026 Trend Notes\n- Property-based testing (Hypothesis/fast-check) catches edge cases humans miss\n- Snapshot testing for API responses and UI components reduces boilerplate\n- AI-assisted test generation helps with initial test scaffolding\n- Coverage targets are shifting from lines to branches and mutations\n- Test containers (testcontainers-python) enable realistic integration tests locally\n"
    }
  ]
}