@qazuor/claude-code-config 0.1.0

package/templates/docs/_registry.json

@@ -0,0 +1,329 @@
+{
+  "category": "docs",
+  "modules": [
+    {
+      "id": "quick-start",
+      "name": "Quick Start",
+      "description": "15-minute onboarding guide for new users",
+      "file": "quick-start.md",
+      "tags": ["workflows", "onboarding", "core"],
+      "longDescription": "Fast-track onboarding guide that gets you productive with the AI assistant system in 15 minutes. Covers essential workflows, commands, and best practices.",
+      "whatItDoes": [
+        "Introduces the agent system",
+        "Explains workflow levels",
+        "Demonstrates key commands",
+        "Provides first-task walkthrough",
+        "Links to deeper documentation"
+      ],
+      "whenToUse": "First thing to read when setting up the system in a new project.",
+      "skillLevel": "beginner",
+      "relatedModules": ["decision-tree", "help"]
+    },
+    {
+      "id": "decision-tree",
+      "name": "Decision Tree",
+      "description": "Visual guide for choosing the right workflow",
+      "file": "workflows/decision-tree.md",
+      "tags": ["workflows", "decisions", "core"],
+      "longDescription": "Decision tree for selecting the appropriate workflow based on task complexity, risk level, and time requirements. Helps avoid over-engineering simple tasks.",
+      "whatItDoes": [
+        "Guides workflow level selection",
+        "Considers task complexity",
+        "Evaluates risk factors",
+        "Recommends appropriate protocol",
+        "Prevents over-engineering"
+      ],
+      "whenToUse": "When starting any new task to determine the right approach.",
+      "skillLevel": "beginner",
+      "relatedModules": ["quick-fix-protocol", "atomic-task-protocol", "phase-1-planning"]
+    },
+    {
+      "id": "quick-fix-protocol",
+      "name": "Quick Fix Protocol",
+      "description": "Level 1 workflow for quick fixes (<30 min)",
+      "file": "workflows/quick-fix-protocol.md",
+      "tags": ["workflows", "quick-fix", "level-1"],
+      "longDescription": "Streamlined protocol for quick fixes that take less than 30 minutes and affect 1-2 files. Minimal overhead for low-risk changes like typos, config updates, and simple bug fixes.",
+      "whatItDoes": [
+        "Defines quick fix criteria",
+        "Provides minimal checklist",
+        "Ensures basic quality",
+        "Skips unnecessary planning",
+        "Fast path to completion"
+      ],
+      "whenToUse": "For typos, formatting, config changes, and obvious bug fixes that are low-risk.",
+      "skillLevel": "beginner",
+      "relatedModules": ["decision-tree"]
+    },
+    {
+      "id": "atomic-task-protocol",
+      "name": "Atomic Task Protocol",
+      "description": "Level 2 workflow for atomic tasks (30min-3h)",
+      "file": "workflows/atomic-task-protocol.md",
+      "tags": ["workflows", "atomic", "level-2", "tdd"],
+      "longDescription": "Protocol for medium-complexity tasks that take 30 minutes to 3 hours. Uses TDD methodology, affects 2-10 files, and includes proper testing and documentation.",
+      "whatItDoes": [
+        "Guides TDD implementation",
+        "Ensures proper test coverage",
+        "Tracks with task codes (PB-XXX)",
+        "Validates before completion",
+        "Coordinates with QA"
+      ],
+      "whenToUse": "For bug fixes, small features, new endpoints, and focused refactoring work.",
+      "skillLevel": "intermediate",
+      "relatedModules": ["decision-tree", "tdd-methodology", "qa-engineer"]
+    },
+    {
+      "id": "phase-1-planning",
+      "name": "Phase 1 Planning",
+      "description": "Level 3 feature planning documentation",
+      "file": "workflows/phase-1-planning.md",
+      "tags": ["workflows", "planning", "level-3"],
+      "longDescription": "First phase of Level 3 feature workflow focused on planning. Produces PDR (Product Definition Report), technical analysis, and task breakdown before implementation.",
+      "whatItDoes": [
+        "Coordinates planning agents",
+        "Creates PDR document",
+        "Designs technical architecture",
+        "Breaks down into tasks",
+        "Gets user approval"
+      ],
+      "whenToUse": "For complex, multi-day features that need architecture review and planning.",
+      "skillLevel": "advanced",
+      "relatedModules": ["phase-2-implementation", "product-functional", "product-technical"]
+    },
+    {
+      "id": "phase-2-implementation",
+      "name": "Phase 2 Implementation",
+      "description": "Level 3 implementation phase documentation",
+      "file": "workflows/phase-2-implementation.md",
+      "tags": ["workflows", "implementation", "level-3"],
+      "longDescription": "Second phase of Level 3 workflow focused on implementation. Guides TDD development, agent coordination, and incremental progress tracking.",
+      "whatItDoes": [
+        "Implements tasks from breakdown",
+        "Follows TDD methodology",
+        "Coordinates engineering agents",
+        "Tracks progress and checkpoints",
+        "Handles blockers and issues"
+      ],
+      "whenToUse": "After Phase 1 planning is approved. Guides the actual implementation work.",
+      "skillLevel": "advanced",
+      "relatedModules": ["phase-1-planning", "phase-3-validation"]
+    },
+    {
+      "id": "phase-3-validation",
+      "name": "Phase 3 Validation",
+      "description": "Level 3 validation phase documentation",
+      "file": "workflows/phase-3-validation.md",
+      "tags": ["workflows", "validation", "level-3", "qa"],
+      "longDescription": "Third phase of Level 3 workflow focused on validation. Covers quality assurance, code review, security review, and acceptance testing.",
+      "whatItDoes": [
+        "Runs comprehensive QA",
+        "Performs code review",
+        "Validates security",
+        "Tests edge cases",
+        "Verifies acceptance criteria"
+      ],
+      "whenToUse": "After implementation is complete. Ensures quality before finalization.",
+      "skillLevel": "advanced",
+      "relatedModules": ["phase-2-implementation", "phase-4-finalization", "qa-engineer"]
+    },
+    {
+      "id": "phase-4-finalization",
+      "name": "Phase 4 Finalization",
+      "description": "Level 3 finalization phase documentation",
+      "file": "workflows/phase-4-finalization.md",
+      "tags": ["workflows", "finalization", "level-3"],
+      "longDescription": "Final phase of Level 3 workflow covering documentation updates, changelog, commit preparation, and feature closure procedures.",
+      "whatItDoes": [
+        "Updates documentation",
+        "Creates changelog entries",
+        "Prepares final commits",
+        "Closes planning session",
+        "Archives planning documents"
+      ],
+      "whenToUse": "After validation passes. Wraps up the feature with proper documentation.",
+      "skillLevel": "intermediate",
+      "relatedModules": ["phase-3-validation", "tech-writer"]
+    },
+    {
+      "id": "code-standards",
+      "name": "Code Standards",
+      "description": "TypeScript coding standards and conventions",
+      "file": "standards/code-standards.md",
+      "tags": ["standards", "code", "typescript", "core"],
+      "longDescription": "Comprehensive coding standards for TypeScript projects covering naming conventions, file structure, type safety, error handling, and best practices.",
+      "whatItDoes": [
+        "Defines naming conventions",
+        "Specifies file organization",
+        "Enforces type safety rules",
+        "Documents error handling patterns",
+        "Lists forbidden practices"
+      ],
+      "whenToUse": "Reference when writing code. Ensures consistency across the project.",
+      "skillLevel": "intermediate",
+      "relatedModules": ["architecture-patterns", "testing-standards"]
+    },
+    {
+      "id": "testing-standards",
+      "name": "Testing Standards",
+      "description": "Testing standards and TDD practices",
+      "file": "standards/testing-standards.md",
+      "tags": ["standards", "testing", "tdd", "core"],
+      "longDescription": "Testing standards including file organization, naming conventions, coverage requirements, and TDD practices. Ensures consistent test quality.",
+      "whatItDoes": [
+        "Defines test file structure",
+        "Specifies naming conventions",
+        "Sets coverage thresholds (90%)",
+        "Documents test patterns",
+        "Guides mock and stub usage"
+      ],
+      "whenToUse": "Reference when writing tests. Ensures consistent testing approach.",
+      "skillLevel": "intermediate",
+      "relatedModules": ["tdd-methodology", "code-standards"]
+    },
+    {
+      "id": "documentation-standards",
+      "name": "Documentation Standards",
+      "description": "Documentation standards and templates",
+      "file": "standards/documentation-standards.md",
+      "tags": ["standards", "documentation", "markdown"],
+      "longDescription": "Standards for project documentation including README structure, API docs, inline comments, and markdown formatting guidelines.",
+      "whatItDoes": [
+        "Defines documentation structure",
+        "Specifies JSDoc requirements",
+        "Sets markdown formatting rules",
+        "Guides API documentation",
+        "Provides doc templates"
+      ],
+      "whenToUse": "When writing or updating documentation. Ensures documentation consistency.",
+      "skillLevel": "beginner",
+      "relatedModules": ["tech-writer", "documentation-writer"]
+    },
+    {
+      "id": "architecture-patterns",
+      "name": "Architecture Patterns",
+      "description": "Architecture patterns and best practices",
+      "file": "standards/architecture-patterns.md",
+      "tags": ["standards", "architecture", "patterns", "core"],
+      "longDescription": "Architectural patterns for the project including layer structure, dependency injection, repository pattern, and service layer organization.",
+      "whatItDoes": [
+        "Defines layer architecture",
+        "Documents dependency flow",
+        "Specifies pattern usage",
+        "Guides module organization",
+        "Provides code examples"
+      ],
+      "whenToUse": "When designing new features or modules. Ensures architectural consistency.",
+      "skillLevel": "advanced",
+      "relatedModules": ["code-standards", "tech-lead", "product-technical"]
+    },
+    {
+      "id": "pdr-template",
+      "name": "PDR Template",
+      "description": "Product Definition Report template",
+      "file": "templates/PDR-template.md",
+      "tags": ["templates", "pdr", "planning"],
+      "longDescription": "Template for creating Product Definition Reports (PDR) that capture user requirements, acceptance criteria, user stories, and functional specifications.",
+      "whatItDoes": [
+        "Structures requirements capture",
+        "Defines acceptance criteria format",
+        "Guides user story writing",
+        "Documents edge cases",
+        "Links to tech analysis"
+      ],
+      "whenToUse": "When starting Phase 1 planning. Filled by Product Functional agent.",
+      "skillLevel": "intermediate",
+      "relatedModules": ["product-functional", "tech-analysis-template"]
+    },
+    {
+      "id": "tech-analysis-template",
+      "name": "Tech Analysis Template",
+      "description": "Technical analysis document template",
+      "file": "templates/tech-analysis-template.md",
+      "tags": ["templates", "analysis", "planning"],
+      "longDescription": "Template for technical analysis documents that translate PDR into architecture design, database schemas, API contracts, and implementation approach.",
+      "whatItDoes": [
+        "Structures technical design",
+        "Documents architecture decisions",
+        "Defines database schemas",
+        "Specifies API contracts",
+        "Identifies technical risks"
+      ],
+      "whenToUse": "After PDR is complete. Filled by Product Technical agent.",
+      "skillLevel": "advanced",
+      "relatedModules": ["product-technical", "pdr-template", "todos-template"]
+    },
+    {
+      "id": "todos-template",
+      "name": "TODOs Template",
+      "description": "Task breakdown template",
+      "file": "templates/TODOs-template.md",
+      "tags": ["templates", "todos", "planning"],
+      "longDescription": "Template for task breakdown documents that list all implementation tasks with estimates, dependencies, and assignment to agents.",
+      "whatItDoes": [
+        "Structures task breakdown",
+        "Defines task format",
+        "Captures dependencies",
+        "Enables progress tracking",
+        "Supports issue sync"
+      ],
+      "whenToUse": "After tech analysis. Created by Product Technical, used for tracking.",
+      "skillLevel": "intermediate",
+      "relatedModules": ["tech-analysis-template", "sync-planning"]
+    },
+    {
+      "id": "workflow-diagrams",
+      "name": "Workflow Diagrams",
+      "description": "Mermaid diagrams for system visualization",
+      "file": "diagrams/README.md",
+      "tags": ["diagrams", "mermaid", "visualization"],
+      "longDescription": "Collection of Mermaid diagrams visualizing workflows, agent hierarchy, tool relationships, and documentation structure for quick reference.",
+      "whatItDoes": [
+        "Visualizes workflow decision tree",
+        "Shows agent hierarchy",
+        "Maps tool relationships",
+        "Illustrates documentation structure",
+        "Provides quick reference"
+      ],
+      "whenToUse": "When needing visual overview of the system or explaining it to others.",
+      "skillLevel": "beginner",
+      "relatedModules": ["mermaid-diagram-specialist"]
+    },
+    {
+      "id": "glossary",
+      "name": "Glossary",
+      "description": "Project terminology and definitions",
+      "file": "glossary.md",
+      "tags": ["guides", "reference", "terminology"],
+      "longDescription": "Comprehensive glossary of project-specific terms, abbreviations, and concepts. Ensures consistent terminology across documentation and communication.",
+      "whatItDoes": [
+        "Defines project terms",
+        "Explains abbreviations",
+        "Clarifies concepts",
+        "Provides context",
+        "Ensures consistency"
+      ],
+      "whenToUse": "Reference when encountering unfamiliar terms or when writing documentation.",
+      "skillLevel": "beginner",
+      "relatedModules": ["quick-start"]
+    },
+    {
+      "id": "mcp-servers",
+      "name": "MCP Servers",
+      "description": "MCP server documentation and configuration",
+      "file": "mcp-servers.md",
+      "tags": ["guides", "mcp", "configuration"],
+      "longDescription": "Documentation for configuring and using MCP (Model Context Protocol) servers including available servers, configuration options, and usage examples.",
+      "whatItDoes": [
+        "Lists available MCP servers",
+        "Documents configuration options",
+        "Provides usage examples",
+        "Explains server capabilities",
+        "Guides troubleshooting"
+      ],
+      "whenToUse": "When setting up or troubleshooting MCP server integrations.",
+      "skillLevel": "intermediate",
+      "relatedModules": []
+    }
+  ]
+}

