codymaster 4.1.0

package/skills/cm-design-system/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: cm-design-system
+description: |
+  Ultimate Design System Intelligence. Manage, extract, replicate, and improve UI design systems. 
+  Extracts design tokens visually from existing sites (Harvester v5), manages multi-page tokens, and utilizes MCP servers like Google Stitch and Pencil.dev to generate complete, consistent design systems (Shadcn UI, Halo, Lunaris, Nitro).
+  Use when the user asks to "extract design from a URL", "create a Shadcn design system", "analyze design tokens", "build a design system for", or "copy the UI style of".
+---
+
+# Goal
+Establish a robust, stable, and consistent UI Design System by either extracting tokens from an existing source (Harvester mode) or scaffolding a fresh system based on premium Kits (Shadcn, Halo, Lunaris, Nitro). Output a strictly formatted `DESIGN.md` artifact ready for UI generation.
+
+# Instructions
+1. **Clarify Intent**: Determine if the user wants to *extract* an existing design from a URL/Image or *create* a new system from a specific UI Kit.
+2. **Harvester Extraction (If applicable)**: 
+   - Analyze the target visual source.
+   - Extract semantic colors (Primary, Secondary, Success, Warning, Danger), neutral ramps (50-900), typography scales, spacing tokens, and border radii.
+3. **Pre-built UI Kits (Default Mode)**:
+   - If the user wants a beautiful design quickly, DO NOT try to generate tokens manually.
+   - Instead, copy one of the pre-built design systems from `skills/cm-design-system/resources/` into the project's `.stitch/DESIGN.md` or pass directly to `cm-ui-preview`:
+     - `shadcn-default.md` (Use this as the absolute DEFAULT if no style is specified)
+     - `halo-modern.md` (Premium dark mode, glowing accents)
+     - `lunaris-advanced.md` (Tech-focused, monospaced fonts)
+     - `nitro-enterprise.md` (High-contrast, data-dense enterprise)
+4. **Pencil.dev & Google Stitch MCP**:
+   - **Stitch path:** Use `DESIGN.md` with `<!-- STITCH_TOKENS_START -->` JSON block to feed design tokens into Google Stitch's AI generator via `cm-ui-preview`.
+   - **Pencil path:** Use the Pencil MCP tools to create and manage `.pen` design files directly:
+
+   **Pencil.dev Workflow:**
+   ```
+   1. open_document()         → Create/open a .pen file
+   2. get_guidelines("web-app") → Load design rules for target platform
+   3. get_style_guide_tags()  → Browse available style tags
+   4. get_style_guide(tags)   → Get color palette, typography, spacing
+   5. set_variables()         → Apply design tokens as .pen variables
+   6. batch_get(reusable:true)→ Read existing design system components
+   7. batch_design()          → Insert/update components and screens
+   8. get_screenshot()        → Verify visual output
+   ```
+
+   **Mapping DESIGN.md tokens to .pen variables:**
+   ```javascript
+   mcp_pencil_set_variables({
+     filePath: "design-system.pen",
+     variables: {
+       "primary": { "type": "color", "value": "#3B82F6" },
+       "secondary": { "type": "color", "value": "#10B981" },
+       "surface": { "type": "color", "value": "#FFFFFF" },
+       "text-primary": { "type": "color", "value": "#0F172A" },
+       "border-radius": { "type": "number", "value": 8 },
+       "spacing-sm": { "type": "number", "value": 8 },
+       "spacing-md": { "type": "number", "value": 16 },
+       "spacing-lg": { "type": "number", "value": 32 }
+     }
+   })
+   ```
+
+   - For UI component rendering against these tokens, you MUST hand off to `cm-ui-preview`.
+   - **IMPORTANT:** Never use `view_file` or `grep_search` on `.pen` files. Always use `mcp_pencil_batch_get`.
+5. **Export Custom `DESIGN.md` (Extraction Mode)**:
+   - If extracting from a site visually, create the `DESIGN.md` document.
+   - You MUST construct the exact JSON token block wrapped in `<!-- STITCH_TOKENS_START -->` and `<!-- STITCH_TOKENS_END -->`.
+
+# Examples
+
+## Example 1: Extract design from a URL
+**Input:** "Can you extract the design system from stripe.com to use in our project?"
+**Action:**
+1. Extract semantic colors: Primary (Blurple), surface colors, typography (Inter), rounded corners.
+2. Build the `DESIGN.md` including the Stitch STITCH_TOKENS JSON block with these tokens.
+3. Tell the user: "Extraction complete. I've saved the tokens in `DESIGN.md`. Would you like me to hand this off to `cm-ui-preview` to generate components?"
+
+## Example 2: Scaffold a new robust design system
+**Input:** "Create a modern dark-mode design system using Halo UI kit."
+**Action:**
+1. Generate a premium deep-dark color palette.
+2. Structure the tokens using Halo's spacing and glassmorphic shadow values.
+3. Output `DESIGN.md` with STITCH_TOKENS.
+4. Provide standard Tailwind config parameters matching the system.
+
+## Example 3: Create a design system in Pencil.dev
+**Input:** "Create a design system for our SaaS dashboard directly in Pencil.dev."
+**Action:**
+1. Open or create a `.pen` file: `mcp_pencil_open_document({ filePathOrTemplate: "new" })`.
+2. Load design guidelines: `mcp_pencil_get_guidelines({ topic: "design-system" })`.
+3. Browse and select a style guide: `mcp_pencil_get_style_guide_tags()` → `mcp_pencil_get_style_guide({ tags: ["saas", "dashboard", "modern", "website", "clean"] })`.
+4. Apply design tokens via `mcp_pencil_set_variables()` using the style guide's recommendations.
+5. Create reusable components (buttons, cards, inputs) via `mcp_pencil_batch_design()`.
+6. Verify with `mcp_pencil_get_screenshot()`.
+7. Tell the user: "Design system created in `design-system.pen`. Would you like me to build screens using these components?"
+
+# Constraints
+- 🚫 **DO NOT** generate or build React/Vue UI components directly in this skill. Handoff UI generation to `cm-ui-preview`.
+- 🚫 **DO NOT** skip the `<!-- STITCH_TOKENS_START -->` wrapper in `DESIGN.md`. It is critical for Stitch MCP parsing.
+- 🚫 **DO NOT** guess accessibility constraints — ensure text-on-background contrast aligns with WCAG AA (handled via `cm-ux-master` heuristics).
+- 🚫 **DO NOT** use `view_file` or `grep_search` on `.pen` files. Always use Pencil MCP tools (`batch_get`, `batch_design`, etc.).
+- ✅ **ALWAYS** define a complete neutral scale (50-900) even if the source site only uses a few grays.
+

