@knowcode/doc-builder 1.5.17 → 1.5.19
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 +20 -0
- package/CLAUDE.md +3 -0
- package/assets/css/notion-style.css +13 -1
- package/html/README.html +3 -3
- package/html/css/notion-style.css +14 -0
- package/html/documentation-index.html +3 -3
- package/html/guides/authentication-guide.html +3 -3
- package/html/guides/claude-workflow-guide.html +375 -43
- package/html/guides/documentation-standards.html +3 -3
- package/html/guides/google-site-verification-guide.html +3 -3
- package/html/guides/phosphor-icons-guide.html +3 -3
- package/html/guides/seo-guide.html +3 -3
- package/html/guides/seo-optimization-guide.html +3 -3
- package/html/guides/troubleshooting-guide.html +3 -3
- package/html/guides/windows-setup-guide.html +130 -34
- package/html/index.html +3 -3
- package/html/sitemap.xml +17 -17
- package/html/vercel-cli-setup-guide.html +3 -3
- package/html/vercel-first-time-setup-guide.html +3 -3
- package/package.json +1 -1
- package/publish.sh +138 -20
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,26 @@ All notable changes to @knowcode/doc-builder will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.5.19] - 2025-07-22
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
- Force table cells to top-align with !important CSS
|
|
12
|
+
- Added !important to vertical-align: top for th and td elements
|
|
13
|
+
- Added explicit table th/td rules with !important
|
|
14
|
+
- Added rules for nested elements in table cells
|
|
15
|
+
- Fixes issue where table cells were center-aligned instead of top-aligned
|
|
16
|
+
|
|
17
|
+
## [1.5.18] - 2025-07-22
|
|
18
|
+
|
|
19
|
+
### Documentation
|
|
20
|
+
- Enhanced Claude + CLAUDE.md Documentation Workflow Guide with comprehensive examples
|
|
21
|
+
- Expanded Project-Level CLAUDE.md section with complete template and best practices
|
|
22
|
+
- Added detailed document structure, naming conventions, and content requirements
|
|
23
|
+
- Included information verification standards with ✅/❓ marks
|
|
24
|
+
- Expanded Global CLAUDE.md best practices with real-world examples
|
|
25
|
+
- Enhanced project-specific instructions for API, testing, and deployment docs
|
|
26
|
+
- Updated best practices summary with detailed guidelines for documentation maintenance
|
|
27
|
+
|
|
8
28
|
## [1.5.17] - 2025-07-22
|
|
9
29
|
|
|
10
30
|
### Changed
|
package/CLAUDE.md
CHANGED
|
@@ -315,6 +315,9 @@ MIT License - See LICENSE file for details
|
|
|
315
315
|
### NPM Features Documentation
|
|
316
316
|
- When we add new features - add it to the NPM documented bullet point features - if its a big feature give it a section
|
|
317
317
|
|
|
318
|
+
## Publishing Memories
|
|
319
|
+
- Note how to publish the npm and that there is a @publish.sh script to help
|
|
320
|
+
|
|
318
321
|
---
|
|
319
322
|
|
|
320
323
|
**Note**: This project was extracted from the cybersolstice monorepo on 2025-07-21 with full git history preservation.
|
|
@@ -682,13 +682,25 @@ th {
|
|
|
682
682
|
background: var(--color-bg-secondary);
|
|
683
683
|
border-bottom: 1px solid var(--color-border-default);
|
|
684
684
|
color: var(--color-text-primary);
|
|
685
|
-
vertical-align: top;
|
|
685
|
+
vertical-align: top !important;
|
|
686
686
|
}
|
|
687
687
|
|
|
688
688
|
td {
|
|
689
689
|
padding: var(--space-3) var(--space-4);
|
|
690
690
|
border-bottom: 1px solid var(--color-border-default);
|
|
691
691
|
color: var(--color-text-primary);
|
|
692
|
+
vertical-align: top !important;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
/* Ensure all table cell content is top-aligned */
|
|
696
|
+
table th,
|
|
697
|
+
table td {
|
|
698
|
+
vertical-align: top !important;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
/* Ensure nested elements in table cells don't affect alignment */
|
|
702
|
+
table td > *,
|
|
703
|
+
table th > * {
|
|
692
704
|
vertical-align: top;
|
|
693
705
|
}
|
|
694
706
|
|
package/html/README.html
CHANGED
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-
|
|
66
|
-
"dateModified": "2025-07-
|
|
65
|
+
"datePublished": "2025-07-22T16:04:34.100Z",
|
|
66
|
+
"dateModified": "2025-07-22T16:04:34.100Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/README.html"
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
<div class="header-actions">
|
|
98
98
|
<div class="deployment-info">
|
|
99
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
99
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.19">Last updated: Jul 22, 2025, 04:04 PM UTC</span>
|
|
100
100
|
</div>
|
|
101
101
|
|
|
102
102
|
|
|
@@ -682,12 +682,26 @@ th {
|
|
|
682
682
|
background: var(--color-bg-secondary);
|
|
683
683
|
border-bottom: 1px solid var(--color-border-default);
|
|
684
684
|
color: var(--color-text-primary);
|
|
685
|
+
vertical-align: top !important;
|
|
685
686
|
}
|
|
686
687
|
|
|
687
688
|
td {
|
|
688
689
|
padding: var(--space-3) var(--space-4);
|
|
689
690
|
border-bottom: 1px solid var(--color-border-default);
|
|
690
691
|
color: var(--color-text-primary);
|
|
692
|
+
vertical-align: top !important;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
/* Ensure all table cell content is top-aligned */
|
|
696
|
+
table th,
|
|
697
|
+
table td {
|
|
698
|
+
vertical-align: top !important;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
/* Ensure nested elements in table cells don't affect alignment */
|
|
702
|
+
table td > *,
|
|
703
|
+
table th > * {
|
|
704
|
+
vertical-align: top;
|
|
691
705
|
}
|
|
692
706
|
|
|
693
707
|
tr:last-child td {
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-
|
|
66
|
-
"dateModified": "2025-07-
|
|
65
|
+
"datePublished": "2025-07-22T16:04:34.110Z",
|
|
66
|
+
"dateModified": "2025-07-22T16:04:34.110Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/documentation-index.html"
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
<div class="header-actions">
|
|
98
98
|
<div class="deployment-info">
|
|
99
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
99
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.19">Last updated: Jul 22, 2025, 04:04 PM UTC</span>
|
|
100
100
|
</div>
|
|
101
101
|
|
|
102
102
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-
|
|
66
|
-
"dateModified": "2025-07-
|
|
65
|
+
"datePublished": "2025-07-22T16:04:34.113Z",
|
|
66
|
+
"dateModified": "2025-07-22T16:04:34.113Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/authentication-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.19">Last updated: Jul 22, 2025, 04:04 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<title>Claude + CLAUDE.md Documentation Workflow Guide</title>
|
|
8
8
|
|
|
9
9
|
<meta name="author" content="Lindsay Smith">
|
|
10
|
-
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude,
|
|
10
|
+
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude, error">
|
|
11
11
|
<meta name="robots" content="index, follow">
|
|
12
12
|
<link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
|
|
13
13
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-
|
|
66
|
-
"dateModified": "2025-07-
|
|
65
|
+
"datePublished": "2025-07-22T16:04:34.123Z",
|
|
66
|
+
"dateModified": "2025-07-22T16:04:34.123Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.19">Last updated: Jul 22, 2025, 04:04 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -203,54 +203,341 @@
|
|
|
203
203
|
</div>
|
|
204
204
|
<h2>Step 1: Setting Up CLAUDE.md</h2>
|
|
205
205
|
<h3>1.1 Project-Level CLAUDE.md</h3>
|
|
206
|
-
<p>Create a <code>CLAUDE.md</code> file in your project root with specific instructions for documentation:</p>
|
|
206
|
+
<p>Create a comprehensive <code>CLAUDE.md</code> file in your project root with specific instructions for documentation. Here's a complete example based on best practices:</p>
|
|
207
207
|
<pre><code class="language-markdown"># CLAUDE.md - [Your Project Name]
|
|
208
208
|
|
|
209
|
+
This file provides comprehensive guidance for Claude Code when working in this project.
|
|
210
|
+
|
|
211
|
+
## Project Overview
|
|
212
|
+
|
|
213
|
+
**Name**: Your Project
|
|
214
|
+
**Purpose**: Brief description of what your project does
|
|
215
|
+
**Technology Stack**: List your key technologies (e.g., Node.js, React, AWS)
|
|
216
|
+
|
|
209
217
|
## Documentation Standards
|
|
210
218
|
|
|
219
|
+
### Document Title Format
|
|
220
|
+
- Use `# Document Title`
|
|
221
|
+
- Include metadata:
|
|
222
|
+
- **Generated**: YYYY-MM-DD HH:MM UTC
|
|
223
|
+
- **Status**: Draft/In Progress/Complete
|
|
224
|
+
- **Verified**: <i class="ph ph-check-circle" aria-label="checked"></i> (for verified information) / <i class="ph ph-question" aria-label="question"></i> (for speculated information)
|
|
225
|
+
|
|
211
226
|
### Document Structure
|
|
212
227
|
- All documentation goes in the `/docs` directory
|
|
213
|
-
- Use hierarchical folder structure
|
|
214
|
-
-
|
|
228
|
+
- Use hierarchical folder structure:
|
|
229
|
+
- `docs/guides/` - How-to guides and tutorials
|
|
230
|
+
- `docs/api/` - API reference documentation
|
|
231
|
+
- `docs/architecture/` - System design and architecture
|
|
232
|
+
- `docs/deployment/` - Deployment and operations guides
|
|
233
|
+
- `docs/troubleshooting/` - Common issues and solutions
|
|
234
|
+
|
|
235
|
+
### Naming Conventions
|
|
236
|
+
- Analysis documents: `analysis-{topic}-{specifics}.md`
|
|
237
|
+
- Design documents: `design-{component}-{feature}.md`
|
|
238
|
+
- Implementation plans: `plan-{feature}-implementation.md`
|
|
239
|
+
- Technical guides: `{component}-{topic}-guide.md`
|
|
240
|
+
- API docs: `api-{service}-reference.md`
|
|
241
|
+
- Testing documents: `test-{component}-{type}.md`
|
|
215
242
|
|
|
216
243
|
### Content Requirements
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
-
|
|
220
|
-
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
244
|
+
|
|
245
|
+
#### 1. Mermaid Diagrams
|
|
246
|
+
- Include diagrams wherever they help explain complex concepts
|
|
247
|
+
- Use consistent node naming and styling
|
|
248
|
+
- Add clear labels and descriptions
|
|
249
|
+
- Example:
|
|
250
|
+
<div class="mermaid-wrapper">
|
|
251
|
+
<div class="mermaid">graph TD
|
|
252
|
+
A[User Request] --> B{Authentication}
|
|
253
|
+
B -->|Valid| C[Process Request]
|
|
254
|
+
B -->|Invalid| D[Return 401]
|
|
255
|
+
C --> E[Return Response]</div>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
#### 2. Information Verification
|
|
259
|
+
- Mark all information as either verified (<i class="ph ph-check-circle" aria-label="checked"></i>) or speculated (<i class="ph ph-question" aria-label="question"></i>)
|
|
260
|
+
- Include sources for verified information
|
|
261
|
+
- Clearly indicate assumptions
|
|
262
|
+
- Example:
|
|
263
|
+
- <i class="ph ph-check-circle" aria-label="checked"></i> This API endpoint requires authentication (verified in auth.js:45)
|
|
264
|
+
- <i class="ph ph-question" aria-label="question"></i> Response time should be under 200ms (performance requirement assumed)
|
|
265
|
+
|
|
266
|
+
#### 3. Code Examples
|
|
267
|
+
- Use proper syntax highlighting with language identifiers
|
|
268
|
+
- Include context and explanations
|
|
269
|
+
- Show both correct and incorrect usage where applicable
|
|
270
|
+
- Add error handling in examples
|
|
271
|
+
- Example:
|
|
272
|
+
```javascript
|
|
273
|
+
// <i class="ph ph-check-circle" aria-label="checked"></i> Correct way to call the API
|
|
274
|
+
try {
|
|
275
|
+
const response = await api.getData({ userId: 123 });
|
|
276
|
+
console.log('Data:', response.data);
|
|
277
|
+
} catch (error) {
|
|
278
|
+
console.error('API Error:', error.message);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
// <i class="ph ph-x-circle" aria-label="error"></i> Incorrect - missing error handling
|
|
282
|
+
const response = await api.getData({ userId: 123 });
|
|
283
|
+
</code></pre>
|
|
284
|
+
<h4>4. Practical Examples</h4>
|
|
285
|
+
<ul>
|
|
286
|
+
<li>Include real-world scenarios</li>
|
|
287
|
+
<li>Show complete workflows</li>
|
|
288
|
+
<li>Add curl/httpie examples for APIs</li>
|
|
289
|
+
<li>Include sample data</li>
|
|
290
|
+
</ul>
|
|
291
|
+
<h3>Writing Style</h3>
|
|
292
|
+
<ul>
|
|
293
|
+
<li>Use clear, concise language</li>
|
|
294
|
+
<li>Write for your audience's technical level</li>
|
|
295
|
+
<li>Use active voice</li>
|
|
296
|
+
<li>Keep paragraphs short (3-4 sentences)</li>
|
|
297
|
+
<li>Use bullet points for lists</li>
|
|
298
|
+
<li>Bold important terms on first use</li>
|
|
299
|
+
</ul>
|
|
300
|
+
<h3>Standard Sections</h3>
|
|
301
|
+
<p>Every technical document should include:</p>
|
|
302
|
+
<ol>
|
|
303
|
+
<li><strong>Overview</strong> - Brief description of the topic</li>
|
|
304
|
+
<li><strong>Prerequisites</strong> - What the reader needs to know/have</li>
|
|
305
|
+
<li><strong>Main Content</strong> - The core information</li>
|
|
306
|
+
<li><strong>Examples</strong> - Practical demonstrations</li>
|
|
307
|
+
<li><strong>Troubleshooting</strong> - Common issues and solutions</li>
|
|
308
|
+
<li><strong>References</strong> - Links to related documentation</li>
|
|
309
|
+
</ol>
|
|
310
|
+
<h3>Tables and Structured Data</h3>
|
|
311
|
+
<p>Use tables for comparing options or listing properties:</p>
|
|
312
|
+
<table>
|
|
313
|
+
<thead>
|
|
314
|
+
<tr>
|
|
315
|
+
<th>Property</th>
|
|
316
|
+
<th>Type</th>
|
|
317
|
+
<th>Required</th>
|
|
318
|
+
<th>Description</th>
|
|
319
|
+
</tr>
|
|
320
|
+
</thead>
|
|
321
|
+
<tbody><tr>
|
|
322
|
+
<td>id</td>
|
|
323
|
+
<td>string</td>
|
|
324
|
+
<td>Yes</td>
|
|
325
|
+
<td>Unique identifier</td>
|
|
326
|
+
</tr>
|
|
327
|
+
<tr>
|
|
328
|
+
<td>name</td>
|
|
329
|
+
<td>string</td>
|
|
330
|
+
<td>Yes</td>
|
|
331
|
+
<td>Display name</td>
|
|
332
|
+
</tr>
|
|
333
|
+
<tr>
|
|
334
|
+
<td>active</td>
|
|
335
|
+
<td>boolean</td>
|
|
336
|
+
<td>No</td>
|
|
337
|
+
<td>Whether the item is active</td>
|
|
338
|
+
</tr>
|
|
339
|
+
</tbody></table>
|
|
340
|
+
<h3>File Organization</h3>
|
|
341
|
+
<ul>
|
|
342
|
+
<li>Active files in appropriate directories</li>
|
|
343
|
+
<li>Move unused files to <code>archive/</code> with descriptive names</li>
|
|
344
|
+
<li>Temporary files must include "temp" in filename</li>
|
|
345
|
+
<li>Example structure:<pre><code>docs/
|
|
346
|
+
├── guides/
|
|
347
|
+
│ ├── setup-guide.md
|
|
348
|
+
│ └── deployment-guide.md
|
|
349
|
+
├── api/
|
|
350
|
+
│ └── rest-api-reference.md
|
|
351
|
+
└── archive/
|
|
352
|
+
└── old-setup-guide-2024.md
|
|
229
353
|
</code></pre>
|
|
230
|
-
|
|
354
|
+
</li>
|
|
355
|
+
</ul>
|
|
356
|
+
<h2>Git and Version Control</h2>
|
|
357
|
+
<h3>Commit Practices</h3>
|
|
358
|
+
<ul>
|
|
359
|
+
<li>Commit after material changes or milestones</li>
|
|
360
|
+
<li>Use descriptive commit messages</li>
|
|
361
|
+
<li>Group related changes</li>
|
|
362
|
+
<li>Format: <code>type: Brief description</code></li>
|
|
363
|
+
<li>Types: feat, fix, docs, style, refactor, test, chore</li>
|
|
364
|
+
</ul>
|
|
365
|
+
<h3>Documentation Updates</h3>
|
|
366
|
+
<ul>
|
|
367
|
+
<li>Update documentation when code changes</li>
|
|
368
|
+
<li>Keep CHANGELOG.md current</li>
|
|
369
|
+
<li>Document breaking changes prominently</li>
|
|
370
|
+
</ul>
|
|
371
|
+
<h2>Quality Standards</h2>
|
|
372
|
+
<h3>Completeness</h3>
|
|
373
|
+
<ul>
|
|
374
|
+
<li>Cover all aspects of the topic</li>
|
|
375
|
+
<li>Include edge cases</li>
|
|
376
|
+
<li>Document error scenarios</li>
|
|
377
|
+
<li>Add performance considerations</li>
|
|
378
|
+
</ul>
|
|
379
|
+
<h3>Accuracy</h3>
|
|
380
|
+
<ul>
|
|
381
|
+
<li>Verify technical details</li>
|
|
382
|
+
<li>Test all code examples</li>
|
|
383
|
+
<li>Review with subject matter experts</li>
|
|
384
|
+
<li>Update when implementation changes</li>
|
|
385
|
+
</ul>
|
|
386
|
+
<h3>Maintenance</h3>
|
|
387
|
+
<ul>
|
|
388
|
+
<li>Review documentation quarterly</li>
|
|
389
|
+
<li>Update version numbers</li>
|
|
390
|
+
<li>Check for broken links</li>
|
|
391
|
+
<li>Verify code examples still work</li>
|
|
392
|
+
</ul>
|
|
393
|
+
<h2>Special Considerations</h2>
|
|
394
|
+
<h3>Security</h3>
|
|
395
|
+
<ul>
|
|
396
|
+
<li>Never include credentials or sensitive data</li>
|
|
397
|
+
<li>Document security requirements</li>
|
|
398
|
+
<li>Include authentication examples without real tokens</li>
|
|
399
|
+
<li>Note security best practices</li>
|
|
400
|
+
</ul>
|
|
401
|
+
<h3>Performance</h3>
|
|
402
|
+
<ul>
|
|
403
|
+
<li>Document performance implications</li>
|
|
404
|
+
<li>Include benchmarks where relevant</li>
|
|
405
|
+
<li>Note resource requirements</li>
|
|
406
|
+
<li>Add optimization tips</li>
|
|
407
|
+
</ul>
|
|
408
|
+
<h3>Accessibility</h3>
|
|
409
|
+
<ul>
|
|
410
|
+
<li>Use semantic markdown</li>
|
|
411
|
+
<li>Include alt text for images</li>
|
|
412
|
+
<li>Ensure good heading hierarchy</li>
|
|
413
|
+
<li>Write clear link text (not "click here")</li>
|
|
414
|
+
</ul>
|
|
415
|
+
<h2>AI-Specific Instructions</h2>
|
|
416
|
+
<p>When generating documentation:</p>
|
|
417
|
+
<ol>
|
|
418
|
+
<li><strong>Always include the metadata header</strong> with generation date and verification status</li>
|
|
419
|
+
<li><strong>Create working examples</strong> that can be copy-pasted</li>
|
|
420
|
+
<li><strong>Add troubleshooting sections</strong> for common problems</li>
|
|
421
|
+
<li><strong>Include mermaid diagrams</strong> for workflows and architectures</li>
|
|
422
|
+
<li><strong>Mark speculated information</strong> clearly with <i class="ph ph-question" aria-label="question"></i></li>
|
|
423
|
+
<li><strong>Follow the naming conventions</strong> exactly</li>
|
|
424
|
+
<li><strong>Create comprehensive content</strong> - aim for completeness over brevity</li>
|
|
425
|
+
<li><strong>Add cross-references</strong> to related documentation</li>
|
|
426
|
+
</ol>
|
|
427
|
+
<h2>Project-Specific Patterns</h2>
|
|
428
|
+
<p>[Add your project-specific patterns here, such as:]</p>
|
|
429
|
+
<ul>
|
|
430
|
+
<li>API authentication flow</li>
|
|
431
|
+
<li>Database connection patterns</li>
|
|
432
|
+
<li>Error handling conventions</li>
|
|
433
|
+
<li>Logging standards</li>
|
|
434
|
+
<li>Testing approaches</li>
|
|
435
|
+
</ul>
|
|
436
|
+
<h2>Common Code Snippets</h2>
|
|
437
|
+
<p>[Add frequently used code patterns for consistency:]</p>
|
|
438
|
+
<pre><code class="language-javascript">// Standard error handling pattern
|
|
439
|
+
function handleError(error) {
|
|
440
|
+
logger.error('Operation failed:', {
|
|
441
|
+
message: error.message,
|
|
442
|
+
stack: error.stack,
|
|
443
|
+
timestamp: new Date().toISOString()
|
|
444
|
+
});
|
|
445
|
+
// ... rest of error handling
|
|
446
|
+
}
|
|
447
|
+
</code></pre>
|
|
448
|
+
<h2>References</h2>
|
|
449
|
+
<ul>
|
|
450
|
+
<li><a href="/README.md">Project README</a></li>
|
|
451
|
+
<li><a href="/docs/api/">API Documentation</a></li>
|
|
452
|
+
<li><a href="/docs/architecture/">Architecture Overview</a></li>
|
|
453
|
+
<li><a href="/CONTRIBUTING.md">Contributing Guide</a></li>
|
|
454
|
+
</ul>
|
|
231
455
|
<pre><code>
|
|
456
|
+
### 1.2 Global CLAUDE.md Best Practices
|
|
457
|
+
|
|
458
|
+
Your global `~/.claude/CLAUDE.md` should include universal standards that apply to all projects. Here's an expanded example:
|
|
459
|
+
|
|
460
|
+
```markdown
|
|
461
|
+
# Global CLAUDE.md Instructions
|
|
462
|
+
|
|
463
|
+
## Universal Documentation Standards
|
|
464
|
+
|
|
465
|
+
### Visual Elements
|
|
466
|
+
- Where it makes sense, include diagrams (Mermaid preferred)
|
|
467
|
+
- Use skeleton loaders for UI components
|
|
468
|
+
- For Trello board screenshots:
|
|
469
|
+
- Save as: @docs/product-requirements/Screenshot YYYY-MM-DD at HH.MM.SS.png
|
|
470
|
+
- Ensure columns are top-justified
|
|
471
|
+
- Color-code columns by risk level
|
|
472
|
+
|
|
473
|
+
### Information Verification
|
|
474
|
+
- Mark all verified vs. speculated information as a general document standard
|
|
475
|
+
- Use <i class="ph ph-check-circle" aria-label="checked"></i> for verified information with source references
|
|
476
|
+
- Use <i class="ph ph-question" aria-label="question"></i> for assumptions or unverified information
|
|
477
|
+
|
|
478
|
+
### Development Practices
|
|
479
|
+
- Use Docker V2 for containerization
|
|
480
|
+
- Name temporary test files with "temp" in the filename
|
|
481
|
+
- Do git commits after material changes or milestones
|
|
482
|
+
- Archive unused files by moving to archive/ and renaming
|
|
483
|
+
- After debugging, suggest archiving old unused code
|
|
484
|
+
|
|
485
|
+
### Directory Organization
|
|
486
|
+
- Create all new markdown docs in the /docs directory
|
|
487
|
+
- Put documents in relevant subdirectories
|
|
488
|
+
- MD docs will always go under the /docs directory
|
|
489
|
+
- Maintain clear folder hierarchies
|
|
490
|
+
|
|
491
|
+
### Build and Deployment
|
|
492
|
+
- Carefully manage container sizes to prevent bloat
|
|
493
|
+
- Use multi-stage builds for Docker
|
|
494
|
+
- Remove unnecessary dependencies during build
|
|
495
|
+
- Leverage .dockerignore effectively
|
|
496
|
+
- Consider Alpine or slim base images
|
|
497
|
+
- Be cautious with npx vs npm caching issues
|
|
498
|
+
|
|
499
|
+
### Documentation Maintenance
|
|
500
|
+
- Always maintain a CHANGELOG.md for significant changes
|
|
501
|
+
- Check responsive breakpoints for consistency
|
|
502
|
+
- Use table approach for columns in MD files when appropriate
|
|
503
|
+
|
|
504
|
+
### Vercel-Specific
|
|
505
|
+
- For public access, disable project/deployment protection in Vercel console
|
|
506
|
+
- Remember to disable Vercel authentication for public projects
|
|
507
|
+
|
|
508
|
+
### Git Workflow
|
|
509
|
+
- Commit after every big milestone or completed major task
|
|
510
|
+
- Use descriptive commit messages
|
|
511
|
+
- Group related changes in single commits
|
|
232
512
|
</code></pre>
|
|
233
|
-
<h3>1.2 Global CLAUDE.md Best Practices</h3>
|
|
234
|
-
<p>Your global <code>~/.claude/CLAUDE.md</code> should include:</p>
|
|
235
513
|
<div class="mermaid-wrapper">
|
|
236
514
|
<div class="mermaid">graph LR
|
|
237
515
|
A[Global CLAUDE.md] --> B[Document Standards]
|
|
238
516
|
A --> C[Git Workflow]
|
|
239
517
|
A --> D[Quality Checks]
|
|
240
518
|
A --> E[Security Practices]
|
|
519
|
+
A --> F[Development Tools]
|
|
241
520
|
|
|
242
521
|
B --> B1[Naming Conventions]
|
|
243
522
|
B --> B2[Markdown Standards]
|
|
244
523
|
B --> B3[Diagram Requirements]
|
|
524
|
+
B --> B4[Verification Marks]
|
|
245
525
|
|
|
246
|
-
C --> C1[Commit
|
|
247
|
-
C --> C2[
|
|
526
|
+
C --> C1[Commit After Milestones]
|
|
527
|
+
C --> C2[Archive Unused Code]
|
|
528
|
+
C --> C3[Descriptive Messages]
|
|
248
529
|
|
|
249
|
-
D --> D1[
|
|
530
|
+
D --> D1[Responsive Testing]
|
|
250
531
|
D --> D2[Changelog Updates]
|
|
532
|
+
D --> D3[Documentation Reviews]
|
|
251
533
|
|
|
252
534
|
E --> E1[No Credentials]
|
|
253
|
-
E --> E2[Access Controls]
|
|
535
|
+
E --> E2[Access Controls]
|
|
536
|
+
E --> E3[Secure Defaults]
|
|
537
|
+
|
|
538
|
+
F --> F1[Docker V2]
|
|
539
|
+
F --> F2[Build Optimization]
|
|
540
|
+
F --> F3[Caching Strategies]</div>
|
|
254
541
|
</div>
|
|
255
542
|
<h2>Step 2: Initialize doc-builder</h2>
|
|
256
543
|
<pre><code class="language-bash"># Install doc-builder
|
|
@@ -415,18 +702,45 @@ npm run deploy:docs
|
|
|
415
702
|
- Include architecture decisions
|
|
416
703
|
- Document integration points
|
|
417
704
|
- Add performance considerations
|
|
705
|
+
- Note dependencies and version requirements
|
|
418
706
|
|
|
419
707
|
### Code Examples
|
|
420
|
-
- Use
|
|
421
|
-
- Include error handling
|
|
708
|
+
- Use the project's primary language (e.g., TypeScript, JavaScript)
|
|
709
|
+
- Include error handling in all examples
|
|
422
710
|
- Show both correct and incorrect usage
|
|
423
711
|
- Add inline comments for clarity
|
|
712
|
+
- Test all examples before including
|
|
713
|
+
- Include import statements
|
|
714
|
+
|
|
715
|
+
### API Documentation
|
|
716
|
+
- Document all public endpoints
|
|
717
|
+
- Include authentication requirements
|
|
718
|
+
- Show request/response examples
|
|
719
|
+
- Document rate limits
|
|
720
|
+
- Include error response codes
|
|
721
|
+
- Add curl examples for testing
|
|
424
722
|
|
|
425
723
|
### Diagrams
|
|
426
724
|
- Use mermaid for all flow diagrams
|
|
427
725
|
- Include sequence diagrams for APIs
|
|
428
726
|
- Add state diagrams for complex logic
|
|
429
727
|
- Create entity relationship diagrams for data models
|
|
728
|
+
- Use consistent styling and colors
|
|
729
|
+
- Add titles to all diagrams
|
|
730
|
+
|
|
731
|
+
### Testing Documentation
|
|
732
|
+
- Document test setup requirements
|
|
733
|
+
- Include example test cases
|
|
734
|
+
- Show how to run specific test suites
|
|
735
|
+
- Document mocking strategies
|
|
736
|
+
- Include performance benchmarks
|
|
737
|
+
|
|
738
|
+
### Deployment Documentation
|
|
739
|
+
- Include environment-specific configurations
|
|
740
|
+
- Document secret management
|
|
741
|
+
- Show deployment commands
|
|
742
|
+
- Include rollback procedures
|
|
743
|
+
- Document monitoring setup
|
|
430
744
|
</code></pre>
|
|
431
745
|
<h3>7.2 Documentation Templates</h3>
|
|
432
746
|
<p>Create templates in your CLAUDE.md:</p>
|
|
@@ -471,25 +785,43 @@ npm run deploy:docs
|
|
|
471
785
|
## Best Practices Summary
|
|
472
786
|
|
|
473
787
|
### Documentation Creation
|
|
474
|
-
1. <i class="ph ph-check-circle" aria-label="checked"></i> Use CLAUDE.md to maintain consistency
|
|
475
|
-
2. <i class="ph ph-check-circle" aria-label="checked"></i> Include visual diagrams for complex concepts
|
|
476
|
-
3. <i class="ph ph-check-circle" aria-label="checked"></i> Provide practical examples
|
|
477
|
-
4. <i class="ph ph-check-circle" aria-label="checked"></i> Mark verification status
|
|
478
|
-
5. <i class="ph ph-check-circle" aria-label="checked"></i> Keep documentation close to code
|
|
788
|
+
1. <i class="ph ph-check-circle" aria-label="checked"></i> Use CLAUDE.md to maintain consistency across all documentation
|
|
789
|
+
2. <i class="ph ph-check-circle" aria-label="checked"></i> Include visual diagrams (Mermaid) for complex concepts and workflows
|
|
790
|
+
3. <i class="ph ph-check-circle" aria-label="checked"></i> Provide practical, working examples that can be copy-pasted
|
|
791
|
+
4. <i class="ph ph-check-circle" aria-label="checked"></i> Mark verification status (<i class="ph ph-check-circle" aria-label="checked"></i>/<i class="ph ph-question" aria-label="question"></i>) for all technical information
|
|
792
|
+
5. <i class="ph ph-check-circle" aria-label="checked"></i> Keep documentation close to code in the /docs directory
|
|
793
|
+
6. <i class="ph ph-check-circle" aria-label="checked"></i> Include metadata headers with timestamps and status
|
|
794
|
+
7. <i class="ph ph-check-circle" aria-label="checked"></i> Add troubleshooting sections for common issues
|
|
795
|
+
8. <i class="ph ph-check-circle" aria-label="checked"></i> Cross-reference related documentation
|
|
479
796
|
|
|
480
797
|
### Claude Interaction
|
|
481
|
-
1. <i class="ph ph-check-circle" aria-label="checked"></i> Provide clear, specific requests
|
|
482
|
-
2. <i class="ph ph-check-circle" aria-label="checked"></i> Reference existing patterns
|
|
483
|
-
3. <i class="ph ph-check-circle" aria-label="checked"></i> Request iterative improvements
|
|
484
|
-
4. <i class="ph ph-check-circle" aria-label="checked"></i> Verify technical accuracy
|
|
485
|
-
5. <i class="ph ph-check-circle" aria-label="checked"></i> Ask for troubleshooting sections
|
|
798
|
+
1. <i class="ph ph-check-circle" aria-label="checked"></i> Provide clear, specific requests with expected output format
|
|
799
|
+
2. <i class="ph ph-check-circle" aria-label="checked"></i> Reference existing patterns from CLAUDE.md
|
|
800
|
+
3. <i class="ph ph-check-circle" aria-label="checked"></i> Request iterative improvements - review and refine
|
|
801
|
+
4. <i class="ph ph-check-circle" aria-label="checked"></i> Verify technical accuracy of generated content
|
|
802
|
+
5. <i class="ph ph-check-circle" aria-label="checked"></i> Ask for troubleshooting sections explicitly
|
|
803
|
+
6. <i class="ph ph-check-circle" aria-label="checked"></i> Request examples with error handling
|
|
804
|
+
7. <i class="ph ph-check-circle" aria-label="checked"></i> Specify diagram types needed (sequence, flow, state)
|
|
805
|
+
8. <i class="ph ph-check-circle" aria-label="checked"></i> Ask Claude to check its own work against CLAUDE.md standards
|
|
806
|
+
|
|
807
|
+
### Documentation Maintenance
|
|
808
|
+
1. <i class="ph ph-check-circle" aria-label="checked"></i> Update docs when code changes
|
|
809
|
+
2. <i class="ph ph-check-circle" aria-label="checked"></i> Archive outdated documentation
|
|
810
|
+
3. <i class="ph ph-check-circle" aria-label="checked"></i> Maintain CHANGELOG.md
|
|
811
|
+
4. <i class="ph ph-check-circle" aria-label="checked"></i> Review documentation quarterly
|
|
812
|
+
5. <i class="ph ph-check-circle" aria-label="checked"></i> Test all code examples
|
|
813
|
+
6. <i class="ph ph-check-circle" aria-label="checked"></i> Check for broken links
|
|
814
|
+
7. <i class="ph ph-check-circle" aria-label="checked"></i> Update version references
|
|
486
815
|
|
|
487
816
|
### Deployment
|
|
488
|
-
1. <i class="ph ph-check-circle" aria-label="checked"></i> Test locally before deploying
|
|
489
|
-
2. <i class="ph ph-check-circle" aria-label="checked"></i>
|
|
490
|
-
3. <i class="ph ph-check-circle" aria-label="checked"></i>
|
|
491
|
-
4. <i class="ph ph-check-circle" aria-label="checked"></i>
|
|
492
|
-
5. <i class="ph ph-check-circle" aria-label="checked"></i>
|
|
817
|
+
1. <i class="ph ph-check-circle" aria-label="checked"></i> Test locally before deploying (npm run dev:docs)
|
|
818
|
+
2. <i class="ph ph-check-circle" aria-label="checked"></i> Build and verify output (npm run build:docs)
|
|
819
|
+
3. <i class="ph ph-check-circle" aria-label="checked"></i> Use preview deployments first
|
|
820
|
+
4. <i class="ph ph-check-circle" aria-label="checked"></i> Configure custom domains if needed
|
|
821
|
+
5. <i class="ph ph-check-circle" aria-label="checked"></i> Enable HTTPS (automatic with Vercel)
|
|
822
|
+
6. <i class="ph ph-check-circle" aria-label="checked"></i> Monitor deployment health
|
|
823
|
+
7. <i class="ph ph-check-circle" aria-label="checked"></i> Disable Vercel authentication for public docs
|
|
824
|
+
8. <i class="ph ph-check-circle" aria-label="checked"></i> Commit documentation changes before deploying
|
|
493
825
|
|
|
494
826
|
## Common Issues and Solutions
|
|
495
827
|
|