@knowcode/doc-builder 1.9.30 → 1.9.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/package.json +12 -2
  2. package/.claude/settings.local.json +0 -56
  3. package/CACHE-BUSTING-GUIDE.md +0 -82
  4. package/CLAUDE.md +0 -86
  5. package/CONTRIBUTING.md +0 -148
  6. package/GITHUB_SETUP.md +0 -203
  7. package/RELEASE-NOTES-1.7.5.md +0 -64
  8. package/Screenshot 2025-07-22 at 19.51.21.png +0 -0
  9. package/Screenshot 2025-07-26 at 17.06.49.png +0 -0
  10. package/add-user-clive.sql +0 -35
  11. package/add-user-lindsay-fixed.sql +0 -85
  12. package/add-user-lindsay.sql +0 -68
  13. package/add-user-pmorgan.sql +0 -35
  14. package/add-user-robbie.sql +0 -35
  15. package/add-wru-users.sql +0 -105
  16. package/debug-login.sql +0 -30
  17. package/doc-builder.config.js +0 -126
  18. package/doc-builder.config.js.backup.1753793768283 +0 -47
  19. package/doc-builder.config.js.backup.1753803964423 +0 -114
  20. package/doc-builder.config.js.backup.1753945707032 +0 -115
  21. package/doc-builder.config.js.backup.1754059241330 +0 -115
  22. package/doc-builder.config.js.backup.1754119567787 +0 -123
  23. package/doc-builder.config.js.backup.1754120048862 +0 -124
  24. package/doc-builder.config.js.backup.1754120529913 +0 -124
  25. package/doc-builder.config.js.backup.1754218469785 +0 -124
  26. package/doc-builder.config.js.backup.1754384764054 +0 -124
  27. package/doc-builder.config.js.backup.1754567425847 +0 -124
  28. package/doc-builder.config.js.backup.1754568137859 +0 -126
  29. package/doc-builder.config.js.backup.1754569388252 +0 -126
  30. package/doc-builder.config.js.backup.1754576694123 +0 -126
  31. package/doc-builder.config.js.backup.1755031374829 +0 -126
  32. package/doc-builder.config.js.backup.1755034500990 +0 -126
  33. package/doc-builder.config.js.backup.1755034809236 +0 -126
  34. package/grant-access.sql +0 -15
  35. package/html/11.png +0 -0
  36. package/html/404.html +0 -115
  37. package/html/README.html +0 -522
  38. package/html/Screenshot 2025-08-12 at 21.35.07.png +0 -0
  39. package/html/about-doc-builder.html +0 -491
  40. package/html/auth.js +0 -157
  41. package/html/claude-workflow-guide.html +0 -525
  42. package/html/css/notion-style.css +0 -2502
  43. package/html/documentation-index.html +0 -471
  44. package/html/guides/authentication-default-change.html +0 -370
  45. package/html/guides/authentication-guide.html +0 -509
  46. package/html/guides/cache-control-anti-pattern.html +0 -361
  47. package/html/guides/claude-workflow-guide.html +0 -1074
  48. package/html/guides/configuration-guide.html +0 -472
  49. package/html/guides/document-standards.html +0 -518
  50. package/html/guides/documentation-standards.html +0 -694
  51. package/html/guides/html-embedding-guide.html +0 -461
  52. package/html/guides/image-modal-guide.html +0 -515
  53. package/html/guides/next-steps-walkthrough.html +0 -638
  54. package/html/guides/phosphor-icons-guide.html +0 -584
  55. package/html/guides/private-directory-authentication-troubleshooting.html +0 -555
  56. package/html/guides/private-directory-authentication.html +0 -541
  57. package/html/guides/public-site-deployment.html +0 -431
  58. package/html/guides/search-engine-verification-guide.html +0 -542
  59. package/html/guides/seo-guide.html +0 -661
  60. package/html/guides/seo-optimization-guide.html +0 -887
  61. package/html/guides/supabase-auth-implementation-plan.html +0 -543
  62. package/html/guides/supabase-auth-integration-plan.html +0 -671
  63. package/html/guides/supabase-auth-setup-guide.html +0 -498
  64. package/html/guides/supabase-authentication-complete-guide.html +0 -866
  65. package/html/guides/troubleshooting-guide.html +0 -633
  66. package/html/guides/vercel-deployment-auth-setup.html +0 -337
  67. package/html/guides/windows-setup-guide.html +0 -859
  68. package/html/image-modal-test.html +0 -318
  69. package/html/index.html +0 -522
  70. package/html/js/auth.js +0 -157
  71. package/html/js/main.js +0 -1754
  72. package/html/launch/README.html +0 -297
  73. package/html/launch/bubble-plugin-specification.html +0 -933
  74. package/html/launch/go-to-market-strategy.html +0 -663
  75. package/html/launch/launch-announcements.html +0 -593
  76. package/html/login.html +0 -102
  77. package/html/logout.html +0 -18
  78. package/html/private/cache-control-anti-pattern.html +0 -429
  79. package/html/private/launch/README.html +0 -371
  80. package/html/private/launch/auth-cleanup-summary.html +0 -361
  81. package/html/private/launch/bubble-plugin-specification.html +0 -1007
  82. package/html/private/launch/go-to-market-strategy.html +0 -737
  83. package/html/private/launch/launch-announcements.html +0 -667
  84. package/html/private/launch/vercel-deployment-auth-setup.html +0 -417
  85. package/html/private/next-steps-walkthrough.html +0 -679
  86. package/html/private/supabase-auth-implementation-completed.html +0 -454
  87. package/html/private/supabase-auth-implementation-plan.html +0 -594
  88. package/html/private/supabase-auth-integration-plan.html +0 -704
  89. package/html/private/supabase-auth-setup-guide.html +0 -555
  90. package/html/private/test-private-doc.html +0 -302
  91. package/html/private/user-management-tooling.html +0 -601
  92. package/html/prompts/Screenshot 2025-08-02 at 08.49.55.png +0 -0
  93. package/html/prompts/beautiful-documentation-design.html +0 -784
  94. package/html/prompts/markdown-document-standards.html +0 -422
  95. package/html/prompts/project-rename-strategy-sasha-publish.html +0 -530
  96. package/html/robots.txt +0 -9
  97. package/html/sitemap.xml +0 -357
  98. package/html/test-questions/how-does-it-work%3F.html +0 -294
  99. package/html/test-questions/step-1%3A%20getting-started.html +0 -289
  100. package/html/test-questions/what-is-the-purpose.html +0 -293
  101. package/html/test-status.html +0 -281
  102. package/html/vercel-cli-setup-guide.html +0 -495
  103. package/html/vercel-first-time-setup-guide.html +0 -454
  104. package/html/vercel.json +0 -29
  105. package/html-static/11.png +0 -0
  106. package/html-static/404.html +0 -115
  107. package/html-static/README.html +0 -609
  108. package/html-static/Screenshot 2025-08-12 at 21.35.07.png +0 -0
  109. package/html-static/about-doc-builder.html +0 -578
  110. package/html-static/css/notion-style.css +0 -2502
  111. package/html-static/documentation-index.html +0 -558
  112. package/html-static/guides/authentication-default-change.html +0 -457
  113. package/html-static/guides/authentication-guide.html +0 -596
  114. package/html-static/guides/claude-workflow-guide.html +0 -1161
  115. package/html-static/guides/configuration-guide.html +0 -559
  116. package/html-static/guides/documentation-standards.html +0 -781
  117. package/html-static/guides/html-embedding-guide.html +0 -548
  118. package/html-static/guides/image-modal-guide.html +0 -602
  119. package/html-static/guides/phosphor-icons-guide.html +0 -671
  120. package/html-static/guides/private-directory-authentication-troubleshooting.html +0 -642
  121. package/html-static/guides/private-directory-authentication.html +0 -628
  122. package/html-static/guides/public-site-deployment.html +0 -518
  123. package/html-static/guides/search-engine-verification-guide.html +0 -629
  124. package/html-static/guides/seo-guide.html +0 -748
  125. package/html-static/guides/seo-optimization-guide.html +0 -974
  126. package/html-static/guides/supabase-authentication-complete-guide.html +0 -953
  127. package/html-static/guides/troubleshooting-guide.html +0 -720
  128. package/html-static/guides/windows-setup-guide.html +0 -946
  129. package/html-static/image-modal-test.html +0 -405
  130. package/html-static/index.html +0 -609
  131. package/html-static/js/main.js +0 -1754
  132. package/html-static/prompts/Screenshot 2025-08-02 at 08.49.55.png +0 -0
  133. package/html-static/prompts/beautiful-documentation-design.html +0 -871
  134. package/html-static/prompts/markdown-document-standards.html +0 -509
  135. package/html-static/prompts/project-rename-strategy-sasha-publish.html +0 -617
  136. package/html-static/robots.txt +0 -5
  137. package/html-static/sitemap.xml +0 -195
  138. package/html-static/test-questions/how-does-it-work%3F.html +0 -381
  139. package/html-static/test-questions/step-1%3A%20getting-started.html +0 -376
  140. package/html-static/test-questions/what-is-the-purpose.html +0 -380
  141. package/html-static/vercel-cli-setup-guide.html +0 -582
  142. package/html-static/vercel-first-time-setup-guide.html +0 -541
  143. package/manage-users.sql +0 -191
  144. package/migrate-to-domain-auth.sql +0 -47
  145. package/package/CACHE-BUSTING-GUIDE.md +0 -82
  146. package/package/CHANGELOG.md +0 -902
  147. package/package/README.md +0 -248
  148. package/package/assets/css/notion-style.css +0 -2211
  149. package/package/assets/js/auth.js +0 -67
  150. package/package/assets/js/main.js +0 -1565
  151. package/package/cli.js +0 -764
  152. package/package/index.js +0 -38
  153. package/package/knowcode-doc-builder-1.3.15.tgz +0 -0
  154. package/package/lib/builder.js +0 -32
  155. package/package/lib/config.js +0 -278
  156. package/package/lib/core-builder.js +0 -957
  157. package/package/lib/deploy.js +0 -497
  158. package/package/lib/dev-server.js +0 -96
  159. package/package/package.json +0 -34
  160. package/package/scripts/npx-runner.js +0 -27
  161. package/package/scripts/setup.js +0 -56
  162. package/package/test-cache-bust.sh +0 -43
  163. package/public-config.js +0 -22
  164. package/public-html/404.html +0 -115
  165. package/public-html/README.html +0 -149
  166. package/public-html/css/notion-style.css +0 -2036
  167. package/public-html/index.html +0 -149
  168. package/public-html/js/auth.js +0 -67
  169. package/public-html/js/main.js +0 -1485
  170. package/quick-test-commands.md +0 -40
  171. package/recordings/Screenshot 2025-07-24 at 18.22.01.png +0 -0
  172. package/recordings/mh-ls-22jul.txt +0 -2305
  173. package/screenshot.png +0 -0
  174. package/scripts/Screenshot 2025-07-23 at 15.39.41.png +0 -0
  175. package/setup-database-v2.sql +0 -53
  176. package/setup-database.sql +0 -41
  177. package/test-auth-config.js +0 -17
  178. package/test-cache-bust.sh +0 -43
  179. package/test-docs/README.md +0 -39
  180. package/test-html/404.html +0 -115
  181. package/test-html/README.html +0 -172
  182. package/test-html/auth.js +0 -97
  183. package/test-html/css/notion-style.css +0 -2036
  184. package/test-html/index.html +0 -172
  185. package/test-html/js/auth.js +0 -97
  186. package/test-html/js/main.js +0 -1485
  187. package/test-html/login.html +0 -102
  188. package/test-html/logout.html +0 -18
  189. package/update-domain.sql +0 -9
  190. package/user-access-view.sql +0 -49
  191. package/user-management/README.md +0 -301
  192. package/user-management/add-users.sh +0 -776
  193. package/user-management/create-user.js +0 -65
  194. package/user-management/users.txt +0 -15
  195. package/view-all-users.sql +0 -40
  196. package/wru-auth-config.js +0 -17
