CM DocKit: Knowledge Systematization Engine โ
A professional knowledge systematization engine powered by codebase analysis and UX design principles. One source scan = one complete knowledge base โ Personas, JTBD, Process Flows, Technical Docs, SOPs, API Reference. Supports plain Markdown output or a premium VitePress site. Includes SEO optimization, sitemap generation, and AI/LLM-readable content.
When to Activate โ
- User asks to "create documentation", "generate docs"
- User mentions "SOP", "user guide", "manual"
- User wants technical docs from a codebase
- User runs
/DocKit Master
Document Types โ
| Type | Skill File | Description |
|---|---|---|
| knowledge | skills/persona-builder.md + skills/jtbd-analyzer.md + skills/flow-mapper.md (files pending) | Personas, JTBD, Process Flows โ knowledge foundation |
| tech | skills/tech-docs.md | Architecture, database, deployment, data flow |
| sop | skills/sop-guide.md | Step-by-step user guides (enriched with knowledge) |
| api | skills/api-reference.md | API endpoint reference with examples |
| all | All above | Full knowledge base + documentation suite |
| Support Skill | File | Purpose |
|---|---|---|
| SEO Checklist | skills/seo-checklist.md | Per-page SEO audit (title, meta, headings, robots) |
| Content Writing | skills/content-writing.md | SEO copywriting, keywords, active voice, FAQ |
| LLM Optimization | skills/llm-optimization.md | AI-readable structure, NotebookLM-friendly |
Output Formats โ
| Format | Workflow | Description |
|---|---|---|
| markdown | workflows/export-markdown.md | Plain .md files in docs/ folder |
| vitepress | workflows/setup-vitepress.md | Premium VitePress static site (default) โ built-in Mermaid, search, dark mode |
Procedure โ
Step 1: Gather Input (Single Consolidated Prompt) โ
CRITICAL: Ask ALL questions in ONE message. Do NOT ask one at a time. Present the following intake form to the user, using this ๐ DocKit Master โ Configuration
Please answer the following questions so I can automatically create an execution plan:
| # | Question | Options | Default |
|---|---|---|---|
| 1 | ๐ Document type? | knowledge ยท tech ยท sop ยท api ยท all | all |
| 2 | ๐จ Output format? | markdown (plain) ยท vitepress (premium site) | vitepress |
| 3 | ๐ Code scan scope? | full (entire project) ยท focused (specific folder/feature) | full |
| 4 | ๐ฏ Focus area? (only if focused) | Folder name, module, or specific feature | โ |
| 5 | ๐ Writing language? | Auto-detect from chat language (see below) | auto-detect |
| 6 | ๐ Add multi-language? | yes (add English + source language) ยท no | no |
| 7 | ๐น Record video demo? | yes (record browser walkthrough) ยท no | no |
| 8 | ๐ Project path? | (absolute path) | current workspace |
| 9 | ๐ SEO optimization? | yes (SEO frontmatter + checklist + sitemap) ยท no | yes |
| 10 | ๐ค Optimize for AI/LLM? | yes (AI-readable + NotebookLM sitemap) ยท no | yes |
You can answer briefly, e.g.: "all, vitepress, full, yes, no, yes, yes"
๐ Smart language rules:
- Auto-detect: Determine default language from the user's chat language
- User chats in Vietnamese โ default
vi - User chats in Chinese โ default
zh - User chats in Japanese โ default
ja - User chats in English โ default
en - (Applies similarly for any other language)
- User chats in Vietnamese โ default
- Multi-language (
yes): Automatically add English (en) as secondary language- Example: Vietnamese user + multi-language โ
vi+en - Example: Chinese user + multi-language โ
zh+en - If user already chats in English + multi-language โ ask which secondary language
- Example: Vietnamese user + multi-language โ
- Override: User can override by specifying explicitly, e.g.: "write in Japanese"
Step 1b: Auto-Generate Execution Plan โ
After receiving answers, immediately create an execution plan (do NOT ask more questions).
Map the answers to this execution config:
DOC_TYPE = [knowledge | tech | sop | api | all]
FORMAT = [markdown | vitepress]
SCOPE = [full | focused]
FOCUS_TARGET = [directory/module name if focused, else null]
LANGUAGE = [vi | en | vi+en]
I18N = [yes | no] (only relevant for vitepress)
RECORD = [yes | no]
PROJECT_PATH = [absolute path]
SEO = [yes | no] (default: yes)
LLM_OPTIMIZE = [yes | no] (default: yes)Then present the plan to user as a checklist artifact, like:
## ๐ Execution Plan
- [ ] Scan code: [full/focused โ target]
- [ ] Generate documents: [type] in [language]
- [ ] Export format: [markdown/vitepress]
- [ ] [If vitepress + i18n] Configure multi-language
- [ ] [If record] Record video walkthrough
- [ ] [If seo] Run SEO checklist + generate sitemap
- [ ] [If llm_optimize] Apply LLM optimization rules
- [ ] Review and deliverAfter presenting the plan โ proceed to Step 2 immediately (auto-execute). Do NOT wait for approval unless the plan has ambiguity.
Step 2: Analyze Codebase โ
Read and follow skills/analyze-codebase.md in this directory.
Output: structured analysis saved to docs/analysis.md (NOT _analysis.md) including:
- Project type, languages, frameworks
- Directory structure and architecture layers
- Entry points, routes, database schema
- Key business logic modules
- Dependencies overview
- Test coverage
Step 3: Apply Content Guidelines โ
MANDATORY โ Read skills/content-guidelines.md before generating any content.
Key rules to enforce:
- Filenames: kebab-case, no underscores, no dots
- Frontmatter: Every
.mdfile must havetitle,description,keywords,robots - Quick Reference: Every doc starts with a summary box
- Progressive Disclosure: Use
<details>for advanced content - Admonitions: Use
:::tip,:::info,:::warning,:::dangerfor callouts - Mermaid: NO hardcoded colors โ VitePress auto-adapts to light/dark
- Code Groups: Use
:::code-groupfor multi-platform examples - Internal Links: โฅ2 cross-links per page
Step 3b: Apply SEO & LLM Guidelines (If enabled) โ
If SEO = yes: Read skills/content-writing.md for:
- Keyword placement (title, H1, first paragraph, H2s, meta)
- Inverted pyramid structure (answer first, details later)
- Active voice (โฅ80%), transition words (โฅ30%)
- FAQ in schema-ready format for rich snippets
If LLM_OPTIMIZE = yes: Read skills/llm-optimization.md for:
- Clean heading hierarchy (no skipped levels)
- Text descriptions alongside all Mermaid diagrams
- Self-contained sections (โค500 words per H2)
- Consistent terminology (glossary section in index)
- UTF-8 clean output
Step 4: Generate Documents โ
Based on the chosen type, read and follow the corresponding skill file:
knowledge โ Run 3 skills sequentially:
- Read
skills/persona-builder.mdโdocs/personas/(Buyer & User Personas) - Read
skills/jtbd-analyzer.mdโdocs/jtbd/(JTBD Canvases) - Read
skills/flow-mapper.mdโdocs/flows/(Workflow, Sequence, Lifecycle, Journey)
- Read
tech โ Read
skills/tech-docs.md, generate:docs/architecture.mdโ System architecture + ADRdocs/database.mdโ Database schema & data modeldocs/deployment.mdโ Deployment & infrastructuredocs/data-flow.mdโ Data flow diagrams
sop โ Auto-run
knowledgefirst if not yet generated, then:- Read
skills/sop-guide.md, generate: docs/sop/โ One.mdper feature/module- Each file: Persona Context โ Process Flow โ Steps โ Journey โ Troubleshooting โ FAQ
- Read
api โ Read
skills/api-reference.md, generate:docs/api/โ Organized by resource- Each file: Quick Ref โ Endpoints table โ Multi-language examples
all โ Run
knowledgeโtechโsopโapisequentially
Step 5: Export โ
Based on the chosen format, read and follow the corresponding workflow:
markdown โ Read
workflows/export-markdown.md- Create
docs/README.mdas index - Organize into clean folder structure
- Create
vitepress โ Read
workflows/setup-vitepress.md- Scaffold VitePress with premium template
- Auto-sidebar from folder structure
- Built-in Mermaid, search, dark mode
- Build and verify
Step 5b: Generate Sitemap (If SEO = yes) โ
Read and follow workflows/generate-sitemap.md:
- VitePress: Sitemap auto-generated via
sitemapconfig option. Generaterobots.txt, extractsitemap-urls.txt - Markdown: Generate
docs/sitemap.md(link index) +docs/sitemap-urls.txt - Both formats produce a NotebookLM-ready URL list for AI research
Step 5c: Run SEO Audit (If SEO = yes) โ
Read skills/seo-checklist.md and audit every generated page:
- Title (50โ60 chars, keyword) โ๏ธ
- Meta description (150โ160 chars) โ๏ธ
- Single H1, no skipped levels โ๏ธ
- โฅ2 internal links โ๏ธ
- Robots directive set โ๏ธ
- All images have alt text โ๏ธ
Step 6: Summary โ
Present to user:
- List of generated files with sizes
- How to view/serve the docs
- Next steps (customize, deploy, etc.)
If generated docs > 30 files, also suggest:
๐ก **Pro Tip: Deep Search**
The documentation set just created has [X] files. You can index them using
[qmd](https://github.com/tobi/qmd) for semantic search by AI
across all future sessions:
\`\`\`bash
npm install -g @tobilu/qmd
qmd collection add ./docs --name project-docs
qmd context add qmd://project-docs "Project documentation for [project-name]"
qmd embed
\`\`\`
See also: `cm-deep-search` skill.CLI Quick Start โ
For a fast interactive experience, users can run the doc generation script from the skill root:
# Run from the cm-dockit skill directory
bash scripts/doc-gen.shNote: The
scripts/directory anddoc-gen.shscript need to be created. For now, trigger this skill by invokingcm-dockitdirectly via the AI assistant.
UX Principles Applied โ
| UX Law | Application |
|---|---|
| Hick's Law | โค7 TOC items, progressive disclosure for advanced content |
| Miller's Law | Information chunked into groups of 5-9 |
| Doherty Threshold | Tables for structured data, scannable summaries |
| Jakob's Law | Standard doc layout (sidebar + content + TOC) |
| Fitts's Law | Touch-friendly navbar links (โฅ44px) |
| WCAG 2.1 AA | Focus-visible rings, high contrast, reduced motion |
Constraints โ
- All Mermaid diagrams use NO hardcoded inline styles โ VitePress theming handles light/dark
- Every technical claim cites
(file_path:line_number) - SOP docs use
<details>for troubleshooting (progressive disclosure) - All generated files include YAML frontmatter with
title,description - Pure Markdown โ no MDX, no special escaping needed
- No underscore-prefixed filenames โ breaks auto-sidebar detection
- VitePress output must pass
npx vitepress buildwithout errors - SEO default:
robots: "index, follow"unless page is internal/draft - โฅ2 internal links per page (never orphan pages)
- Text fallback for every Mermaid diagram (LLM readability)
- Self-contained sections โ each H2 makes sense read alone
sitemap-urls.txtgenerated for NotebookLM import
CM DocKit Development Rules โ
If you are an AI agent asked to modify or upgrade this skill (CM DocKit):
- Test Gate Enforcement: You MUST run the backend test suite located in the
cm-dockitskill directory by executing$ npm run test:gateor$ vitest. Do NOT claim "task completed" unless tests pass. - Boilerplate Integrity: If modifying
templates/vitepress-premium, ensure the frontend test suite (tests/frontend.test.ts) still works. - No Direct Copying: Never hardcode file-copy commands that copy
[project_root]/docs/content intodocs-site/. Always rely onsrcDir: '../docs'inconfig.mts.