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