@@ -1,1161 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to...">
7
- <title>Claude + CLAUDE.md Documentation Workflow Guide</title>
8
-
9
- <meta name="generator" content="@knowcode/doc-builder by Knowcode Ltd">
10
- <meta name="author" content="Lindsay Smith">
11
- <meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude, error">
12
- <meta name="robots" content="index, follow">
13
- <link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
14
-
15
- <!-- Open Graph / Facebook -->
16
- <meta property="og:type" content="article">
17
- <meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
18
- <meta property="og:title" content="Claude + CLAUDE.md Documentation Workflow Guide">
19
- <meta property="og:description" content="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to...">
20
- <meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
21
- <meta property="og:site_name" content="@knowcode/doc-builder">
22
- <meta property="og:locale" content="en_US">
23
-
24
- <!-- Twitter Card -->
25
- <meta name="twitter:card" content="summary_large_image">
26
- <meta name="twitter:site" content="@planbbackups">
27
- <meta name="twitter:creator" content="@planbbackups">
28
- <meta name="twitter:title" content="Claude + CLAUDE.md Documentation Workflow Guide">
29
- <meta name="twitter:description" content="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to...">
30
- <meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
31
-
32
- <!-- Custom Meta Tags -->
33
- <meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
34
- <meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
35
-
36
- <!-- Fonts -->
37
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
38
-
39
- <!-- Icons -->
40
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
41
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
42
-
43
- <!-- Mermaid -->
44
- <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
45
-
46
- <!-- Styles -->
47
- <link rel="stylesheet" href="../css/notion-style.css">
48
-
49
-
50
- <!-- Blue theme and white background overrides for static output -->
51
- <style>
52
- /* Override green colors with blue */
53
- :root {
54
- --primary: #2563eb;
55
- --primary-dark: #1d4ed8;
56
- --primary-light: #dbeafe;
57
- --accent: #3b82f6;
58
- --color-accent-green: #2563eb;
59
- --color-accent-emerald: #3b82f6;
60
-
61
- /* White backgrounds for cleaner appearance */
62
- --color-bg-secondary: #FFFFFF;
63
- --color-bg-tertiary: #FAFAFA;
64
- --color-bg-hover: #F8F9FA;
65
- }
66
-
67
- /* Override green status colors with blue variants */
68
- .nav-item.active {
69
- background-color: #dbeafe !important;
70
- color: #1d4ed8 !important;
71
- }
72
-
73
- .nav-item:hover {
74
- background-color: #eff6ff !important;
75
- }
76
-
77
- /* Override complete/success icons to blue */
78
- .ph-check-circle[style*="color: #059669"] {
79
- color: #2563eb !important;
80
- }
81
-
82
- /* Override README/home icon color */
83
- .ph-house[style*="color: #059669"] {
84
- color: #2563eb !important;
85
- }
86
-
87
- /* Override links */
88
- a {
89
- color: #2563eb;
90
- }
91
-
92
- a:hover {
93
- color: #1d4ed8;
94
- }
95
-
96
- /* Override buttons and interactive elements */
97
- .theme-toggle:hover,
98
- .menu-toggle:hover {
99
- background-color: #dbeafe;
100
- color: #1d4ed8;
101
- }
102
-
103
- /* Override nav title hover */
104
- .nav-title:hover {
105
- background-color: #eff6ff;
106
- }
107
-
108
- /* White backgrounds for sidebar and navigation */
109
- body:not(.dark-mode) .sidebar {
110
- background: #FFFFFF !important;
111
- background-color: #FFFFFF !important;
112
- border-right: 1px solid #E5E7EB !important;
113
- }
114
-
115
- body:not(.dark-mode) .nav-section {
116
- background: #FFFFFF !important;
117
- background-color: #FFFFFF !important;
118
- }
119
-
120
- body:not(.dark-mode) .nav-content {
121
- background: #FFFFFF !important;
122
- background-color: #FFFFFF !important;
123
- }
124
-
125
- body:not(.dark-mode) .navigation {
126
- background: #FFFFFF !important;
127
- background-color: #FFFFFF !important;
128
- }
129
-
130
- /* Subtle separation for nav sections */
131
- body:not(.dark-mode) .nav-section + .nav-section {
132
- border-top: 1px solid #F3F4F6;
133
- }
134
-
135
- /* Adjust hover states for white backgrounds */
136
- body:not(.dark-mode) .nav-item:hover {
137
- background-color: #F8F9FA !important;
138
- }
139
-
140
- body:not(.dark-mode) .nav-title.collapsible:hover {
141
- background-color: #F8F9FA !important;
142
- }
143
-
144
- /* Header stays white (already is) but ensure consistency */
145
- body:not(.dark-mode) .header {
146
- background: #FFFFFF !important;
147
- background-color: #FFFFFF !important;
148
- border-bottom: 1px solid #E5E7EB !important;
149
- }
150
-
151
- /* Ensure search box looks good on white */
152
- body:not(.dark-mode) .filter-input,
153
- body:not(.dark-mode) .sidebar-search {
154
- background: #F8F9FA !important;
155
- background-color: #F8F9FA !important;
156
- border: 1px solid #E5E7EB !important;
157
- }
158
-
159
- body:not(.dark-mode) .filter-input:focus,
160
- body:not(.dark-mode) .sidebar-search:focus {
161
- background: #FFFFFF !important;
162
- background-color: #FFFFFF !important;
163
- border-color: #2563eb !important;
164
- }
165
-
166
- /* Override breadcrumbs */
167
- .breadcrumbs a {
168
- color: #2563eb;
169
- }
170
-
171
- .breadcrumbs a:hover {
172
- color: #1d4ed8;
173
- background-color: #dbeafe;
174
- }
175
-
176
- /* Override filter icon */
177
- .filter-icon {
178
- color: #2563eb;
179
- }
180
-
181
- /* Override deployment info on hover */
182
- .deployment-date:hover {
183
- color: #2563eb;
184
- }
185
-
186
- /* Dark mode adjustments */
187
- body.dark-mode {
188
- --primary: #3b82f6;
189
- --primary-dark: #2563eb;
190
- --primary-light: #1e3a8a;
191
- --accent: #60a5fa;
192
- }
193
-
194
- body.dark-mode .nav-item.active {
195
- background-color: rgba(59, 130, 246, 0.1) !important;
196
- color: #60a5fa !important;
197
- }
198
-
199
- body.dark-mode .nav-item:hover {
200
- background-color: rgba(59, 130, 246, 0.05) !important;
201
- }
202
-
203
- body.dark-mode a {
204
- color: #60a5fa;
205
- }
206
-
207
- body.dark-mode a:hover {
208
- color: #93bbfc;
209
- }
210
- </style>
211
-
212
-
213
-
214
-
215
- <!-- Favicon -->
216
- <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✨</text></svg>">
217
-
218
- <script type="application/ld+json">
219
- {
220
- "@context": "https://schema.org",
221
- "@type": "TechArticle",
222
- "headline": "Claude + CLAUDE.md Documentation Workflow Guide",
223
- "description": "This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to...",
224
- "author": {
225
- "@type": "Person",
226
- "name": "Lindsay Smith"
227
- },
228
- "publisher": {
229
- "@type": "Organization",
230
- "name": "Knowcode Ltd",
231
- "url": "https://knowcode.tech"
232
- },
233
- "datePublished": "2025-08-12T21:40:09.501Z",
234
- "dateModified": "2025-08-12T21:40:09.501Z",
235
- "mainEntityOfPage": {
236
- "@type": "WebPage",
237
- "@id": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
238
- },
239
- "breadcrumb": {
240
- "@type": "BreadcrumbList",
241
- "itemListElement": [
242
- {
243
- "@type": "ListItem",
244
- "position": 1,
245
- "name": "@knowcode/doc-builder",
246
- "item": "https://doc-builder-delta.vercel.app"
247
- },
248
- {
249
- "@type": "ListItem",
250
- "position": 2,
251
- "name": "Guides",
252
- "item": "https://doc-builder-delta.vercel.app/guides/"
253
- },
254
- {
255
- "@type": "ListItem",
256
- "position": 3,
257
- "name": "Claude Workflow Guide",
258
- "item": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
259
- }
260
- ]
261
- }
262
- }
263
- </script>
264
- </head>
265
- <body>
266
-
267
-
268
-
269
-
270
- <!-- Breadcrumbs -->
271
- <nav class="breadcrumbs breadcrumbs-static" id="breadcrumbs" data-build-date="Aug 12, 2025, 09:40 PM UTC" data-doc-builder-version="1.9.29">
272
-
273
- <!-- Pre-rendered breadcrumb content for static builds -->
274
- <div class="breadcrumbs-content breadcrumbs-homepage">
275
- <div class="breadcrumbs-right">
276
- <span class="breadcrumb-date" title="Built with doc-builder v1.9.29">Last updated: Aug 12, 2025, 09:40 PM UTC</span>
277
- <button class="breadcrumb-pdf-btn" onclick="if(typeof exportToPDF !== 'undefined') exportToPDF(); else window.print();" title="Export to PDF" aria-label="Export to PDF">
278
- <i class="fas fa-file-pdf"></i>
279
- </button>
280
- </div>
281
- </div>
282
-
283
- </nav>
284
-
285
- <!-- Main Content -->
286
- <div class="main-wrapper">
287
- <!-- Sidebar -->
288
- <aside class="sidebar">
289
- <div class="sidebar-header">
290
- <div class="filter-box">
291
- <input type="text" placeholder="Search menu..." class="filter-input" id="nav-filter">
292
- <i class="fas fa-search filter-icon"></i>
293
- </div>
294
- </div>
295
- <nav class="navigation">
296
-
297
- <div class="nav-section" data-level="0">
298
- <a class="nav-title toggle-all-nav expanded" href="#" id="nav-toggle-all" title="Collapse/Expand All">
299
- <i class="ph ph-caret-down" id="toggle-all-icon"></i> Documentation
300
- </a>
301
- <div class="nav-content">
302
- <a href="README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="ph ph-file-text"></i> Overview</a>
303
- <a href="about-doc-builder.html" class="nav-item" data-tooltip="About @knowcode/doc-builder."><i class="ph ph-check-circle" style="color: #2563eb;"></i> About Doc Builder</a>
304
- <a href="documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Documentation Index</a>
305
- <a href="image-modal-test.html" class="nav-item" data-tooltip="This document tests the new image modal functionality in doc-builder."><i class="ph ph-file-text"></i> Image Modal Test</a>
306
- <a href="vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Vercel Cli Setup Guide</a>
307
- <a href="vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the Vercel deployment process when using ."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Vercel First Time Setup Guide</a></div></div>
308
- <div class="nav-section" data-level="1">
309
- <a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
310
- <i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-book"></i> Guides
311
- </a>
312
- <div class="nav-content" id="nav-guides-1">
313
- <a href="guides/authentication-default-change.html" class="nav-item" data-tooltip="Starting from version 1.7.4, @knowcode/doc-builder now defaults to no authentication for all documentation sites."><i class="ph ph-file-text"></i> Authentication Default Change</a>
314
- <a href="guides/authentication-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase - a secure, scalable authentication platform."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Authentication Guide</a>
315
- <a href="guides/claude-workflow-guide.html" class="nav-item active" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Claude Workflow Guide</a>
316
- <a href="guides/configuration-guide.html" class="nav-item" data-tooltip="This guide explains how @knowcode/doc-builder handles configuration files and settings."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Configuration Guide</a>
317
- <a href="guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Documentation Standards</a>
318
- <a href="guides/html-embedding-guide.html" class="nav-item" data-tooltip="Starting from version 1.9.2, doc-builder treats HTML files ( and ) as attachments that are automatically copied to your output directory during the..."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Html Embedding Guide</a>
319
- <a href="guides/image-modal-guide.html" class="nav-item" data-tooltip="When users click on any image in your generated documentation, it opens in a professional modal overlay with: Full-screen viewing experience Smooth..."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Image Modal Guide</a>
320
- <a href="guides/phosphor-icons-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Phosphor Icons Guide</a>
321
- <a href="guides/private-directory-authentication.html" class="nav-item" data-tooltip="The @knowcode/doc-builder provides flexible authentication options to protect your documentation."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Private Directory Authentication</a>
322
- <a href="guides/private-directory-authentication-troubleshooting.html" class="nav-item" data-tooltip="Private Directory Authentication Troubleshooting."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Private Directory Authentication Troubleshooting</a>
323
- <a href="guides/public-site-deployment.html" class="nav-item" data-tooltip="The @knowcode/doc-builder now supports deploying public documentation sites without authentication."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Public Site Deployment</a>
324
- <a href="guides/search-engine-verification-guide.html" class="nav-item" data-tooltip="Search engine verification provides access to powerful webmaster tools:."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Search Engine Verification Guide</a>
325
- <a href="guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Seo Guide</a>
326
- <a href="guides/seo-optimization-guide.html" class="nav-item" data-tooltip="Comprehensive guide to optimizing documentation for search engines. Learn SEO best practices, use built-in features, and improve your rankings."><i class="ph ph-check-circle" style="color: #2563eb;"></i> SEO Optimization Guide for @knowcode/doc-builder</a>
327
- <a href="guides/supabase-authentication-complete-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes built-in Supabase authentication that provides enterprise-grade security with zero configuration."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Supabase Authentication Complete Guide</a>
328
- <a href="guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Troubleshooting Guide</a>
329
- <a href="guides/windows-setup-guide.html" class="nav-item" data-tooltip="This guide helps Windows users set up the complete AI-powered documentation workflow using Claude Code, @knowcode/doc-builder, and Vercel."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Windows Setup Guide</a></div></div>
330
- <div class="nav-section" data-level="1">
331
- <a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
332
- <i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-chat-circle-dots"></i> Prompts
333
- </a>
334
- <div class="nav-content collapsed" id="nav-prompts-1">
335
- <a href="prompts/beautiful-documentation-design.html" class="nav-item" data-tooltip="🎨 Beautiful Documentation Design Guide."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Beautiful Documentation Design</a>
336
- <a href="prompts/markdown-document-standards.html" class="nav-item" data-tooltip="Detailed introduction to the topic..."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Markdown Document Standards</a>
337
- <a href="prompts/project-rename-strategy-sasha-publish.html" class="nav-item" data-tooltip="This document outlines the comprehensive strategy for renaming the @knowcode/doc-builder project to &quot;sasha-publish&quot;, including all package references,..."><i class="ph ph-x-circle" style="color: #dc2626;"></i> Project Rename Strategy Sasha Publish</a></div></div>
338
- <div class="nav-section" data-level="1">
339
- <a class="nav-title collapsible" href="#" data-target="nav-test-questions-1" >
340
- <i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-folder"></i> Test Questions
341
- </a>
342
- <div class="nav-content collapsed" id="nav-test-questions-1">
343
- <a href="test-questions/how-does-it-work%3F.html" class="nav-item" data-tooltip="This is a test file to verify that question marks work properly in filenames."><i class="ph ph-file-text"></i> How Does It Work?</a>
344
- <a href="test-questions/step-1%3A%20getting-started.html" class="nav-item" data-tooltip="Step 1: Getting Started."><i class="ph ph-file-text"></i> Step 1: Getting Started</a>
345
- <a href="test-questions/what-is-the-purpose.html" class="nav-item" data-tooltip="Understanding the purpose of our documentation system"><i class="ph ph-file-text"></i> What Is The Purpose?</a></div></div>
346
- </nav>
347
- <div class="resize-handle"></div>
348
- </aside>
349
-
350
- <!-- Content Area -->
351
- <main class="content">
352
- <div class="content-inner">
353
- <h1>Claude + CLAUDE.md Documentation Workflow Guide</h1>
354
- <h2>Overview</h2>
355
- <p>This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to Vercel using the @knowcode/doc-builder tool.</p>
356
- <h2>Workflow Overview</h2>
357
- <div class="mermaid-wrapper">
358
- <div class="mermaid">graph TD
359
- A[Start Project] --> B[Setup CLAUDE.md]
360
- B --> C[Configure doc-builder]
361
- C --> D[Create Documentation with Claude]
362
- D --> E[Build Static Site]
363
- E --> F[Deploy to Vercel]
364
- F --> G[Live Documentation]
365
-
366
- B -.-> H[Refine Instructions]
367
- H -.-> D
368
-
369
- D --> I{Review Quality}
370
- I -->|Needs Improvement| H
371
- I -->|Good| E
372
-
373
- style A fill:#e1f5fe
374
- style G fill:#c8e6c9
375
- style H fill:#fff3e0</div>
376
- </div>
377
- <h2>Step 1: Setting Up CLAUDE.md</h2>
378
- <h3>1.1 Project-Level CLAUDE.md</h3>
379
- <p>Create a comprehensive <code>CLAUDE.md</code> file in your project root with specific instructions for documentation. Here&#39;s a complete example based on best practices:</p>
380
- <pre><code class="language-markdown"># CLAUDE.md - [Your Project Name]
381
-
382
- This file provides comprehensive guidance for Claude Code when working in this project.
383
-
384
- ## Project Overview
385
-
386
- **Name**: Your Project
387
- **Purpose**: Brief description of what your project does
388
- **Technology Stack**: List your key technologies (e.g., Node.js, React, AWS)
389
-
390
- ## Documentation Standards
391
-
392
- ### Document Title Format
393
- - Use `# Document Title`
394
- - Include metadata:
395
- - **Generated**: YYYY-MM-DD HH:MM UTC
396
- - **Status**: Draft/In Progress/Complete
397
- - **Verified**: ✅ (for verified information) / ❓ (for speculated information)
398
-
399
- ### Document Structure
400
- - All documentation goes in the `/docs` directory
401
- - Use hierarchical folder structure:
402
- - `docs/guides/` - How-to guides and tutorials
403
- - `docs/api/` - API reference documentation
404
- - `docs/architecture/` - System design and architecture
405
- - `docs/deployment/` - Deployment and operations guides
406
- - `docs/troubleshooting/` - Common issues and solutions
407
-
408
- ### Naming Conventions
409
- - Analysis documents: `analysis-{topic}-{specifics}.md`
410
- - Design documents: `design-{component}-{feature}.md`
411
- - Implementation plans: `plan-{feature}-implementation.md`
412
- - Technical guides: `{component}-{topic}-guide.md`
413
- - API docs: `api-{service}-reference.md`
414
- - Testing documents: `test-{component}-{type}.md`
415
-
416
- ### Content Requirements
417
-
418
- #### 1. Mermaid Diagrams
419
- - Include diagrams wherever they help explain complex concepts
420
- - Use consistent node naming and styling
421
- - Add clear labels and descriptions
422
- - Example:
423
- <div class="mermaid-wrapper">
424
- <div class="mermaid">graph TD
425
- A[User Request] --> B{Authentication}
426
- B -->|Valid| C[Process Request]
427
- B -->|Invalid| D[Return 401]
428
- C --> E[Return Response]</div>
429
- </div>
430
-
431
- #### 2. Information Verification
432
- - Mark all information as either verified (✅) or speculated (❓)
433
- - Include sources for verified information
434
- - Clearly indicate assumptions
435
- - Example:
436
- - ✅ This API endpoint requires authentication (verified in auth.js:45)
437
- - ❓ Response time should be under 200ms (performance requirement assumed)
438
-
439
- #### 3. Code Examples
440
- - Use proper syntax highlighting with language identifiers
441
- - Include context and explanations
442
- - Show both correct and incorrect usage where applicable
443
- - Add error handling in examples
444
- - Example:
445
- ```javascript
446
- // ✅ Correct way to call the API
447
- try {
448
- const response = await api.getData({ userId: 123 });
449
- console.log(&#39;Data:&#39;, response.data);
450
- } catch (error) {
451
- console.error(&#39;API Error:&#39;, error.message);
452
- }
453
-
454
- // ❌ Incorrect - missing error handling
455
- const response = await api.getData({ userId: 123 });
456
- </code></pre>
457
- <h4>4. Practical Examples</h4>
458
- <ul>
459
- <li>Include real-world scenarios</li>
460
- <li>Show complete workflows</li>
461
- <li>Add curl/httpie examples for APIs</li>
462
- <li>Include sample data</li>
463
- </ul>
464
- <h3>Writing Style</h3>
465
- <ul>
466
- <li>Use clear, concise language</li>
467
- <li>Write for your audience&#39;s technical level</li>
468
- <li>Use active voice</li>
469
- <li>Keep paragraphs short (3-4 sentences)</li>
470
- <li>Use bullet points for lists</li>
471
- <li>Bold important terms on first use</li>
472
- </ul>
473
- <h3>Standard Sections</h3>
474
- <p>Every technical document should include:</p>
475
- <ol>
476
- <li><strong>Overview</strong> - Brief description of the topic</li>
477
- <li><strong>Prerequisites</strong> - What the reader needs to know/have</li>
478
- <li><strong>Main Content</strong> - The core information</li>
479
- <li><strong>Examples</strong> - Practical demonstrations</li>
480
- <li><strong>Troubleshooting</strong> - Common issues and solutions</li>
481
- <li><strong>References</strong> - Links to related documentation</li>
482
- </ol>
483
- <h3>Tables and Structured Data</h3>
484
- <p>Use tables for comparing options or listing properties:</p>
485
- <table>
486
- <thead>
487
- <tr>
488
- <th>Property</th>
489
- <th>Type</th>
490
- <th>Required</th>
491
- <th>Description</th>
492
- </tr>
493
- </thead>
494
- <tbody><tr>
495
- <td>id</td>
496
- <td>string</td>
497
- <td>Yes</td>
498
- <td>Unique identifier</td>
499
- </tr>
500
- <tr>
501
- <td>name</td>
502
- <td>string</td>
503
- <td>Yes</td>
504
- <td>Display name</td>
505
- </tr>
506
- <tr>
507
- <td>active</td>
508
- <td>boolean</td>
509
- <td>No</td>
510
- <td>Whether the item is active</td>
511
- </tr>
512
- </tbody></table>
513
- <h3>File Organization</h3>
514
- <ul>
515
- <li>Active files in appropriate directories</li>
516
- <li>Move unused files to <code>archive/</code> with descriptive names</li>
517
- <li>Temporary files must include &quot;temp&quot; in filename</li>
518
- <li>Example structure:<pre><code>docs/
519
- ├── guides/
520
- │ ├── setup-guide.md
521
- │ └── deployment-guide.md
522
- ├── api/
523
- │ └── rest-api-reference.md
524
- └── archive/
525
- └── old-setup-guide-2024.md
526
- </code></pre>
527
- </li>
528
- </ul>
529
- <h2>Git and Version Control</h2>
530
- <h3>Commit Practices</h3>
531
- <ul>
532
- <li>Commit after material changes or milestones</li>
533
- <li>Use descriptive commit messages</li>
534
- <li>Group related changes</li>
535
- <li>Format: <code>type: Brief description</code></li>
536
- <li>Types: feat, fix, docs, style, refactor, test, chore</li>
537
- </ul>
538
- <h3>Documentation Updates</h3>
539
- <ul>
540
- <li>Update documentation when code changes</li>
541
- <li>Keep CHANGELOG.md current</li>
542
- <li>Document breaking changes prominently</li>
543
- </ul>
544
- <h2>Quality Standards</h2>
545
- <h3>Completeness</h3>
546
- <ul>
547
- <li>Cover all aspects of the topic</li>
548
- <li>Include edge cases</li>
549
- <li>Document error scenarios</li>
550
- <li>Add performance considerations</li>
551
- </ul>
552
- <h3>Accuracy</h3>
553
- <ul>
554
- <li>Verify technical details</li>
555
- <li>Test all code examples</li>
556
- <li>Review with subject matter experts</li>
557
- <li>Update when implementation changes</li>
558
- </ul>
559
- <h3>Maintenance</h3>
560
- <ul>
561
- <li>Review documentation quarterly</li>
562
- <li>Update version numbers</li>
563
- <li>Check for broken links</li>
564
- <li>Verify code examples still work</li>
565
- </ul>
566
- <h2>Special Considerations</h2>
567
- <h3>Security</h3>
568
- <ul>
569
- <li>Never include credentials or sensitive data</li>
570
- <li>Document security requirements</li>
571
- <li>Include authentication examples without real tokens</li>
572
- <li>Note security best practices</li>
573
- </ul>
574
- <h3>Performance</h3>
575
- <ul>
576
- <li>Document performance implications</li>
577
- <li>Include benchmarks where relevant</li>
578
- <li>Note resource requirements</li>
579
- <li>Add optimization tips</li>
580
- </ul>
581
- <h3>Accessibility</h3>
582
- <ul>
583
- <li>Use semantic markdown</li>
584
- <li>Include alt text for images</li>
585
- <li>Ensure good heading hierarchy</li>
586
- <li>Write clear link text (not &quot;click here&quot;)</li>
587
- </ul>
588
- <h2>AI-Specific Instructions</h2>
589
- <p>When generating documentation:</p>
590
- <ol>
591
- <li><strong>Always include the metadata header</strong> with generation date and verification status</li>
592
- <li><strong>Create working examples</strong> that can be copy-pasted</li>
593
- <li><strong>Add troubleshooting sections</strong> for common problems</li>
594
- <li><strong>Include mermaid diagrams</strong> for workflows and architectures</li>
595
- <li><strong>Mark speculated information</strong> clearly with <i style="font-size: 1.2em" class="ph ph-question" aria-label="question"></i></li>
596
- <li><strong>Follow the naming conventions</strong> exactly</li>
597
- <li><strong>Create comprehensive content</strong> - aim for completeness over brevity</li>
598
- <li><strong>Add cross-references</strong> to related documentation</li>
599
- </ol>
600
- <h2>Project-Specific Patterns</h2>
601
- <p>[Add your project-specific patterns here, such as:]</p>
602
- <ul>
603
- <li>API authentication flow</li>
604
- <li>Database connection patterns</li>
605
- <li>Error handling conventions</li>
606
- <li>Logging standards</li>
607
- <li>Testing approaches</li>
608
- </ul>
609
- <h2>Common Code Snippets</h2>
610
- <p>[Add frequently used code patterns for consistency:]</p>
611
- <pre><code class="language-javascript">// Standard error handling pattern
612
- function handleError(error) {
613
- logger.error(&#39;Operation failed:&#39;, {
614
- message: error.message,
615
- stack: error.stack,
616
- timestamp: new Date().toISOString()
617
- });
618
- // ... rest of error handling
619
- }
620
- </code></pre>
621
- <h2>References</h2>
622
- <ul>
623
- <li><a href="/README.md">Project README</a></li>
624
- <li><a href="/docs/api/">API Documentation</a></li>
625
- <li><a href="/docs/architecture/">Architecture Overview</a></li>
626
- <li><a href="/CONTRIBUTING.md">Contributing Guide</a></li>
627
- </ul>
628
- <pre><code>
629
- ### 1.2 Setting Up Admin/Background/Environment Facts
630
-
631
- For Claude to generate accurate and consistent content, include key organizational and environmental facts in your CLAUDE.md. This ensures all generated documentation uses correct information:
632
-
633
- ```markdown
634
- ## Organization &amp; Environment Facts
635
-
636
- ### Company Information
637
- - **Organization Name**: Knowcode Ltd
638
- - **Website**: https://knowcode.tech
639
- - **Contact Email**: support@knowcode.tech
640
- - **GitHub Organization**: https://github.com/knowcode
641
- - **NPM Organization**: @knowcode
642
-
643
- ### Author Information
644
- - **Primary Author**: Lindsay Smith
645
- - **Author Email**: lindsay@knowcode.tech
646
- - **Author Title**: Lead Developer
647
- - **GitHub Handle**: @lindsaysmith
648
- - **Twitter/X Handle**: @planbbackups
649
-
650
- ### Project Environment
651
- - **Production URL**: https://doc-builder-delta.vercel.app
652
- - **Staging URL**: https://doc-builder-staging.vercel.app
653
- - **Documentation URL**: https://docs.knowcode.tech
654
- - **API Base URL**: https://api.knowcode.tech
655
- - **CDN URL**: https://cdn.knowcode.tech
656
-
657
- ### Default Settings
658
- - **Default Language**: en-US
659
- - **Timezone**: UTC
660
- - **Date Format**: YYYY-MM-DD
661
- - **Copyright Year**: 2025
662
- - **License**: MIT
663
- - **Version**: 1.6.2
664
-
665
- ### SEO Defaults
666
- - **Default Author**: Lindsay Smith
667
- - **Organization Type**: Software Company
668
- - **Twitter Handle**: @planbbackups
669
- - **LinkedIn**: https://linkedin.com/company/knowcode
670
- - **Facebook Page**: https://facebook.com/knowcode
671
-
672
- ### Technical Stack
673
- - **Primary Language**: JavaScript/TypeScript
674
- - **Node Version**: 20.x LTS
675
- - **Package Manager**: npm (not yarn or pnpm)
676
- - **Cloud Provider**: AWS (primary), Vercel (hosting)
677
- - **Region**: eu-west-1
678
- - **Container Registry**: Docker Hub
679
-
680
- ### Communication Standards
681
- - **Support Response Time**: 24-48 hours
682
- - **Documentation Language**: US English
683
- - **Tone**: Professional but friendly
684
- - **Technical Level**: Intermediate developers
685
-
686
- ### Branding Guidelines
687
- - **Company Tagline**: &quot;Beautiful documentation with the least effort possible&quot;
688
- - **Primary Color**: #0070f3 (Vercel blue)
689
- - **Logo**: ✨ (sparkle emoji)
690
- - **Font Family**: Inter, system-ui
691
- </code></pre>
692
- <p>When these facts are included in your CLAUDE.md, Claude will:</p>
693
- <ul>
694
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Use correct contact information in examples</li>
695
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Reference the right URLs in documentation</li>
696
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Apply consistent author attribution</li>
697
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Generate accurate meta tags for SEO</li>
698
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Use proper organizational context</li>
699
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Follow established technical standards</li>
700
- </ul>
701
- <h3>1.3 Global CLAUDE.md Best Practices</h3>
702
- <p>Your global <code>~/.claude/CLAUDE.md</code> should include universal standards that apply to all projects. Here&#39;s an expanded example:</p>
703
- <pre><code class="language-markdown"># Global CLAUDE.md Instructions
704
-
705
- ## Universal Documentation Standards
706
-
707
- ### Visual Elements
708
- - Where it makes sense, include diagrams (Mermaid preferred)
709
- - Use skeleton loaders for UI components
710
- - For Trello board screenshots:
711
- - Save as: @docs/product-requirements/Screenshot YYYY-MM-DD at HH.MM.SS.png
712
- - Ensure columns are top-justified
713
- - Color-code columns by risk level
714
-
715
- ### Information Verification
716
- - Mark all verified vs. speculated information as a general document standard
717
- - Use ✅ for verified information with source references
718
- - Use ❓ for assumptions or unverified information
719
-
720
- ### Development Practices
721
- - Use Docker V2 for containerization
722
- - Name temporary test files with &quot;temp&quot; in the filename
723
- - Do git commits after material changes or milestones
724
- - Archive unused files by moving to archive/ and renaming
725
- - After debugging, suggest archiving old unused code
726
-
727
- ### Directory Organization
728
- - Create all new markdown docs in the /docs directory
729
- - Put documents in relevant subdirectories
730
- - MD docs will always go under the /docs directory
731
- - Maintain clear folder hierarchies
732
-
733
- ### Build and Deployment
734
- - Carefully manage container sizes to prevent bloat
735
- - Use multi-stage builds for Docker
736
- - Remove unnecessary dependencies during build
737
- - Leverage .dockerignore effectively
738
- - Consider Alpine or slim base images
739
- - Be cautious with npx vs npm caching issues
740
-
741
- ### Documentation Maintenance
742
- - Always maintain a CHANGELOG.md for significant changes
743
- - Check responsive breakpoints for consistency
744
- - Use table approach for columns in MD files when appropriate
745
-
746
- ### Vercel-Specific
747
- - For public access, disable project/deployment protection in Vercel console
748
- - Remember to disable Vercel authentication for public projects
749
-
750
- ### Git Workflow
751
- - Commit after every big milestone or completed major task
752
- - Use descriptive commit messages
753
- - Group related changes in single commits
754
- </code></pre>
755
- <div class="mermaid-wrapper">
756
- <div class="mermaid">graph LR
757
- A[Global CLAUDE.md] --> B[Document Standards]
758
- A --> C[Git Workflow]
759
- A --> D[Quality Checks]
760
- A --> E[Security Practices]
761
- A --> F[Development Tools]
762
-
763
- B --> B1[Naming Conventions]
764
- B --> B2[Markdown Standards]
765
- B --> B3[Diagram Requirements]
766
- B --> B4[Verification Marks]
767
-
768
- C --> C1[Commit After Milestones]
769
- C --> C2[Archive Unused Code]
770
- C --> C3[Descriptive Messages]
771
-
772
- D --> D1[Responsive Testing]
773
- D --> D2[Changelog Updates]
774
- D --> D3[Documentation Reviews]
775
-
776
- E --> E1[No Credentials]
777
- E --> E2[Access Controls]
778
- E --> E3[Secure Defaults]
779
-
780
- F --> F1[Docker V2]
781
- F --> F2[Build Optimization]
782
- F --> F3[Caching Strategies]</div>
783
- </div>
784
- <h3>1.4 Benefits of Environment Facts in Documentation</h3>
785
- <p>Including these environmental facts in your CLAUDE.md provides several key benefits:</p>
786
- <div class="mermaid-wrapper">
787
- <div class="mermaid">graph TD
788
- A[Environment Facts in CLAUDE.md] --> B[Accurate Content]
789
- A --> C[Consistent Branding]
790
- A --> D[Proper Attribution]
791
- A --> E[SEO Optimization]
792
-
793
- B --> B1[Correct URLs in examples]
794
- B --> B2[Valid email addresses]
795
- B --> B3[Accurate version numbers]
796
-
797
- C --> C1[Company name consistency]
798
- C --> C2[Tagline usage]
799
- C --> C3[Brand colors]
800
-
801
- D --> D1[Author metadata]
802
- D --> D2[Copyright notices]
803
- D --> D3[License references]
804
-
805
- E --> E1[Meta tag generation]
806
- E --> E2[Social media tags]
807
- E --> E3[Structured data]
808
-
809
- style A fill:#e3f2fd
810
- style B fill:#c8e6c9
811
- style C fill:#fff9c4
812
- style D fill:#ffccbc
813
- style E fill:#d1c4e9</div>
814
- </div>
815
- <h4>Example: Without Environment Facts</h4>
816
- <pre><code class="language-javascript">// Claude might generate:
817
- const API_URL = &#39;https://api.example.com&#39;; // ❓ Generic placeholder
818
- const author = &#39;Your Name&#39;; // ❓ Placeholder
819
- const email = &#39;email@example.com&#39;; // ❓ Generic example
820
- </code></pre>
821
- <h4>Example: With Environment Facts</h4>
822
- <pre><code class="language-javascript">// Claude will generate:
823
- const API_URL = &#39;https://api.knowcode.tech&#39;; // ✅ Actual API URL
824
- const author = &#39;Lindsay Smith&#39;; // ✅ Correct author
825
- const email = &#39;support@knowcode.tech&#39;; // ✅ Real contact email
826
- </code></pre>
827
- <h2>Step 2: Initialize doc-builder</h2>
828
- <pre><code class="language-bash"># Install doc-builder
829
- npm install -D @knowcode/doc-builder
830
-
831
- # Initialize configuration
832
- npx doc-builder init
833
- </code></pre>
834
- <h3>2.1 Configure doc-builder.config.js</h3>
835
- <pre><code class="language-javascript">module.exports = {
836
- siteName: &#39;Your Project Documentation&#39;,
837
- siteDescription: &#39;Comprehensive documentation for Your Project&#39;,
838
- docsDir: &#39;docs&#39;,
839
- outputDir: &#39;html&#39;,
840
- features: {
841
- authentication: false, // Set true for private docs
842
- changelog: true,
843
- mermaid: true,
844
- darkMode: true
845
- }
846
- };
847
- </code></pre>
848
- <h2>Step 3: Documentation Creation Workflow with Claude</h2>
849
- <h3>3.1 Effective Prompting Strategy</h3>
850
- <div class="mermaid-wrapper">
851
- <div class="mermaid">sequenceDiagram
852
- participant User
853
- participant Claude
854
- participant CLAUDE.md
855
- participant Documentation
856
-
857
- User->>Claude: Request documentation
858
- Claude->>CLAUDE.md: Check project standards
859
- CLAUDE.md-->>Claude: Return guidelines
860
- Claude->>Documentation: Create/Update docs
861
- Claude->>User: Confirm completion
862
- User->>Claude: Review & refine
863
- Claude->>Documentation: Apply refinements</div>
864
- </div>
865
- <h3>3.2 Example Documentation Requests</h3>
866
- <h4>Initial Architecture Documentation</h4>
867
- <pre><code>&quot;Create comprehensive architecture documentation for our authentication system. Include:
868
- - System overview with mermaid diagrams
869
- - Component interactions
870
- - API endpoints
871
- - Security considerations
872
- - Deployment architecture&quot;
873
- </code></pre>
874
- <h4>API Documentation</h4>
875
- <pre><code>&quot;Document all REST API endpoints in our user service. For each endpoint include:
876
- - HTTP method and path
877
- - Request/response schemas
878
- - Authentication requirements
879
- - Example requests with curl
880
- - Error responses&quot;
881
- </code></pre>
882
- <h4>Setup Guide</h4>
883
- <pre><code>&quot;Create a detailed setup guide for new developers including:
884
- - Prerequisites
885
- - Environment setup steps
886
- - Configuration options
887
- - Common issues and solutions
888
- - Development workflow&quot;
889
- </code></pre>
890
- <h3>3.3 Claude Interaction Best Practices</h3>
891
- <ol>
892
- <li><strong>Be Specific</strong>: Provide clear requirements and expected structure</li>
893
- <li><strong>Iterate</strong>: Review generated content and request refinements</li>
894
- <li><strong>Verify</strong>: Ask Claude to mark verified vs speculated information</li>
895
- <li><strong>Examples</strong>: Request concrete examples and code snippets</li>
896
- <li><strong>Diagrams</strong>: Explicitly request mermaid diagrams for visual clarity</li>
897
- </ol>
898
- <h2>Step 4: Building Documentation Site</h2>
899
- <h3>4.1 Development Workflow</h3>
900
- <div class="mermaid-wrapper">
901
- <div class="mermaid">graph LR
902
- A[Write Docs] --> B[Preview Locally]
903
- B --> C{Looks Good?}
904
- C -->|No| A
905
- C -->|Yes| D[Build Site]
906
- D --> E[Test Build]
907
- E --> F{All Good?}
908
- F -->|No| A
909
- F -->|Yes| G[Ready to Deploy]
910
-
911
- style A fill:#fff3e0
912
- style G fill:#c8e6c9</div>
913
- </div>
914
- <h3>4.2 Commands</h3>
915
- <pre><code class="language-bash"># Start development server
916
- npm run dev:docs
917
-
918
- # Build static site
919
- npm run build:docs
920
-
921
- # Preview built site
922
- npx serve html
923
- </code></pre>
924
- <h2>Step 5: Deploying to Vercel</h2>
925
- <h3>5.1 First-Time Setup</h3>
926
- <pre><code class="language-bash"># Deploy to Vercel (interactive)
927
- npx doc-builder deploy
928
-
929
- # Or with npm script
930
- npm run deploy:docs
931
- </code></pre>
932
- <h3>5.2 Vercel Configuration</h3>
933
- <p>The tool automatically creates <code>vercel.json</code>:</p>
934
- <pre><code class="language-json">{
935
- &quot;outputDirectory&quot;: &quot;html&quot;,
936
- &quot;routes&quot;: [
937
- {
938
- &quot;src&quot;: &quot;/(.*)&quot;,
939
- &quot;dest&quot;: &quot;/$1&quot;
940
- }
941
- ]
942
- }
943
- </code></pre>
944
- <h3>5.3 Deployment Workflow</h3>
945
- <div class="mermaid-wrapper">
946
- <div class="mermaid">stateDiagram-v2
947
- [*] --> LocalDevelopment
948
- LocalDevelopment --> BuildDocs: npm run build:docs
949
- BuildDocs --> TestLocally: npx serve html
950
- TestLocally --> Deploy: npx doc-builder deploy
951
- Deploy --> VercelProcessing
952
- VercelProcessing --> LiveSite: Success
953
- VercelProcessing --> ErrorHandling: Failed
954
- ErrorHandling --> LocalDevelopment: Fix issues
955
- LiveSite --> [*]</div>
956
- </div>
957
- <h2>Step 6: Continuous Documentation Updates</h2>
958
- <h3>6.1 Update Workflow</h3>
959
- <div class="mermaid-wrapper">
960
- <div class="mermaid">graph TD
961
- A[Code Changes] --> B{Docs Needed?}
962
- B -->|Yes| C[Update Documentation]
963
- B -->|No| End[End]
964
- C --> D[Use Claude for Updates]
965
- D --> E[Review Changes]
966
- E --> F[Build & Test]
967
- F --> G[Deploy Updates]
968
- G --> H[Update CHANGELOG.md]
969
- H --> End
970
-
971
- style A fill:#ffebee
972
- style G fill:#e8f5e9</div>
973
- </div>
974
- <h3>6.2 Maintaining Documentation Quality</h3>
975
- <ol>
976
- <li><strong>Regular Reviews</strong>: Schedule periodic documentation reviews</li>
977
- <li><strong>Automated Checks</strong>: Add documentation linting to CI/CD</li>
978
- <li><strong>User Feedback</strong>: Create feedback mechanism for documentation</li>
979
- <li><strong>Version Tracking</strong>: Maintain documentation versions with code versions</li>
980
- </ol>
981
- <h2>Advanced CLAUDE.md Refinements</h2>
982
- <h3>7.1 Project-Specific Instructions</h3>
983
- <pre><code class="language-markdown">## Project-Specific Documentation Rules
984
-
985
- ### Component Documentation
986
- - Each major component needs its own guide
987
- - Include architecture decisions
988
- - Document integration points
989
- - Add performance considerations
990
- - Note dependencies and version requirements
991
-
992
- ### Code Examples
993
- - Use the project&#39;s primary language (e.g., TypeScript, JavaScript)
994
- - Include error handling in all examples
995
- - Show both correct and incorrect usage
996
- - Add inline comments for clarity
997
- - Test all examples before including
998
- - Include import statements
999
-
1000
- ### API Documentation
1001
- - Document all public endpoints
1002
- - Include authentication requirements
1003
- - Show request/response examples
1004
- - Document rate limits
1005
- - Include error response codes
1006
- - Add curl examples for testing
1007
-
1008
- ### Diagrams
1009
- - Use mermaid for all flow diagrams
1010
- - Include sequence diagrams for APIs
1011
- - Add state diagrams for complex logic
1012
- - Create entity relationship diagrams for data models
1013
- - Use consistent styling and colors
1014
- - Add titles to all diagrams
1015
-
1016
- ### Testing Documentation
1017
- - Document test setup requirements
1018
- - Include example test cases
1019
- - Show how to run specific test suites
1020
- - Document mocking strategies
1021
- - Include performance benchmarks
1022
-
1023
- ### Deployment Documentation
1024
- - Include environment-specific configurations
1025
- - Document secret management
1026
- - Show deployment commands
1027
- - Include rollback procedures
1028
- - Document monitoring setup
1029
- </code></pre>
1030
- <h3>7.2 Documentation Templates</h3>
1031
- <p>Create templates in your CLAUDE.md:</p>
1032
- <pre><code class="language-markdown">## Documentation Templates
1033
-
1034
- ### API Endpoint Template
1035
- </code></pre>
1036
- <h2>[HTTP Method] /api/[endpoint]</h2>
1037
- <p><strong>Purpose</strong>: [Brief description]</p>
1038
- <h3>Request</h3>
1039
- <ul>
1040
- <li><strong>Headers</strong>: <ul>
1041
- <li><code>Authorization: Bearer [token]</code></li>
1042
- <li><code>Content-Type: application/json</code></li>
1043
- </ul>
1044
- </li>
1045
- <li><strong>Body</strong>:<pre><code class="language-json">{
1046
- &quot;field&quot;: &quot;value&quot;
1047
- }
1048
- </code></pre>
1049
- </li>
1050
- </ul>
1051
- <h3>Response</h3>
1052
- <ul>
1053
- <li><strong>Success (200)</strong>:<pre><code class="language-json">{
1054
- &quot;data&quot;: {}
1055
- }
1056
- </code></pre>
1057
- </li>
1058
- <li><strong>Error (4xx/5xx)</strong>:<pre><code class="language-json">{
1059
- &quot;error&quot;: &quot;Description&quot;
1060
- }
1061
- </code></pre>
1062
- </li>
1063
- </ul>
1064
- <h3>Examples</h3>
1065
- <pre><code class="language-bash">curl -X POST https://api.example.com/endpoint \
1066
- -H &quot;Authorization: Bearer token&quot; \
1067
- -d &#39;{&quot;field&quot;: &quot;value&quot;}&#39;
1068
- </code></pre>
1069
- <pre><code>
1070
- ## Best Practices Summary
1071
-
1072
- ### Documentation Creation
1073
- 1. ✅ Use CLAUDE.md to maintain consistency across all documentation
1074
- 2. ✅ Include visual diagrams (Mermaid) for complex concepts and workflows
1075
- 3. ✅ Provide practical, working examples that can be copy-pasted
1076
- 4. ✅ Mark verification status (✅/❓) for all technical information
1077
- 5. ✅ Keep documentation close to code in the /docs directory
1078
- 6. ✅ Include metadata headers with timestamps and status
1079
- 7. ✅ Add troubleshooting sections for common issues
1080
- 8. ✅ Cross-reference related documentation
1081
-
1082
- ### Claude Interaction
1083
- 1. ✅ Provide clear, specific requests with expected output format
1084
- 2. ✅ Reference existing patterns from CLAUDE.md
1085
- 3. ✅ Request iterative improvements - review and refine
1086
- 4. ✅ Verify technical accuracy of generated content
1087
- 5. ✅ Ask for troubleshooting sections explicitly
1088
- 6. ✅ Request examples with error handling
1089
- 7. ✅ Specify diagram types needed (sequence, flow, state)
1090
- 8. ✅ Ask Claude to check its own work against CLAUDE.md standards
1091
-
1092
- ### Documentation Maintenance
1093
- 1. ✅ Update docs when code changes
1094
- 2. ✅ Archive outdated documentation
1095
- 3. ✅ Maintain CHANGELOG.md
1096
- 4. ✅ Review documentation quarterly
1097
- 5. ✅ Test all code examples
1098
- 6. ✅ Check for broken links
1099
- 7. ✅ Update version references
1100
-
1101
- ### Deployment
1102
- 1. ✅ Test locally before deploying (npm run dev:docs)
1103
- 2. ✅ Build and verify output (npm run build:docs)
1104
- 3. ✅ Use preview deployments first
1105
- 4. ✅ Configure custom domains if needed
1106
- 5. ✅ Enable HTTPS (automatic with Vercel)
1107
- 6. ✅ Monitor deployment health
1108
- 7. ✅ Disable Vercel authentication for public docs
1109
- 8. ✅ Commit documentation changes before deploying
1110
-
1111
- ## Common Issues and Solutions
1112
-
1113
- ### Issue 1: Claude Not Following Standards
1114
- **Solution**: Refine CLAUDE.md with more specific examples and explicit requirements
1115
-
1116
- ### Issue 2: Documentation Build Fails
1117
- **Solution**: Check markdown syntax, ensure all links are valid, verify mermaid syntax
1118
-
1119
- ### Issue 3: Vercel Deployment Issues
1120
- **Solution**: Check vercel.json configuration, ensure output directory is correct
1121
-
1122
- ### Issue 4: Navigation Not Generated
1123
- **Solution**: Verify folder structure follows conventions, check for special characters in filenames
1124
-
1125
- ## Conclusion
1126
-
1127
- This workflow enables efficient, high-quality documentation creation by:
1128
- - Leveraging Claude&#39;s capabilities with clear guidelines
1129
- - Using doc-builder for beautiful, searchable output
1130
- - Deploying seamlessly to Vercel for instant access
1131
- - Maintaining consistency through CLAUDE.md refinements
1132
-
1133
- The key to success is iterative refinement of your CLAUDE.md file to capture your team&#39;s specific documentation needs and standards.
1134
-
1135
- ## Document History
1136
-
1137
- | Date | Author | Changes |
1138
- |------|--------|---------|
1139
- | 2025-07-21 | Claude | Initial creation |
1140
- | 2025-07-23 | Lindsay Smith | Added section on environment facts for accurate content generation |
1141
- </code></pre>
1142
-
1143
- </div>
1144
- </main>
1145
- </div>
1146
-
1147
- <!-- Scripts -->
1148
- <script>
1149
- // Pass configuration to frontend
1150
- window.docBuilderConfig = {
1151
- features: {
1152
- showPdfDownload: true,
1153
- menuDefaultOpen: false,
1154
- mermaidEnhanced: true
1155
- }
1156
- };
1157
- </script>
1158
- <script src="../js/main.js"></script>
1159
-
1160
- </body>
1161
- </html>