package/templates/docs/diagrams/README.md

@@ -0,0 +1,220 @@
+# System Diagrams
+
+This directory contains Mermaid diagrams visualizing the workflow system architecture.
+
+## Available Diagrams
+
+### 1. Workflow Decision Tree
+
+**File:** [workflow-decision-tree.mmd](./workflow-decision-tree.mmd)
+
+**Purpose:** Visual guide for selecting the appropriate workflow level
+
+**Shows:**
+
+- Decision criteria for each workflow level
+- Level 1 (Quick Fix): < 30min, 1-2 files, very low risk
+- Level 2 (Atomic Task): 30min-3h, 2-10 files, low-medium risk
+- Level 3 (Feature Planning): Multi-day, architecture, DB changes
+- Step counts for each level
+- Color-coded paths (green=quick, orange=atomic, blue=feature)
+
+**Use When:**
+
+- Starting a new task
+- Uncertain which workflow to use
+- Training new team members
+- Documenting workflow selection
+
+**View:**
+
+```mermaid
+# Paste content from workflow-decision-tree.mmd
+```
+
+---
+
+### 2. Agent Hierarchy
+
+**File:** [agent-hierarchy.mmd](./agent-hierarchy.mmd)
+
+**Purpose:** Visual organization of the 14 specialized agents across 6 categories
+
+**Shows:**
+
+- User/Principal Architect at top
+- tech-lead as central coordinator
+- 6 teams:
+  - Product Team (product-functional, product-technical)
+  - Backend Team (hono-engineer, db-engineer, node-typescript-engineer)
+  - Frontend Team (astro-engineer, tanstack-start-engineer, react-senior-dev)
+  - Design & Content (ux-ui-designer, content-writer)
+  - Quality Team (qa-engineer, debugger)
+  - Specialized Team (tech-writer, i18n-specialist, enrichment-agent, seo-ai-specialist)
+- Reporting lines
+- Color-coded by team
+
+**Use When:**
+
+- Understanding agent responsibilities
+- Assigning tasks to agents
+- Documenting team structure
+- Planning agent collaboration
+
+**View:**
+
+```mermaid
+# Paste content from agent-hierarchy.mmd
+```
+
+---
+
+### 3. Tools Relationship
+
+**File:** [tools-relationship.mmd](./tools-relationship.mmd)
+
+**Purpose:** Show how commands, agents, and skills interact
+
+**Shows:**
+
+- 3 layers:
+  - Commands Layer (16 commands)
+  - Agents Layer (14 agents)
+  - Skills Layer (16 skills)
+- Flow: Commands → Agents → Skills
+- Relationships between specific tools
+- Command categories (Quality, Planning, Audit, Meta, Dev)
+- Agent groups (Lead, Backend, Frontend, Quality, Support)
+- Skill categories (Testing, Development, Design, Utils)
+
+**Use When:**
+
+- Understanding system architecture
+- Finding which agent uses which skill
+- Documenting tool relationships
+- Planning new tools
+
+**View:**
+
+```mermaid
+# Paste content from tools-relationship.mmd
+```
+
+---
+
+### 4. Documentation Map
+
+**File:** [documentation-map.mmd](./documentation-map.mmd)
+
+**Purpose:** Navigate the `.claude/` directory structure
+
+**Shows:**
+
+- Main directories:
+  - `agents/` - Agent definitions (14)
+  - `commands/` - Command definitions (16)
+  - `skills/` - Skill definitions (16)
+  - `docs/` - Documentation
+  - `sessions/` - Planning & tasks
+- Subdirectories and organization
+- Key files (README.md, REGISTRY.md, etc.)
+- Session structures (P-004, PB-XXX)
+- Color-coded by type
+
+**Use When:**
+
+- Finding specific documentation
+- Understanding directory structure
+- Adding new documentation
+- Navigating the system
+
+**View:**
+
+```mermaid
+# Paste content from documentation-map.mmd
+```
+
+---
+
+## How to Use These Diagrams
+
+### In Markdown Files
+
+Reference diagrams in documentation:
+
+```markdown
+See the [Workflow Decision Tree](../diagrams/workflow-decision-tree.mmd) for workflow selection.
+```
+
+### In Mermaid Live Editor
+
+1. Go to [mermaid.live](https://mermaid.live)
+2. Copy diagram content
+3. Paste into editor
+4. View and edit interactively
+
+### In GitHub
+
+GitHub automatically renders `.mmd` files:
+
+- Click on diagram file
+- GitHub shows rendered diagram
+- Use for reviews and discussions
+
+### In VSCode
+
+Install Mermaid extension:
+
+1. Install "Mermaid Preview" extension
+2. Open `.mmd` file
+3. Right-click → "Open Preview to the Side"
+
+## Updating Diagrams
+
+When system changes, update relevant diagrams:
+
+1. **Workflow changes** → Update `workflow-decision-tree.mmd`
+2. **Agent changes** → Update `agent-hierarchy.mmd`
+3. **New commands/skills** → Update `tools-relationship.mmd`
+4. **Directory structure** → Update `documentation-map.mmd`
+
+## Diagram Conventions
+
+### Colors
+
+- **Purple** (#8B5CF6): Leadership/Commands/Root
+- **Blue** (#3B82F6): Frontend/Agents/Sections
+- **Red** (#EF4444): Backend
+- **Green** (#10B981): Quality/Skills/Success
+- **Orange** (#F59E0B): Support/Utils/Warnings
+- **Pink** (#EC4899): Product
+
+### Shapes
+
+- **Rectangle**: Process/Component
+- **Diamond**: Decision point
+- **Rounded**: Start/End
+- **Subgraph**: Grouping/Container
+
+### Arrows
+
+- **Solid** (→): Direct flow
+- **Dotted** (-.->): Relationship/Usage
+- **Thick**: Primary path
+- **Thin**: Secondary path
+
+## Related Documentation
+
+- [Workflow Decision Tree Doc](../workflows/README.md)
+- [Agent Documentation](../../agents/README.md)
+- [Command Documentation](../../commands/README.md)
+- [Skill Documentation](../../skills/README.md)
+
+## Notes
+
+- All diagrams use Mermaid syntax
+- Theme configured for consistency
+- Colors match brand palette
+- Diagrams render in most markdown viewers
+- Keep diagrams up to date with system
+- Test rendering before committing

package/templates/docs/diagrams/agent-hierarchy.mmd

@@ -0,0 +1,55 @@
+%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#3B82F6','primaryTextColor':'#fff','primaryBorderColor':'#2563EB','lineColor':'#6B7280','secondaryColor':'#10B981','tertiaryColor':'#F59E0B'}}}%%
+flowchart TD
+    User([User/Principal<br/>Architect])
+
+    %% Core Coordination
+    User --> TechLead[tech-lead<br/>Architecture & Leadership]
+
+    %% Planning & Product
+    TechLead --> Product[Product Team]
+    Product --> ProdFunc[product-functional<br/>PDR & Requirements]
+    Product --> ProdTech[product-technical<br/>Technical Analysis]
+
+    %% Engineering Teams
+    TechLead --> Backend[Backend Team]
+    Backend --> Hono[hono-engineer<br/>API Development]
+    Backend --> DB[db-engineer<br/>Database & Drizzle]
+    Backend --> NodeTS[node-typescript-engineer<br/>Shared Packages & Utils]
+
+    TechLead --> Frontend[Frontend Team]
+    Frontend --> Astro[astro-engineer<br/>Public Web App]
+    Frontend --> Tanstack[tanstack-start-engineer<br/>Admin Dashboard]
+    Frontend --> React[react-senior-dev<br/>React Components]
+
+    %% Design & Content
+    TechLead --> Design[Design & Content]
+    Design --> UX[ux-ui-designer<br/>UI Design & Flows]
+    Design --> Content[content-writer<br/>Web Copywriting EN/ES]
+
+    %% Quality
+    TechLead --> Quality[Quality Team]
+    Quality --> QA[qa-engineer<br/>Testing & QA]
+    Quality --> Debug[debugger<br/>Issue Resolution]
+
+    %% Specialized Support
+    TechLead --> Support[Specialized Team]
+    Support --> Writer[tech-writer<br/>Documentation]
+    Support --> I18n[i18n-specialist<br/>Internationalization]
+    Support --> Enrich[enrichment-agent<br/>GitHub Enrichment]
+    Support --> SEO[seo-ai-specialist<br/>SEO & AI Optimization]
+
+    classDef leaderClass fill:#8B5CF6,stroke:#7C3AED,color:#fff,font-weight:bold
+    classDef backendClass fill:#EF4444,stroke:#DC2626,color:#fff
+    classDef frontendClass fill:#3B82F6,stroke:#2563EB,color:#fff
+    classDef qualityClass fill:#10B981,stroke:#059669,color:#fff
+    classDef supportClass fill:#F59E0B,stroke:#D97706,color:#fff
+    classDef productClass fill:#EC4899,stroke:#DB2777,color:#fff
+    classDef designClass fill:#A855F7,stroke:#9333EA,color:#fff
+
+    class User,TechLead leaderClass
+    class Product,ProdFunc,ProdTech productClass
+    class Backend,Hono,DB,NodeTS backendClass
+    class Frontend,Astro,Tanstack,React frontendClass
+    class Quality,QA,Debug qualityClass
+    class Support,Writer,I18n,Enrich,SEO supportClass
+    class Design,UX,Content designClass

package/templates/docs/diagrams/documentation-map.mmd

@@ -0,0 +1,61 @@
+%%{init: {'theme':'base', 'themeVariables': {'primaryColor':'#3B82F6','primaryTextColor':'#fff','primaryBorderColor':'#2563EB','lineColor':'#6B7280','secondaryColor':'#10B981','tertiaryColor':'#F59E0B'}}}%%
+flowchart TD
+    Root[.claude/]
+    
+    %% Main Sections
+    Root --> Agents[agents/<br/>14 Agent Definitions]
+    Root --> Commands[commands/<br/>16 Commands]
+    Root --> Skills[skills/<br/>16 Skills]
+    Root --> Docs[docs/<br/>Documentation]
+    Root --> Sessions[sessions/<br/>Planning & Tasks]
+    
+    %% Agents Structure
+    Agents --> AgentEng[engineering/<br/>Backend & Frontend]
+    Agents --> AgentQual[quality/<br/>QA & Security]
+    Agents --> AgentSupp[support/<br/>Writer & Debugger]
+    Agents --> AgentLead[leadership/<br/>Tech Lead]
+    Agents --> AgentProd[product/<br/>Product Technical]
+    Agents --> AgentREADME[README.md<br/>Agent Index]
+    
+    %% Commands Structure
+    Commands --> CmdAudit[audit/<br/>Security, Perf, A11y]
+    Commands --> CmdMeta[meta/<br/>Create, Help]
+    Commands --> CmdRoot[Root Commands<br/>Quality, Planning, Dev]
+    Commands --> CmdREADME[README.md<br/>Command Index]
+    
+    %% Skills Structure
+    Skills --> SkillTest[testing/<br/>API, Perf, Security]
+    Skills --> SkillPattern[patterns/<br/>TDD, Errors]
+    Skills --> SkillTech[tech/<br/>Vercel, Shadcn, Mermaid]
+    Skills --> SkillUtil[utils/<br/>Memory, PDF, JSON]
+    Skills --> SkillQA[qa/<br/>Web Testing, Criteria]
+    Skills --> SkillREADME[README.md<br/>Skill Index]
+    
+    %% Docs Structure
+    Docs --> DocsStandards[standards/<br/>Code, Architecture, Testing]
+    Docs --> DocsWorkflows[workflows/<br/>Quick Fix, Atomic Task]
+    Docs --> DocsTemplates[templates/<br/>PDR, Tech Analysis]
+    Docs --> DocsDiagrams[diagrams/<br/>This File + Others]
+    
+    %% Sessions Structure
+    Sessions --> SessionsPlanning[planning/<br/>Feature Plans]
+    Sessions --> SessionsAtomic[atomic-tasks/<br/>PB-XXX Tasks]
+    
+    SessionsPlanning --> P004[P-004/<br/>Workflow Optimization]
+    P004 --> PDR[PDR.md]
+    P004 --> TechAnalysis[tech-analysis.md]
+    P004 --> TODOs[TODOs.md]
+    P004 --> Checkpoint[.checkpoint.json]
+    
+    SessionsAtomic --> Registry[REGISTRY.md]
+    SessionsAtomic --> PB001[PB-001/<br/>Example Task]
+    
+    classDef rootClass fill:#8B5CF6,stroke:#7C3AED,color:#fff,font-weight:bold
+    classDef sectionClass fill:#3B82F6,stroke:#2563EB,color:#fff
+    classDef subClass fill:#10B981,stroke:#059669,color:#fff
+    classDef fileClass fill:#F59E0B,stroke:#D97706,color:#000
+    
+    class Root rootClass
+    class Agents,Commands,Skills,Docs,Sessions sectionClass
+    class AgentEng,AgentQual,AgentSupp,AgentLead,AgentProd,CmdAudit,CmdMeta,CmdRoot,SkillTest,SkillPattern,SkillTech,SkillUtil,SkillQA,DocsStandards,DocsWorkflows,DocsTemplates,DocsDiagrams,SessionsPlanning,SessionsAtomic subClass
+    class AgentREADME,CmdREADME,SkillREADME,P004,PB001,Registry,PDR,TechAnalysis,TODOs,Checkpoint fileClass