@knowcode/doc-builder 1.5.1 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.local.json +2 -1
- package/CHANGELOG.md +18 -0
- package/README.md +0 -8
- package/assets/css/notion-style.css +56 -0
- package/assets/js/main.js +86 -0
- package/html/README.html +4 -4
- package/html/claude-workflow-guide.html +3 -3
- package/html/css/notion-style.css +56 -0
- package/html/documentation-index.html +4 -4
- package/html/guides/authentication-guide.html +4 -4
- package/html/guides/claude-workflow-guide.html +531 -0
- package/html/guides/documentation-standards.html +4 -4
- package/html/guides/seo-guide.html +4 -4
- package/html/guides/troubleshooting-guide.html +4 -4
- package/html/index.html +4 -4
- package/html/js/main.js +86 -0
- package/html/sitemap.xml +18 -12
- package/html/vercel-cli-setup-guide.html +4 -4
- package/html/vercel-first-time-setup-guide.html +4 -4
- package/package.json +1 -1
- package/knowcode-doc-builder-1.4.4.tgz +0 -0
|
@@ -0,0 +1,531 @@
|
|
|
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="Claude + CLAUDE.">
|
|
7
|
+
<title>Claude + CLAUDE.md Documentation Workflow Guide - Doc Builder</title>
|
|
8
|
+
|
|
9
|
+
<meta name="author" content="Lindsay Smith">
|
|
10
|
+
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude, workflow, step">
|
|
11
|
+
<meta name="robots" content="index, follow">
|
|
12
|
+
<link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
|
|
13
|
+
|
|
14
|
+
<!-- Open Graph / Facebook -->
|
|
15
|
+
<meta property="og:type" content="article">
|
|
16
|
+
<meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
|
|
17
|
+
<meta property="og:title" content="Claude + CLAUDE.md Documentation Workflow Guide - Doc Builder">
|
|
18
|
+
<meta property="og:description" content="Claude + CLAUDE.">
|
|
19
|
+
<meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
20
|
+
<meta property="og:site_name" content="Doc Builder">
|
|
21
|
+
<meta property="og:locale" content="en_US">
|
|
22
|
+
|
|
23
|
+
<!-- Twitter Card -->
|
|
24
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
25
|
+
<meta name="twitter:site" content="@planbbackups">
|
|
26
|
+
<meta name="twitter:creator" content="@planbbackups">
|
|
27
|
+
<meta name="twitter:title" content="Claude + CLAUDE.md Documentation Workflow Guide - Doc Builder">
|
|
28
|
+
<meta name="twitter:description" content="Claude + CLAUDE.">
|
|
29
|
+
<meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
30
|
+
|
|
31
|
+
<!-- Fonts -->
|
|
32
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
33
|
+
|
|
34
|
+
<!-- Icons -->
|
|
35
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
36
|
+
|
|
37
|
+
<!-- Mermaid -->
|
|
38
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
39
|
+
|
|
40
|
+
<!-- Styles -->
|
|
41
|
+
<link rel="stylesheet" href="/css/notion-style.css">
|
|
42
|
+
|
|
43
|
+
<!-- Favicon -->
|
|
44
|
+
<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>">
|
|
45
|
+
|
|
46
|
+
<script type="application/ld+json">
|
|
47
|
+
{
|
|
48
|
+
"@context": "https://schema.org",
|
|
49
|
+
"@type": "TechArticle",
|
|
50
|
+
"headline": "Claude + CLAUDE.md Documentation Workflow Guide",
|
|
51
|
+
"description": "Claude + CLAUDE.",
|
|
52
|
+
"author": {
|
|
53
|
+
"@type": "Person",
|
|
54
|
+
"name": "Lindsay Smith"
|
|
55
|
+
},
|
|
56
|
+
"publisher": {
|
|
57
|
+
"@type": "Organization",
|
|
58
|
+
"name": "Knowcode Ltd",
|
|
59
|
+
"url": "https://knowcode.tech"
|
|
60
|
+
},
|
|
61
|
+
"datePublished": "2025-07-22T05:55:46.719Z",
|
|
62
|
+
"dateModified": "2025-07-22T05:55:46.719Z",
|
|
63
|
+
"mainEntityOfPage": {
|
|
64
|
+
"@type": "WebPage",
|
|
65
|
+
"@id": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
|
|
66
|
+
},
|
|
67
|
+
"breadcrumb": {
|
|
68
|
+
"@type": "BreadcrumbList",
|
|
69
|
+
"itemListElement": [
|
|
70
|
+
{
|
|
71
|
+
"@type": "ListItem",
|
|
72
|
+
"position": 1,
|
|
73
|
+
"name": "Doc Builder",
|
|
74
|
+
"item": "https://doc-builder-delta.vercel.app"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"@type": "ListItem",
|
|
78
|
+
"position": 2,
|
|
79
|
+
"name": "Guides",
|
|
80
|
+
"item": "https://doc-builder-delta.vercel.app/guides/"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"@type": "ListItem",
|
|
84
|
+
"position": 3,
|
|
85
|
+
"name": "Claude Workflow Guide",
|
|
86
|
+
"item": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
</script>
|
|
92
|
+
</head>
|
|
93
|
+
<body>
|
|
94
|
+
<!-- Header -->
|
|
95
|
+
<header class="header">
|
|
96
|
+
<div class="header-content">
|
|
97
|
+
<a href="/index.html" class="logo">Doc Builder</a>
|
|
98
|
+
|
|
99
|
+
<div class="header-actions">
|
|
100
|
+
<div class="deployment-info">
|
|
101
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 22, 2025, 05:55 AM UTC</span>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
107
|
+
<i class="fas fa-moon"></i>
|
|
108
|
+
</button>
|
|
109
|
+
|
|
110
|
+
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
|
|
111
|
+
<i class="fas fa-bars"></i>
|
|
112
|
+
</button>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</header>
|
|
116
|
+
|
|
117
|
+
<!-- Preview Banner -->
|
|
118
|
+
<div id="preview-banner" class="preview-banner">
|
|
119
|
+
<div class="banner-content">
|
|
120
|
+
<i class="fas fa-exclamation-triangle banner-icon"></i>
|
|
121
|
+
<span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
|
|
122
|
+
<button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
|
|
123
|
+
<i class="fas fa-times"></i>
|
|
124
|
+
</button>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<!-- Breadcrumbs -->
|
|
129
|
+
<nav class="breadcrumbs" id="breadcrumbs">
|
|
130
|
+
<!-- Breadcrumbs will be generated by JavaScript -->
|
|
131
|
+
</nav>
|
|
132
|
+
|
|
133
|
+
<!-- Main Content -->
|
|
134
|
+
<div class="main-wrapper">
|
|
135
|
+
<!-- Sidebar -->
|
|
136
|
+
<aside class="sidebar">
|
|
137
|
+
<div class="sidebar-header">
|
|
138
|
+
<div class="filter-box">
|
|
139
|
+
<input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
|
|
140
|
+
<i class="fas fa-search filter-icon"></i>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
<nav class="navigation">
|
|
144
|
+
|
|
145
|
+
<div class="nav-section" data-level="0">
|
|
146
|
+
<a class="nav-title" href="/README.html" >
|
|
147
|
+
<i class="fas fa-home"></i> Documentation
|
|
148
|
+
</a>
|
|
149
|
+
<div class="nav-content" >
|
|
150
|
+
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
151
|
+
<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="fas fa-file-alt"></i> Documentation Index</a>
|
|
152
|
+
<a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
|
|
153
|
+
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you'll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
|
|
154
|
+
<div class="nav-section" data-level="1">
|
|
155
|
+
<a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
|
|
156
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
157
|
+
</a>
|
|
158
|
+
<div class="nav-content" id="nav-guides-1">
|
|
159
|
+
<a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
|
|
160
|
+
<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="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
161
|
+
<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="fas fa-file-alt"></i> Documentation Standards</a>
|
|
162
|
+
<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="fas fa-file-alt"></i> Seo Guide</a>
|
|
163
|
+
<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="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
|
|
164
|
+
</nav>
|
|
165
|
+
<div class="resize-handle"></div>
|
|
166
|
+
</aside>
|
|
167
|
+
|
|
168
|
+
<!-- Content Area -->
|
|
169
|
+
<main class="content">
|
|
170
|
+
<div class="content-inner">
|
|
171
|
+
<h1>Claude + CLAUDE.md Documentation Workflow Guide</h1>
|
|
172
|
+
<p><strong>Generated</strong>: 2025-07-21 10:00 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: ✅</p>
|
|
173
|
+
<h2>Overview</h2>
|
|
174
|
+
<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>
|
|
175
|
+
<h2>Workflow Overview</h2>
|
|
176
|
+
<div class="mermaid-wrapper">
|
|
177
|
+
<div class="mermaid-title">Diagram</div>
|
|
178
|
+
<div class="mermaid">graph TD
|
|
179
|
+
A[Start Project] --> B[Setup CLAUDE.md]
|
|
180
|
+
B --> C[Configure doc-builder]
|
|
181
|
+
C --> D[Create Documentation with Claude]
|
|
182
|
+
D --> E[Build Static Site]
|
|
183
|
+
E --> F[Deploy to Vercel]
|
|
184
|
+
F --> G[Live Documentation]
|
|
185
|
+
|
|
186
|
+
B -.-> H[Refine Instructions]
|
|
187
|
+
H -.-> D
|
|
188
|
+
|
|
189
|
+
D --> I{Review Quality}
|
|
190
|
+
I -->|Needs Improvement| H
|
|
191
|
+
I -->|Good| E
|
|
192
|
+
|
|
193
|
+
style A fill:#e1f5fe
|
|
194
|
+
style G fill:#c8e6c9
|
|
195
|
+
style H fill:#fff3e0</div>
|
|
196
|
+
</div>
|
|
197
|
+
<h2>Step 1: Setting Up CLAUDE.md</h2>
|
|
198
|
+
<h3>1.1 Project-Level CLAUDE.md</h3>
|
|
199
|
+
<p>Create a <code>CLAUDE.md</code> file in your project root with specific instructions for documentation:</p>
|
|
200
|
+
<pre><code class="language-markdown"># CLAUDE.md - [Your Project Name]
|
|
201
|
+
|
|
202
|
+
## Documentation Standards
|
|
203
|
+
|
|
204
|
+
### Document Structure
|
|
205
|
+
- All documentation goes in the `/docs` directory
|
|
206
|
+
- Use hierarchical folder structure for organization
|
|
207
|
+
- Follow naming convention: `{component}-{topic}-guide.md`
|
|
208
|
+
|
|
209
|
+
### Content Requirements
|
|
210
|
+
- Include mermaid diagrams for complex workflows
|
|
211
|
+
- Mark verified (✅) vs speculated (❓) information
|
|
212
|
+
- Add timestamps to all documents
|
|
213
|
+
- Include practical examples
|
|
214
|
+
|
|
215
|
+
### Writing Style
|
|
216
|
+
- Use clear, concise language
|
|
217
|
+
- Target intermediate technical audience
|
|
218
|
+
- Include code examples with syntax highlighting
|
|
219
|
+
- Add troubleshooting sections
|
|
220
|
+
|
|
221
|
+
### Metadata Format
|
|
222
|
+
</code></pre>
|
|
223
|
+
<p><strong>Generated</strong>: YYYY-MM-DD HH:MM UTC<br><strong>Status</strong>: Draft/Complete<br><strong>Verified</strong>: ✅/❓</p>
|
|
224
|
+
<pre><code>
|
|
225
|
+
</code></pre>
|
|
226
|
+
<h3>1.2 Global CLAUDE.md Best Practices</h3>
|
|
227
|
+
<p>Your global <code>~/.claude/CLAUDE.md</code> should include:</p>
|
|
228
|
+
<div class="mermaid-wrapper">
|
|
229
|
+
<div class="mermaid-title">Diagram</div>
|
|
230
|
+
<div class="mermaid">graph LR
|
|
231
|
+
A[Global CLAUDE.md] --> B[Document Standards]
|
|
232
|
+
A --> C[Git Workflow]
|
|
233
|
+
A --> D[Quality Checks]
|
|
234
|
+
A --> E[Security Practices]
|
|
235
|
+
|
|
236
|
+
B --> B1[Naming Conventions]
|
|
237
|
+
B --> B2[Markdown Standards]
|
|
238
|
+
B --> B3[Diagram Requirements]
|
|
239
|
+
|
|
240
|
+
C --> C1[Commit Frequency]
|
|
241
|
+
C --> C2[Branch Strategy]
|
|
242
|
+
|
|
243
|
+
D --> D1[Verification Marks]
|
|
244
|
+
D --> D2[Changelog Updates]
|
|
245
|
+
|
|
246
|
+
E --> E1[No Credentials]
|
|
247
|
+
E --> E2[Access Controls]</div>
|
|
248
|
+
</div>
|
|
249
|
+
<h2>Step 2: Initialize doc-builder</h2>
|
|
250
|
+
<pre><code class="language-bash"># Install doc-builder
|
|
251
|
+
npm install -D @knowcode/doc-builder
|
|
252
|
+
|
|
253
|
+
# Initialize configuration
|
|
254
|
+
npx doc-builder init
|
|
255
|
+
</code></pre>
|
|
256
|
+
<h3>2.1 Configure doc-builder.config.js</h3>
|
|
257
|
+
<pre><code class="language-javascript">module.exports = {
|
|
258
|
+
siteName: 'Your Project Documentation',
|
|
259
|
+
siteDescription: 'Comprehensive documentation for Your Project',
|
|
260
|
+
docsDir: 'docs',
|
|
261
|
+
outputDir: 'html',
|
|
262
|
+
features: {
|
|
263
|
+
authentication: false, // Set true for private docs
|
|
264
|
+
changelog: true,
|
|
265
|
+
mermaid: true,
|
|
266
|
+
darkMode: true
|
|
267
|
+
}
|
|
268
|
+
};
|
|
269
|
+
</code></pre>
|
|
270
|
+
<h2>Step 3: Documentation Creation Workflow with Claude</h2>
|
|
271
|
+
<h3>3.1 Effective Prompting Strategy</h3>
|
|
272
|
+
<div class="mermaid-wrapper">
|
|
273
|
+
<div class="mermaid-title">Diagram</div>
|
|
274
|
+
<div class="mermaid">sequenceDiagram
|
|
275
|
+
participant User
|
|
276
|
+
participant Claude
|
|
277
|
+
participant CLAUDE.md
|
|
278
|
+
participant Documentation
|
|
279
|
+
|
|
280
|
+
User->>Claude: Request documentation
|
|
281
|
+
Claude->>CLAUDE.md: Check project standards
|
|
282
|
+
CLAUDE.md-->>Claude: Return guidelines
|
|
283
|
+
Claude->>Documentation: Create/Update docs
|
|
284
|
+
Claude->>User: Confirm completion
|
|
285
|
+
User->>Claude: Review & refine
|
|
286
|
+
Claude->>Documentation: Apply refinements</div>
|
|
287
|
+
</div>
|
|
288
|
+
<h3>3.2 Example Documentation Requests</h3>
|
|
289
|
+
<h4>Initial Architecture Documentation</h4>
|
|
290
|
+
<pre><code>"Create comprehensive architecture documentation for our authentication system. Include:
|
|
291
|
+
- System overview with mermaid diagrams
|
|
292
|
+
- Component interactions
|
|
293
|
+
- API endpoints
|
|
294
|
+
- Security considerations
|
|
295
|
+
- Deployment architecture"
|
|
296
|
+
</code></pre>
|
|
297
|
+
<h4>API Documentation</h4>
|
|
298
|
+
<pre><code>"Document all REST API endpoints in our user service. For each endpoint include:
|
|
299
|
+
- HTTP method and path
|
|
300
|
+
- Request/response schemas
|
|
301
|
+
- Authentication requirements
|
|
302
|
+
- Example requests with curl
|
|
303
|
+
- Error responses"
|
|
304
|
+
</code></pre>
|
|
305
|
+
<h4>Setup Guide</h4>
|
|
306
|
+
<pre><code>"Create a detailed setup guide for new developers including:
|
|
307
|
+
- Prerequisites
|
|
308
|
+
- Environment setup steps
|
|
309
|
+
- Configuration options
|
|
310
|
+
- Common issues and solutions
|
|
311
|
+
- Development workflow"
|
|
312
|
+
</code></pre>
|
|
313
|
+
<h3>3.3 Claude Interaction Best Practices</h3>
|
|
314
|
+
<ol>
|
|
315
|
+
<li><strong>Be Specific</strong>: Provide clear requirements and expected structure</li>
|
|
316
|
+
<li><strong>Iterate</strong>: Review generated content and request refinements</li>
|
|
317
|
+
<li><strong>Verify</strong>: Ask Claude to mark verified vs speculated information</li>
|
|
318
|
+
<li><strong>Examples</strong>: Request concrete examples and code snippets</li>
|
|
319
|
+
<li><strong>Diagrams</strong>: Explicitly request mermaid diagrams for visual clarity</li>
|
|
320
|
+
</ol>
|
|
321
|
+
<h2>Step 4: Building Documentation Site</h2>
|
|
322
|
+
<h3>4.1 Development Workflow</h3>
|
|
323
|
+
<div class="mermaid-wrapper">
|
|
324
|
+
<div class="mermaid-title">Diagram</div>
|
|
325
|
+
<div class="mermaid">graph LR
|
|
326
|
+
A[Write Docs] --> B[Preview Locally]
|
|
327
|
+
B --> C{Looks Good?}
|
|
328
|
+
C -->|No| A
|
|
329
|
+
C -->|Yes| D[Build Site]
|
|
330
|
+
D --> E[Test Build]
|
|
331
|
+
E --> F{All Good?}
|
|
332
|
+
F -->|No| A
|
|
333
|
+
F -->|Yes| G[Ready to Deploy]
|
|
334
|
+
|
|
335
|
+
style A fill:#fff3e0
|
|
336
|
+
style G fill:#c8e6c9</div>
|
|
337
|
+
</div>
|
|
338
|
+
<h3>4.2 Commands</h3>
|
|
339
|
+
<pre><code class="language-bash"># Start development server
|
|
340
|
+
npm run dev:docs
|
|
341
|
+
|
|
342
|
+
# Build static site
|
|
343
|
+
npm run build:docs
|
|
344
|
+
|
|
345
|
+
# Preview built site
|
|
346
|
+
npx serve html
|
|
347
|
+
</code></pre>
|
|
348
|
+
<h2>Step 5: Deploying to Vercel</h2>
|
|
349
|
+
<h3>5.1 First-Time Setup</h3>
|
|
350
|
+
<pre><code class="language-bash"># Deploy to Vercel (interactive)
|
|
351
|
+
npx doc-builder deploy
|
|
352
|
+
|
|
353
|
+
# Or with npm script
|
|
354
|
+
npm run deploy:docs
|
|
355
|
+
</code></pre>
|
|
356
|
+
<h3>5.2 Vercel Configuration</h3>
|
|
357
|
+
<p>The tool automatically creates <code>vercel.json</code>:</p>
|
|
358
|
+
<pre><code class="language-json">{
|
|
359
|
+
"outputDirectory": "html",
|
|
360
|
+
"routes": [
|
|
361
|
+
{
|
|
362
|
+
"src": "/(.*)",
|
|
363
|
+
"dest": "/$1"
|
|
364
|
+
}
|
|
365
|
+
]
|
|
366
|
+
}
|
|
367
|
+
</code></pre>
|
|
368
|
+
<h3>5.3 Deployment Workflow</h3>
|
|
369
|
+
<div class="mermaid-wrapper">
|
|
370
|
+
<div class="mermaid-title">Diagram</div>
|
|
371
|
+
<div class="mermaid">stateDiagram-v2
|
|
372
|
+
[*] --> LocalDevelopment
|
|
373
|
+
LocalDevelopment --> BuildDocs: npm run build:docs
|
|
374
|
+
BuildDocs --> TestLocally: npx serve html
|
|
375
|
+
TestLocally --> Deploy: npx doc-builder deploy
|
|
376
|
+
Deploy --> VercelProcessing
|
|
377
|
+
VercelProcessing --> LiveSite: Success
|
|
378
|
+
VercelProcessing --> ErrorHandling: Failed
|
|
379
|
+
ErrorHandling --> LocalDevelopment: Fix issues
|
|
380
|
+
LiveSite --> [*]</div>
|
|
381
|
+
</div>
|
|
382
|
+
<h2>Step 6: Continuous Documentation Updates</h2>
|
|
383
|
+
<h3>6.1 Update Workflow</h3>
|
|
384
|
+
<div class="mermaid-wrapper">
|
|
385
|
+
<div class="mermaid-title">Diagram</div>
|
|
386
|
+
<div class="mermaid">graph TD
|
|
387
|
+
A[Code Changes] --> B{Docs Needed?}
|
|
388
|
+
B -->|Yes| C[Update Documentation]
|
|
389
|
+
B -->|No| End[End]
|
|
390
|
+
C --> D[Use Claude for Updates]
|
|
391
|
+
D --> E[Review Changes]
|
|
392
|
+
E --> F[Build & Test]
|
|
393
|
+
F --> G[Deploy Updates]
|
|
394
|
+
G --> H[Update CHANGELOG.md]
|
|
395
|
+
H --> End
|
|
396
|
+
|
|
397
|
+
style A fill:#ffebee
|
|
398
|
+
style G fill:#e8f5e9</div>
|
|
399
|
+
</div>
|
|
400
|
+
<h3>6.2 Maintaining Documentation Quality</h3>
|
|
401
|
+
<ol>
|
|
402
|
+
<li><strong>Regular Reviews</strong>: Schedule periodic documentation reviews</li>
|
|
403
|
+
<li><strong>Automated Checks</strong>: Add documentation linting to CI/CD</li>
|
|
404
|
+
<li><strong>User Feedback</strong>: Create feedback mechanism for documentation</li>
|
|
405
|
+
<li><strong>Version Tracking</strong>: Maintain documentation versions with code versions</li>
|
|
406
|
+
</ol>
|
|
407
|
+
<h2>Advanced CLAUDE.md Refinements</h2>
|
|
408
|
+
<h3>7.1 Project-Specific Instructions</h3>
|
|
409
|
+
<pre><code class="language-markdown">## Project-Specific Documentation Rules
|
|
410
|
+
|
|
411
|
+
### Component Documentation
|
|
412
|
+
- Each major component needs its own guide
|
|
413
|
+
- Include architecture decisions
|
|
414
|
+
- Document integration points
|
|
415
|
+
- Add performance considerations
|
|
416
|
+
|
|
417
|
+
### Code Examples
|
|
418
|
+
- Use TypeScript for all examples
|
|
419
|
+
- Include error handling
|
|
420
|
+
- Show both correct and incorrect usage
|
|
421
|
+
- Add inline comments for clarity
|
|
422
|
+
|
|
423
|
+
### Diagrams
|
|
424
|
+
- Use mermaid for all flow diagrams
|
|
425
|
+
- Include sequence diagrams for APIs
|
|
426
|
+
- Add state diagrams for complex logic
|
|
427
|
+
- Create entity relationship diagrams for data models
|
|
428
|
+
</code></pre>
|
|
429
|
+
<h3>7.2 Documentation Templates</h3>
|
|
430
|
+
<p>Create templates in your CLAUDE.md:</p>
|
|
431
|
+
<pre><code class="language-markdown">## Documentation Templates
|
|
432
|
+
|
|
433
|
+
### API Endpoint Template
|
|
434
|
+
</code></pre>
|
|
435
|
+
<h2>[HTTP Method] /api/[endpoint]</h2>
|
|
436
|
+
<p><strong>Purpose</strong>: [Brief description]</p>
|
|
437
|
+
<h3>Request</h3>
|
|
438
|
+
<ul>
|
|
439
|
+
<li><strong>Headers</strong>: <ul>
|
|
440
|
+
<li><code>Authorization: Bearer [token]</code></li>
|
|
441
|
+
<li><code>Content-Type: application/json</code></li>
|
|
442
|
+
</ul>
|
|
443
|
+
</li>
|
|
444
|
+
<li><strong>Body</strong>:<pre><code class="language-json">{
|
|
445
|
+
"field": "value"
|
|
446
|
+
}
|
|
447
|
+
</code></pre>
|
|
448
|
+
</li>
|
|
449
|
+
</ul>
|
|
450
|
+
<h3>Response</h3>
|
|
451
|
+
<ul>
|
|
452
|
+
<li><strong>Success (200)</strong>:<pre><code class="language-json">{
|
|
453
|
+
"data": {}
|
|
454
|
+
}
|
|
455
|
+
</code></pre>
|
|
456
|
+
</li>
|
|
457
|
+
<li><strong>Error (4xx/5xx)</strong>:<pre><code class="language-json">{
|
|
458
|
+
"error": "Description"
|
|
459
|
+
}
|
|
460
|
+
</code></pre>
|
|
461
|
+
</li>
|
|
462
|
+
</ul>
|
|
463
|
+
<h3>Examples</h3>
|
|
464
|
+
<pre><code class="language-bash">curl -X POST https://api.example.com/endpoint \
|
|
465
|
+
-H "Authorization: Bearer token" \
|
|
466
|
+
-d '{"field": "value"}'
|
|
467
|
+
</code></pre>
|
|
468
|
+
<pre><code>
|
|
469
|
+
## Best Practices Summary
|
|
470
|
+
|
|
471
|
+
### Documentation Creation
|
|
472
|
+
1. ✅ Use CLAUDE.md to maintain consistency
|
|
473
|
+
2. ✅ Include visual diagrams for complex concepts
|
|
474
|
+
3. ✅ Provide practical examples
|
|
475
|
+
4. ✅ Mark verification status
|
|
476
|
+
5. ✅ Keep documentation close to code
|
|
477
|
+
|
|
478
|
+
### Claude Interaction
|
|
479
|
+
1. ✅ Provide clear, specific requests
|
|
480
|
+
2. ✅ Reference existing patterns
|
|
481
|
+
3. ✅ Request iterative improvements
|
|
482
|
+
4. ✅ Verify technical accuracy
|
|
483
|
+
5. ✅ Ask for troubleshooting sections
|
|
484
|
+
|
|
485
|
+
### Deployment
|
|
486
|
+
1. ✅ Test locally before deploying
|
|
487
|
+
2. ✅ Use preview deployments first
|
|
488
|
+
3. ✅ Configure custom domains
|
|
489
|
+
4. ✅ Enable HTTPS
|
|
490
|
+
5. ✅ Monitor deployment health
|
|
491
|
+
|
|
492
|
+
## Common Issues and Solutions
|
|
493
|
+
|
|
494
|
+
### Issue 1: Claude Not Following Standards
|
|
495
|
+
**Solution**: Refine CLAUDE.md with more specific examples and explicit requirements
|
|
496
|
+
|
|
497
|
+
### Issue 2: Documentation Build Fails
|
|
498
|
+
**Solution**: Check markdown syntax, ensure all links are valid, verify mermaid syntax
|
|
499
|
+
|
|
500
|
+
### Issue 3: Vercel Deployment Issues
|
|
501
|
+
**Solution**: Check vercel.json configuration, ensure output directory is correct
|
|
502
|
+
|
|
503
|
+
### Issue 4: Navigation Not Generated
|
|
504
|
+
**Solution**: Verify folder structure follows conventions, check for special characters in filenames
|
|
505
|
+
|
|
506
|
+
## Conclusion
|
|
507
|
+
|
|
508
|
+
This workflow enables efficient, high-quality documentation creation by:
|
|
509
|
+
- Leveraging Claude's capabilities with clear guidelines
|
|
510
|
+
- Using doc-builder for beautiful, searchable output
|
|
511
|
+
- Deploying seamlessly to Vercel for instant access
|
|
512
|
+
- Maintaining consistency through CLAUDE.md refinements
|
|
513
|
+
|
|
514
|
+
The key to success is iterative refinement of your CLAUDE.md file to capture your team's specific documentation needs and standards.
|
|
515
|
+
|
|
516
|
+
## Document History
|
|
517
|
+
|
|
518
|
+
| Date | Author | Changes |
|
|
519
|
+
|------|--------|---------|
|
|
520
|
+
| 2025-07-21 | Claude | Initial creation |
|
|
521
|
+
</code></pre>
|
|
522
|
+
|
|
523
|
+
</div>
|
|
524
|
+
</main>
|
|
525
|
+
</div>
|
|
526
|
+
|
|
527
|
+
<!-- Scripts -->
|
|
528
|
+
<script src="/js/main.js"></script>
|
|
529
|
+
|
|
530
|
+
</body>
|
|
531
|
+
</html>
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"name": "Knowcode Ltd",
|
|
59
59
|
"url": "https://knowcode.tech"
|
|
60
60
|
},
|
|
61
|
-
"datePublished": "2025-07-
|
|
62
|
-
"dateModified": "2025-07-
|
|
61
|
+
"datePublished": "2025-07-22T05:55:46.722Z",
|
|
62
|
+
"dateModified": "2025-07-22T05:55:46.722Z",
|
|
63
63
|
"mainEntityOfPage": {
|
|
64
64
|
"@type": "WebPage",
|
|
65
65
|
"@id": "https://doc-builder-delta.vercel.app/guides/documentation-standards.html"
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
<div class="header-actions">
|
|
100
100
|
<div class="deployment-info">
|
|
101
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
101
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 22, 2025, 05:55 AM UTC</span>
|
|
102
102
|
</div>
|
|
103
103
|
|
|
104
104
|
|
|
@@ -148,7 +148,6 @@
|
|
|
148
148
|
</a>
|
|
149
149
|
<div class="nav-content" >
|
|
150
150
|
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
151
|
-
<a href="/claude-workflow-guide.html" class="nav-item" 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="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
152
151
|
<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="fas fa-file-alt"></i> Documentation Index</a>
|
|
153
152
|
<a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
|
|
154
153
|
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you'll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
|
|
@@ -158,6 +157,7 @@
|
|
|
158
157
|
</a>
|
|
159
158
|
<div class="nav-content" id="nav-guides-1">
|
|
160
159
|
<a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
|
|
160
|
+
<a href="/guides/claude-workflow-guide.html" class="nav-item" 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="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
161
161
|
<a href="/guides/documentation-standards.html" class="nav-item active" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
|
|
162
162
|
<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="fas fa-file-alt"></i> Seo Guide</a>
|
|
163
163
|
<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="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"name": "Knowcode Ltd",
|
|
59
59
|
"url": "https://knowcode.tech"
|
|
60
60
|
},
|
|
61
|
-
"datePublished": "2025-07-
|
|
62
|
-
"dateModified": "2025-07-
|
|
61
|
+
"datePublished": "2025-07-22T05:55:46.726Z",
|
|
62
|
+
"dateModified": "2025-07-22T05:55:46.726Z",
|
|
63
63
|
"mainEntityOfPage": {
|
|
64
64
|
"@type": "WebPage",
|
|
65
65
|
"@id": "https://doc-builder-delta.vercel.app/guides/seo-guide.html"
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
<div class="header-actions">
|
|
100
100
|
<div class="deployment-info">
|
|
101
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
101
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 22, 2025, 05:55 AM UTC</span>
|
|
102
102
|
</div>
|
|
103
103
|
|
|
104
104
|
|
|
@@ -148,7 +148,6 @@
|
|
|
148
148
|
</a>
|
|
149
149
|
<div class="nav-content" >
|
|
150
150
|
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
151
|
-
<a href="/claude-workflow-guide.html" class="nav-item" 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="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
152
151
|
<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="fas fa-file-alt"></i> Documentation Index</a>
|
|
153
152
|
<a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
|
|
154
153
|
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you'll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
|
|
@@ -158,6 +157,7 @@
|
|
|
158
157
|
</a>
|
|
159
158
|
<div class="nav-content" id="nav-guides-1">
|
|
160
159
|
<a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
|
|
160
|
+
<a href="/guides/claude-workflow-guide.html" class="nav-item" 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="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
161
161
|
<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="fas fa-file-alt"></i> Documentation Standards</a>
|
|
162
162
|
<a href="/guides/seo-guide.html" class="nav-item active" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
|
|
163
163
|
<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="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"name": "Knowcode Ltd",
|
|
59
59
|
"url": "https://knowcode.tech"
|
|
60
60
|
},
|
|
61
|
-
"datePublished": "2025-07-
|
|
62
|
-
"dateModified": "2025-07-
|
|
61
|
+
"datePublished": "2025-07-22T05:55:46.728Z",
|
|
62
|
+
"dateModified": "2025-07-22T05:55:46.728Z",
|
|
63
63
|
"mainEntityOfPage": {
|
|
64
64
|
"@type": "WebPage",
|
|
65
65
|
"@id": "https://doc-builder-delta.vercel.app/guides/troubleshooting-guide.html"
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
|
|
99
99
|
<div class="header-actions">
|
|
100
100
|
<div class="deployment-info">
|
|
101
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
101
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 22, 2025, 05:55 AM UTC</span>
|
|
102
102
|
</div>
|
|
103
103
|
|
|
104
104
|
|
|
@@ -148,7 +148,6 @@
|
|
|
148
148
|
</a>
|
|
149
149
|
<div class="nav-content" >
|
|
150
150
|
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
151
|
-
<a href="/claude-workflow-guide.html" class="nav-item" 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="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
152
151
|
<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="fas fa-file-alt"></i> Documentation Index</a>
|
|
153
152
|
<a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
|
|
154
153
|
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you'll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
|
|
@@ -158,6 +157,7 @@
|
|
|
158
157
|
</a>
|
|
159
158
|
<div class="nav-content" id="nav-guides-1">
|
|
160
159
|
<a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
|
|
160
|
+
<a href="/guides/claude-workflow-guide.html" class="nav-item" 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="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
161
161
|
<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="fas fa-file-alt"></i> Documentation Standards</a>
|
|
162
162
|
<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="fas fa-file-alt"></i> Seo Guide</a>
|
|
163
163
|
<a href="/guides/troubleshooting-guide.html" class="nav-item active" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
|