package/skills/cm-design-system/resources/halo-modern.md

@@ -0,0 +1,40 @@
+# Halo Modern Design System
+
+Use this template for premium consumer products, modern startup landing pages, and cutting-edge dashboards.
+
+**Aesthetic:** Deep dark mode, vibrant glowing accents (purple/indigo), high contrast, glassmorphic shadows.
+**Core values:** Slate-950 background, Indigo-500 primary, 0.75rem rounded corners.
+
+<!-- STITCH_TOKENS_START -->
+{
+  "theme": "dark",
+  "colors": {
+    "background": "#020617",
+    "foreground": "#f8fafc",
+    "card": "#0f172a",
+    "cardForeground": "#f8fafc",
+    "popover": "#0f172a",
+    "popoverForeground": "#f8fafc",
+    "primary": "#6366f1",
+    "primaryForeground": "#ffffff",
+    "secondary": "#1e293b",
+    "secondaryForeground": "#f8fafc",
+    "muted": "#1e293b",
+    "mutedForeground": "#94a3b8",
+    "accent": "#1e293b",
+    "accentForeground": "#f8fafc",
+    "destructive": "#f87171",
+    "destructiveForeground": "#000000",
+    "border": "#1e293b",
+    "input": "#1e293b",
+    "ring": "#6366f1"
+  },
+  "typography": {
+    "fontFamily": "Outfit, sans-serif"
+  },
+  "radius": "0.75rem",
+  "effects": {
+    "boxShadow": "0 0 15px rgba(99, 102, 241, 0.4)"
+  }
+}
+<!-- STITCH_TOKENS_END -->

