Skip to content

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 โ€‹

TypeSkill FileDescription
knowledgeskills/persona-builder.md + skills/jtbd-analyzer.md + skills/flow-mapper.md (files pending)Personas, JTBD, Process Flows โ€” knowledge foundation
techskills/tech-docs.mdArchitecture, database, deployment, data flow
sopskills/sop-guide.mdStep-by-step user guides (enriched with knowledge)
apiskills/api-reference.mdAPI endpoint reference with examples
allAll aboveFull knowledge base + documentation suite
Support SkillFilePurpose
SEO Checklistskills/seo-checklist.mdPer-page SEO audit (title, meta, headings, robots)
Content Writingskills/content-writing.mdSEO copywriting, keywords, active voice, FAQ
LLM Optimizationskills/llm-optimization.mdAI-readable structure, NotebookLM-friendly

Output Formats โ€‹

FormatWorkflowDescription
markdownworkflows/export-markdown.mdPlain .md files in docs/ folder
vitepressworkflows/setup-vitepress.mdPremium 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:

#QuestionOptionsDefault
1๐Ÿ“‘ Document type?knowledge ยท tech ยท sop ยท api ยท allall
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) ยท nono
7๐Ÿ“น Record video demo?yes (record browser walkthrough) ยท nono
8๐Ÿ“ Project path?(absolute path)current workspace
9๐Ÿ” SEO optimization?yes (SEO frontmatter + checklist + sitemap) ยท noyes
10๐Ÿค– Optimize for AI/LLM?yes (AI-readable + NotebookLM sitemap) ยท noyes

You can answer briefly, e.g.: "all, vitepress, full, yes, no, yes, yes"

๐ŸŒ Smart language rules:

  1. 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)
  2. 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
  3. 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:

markdown
## ๐Ÿš€ 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 deliver

After 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 .md file must have title, description, keywords, robots
  • Quick Reference: Every doc starts with a summary box
  • Progressive Disclosure: Use <details> for advanced content
  • Admonitions: Use :::tip, :::info, :::warning, :::danger for callouts
  • Mermaid: NO hardcoded colors โ€” VitePress auto-adapts to light/dark
  • Code Groups: Use :::code-group for 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:

    1. Read skills/persona-builder.md โ†’ docs/personas/ (Buyer & User Personas)
    2. Read skills/jtbd-analyzer.md โ†’ docs/jtbd/ (JTBD Canvases)
    3. Read skills/flow-mapper.md โ†’ docs/flows/ (Workflow, Sequence, Lifecycle, Journey)
  • tech โ†’ Read skills/tech-docs.md, generate:

    • docs/architecture.md โ€” System architecture + ADR
    • docs/database.md โ€” Database schema & data model
    • docs/deployment.md โ€” Deployment & infrastructure
    • docs/data-flow.md โ€” Data flow diagrams
  • sop โ†’ Auto-run knowledge first if not yet generated, then:

    • Read skills/sop-guide.md, generate:
    • docs/sop/ โ€” One .md per feature/module
    • Each file: Persona Context โ†’ Process Flow โ†’ Steps โ†’ Journey โ†’ Troubleshooting โ†’ FAQ
  • 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 โ†’ api sequentially

Step 5: Export โ€‹

Based on the chosen format, read and follow the corresponding workflow:

  • markdown โ†’ Read workflows/export-markdown.md

    • Create docs/README.md as index
    • Organize into clean folder structure
  • 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 sitemap config option. Generate robots.txt, extract sitemap-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:

markdown
๐Ÿ’ก **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:

bash
# Run from the cm-dockit skill directory
bash scripts/doc-gen.sh

Note: The scripts/ directory and doc-gen.sh script need to be created. For now, trigger this skill by invoking cm-dockit directly via the AI assistant.

UX Principles Applied โ€‹

UX LawApplication
Hick's Lawโ‰ค7 TOC items, progressive disclosure for advanced content
Miller's LawInformation chunked into groups of 5-9
Doherty ThresholdTables for structured data, scannable summaries
Jakob's LawStandard doc layout (sidebar + content + TOC)
Fitts's LawTouch-friendly navbar links (โ‰ฅ44px)
WCAG 2.1 AAFocus-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 build without 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.txt generated for NotebookLM import

CM DocKit Development Rules โ€‹

If you are an AI agent asked to modify or upgrade this skill (CM DocKit):

  1. Test Gate Enforcement: You MUST run the backend test suite located in the cm-dockit skill directory by executing $ npm run test:gate or $ vitest. Do NOT claim "task completed" unless tests pass.
  2. Boilerplate Integrity: If modifying templates/vitepress-premium, ensure the frontend test suite (tests/frontend.test.ts) still works.
  3. No Direct Copying: Never hardcode file-copy commands that copy [project_root]/docs/ content into docs-site/. Always rely on srcDir: '../docs' in config.mts.

Open Source AI Agent Skills Framework