codymaster 4.1.0

package/skills/cm-dockit/skills/tech-docs.md

@@ -0,0 +1,287 @@
+# Technical Documentation Generator — UX Master Edition
+
+Generate professional technical system documentation with rich diagrams, visual hierarchy, and progressive disclosure.
+
+## Input Required
+
+- `docs/_analysis.md` (output from analyze-codebase)
+- Access to source code for deep tracing
+
+## Content Guidelines
+
+**Before generating, read `skills/content-guidelines.md` for:**
+- Mermaid theme-neutral rules (no hardcoded colors)
+- Frontmatter requirements
+- Writing style rules
+
+## Output Files
+
+### 1. `docs/architecture.md` — System Architecture
+
+```markdown
+---
+title: "System Architecture"
+description: "Architecture overview and system design"
+---
+
+# System Architecture
+
+> **Quick Reference**
+> - **Type**: [Monolith / Microservices / Serverless]
+> - **Stack**: [Primary technologies]
+> - **Key Modules**: [Core module names]
+> - **Deployment**: [Docker / K8s / Serverless]
+
+## Overview
+[Brief description of what the system does and who it serves]
+
+## Architecture Diagram
+
+```mermaid
+graph TB
+
+    Client["🌐 Client"] --> API["⚙️ API Server"]
+    API --> DB["🗄️ Database"]
+```
+
+## Core Components
+
+| Component | Description | Technology | Key Files |
+|-----------|-------------|------------|-----------|
+
+## Main Processing Flow
+
+```mermaid
+sequenceDiagram
+    participant C as Client
+    participant A as API
+    participant S as Service
+    participant D as Database
+
+    C->>A: Request
+    A->>S: Process
+    S->>D: Query
+    D-->>S: Result
+    S-->>A: Response
+    A-->>C: JSON
+```
+
+## Architecture Decision Records (ADR)
+
+| # | Decision | Context | Status |
+|---|----------|---------|--------|
+| 1 | [Decision] | [Why this was chosen] | Accepted |
+| 2 | [Decision] | [Why this was chosen] | Accepted |
+
+<details>
+<summary>ADR-001: [Decision Title]</summary>
+
+**Context:** [What problem were we solving?]
+
+**Decision:** [What we decided]
+
+**Consequences:**
+- ✅ [Positive outcome]
+- ⚠️ [Trade-off]
+- ❌ [Risk accepted]
+
+</details>
+
+## Security
+[Auth model, trust boundaries, data sensitivity]
+
+## Scalability & Performance
+
+| Aspect | Strategy | Limit |
+|--------|----------|-------|
+| Caching | [Strategy] | [Max size/TTL] |
+| Rate Limiting | [Strategy] | [Requests/min] |
+| Scaling | [Horizontal/Vertical] | [Max instances] |
+```
+
+### 2. `docs/database.md` — Database
+
+```markdown
+---
+title: "Database"
+description: "Schema, data relations, and data model"
+---
+
+# Database
+
+> **Quick Reference**
+> - **Engine**: [PostgreSQL / MySQL / MongoDB / SQLite]
+> - **ORM**: [Prisma / SQLAlchemy / TypeORM / None]
+> - **Tables**: [Count]
+> - **Migrations**: [Tool used]
+
+## ER Diagram
+
+```mermaid
+erDiagram
+    USERS ||--o{ ORDERS : places
+    ORDERS ||--|{ ORDER_ITEMS : contains
+```
+
+## Tables
+
+### [Table Name]
+| Column | Type | Nullable | Default | Description |
+|--------|------|----------|---------|-------------|
+
+## Relationships
+| Table A | Table B | Type | FK | ON DELETE |
+|---------|---------|------|----|-----------|
+
+## Indexes & Constraints
+
+| Table | Index | Columns | Type | Purpose |
+|-------|-------|---------|------|---------|
+
+<details>
+<summary>Migration History</summary>
+
+| Version | Date | Description |
+|---------|------|-------------|
+| 001 | [date] | Initial schema |
+
+</details>
+```
+
+### 3. `docs/deployment.md` — Deployment
+
+```markdown
+---
+title: "Deployment Guide"
+description: "Installation, configuration, and deployment"
+---
+
+# Deployment Guide
+
+> **Quick Reference**
+> - **Platform**: [Docker / AWS / Vercel / Bare Metal]
+> - **Min Requirements**: [CPU / RAM / Disk]
+> - **Ports**: [List of ports used]
+> - **Health Check**: `GET /health`
+
+## System Requirements
+
+| Component | Minimum | Recommended |
+|-----------|---------|-------------|
+| CPU | [min] | [recommended] |
+| RAM | [min] | [recommended] |
+| Disk | [min] | [recommended] |
+| Runtime | [version] | [version] |
+
+## Environment Variables
+
+| Variable | Description | Required | Default | Example |
+|----------|-------------|----------|---------|---------|
+
+:::warning Security
+Never commit `.env` files. Use secrets management in production.
+:::
+
+## Local Setup
+
+```bash
+# Step 1: Clone
+git clone [repo_url]
+cd [project]
+
+# Step 2: Install dependencies
+[install_command]
+
+# Step 3: Configure
+cp .env.example .env
+# Edit .env with your values
+
+# Step 4: Run
+[run_command]
+```
+
+## Docker Deployment
+
+```yaml
+# docker-compose.yml explanation
+```
+
+## CI/CD Pipeline
+
+```mermaid
+graph LR
+    A["🔀 Push"] --> B["🧪 Test"]
+    B --> C["📦 Build"]
+    C --> D["🚀 Deploy"]
+```
+
+## Monitoring & Health
+
+| Endpoint | Purpose | Expected |
+|----------|---------|----------|
+| `GET /health` | Health check | `200 OK` |
+| `GET /metrics` | Prometheus | Metrics data |
+```
+
+### 4. `docs/data-flow.md` — Data Flow
+
+```markdown
+---
+title: "Data Flow"
+description: "Data flow diagrams and integration points"
+---
+
+# Data Flow
+
+> **Quick Reference**
+> - **Pattern**: [Request-Response / Event-Driven / Streaming]
+> - **Protocol**: [REST / gRPC / WebSocket / GraphQL]
+> - **Serialization**: [JSON / Protobuf / MessagePack]
+
+## End-to-End Data Flow
+
+```mermaid
+graph TB
+    Input["📥 Input"] --> Process["⚙️ Processing"]
+    Process --> Output["📤 Output"]
+```
+
+## Main Workflows
+
+### [Feature Name]
+
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant A as API
+    participant S as Service
+    participant D as Database
+```
+
+1. User action → ...
+2. API receives → ...
+3. Business logic → ...
+4. Database → ...
+5. Response → ...
+
+## External Integrations
+
+| Service | Protocol | Direction | Data | Rate Limit |
+|---------|----------|-----------|------|------------|
+
+## Events / Webhooks
+
+| Event | Trigger | Payload | Consumer |
+|-------|---------|---------|----------|
+```
+
+## Rules
+
+- **Quick Reference card** at top of every file (summary box)
+- **Minimum 2 Mermaid diagrams per file**
+- **Every claim cites** `(file_path:line_number)`
+- **No hardcoded Mermaid colors** — VitePress theming handles light/dark
+- **Use admonitions** (`:::tip`, `:::warning`, `:::danger`) for callouts
+- **Use `<details>` Progressive Disclosure** for secondary information
+- **Tables** for all structured data — never use bullet lists for tabular data
+- **Explain WHY before WHAT** in every section

package/skills/cm-dockit/templates/markdown/structure.md

@@ -0,0 +1,60 @@
+# Markdown Documentation Structure
+
+Standard folder structure for plain Markdown documentation.
+
+## Standard Layout
+
+```
+docs/
+├── README.md                    # Landing page / index
+│
+├── 01-architecture.md           # System architecture
+├── 02-database.md               # Database schema
+├── 03-deployment.md             # Deployment guide
+├── 04-data-flow.md              # Data flow diagrams
+│
+├── sop/                         # SOP User Guides
+│   ├── index.md                 # SOP overview
+│   ├── 01-authentication.md     # Login, register, password
+│   ├── 02-user-management.md    # CRUD users
+│   ├── 03-[module-name].md      # One per feature module
+│   └── ...
+│
+├── api/                         # API Reference
+│   ├── index.md                 # API overview, auth, errors
+│   ├── users.md                 # Users endpoints
+│   ├── orders.md                # Orders endpoints
+│   └── ...
+│
+└── assets/                      # Screenshots, images
+    └── screenshots/
+```
+
+## Naming Conventions
+
+| Rule | Example |
+|------|---------|
+| Lowercase with hyphens | `user-management.md` |
+| Number prefix for ordering | `01-architecture.md` |
+| SOP files by module | `sop/03-order-management.md` |
+| API files by resource | `api/users.md` |
+
+## Frontmatter Template
+
+Every `.md` file should include:
+
+```yaml
+---
+title: "Page Title"
+description: "Brief description"
+---
+```
+
+## Link Conventions
+
+Use relative links between docs:
+
+```markdown
+See [Architecture](./01-architecture.md) for details.
+Refer to [Users API](./api/users.md#create-user).
+```

package/skills/cm-dockit/templates/vitepress-premium/.vitepress/config.mts

@@ -0,0 +1,110 @@
+import { defineConfig } from 'vitepress'
+
+// ============================================================
+// DocKit Premium — VitePress Configuration Template
+//
+// Replace all [PLACEHOLDER] values with actual project info.
+// Lines marked with "// CUSTOMIZE" should be updated per project.
+// ============================================================
+
+export default defineConfig({
+  // CUSTOMIZE: Project identity
+  title: '[Project Name]',
+  description: '[Project description]',
+
+  // Tell VitePress to read markdown files from the `docs` folder
+  // outside of docs-site, eliminating duplicate files!
+  srcDir: '../docs',
+
+  // CUSTOMIZE: Deployment
+  base: '/',
+
+  // Mermaid — BUILT-IN, zero extra packages needed
+  markdown: {
+    mermaid: true,
+  },
+
+  themeConfig: {
+    // CUSTOMIZE: Logo
+    // logo: '/logo.svg',
+
+    // Navigation bar
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Docs', link: '/architecture' },
+      { text: 'API', link: '/api/' },
+    ],
+
+    // Sidebar — auto-generated from folder structure
+    // CUSTOMIZE: Match actual docs structure
+    sidebar: [
+      {
+        text: 'Overview',
+        items: [
+          { text: 'Introduction', link: '/' },
+        ],
+      },
+      {
+        text: 'Architecture & Technical',
+        items: [
+          // Auto-populate from docs/*.md
+          // e.g., { text: 'Architecture', link: '/architecture' },
+        ],
+      },
+      {
+        text: 'User Guides (SOP)',
+        items: [
+          // Auto-populate from docs/sop/*.md
+        ],
+      },
+      {
+        text: 'API Reference',
+        items: [
+          // Auto-populate from docs/api/*.md
+        ],
+      },
+    ],
+
+    // Social links
+    socialLinks: [
+      // CUSTOMIZE
+      // { icon: 'github', link: '[GITHUB_URL]' },
+    ],
+
+    // Built-in search (MiniSearch) — zero config
+    search: {
+      provider: 'local',
+    },
+
+    // Footer
+    footer: {
+      message: 'Built with DocKit Premium',
+      copyright: `© ${new Date().getFullYear()}`,
+    },
+
+    // Table of Contents depth
+    outline: {
+      level: [2, 3],
+    },
+
+    // Edit link - CUSTOMIZE
+    // editLink: {
+    //   pattern: '[GITHUB_URL]/edit/main/docs/:path',
+    //   text: 'Edit this page on GitHub',
+    // },
+  },
+
+  // Dark mode default
+  appearance: 'dark',
+
+  // Head tags
+  head: [
+    ['meta', { name: 'theme-color', content: '#5b6ee1' }],
+    ['meta', { name: 'og:type', content: 'website' }],
+  ],
+
+  // Sitemap generation
+  sitemap: {
+    hostname: 'https://docs.example.com', // CUSTOMIZE
+  },
+})

package/skills/cm-dockit/templates/vitepress-premium/.vitepress/theme/custom.css

@@ -0,0 +1,189 @@
+/**
+ * DocKit Premium — VitePress Custom Theme
+ *
+ * Modern, clean design with premium feel.
+ * Works with both light and dark modes automatically.
+ */
+
+/* ===================== Brand Colors ===================== */
+:root {
+  --vp-c-brand-1: #5b6ee1;
+  --vp-c-brand-2: #7c8af2;
+  --vp-c-brand-3: #4a5bc7;
+  --vp-c-brand-soft: rgba(91, 110, 225, 0.14);
+
+  /* Typography */
+  --vp-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
+  --vp-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro',
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+}
+
+/* ===================== Dark Theme ===================== */
+.dark {
+  --vp-c-bg: #1a1a2e;
+  --vp-c-bg-alt: #16213e;
+  --vp-c-bg-elv: #1e2a4a;
+  --vp-c-bg-soft: #1e2a4a;
+}
+
+/* ===================== Layout ===================== */
+
+/* Wider content area */
+.VPDoc .container {
+  max-width: 1080px;
+}
+
+/* Sidebar refinement */
+.VPSidebar {
+  font-size: 14px;
+}
+
+/* ===================== Code Blocks ===================== */
+
+/* Code group tabs (replacement for Docusaurus Tabs) */
+.vp-code-group .tabs label {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* Inline code */
+:not(pre) > code {
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 0.9em;
+}
+
+/* ===================== Custom Containers ===================== */
+
+/* Tip, Warning, Danger — VitePress handles styling automatically */
+/* Additional polish: */
+.custom-block {
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.custom-block-title {
+  font-weight: 600;
+}
+
+/* ===================== Tables ===================== */
+
+table {
+  font-size: 14px;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+}
+
+td, th {
+  padding: 10px 14px;
+}
+
+/* Zebra striping */
+tr:nth-child(even) {
+  background: var(--vp-c-bg-soft);
+}
+
+/* ===================== Details/Summary ===================== */
+
+details {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin: 16px 0;
+}
+
+details summary {
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+}
+
+details[open] summary {
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+/* ===================== Mermaid ===================== */
+
+/* Mermaid diagrams — let VitePress handle theming */
+/* Just ensure good spacing */
+.mermaid {
+  margin: 24px 0;
+  text-align: center;
+}
+
+/* ===================== Quick Reference Card ===================== */
+
+/* Style blockquotes that start with "Quick Reference" as cards */
+blockquote {
+  border-radius: 8px;
+  padding: 16px 20px;
+  font-size: 14px;
+}
+
+/* ===================== Responsive ===================== */
+
+@media (max-width: 768px) {
+  table {
+    font-size: 13px;
+  }
+
+  td, th {
+    padding: 8px 10px;
+  }
+}
+
+/* ===================== Scrollbar (dark mode) ===================== */
+
+.dark ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.dark ::-webkit-scrollbar-track {
+  background: var(--vp-c-bg);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: var(--vp-c-divider);
+  border-radius: 4px;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: var(--vp-c-text-3);
+}
+
+/* ===================== Layout Fixes ===================== */
+
+/* Prevent text wrapping in sidebar and handle long text with ellipsis */
+.VPSidebarItem .text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  max-width: 100%;
+}
+
+/* Prevent site title wrapping on small screens */
+.VPNavBarTitle .title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Ensure right action area in Nav does not overlap title on mobile */
+.VPNavBarMenu {
+  flex-shrink: 0;
+}

package/skills/cm-dockit/templates/vitepress-premium/.vitepress/theme/index.ts

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme

package/skills/cm-dockit/templates/vitepress-premium/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "dockit-docs-site",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "vitepress preview",
+    "test": "vitest run",
+    "test:gate": "vitest run --passWithNoTests",
+    "deploy": "wrangler pages deploy .vitepress/dist"
+  },
+  "devDependencies": {
+    "vitepress": "^1.0.0-rc.31",
+    "vitest": "^1.5.0",
+    "vue": "^3.4.0"
+  }
+}

package/skills/cm-dockit/templates/vitepress-premium/tests/frontend.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// VitePress Docs Frontend Tests
+// Ensures that the VitePress site generates correctly and handles frontmatter.
+
+describe('VitePress Docs Verification', () => {
+  it('should have a valid package.json', () => {
+    const pkgPath = path.resolve(__dirname, '../package.json');
+    expect(fs.existsSync(pkgPath)).toBe(true);
+    
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+    expect(pkg.name).toBe('dockit-docs-site');
+    expect(pkg.scripts).toHaveProperty('build');
+    expect(pkg.scripts).toHaveProperty('test:gate');
+  });
+
+  it('should have VitePress config pointing to correct srcDir', () => {
+    const configPath = path.resolve(__dirname, '../.vitepress/config.mts');
+    expect(fs.existsSync(configPath)).toBe(true);
+    
+    const configContent = fs.readFileSync(configPath, 'utf-8');
+    // Ensure srcDir is pointing to the parent docs folder to avoid duplication
+    expect(configContent).toContain("srcDir: '../docs'");
+  });
+
+  it('should enforce CSS layout rules to prevent sidebar text wrapping and overlap', () => {
+    const cssPath = path.resolve(__dirname, '../.vitepress/theme/custom.css');
+    
+    // Test should not fail if custom.css doesn't exist yet, but if it does, it must have layout fixes
+    if (fs.existsSync(cssPath)) {
+      const cssContent = fs.readFileSync(cssPath, 'utf-8');
+      
+      // Look for the specific layout fix CSS rules
+      expect(cssContent).toContain('.VPSidebarItem .text');
+      expect(cssContent).toContain('white-space: nowrap;');
+      expect(cssContent).toContain('text-overflow: ellipsis;');
+      
+      // Look for top navigation overlap prevention rules
+      expect(cssContent).toContain('.VPNavBarTitle .title');
+      expect(cssContent).toContain('.VPNavBarMenu');
+    }
+  });
+});