package/skills/cm-design-system/resources/lunaris-advanced.md

@@ -0,0 +1,40 @@
+# Lunaris Advanced Design System
+
+Use this template for developer tools, crypto trading platforms, cybersecurity interfaces, and tech-heavy dashboards.
+
+**Aesthetic:** Monospaced technical typography, deep space blues, neon cyan accents.
+**Core values:** Slate-900 background, Cyan-400 primary, sharp corners (0.25rem).
+
+<!-- STITCH_TOKENS_START -->
+{
+  "theme": "dark",
+  "colors": {
+    "background": "#0b1121",
+    "foreground": "#e2e8f0",
+    "card": "#131e3a",
+    "cardForeground": "#e2e8f0",
+    "popover": "#131e3a",
+    "popoverForeground": "#e2e8f0",
+    "primary": "#22d3ee",
+    "primaryForeground": "#000000",
+    "secondary": "#1e293b",
+    "secondaryForeground": "#22d3ee",
+    "muted": "#0f172a",
+    "mutedForeground": "#64748b",
+    "accent": "#0f172a",
+    "accentForeground": "#22d3ee",
+    "destructive": "#ef4444",
+    "destructiveForeground": "#ffffff",
+    "border": "#1e293b",
+    "input": "#1e293b",
+    "ring": "#22d3ee"
+  },
+  "typography": {
+    "fontFamily": "JetBrains Mono, Roboto Mono, monospace"
+  },
+  "radius": "0.25rem",
+  "effects": {
+    "glow": "drop-shadow(0 0 8px rgba(34, 211, 238, 0.6))"
+  }
+}
+<!-- STITCH_TOKENS_END -->

package/skills/cm-design-system/resources/nitro-enterprise.md

@@ -0,0 +1,39 @@
+# Nitro Enterprise Design System
+
+Use this template for complex, data-dense enterprise applications, healthcare portals, and heavily structured B2B software.
+
+**Aesthetic:** High contrast, information dense, robust neutral borders, distinct semantic colors.
+**Core values:** White background, Royal Blue primary, strict gray borders, 0.375rem standard radius.
+
+<!-- STITCH_TOKENS_START -->
+{
+  "theme": "light",
+  "colors": {
+    "background": "#f8fafc",
+    "foreground": "#0f172a",
+    "card": "#ffffff",
+    "cardForeground": "#0f172a",
+    "popover": "#ffffff",
+    "popoverForeground": "#0f172a",
+    "primary": "#2563eb",
+    "primaryForeground": "#ffffff",
+    "secondary": "#e2e8f0",
+    "secondaryForeground": "#0f172a",
+    "muted": "#f1f5f9",
+    "mutedForeground": "#475569",
+    "accent": "#e0e7ff",
+    "accentForeground": "#1e40af",
+    "destructive": "#dc2626",
+    "destructiveForeground": "#ffffff",
+    "border": "#cbd5e1",
+    "input": "#cbd5e1",
+    "ring": "#2563eb",
+    "success": "#16a34a",
+    "warning": "#eab308"
+  },
+  "typography": {
+    "fontFamily": "Roboto, sans-serif"
+  },
+  "radius": "0.375rem"
+}
+<!-- STITCH_TOKENS_END -->

package/skills/cm-design-system/resources/shadcn-default.md

