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