@@ -0,0 +1,37 @@
+# Shadcn UI Default Design System
+
+Use this template whenever a clean, minimalist, robust UI is requested, or when the user does not specify a specific framework.
+
+**Aesthetic:** Clean, utilitarian, enterprise-grade, high legibility.
+**Core values:** Slate neutrals, simple primary colors, 0.5rem standard radius.
+
+<!-- STITCH_TOKENS_START -->
+{
+  "theme": "light",
+  "colors": {
+    "background": "#ffffff",
+    "foreground": "#09090b",
+    "card": "#ffffff",
+    "cardForeground": "#09090b",
+    "popover": "#ffffff",
+    "popoverForeground": "#09090b",
+    "primary": "#09090b",
+    "primaryForeground": "#fafafa",
+    "secondary": "#f4f4f5",
+    "secondaryForeground": "#09090b",
+    "muted": "#f4f4f5",
+    "mutedForeground": "#71717a",
+    "accent": "#f4f4f5",
+    "accentForeground": "#09090b",
+    "destructive": "#ef4444",
+    "destructiveForeground": "#fafafa",
+    "border": "#e4e4e7",
+    "input": "#e4e4e7",
+    "ring": "#09090b"
+  },
+  "typography": {
+    "fontFamily": "Inter, sans-serif"
+  },
+  "radius": "0.5rem"
+}
+<!-- STITCH_TOKENS_END -->

package/skills/cm-dockit/README.md

@@ -0,0 +1,100 @@
+# 📚 Doc-Kit for Google Antigravity
+
+[![Documentation Generator](https://img.shields.io/badge/Documentation-Generator-blueviolet?style=for-the-badge)](https://github.com/your-repo/doc-kit)
+[![Format VitePress](https://img.shields.io/badge/Format-VitePress-42b883?style=for-the-badge&logo=vue.js)](https://vitepress.dev/)
+[![Format Markdown](https://img.shields.io/badge/Format-Markdown-black?style=for-the-badge&logo=markdown)](https://en.wikipedia.org/wiki/Markdown)
+
+A professional documentation generation toolkit built for **Google Antigravity**. Skip the manual documentation effort and instantly turn your codebase into beautiful, structured, and deployable documentation.
+
+---
+
+## 🚀 The Problem We Solve
+
+Writing documentation is tedious. Keeping it updated is even harder.
+**Doc-Kit** empowers your AI agent to independently read your code, trace logic, map architectures, and write documentation that developers and end-users will actually love to read.
+
+## ✨ Core Features
+
+*   **🧠 Deep Codebase Analysis:** Traces real code paths, not just file names.
+*   **📐 Technical Documentation:** Generates System Architecture, Data Flows, and Database Schemas with dark-mode Mermaids.
+*   **📋 SOP User Guides:** Creates step-by-step Standard Operating Procedures (SOPs) for non-technical users.
+*   **🔌 API Reference:** Automatically extracts endpoints, request/response schemas, and builds cURL/JS examples.
+*   **🎨 Dual Output Formats:**
+    *   **Markdown:** Clean, portable `.md` files structured perfectly for any repo.
+    *   **VitePress:** Instantly scaffolds a fully-featured static site with built-in Mermaid, search, and dark mode — ready to deploy.
+
+## 🛠 Installation
+
+Simply copy the `doc-kit` folder into your Antigravity skills directory:
+
+```bash
+cp -r cm-dockit ~/.gemini/antigravity/skills/
+```
+
+Make sure the CLI script is executable:
+
+```bash
+chmod +x ~/.gemini/antigravity/skills/cm-dockit/scripts/doc-gen.sh
+```
+
+## 💻 Quick Start
+
+### The Interactive CLI
+
+To get the best results effortlessly, use the built-in CLI menu:
+
+```bash
+bash ~/.gemini/antigravity/skills/cm-dockit/scripts/doc-gen.sh
+```
+
+The CLI will ask you 4 quick questions:
+1.  **Document Type:** Technical, SOP, API, or All.
+2.  **Output Format:** Plain Markdown or VitePress.
+3.  **Source Code Path:** Which project do you want to document?
+4.  **Language:** English or Vietnamese.
+
+It instantly generates an optimized prompt and copies it to your clipboard. Just paste it into your Google Antigravity session!
+
+### Direct Trigger
+
+Alternatively, simply type in your Antigravity session:
+
+> "Use doc-kit to create documentation for the project at /path/to/my/project"
+
+The agent will prompt you for the required choices.
+
+## 📂 Architecture of Doc-Kit
+
+Doc-Kit is built using specialized sub-skills for maximum depth and accuracy:
+
+```text
+skills/cm-dockit/
+├── SKILL.md                 # Main orchestration agent
+├── scripts/
+│   ├── doc-gen.sh           # Interactive CLI
+│   ├── dockit-runner.sh     # DAG-based task execution
+│   ├── dockit-dashboard.sh  # Progress dashboard
+│   └── dockit-task.sh       # Individual task runner
+├── skills/
+│   ├── analyze-codebase.md  # Semantic analysis
+│   ├── tech-docs.md         # System Architecture
+│   ├── sop-guide.md         # Step-by-step UX flows
+│   ├── api-reference.md     # Auto REST/GraphQL extraction
+│   └── content-guidelines.md # Content formatting rules
+├── templates/               # Output format templates
+│   ├── markdown/
+│   └── vitepress-premium/
+├── tests/
+│   └── runner.test.ts       # Backend test suite
+└── workflows/               # Rules for output (Markdown or VitePress)
+```
+
+## 🛡 Verification Standard
+
+Doc-Kit enforces **zero-tolerance for shallow analysis**:
+1.  **Every claim cited:** Documentation cites `(file_path:line_number)`.
+2.  **Visual architecture:** Requires minimum 2 dark-theme Mermaid diagrams per technical file.
+3.  **No Hand-Waving:** If the AI hasn't traced the code, it explicitly states "Requires further inspection".
+
+---
+*Elevate your codebase with documentation that writes itself.*

package/skills/cm-dockit/SKILL.md

@@ -0,0 +1,302 @@
+---
+name: cm-dockit
+description: "Knowledge systematization engine — analyze codebases, generate Personas, JTBD, Process Flows, technical docs, SOP user guides, API references. Output as Markdown or VitePress Premium. SEO-optimized, AI/LLM-readable. One scan = complete knowledge base."
+---
+
+# 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 mentions "changelog", "release notes", "version history"
+- User runs `/DocKit Master`
+
+## Document Types
+
+| Type | Skill File | Description |
+|------|-----------|-------------|
+| **knowledge** | *(generated directly by AI agent)* | 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 |
+| **changelog** | `skills/changelog-guide.md` | Release notes & version history (🚀 Improvements / 🐛 Bug Fixes) |
+| **all** | All above | Full knowledge base + documentation suite |
+
+| Support Skill | Purpose |
+|--------------|--------|
+| **SEO Checklist** | Per-page SEO audit (title, meta, headings, robots) — applied inline by AI agent |
+| **Content Writing** | SEO copywriting, keywords, active voice, FAQ — applied inline by AI agent |
+| **LLM Optimization** | AI-readable structure, NotebookLM-friendly — applied inline by AI agent |
+
+## 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` · `changelog` · `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:**
+
+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 | changelog | 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:** Apply these SEO content writing guidelines directly:
+- 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:** Apply these AI-readability guidelines directly:
+- 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** → AI agent generates directly:
+  1. `docs/personas/` (Buyer & User Personas)
+  2. `docs/jtbd/` (JTBD Canvases)
+  3. `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
+
+- **changelog** → Read `skills/changelog-guide.md`, generate:
+  - `docs/changelog.md` — Full release history with 2 categories:
+    - 🚀 **Improvements** — features, enhancements, refactors
+    - 🐛 **Bug Fixes** — fixes, patches, corrections
+  - Reads from `CHANGELOG.md` at project root (generated by `cm-safe-deploy` Gate 8)
+  - If `CHANGELOG.md` doesn't exist, generates from git tags/history
+
+- **all** → Run `knowledge` → `tech` → `sop` → `api` → `changelog` 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/content-guidelines.md` SEO checklist section 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, use the built-in CLI scripts:
+
+```bash
+# Main documentation generator
+bash scripts/doc-gen.sh
+
+# Full runner with DAG-based task execution
+bash scripts/dockit-runner.sh -p /path/to/project -t all
+
+# Dashboard view of progress
+bash scripts/dockit-dashboard.sh
+
+# Individual task runner
+bash scripts/dockit-task.sh
+```
+
+> Run these scripts from the `cm-dockit` skill directory.
+
+## 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 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`.