feat(ccw): migrate backend to TypeScript

- Convert 40 JS files to TypeScript (CLI, tools, core, MCP server)
- Add Zod for runtime parameter validation
- Add type definitions in src/types/
- Keep src/templates/ as JavaScript (dashboard frontend)
- Update bin entries to use dist/
- Add tsconfig.json with strict mode
- Add backward-compatible exports for tests
- All 39 tests passing

Breaking changes: None (backward compatible)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-12-13 10:43:15 +08:00
parent d4e59770d0
commit 25ac862f46
93 changed files with 5531 additions and 9302 deletions

View File

@@ -409,14 +409,14 @@ Generate individual `.task/IMPL-*.json` files with the following structure:
// Pattern: Gemini CLI deep analysis
{
"step": "gemini_analyze_[aspect]",
"command": "bash(cd [path] && gemini -p 'PURPOSE: [goal]\\nTASK: [tasks]\\nMODE: analysis\\nCONTEXT: @[paths]\\nEXPECTED: [output]\\nRULES: $(cat [template]) | [constraints] | analysis=READ-ONLY')",
"command": "ccw cli exec 'PURPOSE: [goal]\\nTASK: [tasks]\\nMODE: analysis\\nCONTEXT: @[paths]\\nEXPECTED: [output]\\nRULES: $(cat [template]) | [constraints] | analysis=READ-ONLY' --tool gemini --cd [path]",
"output_to": "analysis_result"
},
// Pattern: Qwen CLI analysis (fallback/alternative)
{
"step": "qwen_analyze_[aspect]",
"command": "bash(cd [path] && qwen -p '[similar to gemini pattern]')",
"command": "ccw cli exec '[similar to gemini pattern]' --tool qwen --cd [path]",
"output_to": "analysis_result"
},
@@ -457,7 +457,7 @@ The examples above demonstrate **patterns**, not fixed requirements. Agent MUST:
4. **Command Composition Patterns**:
- **Single command**: `bash([simple_search])`
- **Multiple commands**: `["bash([cmd1])", "bash([cmd2])"]`
- **CLI analysis**: `bash(cd [path] && gemini -p '[prompt]')`
- **CLI analysis**: `ccw cli exec '[prompt]' --tool gemini --cd [path]`
- **MCP integration**: `mcp__[tool]__[function]([params])`
**Key Principle**: Examples show **structure patterns**, not specific implementations. Agent must create task-appropriate steps dynamically.
@@ -481,9 +481,9 @@ The `implementation_approach` supports **two execution modes** based on the pres
- **Use for**: Large-scale features, complex refactoring, or when user explicitly requests CLI tool usage
- **Required fields**: Same as default mode **PLUS** `command`
- **Command patterns**:
- `bash(codex -C [path] --full-auto exec '[prompt]' --skip-git-repo-check -s danger-full-access)`
- `bash(codex --full-auto exec '[task]' resume --last --skip-git-repo-check -s danger-full-access)` (multi-step)
- `bash(cd [path] && gemini -p '[prompt]' --approval-mode yolo)` (write mode)
- `ccw cli exec '[prompt]' --tool codex --mode auto --cd [path]`
- `ccw cli exec '[task]' --tool codex --mode auto` (multi-step with context)
- `ccw cli exec '[prompt]' --tool gemini --mode write --cd [path]` (write mode)
**Semantic CLI Tool Selection**:
@@ -500,12 +500,12 @@ Agent determines CLI tool usage per-step based on user semantics and task nature
**Task-Based Selection** (when no explicit user preference):
- **Implementation/coding**: Codex preferred for autonomous development
- **Analysis/exploration**: Gemini preferred for large context analysis
- **Documentation**: Gemini/Qwen with write mode (`--approval-mode yolo`)
- **Documentation**: Gemini/Qwen with write mode (`--mode write`)
- **Testing**: Depends on complexity - simple=agent, complex=Codex
**Default Behavior**: Agent always executes the workflow. CLI commands are embedded in `implementation_approach` steps:
- Agent orchestrates task execution
- When step has `command` field, agent executes it via Bash
- When step has `command` field, agent executes it via CCW CLI
- When step has no `command` field, agent implements directly
- This maintains agent control while leveraging CLI tool power
@@ -559,7 +559,7 @@ Agent determines CLI tool usage per-step based on user semantics and task nature
"step": 3,
"title": "Execute implementation using CLI tool",
"description": "Use Codex/Gemini for complex autonomous execution",
"command": "bash(codex -C [path] --full-auto exec '[prompt]' --skip-git-repo-check -s danger-full-access)",
"command": "ccw cli exec '[prompt]' --tool codex --mode auto --cd [path]",
"modification_points": ["[Same as default mode]"],
"logic_flow": ["[Same as default mode]"],
"depends_on": [1, 2],

View File

@@ -100,7 +100,7 @@ CONTEXT: @**/*
# Specific patterns
CONTEXT: @CLAUDE.md @src/**/* @*.ts
# Cross-directory (requires --include-directories)
# Cross-directory (requires --includeDirs)
CONTEXT: @**/* @../shared/**/* @../types/**/*
```
@@ -144,43 +144,40 @@ discuss → multi (gemini + codex parallel)
- Codex: `gpt-5` (default), `gpt5-codex` (large context)
- **Position**: `-m` after prompt, before flags
### Command Templates
### Command Templates (CCW Unified CLI)
**Gemini/Qwen (Analysis)**:
```bash
cd {dir} && gemini -p "
ccw cli exec "
PURPOSE: {goal}
TASK: {task}
MODE: analysis
CONTEXT: @**/*
EXPECTED: {output}
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/pattern.txt)
" -m gemini-2.5-pro
" --tool gemini --cd {dir}
# Qwen fallback: Replace 'gemini' with 'qwen'
# Qwen fallback: Replace '--tool gemini' with '--tool qwen'
```
**Gemini/Qwen (Write)**:
```bash
cd {dir} && gemini -p "..." --approval-mode yolo
ccw cli exec "..." --tool gemini --mode write --cd {dir}
```
**Codex (Auto)**:
```bash
codex -C {dir} --full-auto exec "..." --skip-git-repo-check -s danger-full-access
# Resume: Add 'resume --last' after prompt
codex --full-auto exec "..." resume --last --skip-git-repo-check -s danger-full-access
ccw cli exec "..." --tool codex --mode auto --cd {dir}
```
**Cross-Directory** (Gemini/Qwen):
```bash
cd src/auth && gemini -p "CONTEXT: @**/* @../shared/**/*" --include-directories ../shared
ccw cli exec "CONTEXT: @**/* @../shared/**/*" --tool gemini --cd src/auth --includeDirs ../shared
```
**Directory Scope**:
- `@` only references current directory + subdirectories
- External dirs: MUST use `--include-directories` + explicit CONTEXT reference
- External dirs: MUST use `--includeDirs` + explicit CONTEXT reference
**Timeout**: Simple 20min | Medium 40min | Complex 60min (Codex ×1.5)

View File

@@ -78,14 +78,14 @@ rg "^import .* from " -n | head -30
### Gemini Semantic Analysis (deep-scan, dependency-map)
```bash
cd {dir} && gemini -p "
ccw cli exec "
PURPOSE: {from prompt}
TASK: {from prompt}
MODE: analysis
CONTEXT: @**/*
EXPECTED: {from prompt}
RULES: {from prompt, if template specified} | analysis=READ-ONLY
"
" --tool gemini --cd {dir}
```
**Fallback Chain**: Gemini → Qwen → Codex → Bash-only

View File

@@ -97,7 +97,7 @@ Phase 3: planObject Generation
## CLI Command Template
```bash
cd {project_root} && {cli_tool} -p "
ccw cli exec "
PURPOSE: Generate implementation plan for {complexity} task
TASK:
• Analyze: {task_description}
@@ -134,7 +134,7 @@ RULES: $(cat ~/.claude/workflows/cli-templates/prompts/planning/02-breakdown-tas
- Acceptance must be quantified (counts, method names, metrics)
- Dependencies use task IDs (T1, T2)
- analysis=READ-ONLY
"
" --tool {cli_tool} --cd {project_root}
```
## Core Functions

View File

@@ -107,7 +107,7 @@ Phase 3: Task JSON Generation
**Template-Based Command Construction with Test Layer Awareness**:
```bash
cd {project_root} && {cli_tool} -p "
ccw cli exec "
PURPOSE: Analyze {test_type} test failures and generate fix strategy for iteration {iteration}
TASK:
• Review {failed_tests.length} {test_type} test failures: [{test_names}]
@@ -134,7 +134,7 @@ RULES: $(cat ~/.claude/workflows/cli-templates/prompts/{template}) |
- Consider previous iteration failures
- Validate fix doesn't introduce new vulnerabilities
- analysis=READ-ONLY
" {timeout_flag}
" --tool {cli_tool} --cd {project_root} --timeout {timeout_value}
```
**Layer-Specific Guidance Injection**:
@@ -527,9 +527,9 @@ See: `.process/iteration-{iteration}-cli-output.txt`
1. **Detect test_type**: "integration" → Apply integration-specific diagnosis
2. **Execute CLI**:
```bash
gemini -p "PURPOSE: Analyze integration test failure...
ccw cli exec "PURPOSE: Analyze integration test failure...
TASK: Examine component interactions, data flow, interface contracts...
RULES: Analyze full call stack and data flow across components"
RULES: Analyze full call stack and data flow across components" --tool gemini
```
3. **Parse Output**: Extract RCA, 修复建议, 验证建议 sections
4. **Generate Task JSON** (IMPL-fix-1.json):

View File

@@ -122,9 +122,9 @@ When task JSON contains `flow_control.implementation_approach` array:
- If `command` field present, execute it; otherwise use agent capabilities
**CLI Command Execution (CLI Execute Mode)**:
When step contains `command` field with Codex CLI, execute via Bash tool. For Codex resume:
- First task (`depends_on: []`): `codex -C [path] --full-auto exec "..." --skip-git-repo-check -s danger-full-access`
- Subsequent tasks (has `depends_on`): Add `resume --last` flag to maintain session context
When step contains `command` field with Codex CLI, execute via CCW CLI. For Codex resume:
- First task (`depends_on: []`): `ccw cli exec "..." --tool codex --mode auto --cd [path]`
- Subsequent tasks (has `depends_on`): Use CCW CLI with resume context to maintain session
**Test-Driven Development**:
- Write tests first (red → green → refactor)

View File

@@ -61,9 +61,9 @@ The agent supports **two execution modes** based on task JSON's `meta.cli_execut
**Step 2** (CLI execution):
- Agent substitutes [target_folders] into command
- Agent executes CLI command via Bash tool:
- Agent executes CLI command via CCW:
```bash
bash(cd src/modules && gemini --approval-mode yolo -p "
ccw cli exec "
PURPOSE: Generate module documentation
TASK: Create API.md and README.md for each module
MODE: write
@@ -71,7 +71,7 @@ The agent supports **two execution modes** based on task JSON's `meta.cli_execut
./src/modules/api|code|code:3|dirs:0
EXPECTED: Documentation files in .workflow/docs/my_project/src/modules/
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt) | Mirror source structure
")
" --tool gemini --mode write --cd src/modules
```
4. **CLI Execution** (Gemini CLI):
@@ -216,7 +216,7 @@ Before completion, verify:
{
"step": "analyze_module_structure",
"action": "Deep analysis of module structure and API",
"command": "bash(cd src/auth && gemini \"PURPOSE: Document module comprehensively\nTASK: Extract module purpose, architecture, public API, dependencies\nMODE: analysis\nCONTEXT: @**/* System: [system_context]\nEXPECTED: Complete module analysis for documentation\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt)\")",
"command": "ccw cli exec \"PURPOSE: Document module comprehensively\nTASK: Extract module purpose, architecture, public API, dependencies\nMODE: analysis\nCONTEXT: @**/* System: [system_context]\nEXPECTED: Complete module analysis for documentation\nRULES: $(cat ~/.claude/workflows/cli-templates/prompts/documentation/module-documentation.txt)\" --tool gemini --cd src/auth",
"output_to": "module_analysis",
"on_error": "fail"
}

View File

@@ -236,12 +236,12 @@ api_id=$((group_count + 3))
| Mode | cli_execute | Placement | CLI MODE | Approval Flag | Agent Role |
|------|-------------|-----------|----------|---------------|------------|
| **Agent** | false | pre_analysis | analysis | (none) | Generate docs in implementation_approach |
| **CLI** | true | implementation_approach | write | --approval-mode yolo | Execute CLI commands, validate output |
| **CLI** | true | implementation_approach | write | --mode write | Execute CLI commands, validate output |
**Command Patterns**:
- Gemini/Qwen: `cd dir && gemini -p "..."`
- CLI Mode: `cd dir && gemini --approval-mode yolo -p "..."`
- Codex: `codex -C dir --full-auto exec "..." --skip-git-repo-check -s danger-full-access`
- Gemini/Qwen: `ccw cli exec "..." --tool gemini --cd dir`
- CLI Mode: `ccw cli exec "..." --tool gemini --mode write --cd dir`
- Codex: `ccw cli exec "..." --tool codex --mode auto --cd dir`
**Generation Process**:
1. Read configuration values (tool, cli_execute, mode) from workflow-session.json
@@ -332,7 +332,7 @@ api_id=$((group_count + 3))
{
"step": 2,
"title": "Batch generate documentation via CLI",
"command": "bash(dirs=$(jq -r '.groups.assignments[] | select(.group_id == \"${group_number}\") | .directories[]' ${session_dir}/.process/doc-planning-data.json); for dir in $dirs; do cd \"$dir\" && gemini --approval-mode yolo -p \"PURPOSE: Generate module docs\\nTASK: Create documentation\\nMODE: write\\nCONTEXT: @**/* [phase2_context]\\nEXPECTED: API.md and README.md\\nRULES: Mirror structure\" || echo \"Failed: $dir\"; cd -; done)",
"command": "ccw cli exec 'PURPOSE: Generate module docs\\nTASK: Create documentation\\nMODE: write\\nCONTEXT: @**/* [phase2_context]\\nEXPECTED: API.md and README.md\\nRULES: Mirror structure' --tool gemini --mode write --cd ${dirs_from_group}",
"depends_on": [1],
"output": "generated_docs"
}
@@ -602,7 +602,7 @@ api_id=$((group_count + 3))
| Mode | CLI Placement | CLI MODE | Approval Flag | Agent Role |
|------|---------------|----------|---------------|------------|
| **Agent (default)** | pre_analysis | analysis | (none) | Generates documentation content |
| **CLI (--cli-execute)** | implementation_approach | write | --approval-mode yolo | Executes CLI commands, validates output |
| **CLI (--cli-execute)** | implementation_approach | write | --mode write | Executes CLI commands, validates output |
**Execution Flow**:
- **Phase 2**: Unified analysis once, results in `.process/`

View File

@@ -5,7 +5,7 @@ argument-hint: "[--tool gemini|qwen] \"task context description\""
allowed-tools: Task(*), Bash(*)
examples:
- /memory:load "在当前前端基础上开发用户认证功能"
- /memory:load --tool qwen -p "重构支付模块API"
- /memory:load --tool qwen "重构支付模块API"
---
# Memory Load Command (/memory:load)
@@ -136,7 +136,7 @@ Task(
Execute Gemini/Qwen CLI for deep analysis (saves main thread tokens):
\`\`\`bash
cd . && ${tool} -p "
ccw cli exec "
PURPOSE: Extract project core context for task: ${task_description}
TASK: Analyze project architecture, tech stack, key patterns, relevant files
MODE: analysis
@@ -147,7 +147,7 @@ RULES:
- Identify key architecture patterns and technical constraints
- Extract integration points and development standards
- Output concise, structured format
"
" --tool ${tool}
\`\`\`
### Step 4: Generate Core Content Package
@@ -212,7 +212,7 @@ Before returning:
### Example 2: Using Qwen Tool
```bash
/memory:load --tool qwen -p "重构支付模块API"
/memory:load --tool qwen "重构支付模块API"
```
Agent uses Qwen CLI for analysis, returns same structured package.

View File

@@ -1,477 +1,314 @@
---
name: tech-research
description: 3-phase orchestrator: extract tech stack from session/name → delegate to agent for Exa research and module generation → generate SKILL.md index (skips phase 2 if exists)
description: "3-phase orchestrator: extract tech stack → Exa research → generate path-conditional rules (auto-loaded by Claude Code)"
argument-hint: "[session-id | tech-stack-name] [--regenerate] [--tool <gemini|qwen>]"
allowed-tools: SlashCommand(*), TodoWrite(*), Bash(*), Read(*), Write(*), Task(*)
---
# Tech Stack Research SKILL Generator
# Tech Stack Rules Generator
## Overview
**Pure Orchestrator with Agent Delegation**: Prepares context paths and delegates ALL work to agent. Agent produces files directly.
**Purpose**: Generate multi-layered, path-conditional rules that Claude Code automatically loads based on file context.
**Auto-Continue Workflow**: Runs fully autonomously once triggered. Each phase completes and automatically triggers the next phase.
**Key Difference from SKILL Memory**:
- **SKILL**: Manual loading via `Skill(command: "tech-name")`
- **Rules**: Automatic loading when working with matching file paths
**Execution Paths**:
- **Full Path**: All 3 phases (no existing SKILL OR `--regenerate` specified)
- **Skip Path**: Phase 1 → Phase 3 (existing SKILL found AND no `--regenerate` flag)
- **Phase 3 Always Executes**: SKILL index is always generated or updated
**Output Structure**:
```
.claude/rules/tech/{tech-stack}/
├── core.md # paths: **/*.{ext} - Core principles
├── patterns.md # paths: src/**/*.{ext} - Implementation patterns
├── testing.md # paths: **/*.{test,spec}.{ext} - Testing rules
├── config.md # paths: *.config.* - Configuration rules
├── api.md # paths: **/api/**/* - API rules (backend only)
├── components.md # paths: **/components/**/* - Component rules (frontend only)
└── metadata.json # Generation metadata
```
**Agent Responsibility**:
- Agent does ALL the work: context reading, Exa research, content synthesis, file writing
- Orchestrator only provides context paths and waits for completion
**Templates Location**: `~/.claude/workflows/cli-templates/prompts/rules/`
---
## Core Rules
1. **Start Immediately**: First action is TodoWrite initialization, second action is Phase 1 execution
2. **Context Path Delegation**: Pass session directory or tech stack name to agent, let agent do discovery
3. **Agent Produces Files**: Agent directly writes all module files, orchestrator does NOT parse agent output
4. **Auto-Continue**: After completing each phase, update TodoWrite and immediately execute next phase
5. **No User Prompts**: Never ask user questions or wait for input between phases
6. **Track Progress**: Update TodoWrite after EVERY phase completion before starting next phase
7. **Lightweight Index**: Phase 3 only generates SKILL.md index by reading existing files
1. **Start Immediately**: First action is TodoWrite initialization
2. **Path-Conditional Output**: Every rule file includes `paths` frontmatter
3. **Template-Driven**: Agent reads templates before generating content
4. **Agent Produces Files**: Agent writes all rule files directly
5. **No Manual Loading**: Rules auto-activate when Claude works with matching files
---
## 3-Phase Execution
### Phase 1: Prepare Context Paths
### Phase 1: Prepare Context & Detect Tech Stack
**Goal**: Detect input mode, prepare context paths for agent, check existing SKILL
**Goal**: Detect input mode, extract tech stack info, determine file extensions
**Input Mode Detection**:
```bash
# Get input parameter
input="$1"
# Detect mode
if [[ "$input" == WFS-* ]]; then
MODE="session"
SESSION_ID="$input"
CONTEXT_PATH=".workflow/${SESSION_ID}"
# Read workflow-session.json to extract tech stack
else
MODE="direct"
TECH_STACK_NAME="$input"
CONTEXT_PATH="$input" # Pass tech stack name as context
fi
```
**Check Existing SKILL**:
```bash
# For session mode, peek at session to get tech stack name
if [[ "$MODE" == "session" ]]; then
bash(test -f ".workflow/${SESSION_ID}/workflow-session.json")
Read(.workflow/${SESSION_ID}/workflow-session.json)
# Extract tech_stack_name (minimal extraction)
fi
**Tech Stack Analysis**:
```javascript
// Decompose composite tech stacks
// "typescript-react-nextjs" → ["typescript", "react", "nextjs"]
# Normalize and check
const TECH_EXTENSIONS = {
"typescript": "{ts,tsx}",
"javascript": "{js,jsx}",
"python": "py",
"rust": "rs",
"go": "go",
"java": "java",
"csharp": "cs",
"ruby": "rb",
"php": "php"
};
const FRAMEWORK_TYPE = {
"react": "frontend",
"vue": "frontend",
"angular": "frontend",
"nextjs": "fullstack",
"nuxt": "fullstack",
"fastapi": "backend",
"express": "backend",
"django": "backend",
"rails": "backend"
};
```
**Check Existing Rules**:
```bash
normalized_name=$(echo "$TECH_STACK_NAME" | tr '[:upper:]' '[:lower:]' | tr ' ' '-')
bash(test -d ".claude/skills/${normalized_name}" && echo "exists" || echo "not_exists")
bash(find ".claude/skills/${normalized_name}" -name "*.md" 2>/dev/null | wc -l || echo 0)
rules_dir=".claude/rules/tech/${normalized_name}"
existing_count=$(find "${rules_dir}" -name "*.md" 2>/dev/null | wc -l || echo 0)
```
**Skip Decision**:
```javascript
if (existing_files > 0 && !regenerate_flag) {
SKIP_GENERATION = true
message = "Tech stack SKILL already exists, skipping Phase 2. Use --regenerate to force regeneration."
} else if (regenerate_flag) {
bash(rm -rf ".claude/skills/${normalized_name}")
SKIP_GENERATION = false
message = "Regenerating tech stack SKILL from scratch."
} else {
SKIP_GENERATION = false
message = "No existing SKILL found, generating new tech stack documentation."
}
```
- If `existing_count > 0` AND no `--regenerate``SKIP_GENERATION = true`
- If `--regenerate` → Delete existing and regenerate
**Output Variables**:
- `MODE`: `session` or `direct`
- `SESSION_ID`: Session ID (if session mode)
- `CONTEXT_PATH`: Path to session directory OR tech stack name
- `TECH_STACK_NAME`: Extracted or provided tech stack name
- `SKIP_GENERATION`: Boolean - whether to skip Phase 2
- `TECH_STACK_NAME`: Normalized name
- `PRIMARY_LANG`: Primary language
- `FILE_EXT`: File extension pattern
- `FRAMEWORK_TYPE`: frontend | backend | fullstack | library
- `COMPONENTS`: Array of tech components
- `SKIP_GENERATION`: Boolean
**TodoWrite**:
- If skipping: Mark phase 1 completed, phase 2 completed, phase 3 in_progress
- If not skipping: Mark phase 1 completed, phase 2 in_progress
**TodoWrite**: Mark phase 1 completed
---
### Phase 2: Agent Produces All Files
### Phase 2: Agent Produces Path-Conditional Rules
**Skip Condition**: Skipped if `SKIP_GENERATION = true`
**Goal**: Delegate EVERYTHING to agent - context reading, Exa research, content synthesis, and file writing
**Agent Task Specification**:
**Goal**: Delegate to agent for Exa research and rule file generation
**Template Files**:
```
Task(
~/.claude/workflows/cli-templates/prompts/rules/
├── tech-rules-agent-prompt.txt # Agent instructions
├── rule-core.txt # Core principles template
├── rule-patterns.txt # Implementation patterns template
├── rule-testing.txt # Testing rules template
├── rule-config.txt # Configuration rules template
├── rule-api.txt # API rules template (backend)
└── rule-components.txt # Component rules template (frontend)
```
**Agent Task**:
```javascript
Task({
subagent_type: "general-purpose",
description: "Generate tech stack SKILL: {CONTEXT_PATH}",
prompt: "
Generate a complete tech stack SKILL package with Exa research.
description: `Generate tech stack rules: ${TECH_STACK_NAME}`,
prompt: `
You are generating path-conditional rules for Claude Code.
**Context Provided**:
- Mode: {MODE}
- Context Path: {CONTEXT_PATH}
## Context
- Tech Stack: ${TECH_STACK_NAME}
- Primary Language: ${PRIMARY_LANG}
- File Extensions: ${FILE_EXT}
- Framework Type: ${FRAMEWORK_TYPE}
- Components: ${JSON.stringify(COMPONENTS)}
- Output Directory: .claude/rules/tech/${TECH_STACK_NAME}/
**Templates Available**:
- Module Format: ~/.claude/workflows/cli-templates/prompts/tech/tech-module-format.txt
- SKILL Index: ~/.claude/workflows/cli-templates/prompts/tech/tech-skill-index.txt
## Instructions
**Your Responsibilities**:
Read the agent prompt template for detailed instructions:
$(cat ~/.claude/workflows/cli-templates/prompts/rules/tech-rules-agent-prompt.txt)
1. **Extract Tech Stack Information**:
## Execution Steps
IF MODE == 'session':
- Read `.workflow/active/{session_id}/workflow-session.json`
- Read `.workflow/active/{session_id}/.process/context-package.json`
- Extract tech_stack: {language, frameworks, libraries}
- Build tech stack name: \"{language}-{framework1}-{framework2}\"
- Example: \"typescript-react-nextjs\"
1. Execute Exa research queries (see agent prompt)
2. Read each rule template
3. Generate rule files following template structure
4. Write files to output directory
5. Write metadata.json
6. Report completion
IF MODE == 'direct':
- Tech stack name = CONTEXT_PATH
- Parse composite: split by '-' delimiter
- Example: \"typescript-react-nextjs\" → [\"typescript\", \"react\", \"nextjs\"]
## Variable Substitutions
2. **Execute Exa Research** (4-6 parallel queries):
Base Queries (always execute):
- mcp__exa__get_code_context_exa(query: \"{tech} core principles best practices 2025\", tokensNum: 8000)
- mcp__exa__get_code_context_exa(query: \"{tech} common patterns architecture examples\", tokensNum: 7000)
- mcp__exa__web_search_exa(query: \"{tech} configuration setup tooling 2025\", numResults: 5)
- mcp__exa__get_code_context_exa(query: \"{tech} testing strategies\", tokensNum: 5000)
Component Queries (if composite):
- For each additional component:
mcp__exa__get_code_context_exa(query: \"{main_tech} {component} integration\", tokensNum: 5000)
3. **Read Module Format Template**:
Read template for structure guidance:
```bash
Read(~/.claude/workflows/cli-templates/prompts/tech/tech-module-format.txt)
```
4. **Synthesize Content into 6 Modules**:
Follow template structure from tech-module-format.txt:
- **principles.md** - Core concepts, philosophies (~3K tokens)
- **patterns.md** - Implementation patterns with code examples (~5K tokens)
- **practices.md** - Best practices, anti-patterns, pitfalls (~4K tokens)
- **testing.md** - Testing strategies, frameworks (~3K tokens)
- **config.md** - Setup, configuration, tooling (~3K tokens)
- **frameworks.md** - Framework integration (only if composite, ~4K tokens)
Each module follows template format:
- Frontmatter (YAML)
- Main sections with clear headings
- Code examples from Exa research
- Best practices sections
- References to Exa sources
5. **Write Files Directly**:
```javascript
// Create directory
bash(mkdir -p \".claude/skills/{tech_stack_name}\")
// Write each module file using Write tool
Write({ file_path: \".claude/skills/{tech_stack_name}/principles.md\", content: ... })
Write({ file_path: \".claude/skills/{tech_stack_name}/patterns.md\", content: ... })
Write({ file_path: \".claude/skills/{tech_stack_name}/practices.md\", content: ... })
Write({ file_path: \".claude/skills/{tech_stack_name}/testing.md\", content: ... })
Write({ file_path: \".claude/skills/{tech_stack_name}/config.md\", content: ... })
// Write frameworks.md only if composite
// Write metadata.json
Write({
file_path: \".claude/skills/{tech_stack_name}/metadata.json\",
content: JSON.stringify({
tech_stack_name,
components,
is_composite,
generated_at: timestamp,
source: \"exa-research\",
research_summary: { total_queries, total_sources }
})
})
```
6. **Report Completion**:
Provide summary:
- Tech stack name
- Files created (count)
- Exa queries executed
- Sources consulted
**CRITICAL**:
- MUST read external template files before generating content (step 3 for modules, step 4 for index)
- You have FULL autonomy - read files, execute Exa, synthesize content, write files
- Do NOT return JSON or structured data - produce actual .md files
- Handle errors gracefully (Exa failures, missing files, template read failures)
- If tech stack cannot be determined, ask orchestrator to clarify
"
)
Replace in templates:
- {TECH_STACK_NAME} → ${TECH_STACK_NAME}
- {PRIMARY_LANG} → ${PRIMARY_LANG}
- {FILE_EXT} → ${FILE_EXT}
- {FRAMEWORK_TYPE} → ${FRAMEWORK_TYPE}
`
})
```
**Completion Criteria**:
- Agent task executed successfully
- 5-6 modular files written to `.claude/skills/{tech_stack_name}/`
- 4-6 rule files written with proper `paths` frontmatter
- metadata.json written
- Agent reports completion
- Agent reports files created
**TodoWrite**: Mark phase 2 completed, phase 3 in_progress
**TodoWrite**: Mark phase 2 completed
---
### Phase 3: Generate SKILL.md Index
### Phase 3: Verify & Report
**Note**: This phase **ALWAYS executes** - generates or updates the SKILL index.
**Goal**: Read generated module files and create SKILL.md index with loading recommendations
**Goal**: Verify generated files and provide usage summary
**Steps**:
1. **Verify Generated Files**:
1. **Verify Files**:
```bash
bash(find ".claude/skills/${TECH_STACK_NAME}" -name "*.md" -type f | sort)
find ".claude/rules/tech/${TECH_STACK_NAME}" -name "*.md" -type f
```
2. **Read metadata.json**:
2. **Validate Frontmatter**:
```bash
head -5 ".claude/rules/tech/${TECH_STACK_NAME}/core.md"
```
3. **Read Metadata**:
```javascript
Read(.claude/skills/${TECH_STACK_NAME}/metadata.json)
// Extract: tech_stack_name, components, is_composite, research_summary
Read(`.claude/rules/tech/${TECH_STACK_NAME}/metadata.json`)
```
3. **Read Module Headers** (optional, first 20 lines):
```javascript
Read(.claude/skills/${TECH_STACK_NAME}/principles.md, limit: 20)
// Repeat for other modules
4. **Generate Summary Report**:
```
Tech Stack Rules Generated
4. **Read SKILL Index Template**:
Tech Stack: {TECH_STACK_NAME}
Location: .claude/rules/tech/{TECH_STACK_NAME}/
```javascript
Read(~/.claude/workflows/cli-templates/prompts/tech/tech-skill-index.txt)
Files Created:
├── core.md → paths: **/*.{ext}
├── patterns.md → paths: src/**/*.{ext}
├── testing.md → paths: **/*.{test,spec}.{ext}
├── config.md → paths: *.config.*
├── api.md → paths: **/api/**/* (if backend)
└── components.md → paths: **/components/**/* (if frontend)
Auto-Loading:
- Rules apply automatically when editing matching files
- No manual loading required
Example Activation:
- Edit src/components/Button.tsx → core.md + patterns.md + components.md
- Edit tests/api.test.ts → core.md + testing.md
- Edit package.json → config.md
```
5. **Generate SKILL.md Index**:
Follow template from tech-skill-index.txt with variable substitutions:
- `{TECH_STACK_NAME}`: From metadata.json
- `{MAIN_TECH}`: Primary technology
- `{ISO_TIMESTAMP}`: Current timestamp
- `{QUERY_COUNT}`: From research_summary
- `{SOURCE_COUNT}`: From research_summary
- Conditional sections for composite tech stacks
Template provides structure for:
- Frontmatter with metadata
- Overview and tech stack description
- Module organization (Core/Practical/Config sections)
- Loading recommendations (Quick/Implementation/Complete)
- Usage guidelines and auto-trigger keywords
- Research metadata and version history
6. **Write SKILL.md**:
```javascript
Write({
file_path: `.claude/skills/${TECH_STACK_NAME}/SKILL.md`,
content: generatedIndexMarkdown
})
```
**Completion Criteria**:
- SKILL.md index written
- All module files verified
- Loading recommendations included
**TodoWrite**: Mark phase 3 completed
**Final Report**:
```
Tech Stack SKILL Package Complete
Tech Stack: {TECH_STACK_NAME}
Location: .claude/skills/{TECH_STACK_NAME}/
Files: SKILL.md + 5-6 modules + metadata.json
Exa Research: {queries} queries, {sources} sources
Usage: Skill(command: "{TECH_STACK_NAME}")
```
---
## Implementation Details
## Path Pattern Reference
### TodoWrite Patterns
| Pattern | Matches |
|---------|---------|
| `**/*.ts` | All .ts files |
| `src/**/*` | All files under src/ |
| `*.config.*` | Config files in root |
| `**/*.{ts,tsx}` | .ts and .tsx files |
**Initialization** (Before Phase 1):
```javascript
TodoWrite({todos: [
{"content": "Prepare context paths", "status": "in_progress", "activeForm": "Preparing context paths"},
{"content": "Agent produces all module files", "status": "pending", "activeForm": "Agent producing files"},
{"content": "Generate SKILL.md index", "status": "pending", "activeForm": "Generating SKILL index"}
]})
```
**Full Path** (SKIP_GENERATION = false):
```javascript
// After Phase 1
TodoWrite({todos: [
{"content": "Prepare context paths", "status": "completed", ...},
{"content": "Agent produces all module files", "status": "in_progress", ...},
{"content": "Generate SKILL.md index", "status": "pending", ...}
]})
// After Phase 2
TodoWrite({todos: [
{"content": "Prepare context paths", "status": "completed", ...},
{"content": "Agent produces all module files", "status": "completed", ...},
{"content": "Generate SKILL.md index", "status": "in_progress", ...}
]})
// After Phase 3
TodoWrite({todos: [
{"content": "Prepare context paths", "status": "completed", ...},
{"content": "Agent produces all module files", "status": "completed", ...},
{"content": "Generate SKILL.md index", "status": "completed", ...}
]})
```
**Skip Path** (SKIP_GENERATION = true):
```javascript
// After Phase 1 (skip Phase 2)
TodoWrite({todos: [
{"content": "Prepare context paths", "status": "completed", ...},
{"content": "Agent produces all module files", "status": "completed", ...}, // Skipped
{"content": "Generate SKILL.md index", "status": "in_progress", ...}
]})
```
### Execution Flow
**Full Path**:
```
User → TodoWrite Init → Phase 1 (prepare) → Phase 2 (agent writes files) → Phase 3 (write index) → Report
```
**Skip Path**:
```
User → TodoWrite Init → Phase 1 (detect existing) → Phase 3 (update index) → Report
```
### Error Handling
**Phase 1 Errors**:
- Invalid session ID: Report error, verify session exists
- Missing context-package: Warn, fall back to direct mode
- No tech stack detected: Ask user to specify tech stack name
**Phase 2 Errors (Agent)**:
- Agent task fails: Retry once, report if fails again
- Exa API failures: Agent handles internally with retries
- Incomplete results: Warn user, proceed with partial data if minimum sections available
**Phase 3 Errors**:
- Write failures: Report which files failed
- Missing files: Note in SKILL.md, suggest regeneration
| Tech Stack | Core Pattern | Test Pattern |
|------------|--------------|--------------|
| TypeScript | `**/*.{ts,tsx}` | `**/*.{test,spec}.{ts,tsx}` |
| Python | `**/*.py` | `**/test_*.py, **/*_test.py` |
| Rust | `**/*.rs` | `**/tests/**/*.rs` |
| Go | `**/*.go` | `**/*_test.go` |
---
## Parameters
```bash
/memory:tech-research [session-id | "tech-stack-name"] [--regenerate] [--tool <gemini|qwen>]
/memory:tech-research [session-id | "tech-stack-name"] [--regenerate]
```
**Arguments**:
- **session-id | tech-stack-name**: Input source (auto-detected by WFS- prefix)
- Session mode: `WFS-user-auth-v2` - Extract tech stack from workflow
- Direct mode: `"typescript"`, `"typescript-react-nextjs"` - User specifies
- **--regenerate**: Force regenerate existing SKILL (deletes and recreates)
- **--tool**: Reserved for future CLI integration (default: gemini)
- **session-id**: `WFS-*` format - Extract from workflow session
- **tech-stack-name**: Direct input - `"typescript"`, `"typescript-react"`
- **--regenerate**: Force regenerate existing rules
---
## Examples
**Generated File Structure** (for all examples):
```
.claude/skills/{tech-stack}/
├── SKILL.md # Index (Phase 3)
├── principles.md # Agent (Phase 2)
├── patterns.md # Agent
├── practices.md # Agent
├── testing.md # Agent
├── config.md # Agent
├── frameworks.md # Agent (if composite)
└── metadata.json # Agent
```
### Direct Mode - Single Stack
### Single Language
```bash
/memory:tech-research "typescript"
```
**Workflow**:
1. Phase 1: Detects direct mode, checks existing SKILL
2. Phase 2: Agent executes 4 Exa queries, writes 5 modules
3. Phase 3: Generates SKILL.md index
**Output**: `.claude/rules/tech/typescript/` with 4 rule files
### Direct Mode - Composite Stack
### Frontend Stack
```bash
/memory:tech-research "typescript-react-nextjs"
/memory:tech-research "typescript-react"
```
**Workflow**:
1. Phase 1: Decomposes into ["typescript", "react", "nextjs"]
2. Phase 2: Agent executes 6 Exa queries (4 base + 2 components), writes 6 modules (adds frameworks.md)
3. Phase 3: Generates SKILL.md index with framework integration
**Output**: `.claude/rules/tech/typescript-react/` with 5 rule files (includes components.md)
### Session Mode - Extract from Workflow
### Backend Stack
```bash
/memory:tech-research "python-fastapi"
```
**Output**: `.claude/rules/tech/python-fastapi/` with 5 rule files (includes api.md)
### From Session
```bash
/memory:tech-research WFS-user-auth-20251104
```
**Workflow**:
1. Phase 1: Reads session, extracts tech stack: `python-fastapi-sqlalchemy`
2. Phase 2: Agent researches Python + FastAPI + SQLAlchemy, writes 6 modules
3. Phase 3: Generates SKILL.md index
**Workflow**: Extract tech stack from session → Generate rules
### Regenerate Existing
---
```bash
/memory:tech-research "react" --regenerate
```
**Workflow**:
1. Phase 1: Deletes existing SKILL due to --regenerate
2. Phase 2: Agent executes fresh Exa research (latest 2025 practices)
3. Phase 3: Generates updated SKILL.md
### Skip Path - Fast Update
```bash
/memory:tech-research "python"
```
**Scenario**: SKILL already exists with 7 files
**Workflow**:
1. Phase 1: Detects existing SKILL, sets SKIP_GENERATION = true
2. Phase 2: **SKIPPED**
3. Phase 3: Updates SKILL.md index only (5-10x faster)
## Comparison: Rules vs SKILL
| Aspect | SKILL Memory | Rules |
|--------|--------------|-------|
| Loading | Manual: `Skill("tech")` | Automatic by path |
| Scope | All files when loaded | Only matching files |
| Granularity | Monolithic packages | Per-file-type |
| Context | Full package | Only relevant rules |
**When to Use**:
- **Rules**: Tech stack conventions per file type
- **SKILL**: Reference docs, APIs, examples for manual lookup

View File

@@ -187,7 +187,7 @@ Objectives:
3. Use Gemini for aggregation (optional):
Command pattern:
cd .workflow/.archives/{session_id} && gemini -p "
ccw cli exec "
PURPOSE: Extract lessons and conflicts from workflow session
TASK:
• Analyze IMPL_PLAN and lessons from manifest
@@ -198,7 +198,7 @@ Objectives:
CONTEXT: @IMPL_PLAN.md @workflow-session.json
EXPECTED: Structured lessons and conflicts in JSON format
RULES: Template reference from skill-aggregation.txt
"
" --tool gemini --cd .workflow/.archives/{session_id}
3.5. **Generate SKILL.md Description** (CRITICAL for auto-loading):
@@ -334,7 +334,7 @@ Objectives:
- Sort sessions by date
2. Use Gemini for final aggregation:
gemini -p "
ccw cli exec "
PURPOSE: Aggregate lessons and conflicts from all workflow sessions
TASK:
• Group successes by functional domain
@@ -345,7 +345,7 @@ Objectives:
CONTEXT: [Provide aggregated JSON data]
EXPECTED: Final aggregated structure for SKILL documents
RULES: Template reference from skill-aggregation.txt
"
" --tool gemini
3. Read templates for formatting (same 4 templates as single mode)

View File

@@ -473,7 +473,7 @@ Detailed plan: ${executionContext.session.artifacts.plan}`)
return prompt
}
codex --full-auto exec "${buildCLIPrompt(batch)}" --skip-git-repo-check -s danger-full-access
ccw cli exec "${buildCLIPrompt(batch)}" --tool codex --mode auto
```
**Execution with tracking**:
@@ -541,15 +541,15 @@ RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-review-code-q
# - Report findings directly
# Method 2: Gemini Review (recommended)
gemini -p "[Shared Prompt Template with artifacts]"
ccw cli exec "[Shared Prompt Template with artifacts]" --tool gemini
# CONTEXT includes: @**/* @${plan.json} [@${exploration.json}]
# Method 3: Qwen Review (alternative)
qwen -p "[Shared Prompt Template with artifacts]"
ccw cli exec "[Shared Prompt Template with artifacts]" --tool qwen
# Same prompt as Gemini, different execution engine
# Method 4: Codex Review (autonomous)
codex --full-auto exec "[Verify plan acceptance criteria at ${plan.json}]" --skip-git-repo-check -s danger-full-access
ccw cli exec "[Verify plan acceptance criteria at ${plan.json}]" --tool codex --mode auto
```
**Implementation Note**: Replace `[Shared Prompt Template with artifacts]` placeholder with actual template content, substituting:

View File

@@ -133,37 +133,37 @@ After bash validation, the model takes control to:
```
- Use Gemini for security analysis:
```bash
cd .workflow/active/${sessionId} && gemini -p "
ccw cli exec "
PURPOSE: Security audit of completed implementation
TASK: Review code for security vulnerabilities, insecure patterns, auth/authz issues
CONTEXT: @.summaries/IMPL-*.md,../.. @../../CLAUDE.md
EXPECTED: Security findings report with severity levels
RULES: Focus on OWASP Top 10, authentication, authorization, data validation, injection risks
" --approval-mode yolo
" --tool gemini --mode write --cd .workflow/active/${sessionId}
```
**Architecture Review** (`--type=architecture`):
- Use Qwen for architecture analysis:
```bash
cd .workflow/active/${sessionId} && qwen -p "
ccw cli exec "
PURPOSE: Architecture compliance review
TASK: Evaluate adherence to architectural patterns, identify technical debt, review design decisions
CONTEXT: @.summaries/IMPL-*.md,../.. @../../CLAUDE.md
EXPECTED: Architecture assessment with recommendations
RULES: Check for patterns, separation of concerns, modularity, scalability
" --approval-mode yolo
" --tool qwen --mode write --cd .workflow/active/${sessionId}
```
**Quality Review** (`--type=quality`):
- Use Gemini for code quality:
```bash
cd .workflow/active/${sessionId} && gemini -p "
ccw cli exec "
PURPOSE: Code quality and best practices review
TASK: Assess code readability, maintainability, adherence to best practices
CONTEXT: @.summaries/IMPL-*.md,../.. @../../CLAUDE.md
EXPECTED: Quality assessment with improvement suggestions
RULES: Check for code smells, duplication, complexity, naming conventions
" --approval-mode yolo
" --tool gemini --mode write --cd .workflow/active/${sessionId}
```
**Action Items Review** (`--type=action-items`):
@@ -177,7 +177,7 @@ After bash validation, the model takes control to:
'
# Check implementation summaries against requirements
cd .workflow/active/${sessionId} && gemini -p "
ccw cli exec "
PURPOSE: Verify all requirements and acceptance criteria are met
TASK: Cross-check implementation summaries against original requirements
CONTEXT: @.task/IMPL-*.json,.summaries/IMPL-*.md,../.. @../../CLAUDE.md
@@ -191,7 +191,7 @@ After bash validation, the model takes control to:
- Verify all acceptance criteria are met
- Flag any incomplete or missing action items
- Assess deployment readiness
" --approval-mode yolo
" --tool gemini --mode write --cd .workflow/active/${sessionId}
```

View File

@@ -127,7 +127,7 @@ ccw session read {sessionId} --type task --raw | jq -r '.meta.agent'
**Gemini analysis for comprehensive TDD compliance report**
```bash
cd project-root && gemini -p "
ccw cli exec "
PURPOSE: Generate TDD compliance report
TASK: Analyze TDD workflow execution and generate quality report
CONTEXT: @{.workflow/active/{sessionId}/.task/*.json,.workflow/active/{sessionId}/.summaries/*,.workflow/active/{sessionId}/.process/tdd-cycle-report.md}
@@ -139,7 +139,7 @@ EXPECTED:
- Red-Green-Refactor cycle validation
- Best practices adherence assessment
RULES: Focus on TDD best practices and workflow adherence. Be specific about violations and improvements.
" > .workflow/active/{sessionId}/TDD_COMPLIANCE_REPORT.md
" --tool gemini --cd project-root > .workflow/active/{sessionId}/TDD_COMPLIANCE_REPORT.md
```
**Output**: TDD_COMPLIANCE_REPORT.md

View File

@@ -133,7 +133,7 @@ Task(subagent_type="cli-execution-agent", prompt=`
### 2. Execute CLI Analysis (Enhanced with Exploration + Scenario Uniqueness)
Primary (Gemini):
cd {project_root} && gemini -p "
ccw cli exec "
PURPOSE: Detect conflicts between plan and codebase, using exploration insights
TASK:
• **Review pre-identified conflict_indicators from exploration results**
@@ -152,7 +152,7 @@ Task(subagent_type="cli-execution-agent", prompt=`
- ModuleOverlap conflicts with overlap_analysis
- Targeted clarification questions
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-patterns.txt) | Focus on breaking changes, migration needs, and functional overlaps | Prioritize exploration-identified conflicts | analysis=READ-ONLY
"
" --tool gemini --cd {project_root}
Fallback: Qwen (same prompt) → Claude (manual analysis)

View File

@@ -89,7 +89,7 @@ Template: ~/.claude/workflows/cli-templates/prompts/test/test-concept-analysis.t
## EXECUTION STEPS
1. Execute Gemini analysis:
cd .workflow/active/{test_session_id}/.process && gemini -p "$(cat ~/.claude/workflows/cli-templates/prompts/test/test-concept-analysis.txt)" --approval-mode yolo
ccw cli exec "$(cat ~/.claude/workflows/cli-templates/prompts/test/test-concept-analysis.txt)" --tool gemini --mode write --cd .workflow/active/{test_session_id}/.process
2. Generate TEST_ANALYSIS_RESULTS.md:
Synthesize gemini-test-analysis.md into standardized format for task generation

View File

@@ -180,14 +180,14 @@ Task(subagent_type="ui-design-agent",
- Pattern: rg → Extract values → Compare → If different → Read full context with comments → Record conflict
- Alternative (if many files): Execute CLI analysis for comprehensive report:
\`\`\`bash
cd ${source} && gemini -p \"
ccw cli exec \"
PURPOSE: Detect color token conflicts across all CSS/SCSS/JS files
TASK: • Scan all files for color definitions • Identify conflicting values • Extract semantic comments
MODE: analysis
CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts
EXPECTED: JSON report listing conflicts with file:line, values, semantic context
RULES: Focus on core tokens | Report ALL variants | analysis=READ-ONLY
\"
\" --tool gemini --cd ${source}
\`\`\`
**Step 1: Load file list**
@@ -295,14 +295,14 @@ Task(subagent_type="ui-design-agent",
- Pattern: rg → Identify animation types → Map framework usage → Prioritize extraction targets
- Alternative (if complex framework mix): Execute CLI analysis for comprehensive report:
\`\`\`bash
cd ${source} && gemini -p \"
ccw cli exec \"
PURPOSE: Detect animation frameworks and patterns
TASK: • Identify frameworks • Map animation patterns • Categorize by complexity
MODE: analysis
CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts
EXPECTED: JSON report listing frameworks, animation types, file locations
RULES: Focus on framework consistency | Map all animations | analysis=READ-ONLY
\"
\" --tool gemini --cd ${source}
\`\`\`
**Step 1: Load file list**
@@ -374,14 +374,14 @@ Task(subagent_type="ui-design-agent",
- Pattern: rg → Count occurrences → Classify by frequency → Prioritize universal components
- Alternative (if large codebase): Execute CLI analysis for comprehensive categorization:
\`\`\`bash
cd ${source} && gemini -p \"
ccw cli exec \"
PURPOSE: Classify components as universal vs specialized
TASK: • Identify UI components • Classify reusability • Map layout systems
MODE: analysis
CONTEXT: @**/*.css @**/*.scss @**/*.js @**/*.ts @**/*.html
EXPECTED: JSON report categorizing components, layout patterns, naming conventions
RULES: Focus on component reusability | Identify layout systems | analysis=READ-ONLY
\"
\" --tool gemini --cd ${source}
\`\`\`
**Step 1: Load file list**

View File

@@ -1,39 +0,0 @@
#!/bin/bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec classify_folders '{"path":".","outputFormat":"json"}'
# This file will be removed in a future version.
# Classify folders by type for documentation generation
# Usage: get_modules_by_depth.sh | classify-folders.sh
# Output: folder_path|folder_type|code:N|dirs:N
while IFS='|' read -r depth_info path_info files_info types_info claude_info; do
# Extract folder path from format "path:./src/modules"
folder_path=$(echo "$path_info" | cut -d':' -f2-)
# Skip if path extraction failed
[[ -z "$folder_path" || ! -d "$folder_path" ]] && continue
# Count code files (maxdepth 1)
code_files=$(find "$folder_path" -maxdepth 1 -type f \
\( -name "*.ts" -o -name "*.tsx" -o -name "*.js" -o -name "*.jsx" \
-o -name "*.py" -o -name "*.go" -o -name "*.java" -o -name "*.rs" \
-o -name "*.c" -o -name "*.cpp" -o -name "*.cs" \) \
2>/dev/null | wc -l)
# Count subdirectories
subfolders=$(find "$folder_path" -maxdepth 1 -type d \
-not -path "$folder_path" 2>/dev/null | wc -l)
# Determine folder type
if [[ $code_files -gt 0 ]]; then
folder_type="code" # API.md + README.md
elif [[ $subfolders -gt 0 ]]; then
folder_type="navigation" # README.md only
else
folder_type="skip" # Empty or no relevant content
fi
# Output classification result
echo "${folder_path}|${folder_type}|code:${code_files}|dirs:${subfolders}"
done

View File

@@ -1,229 +0,0 @@
#!/bin/bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec convert_tokens_to_css '{"inputPath":"design-tokens.json","outputPath":"tokens.css"}'
# This file will be removed in a future version.
# Convert design-tokens.json to tokens.css with Google Fonts import and global font rules
# Usage: cat design-tokens.json | ./convert_tokens_to_css.sh > tokens.css
# Or: ./convert_tokens_to_css.sh < design-tokens.json > tokens.css
# Read JSON from stdin
json_input=$(cat)
# Extract metadata for header comment
style_name=$(echo "$json_input" | jq -r '.meta.name // "Unknown Style"' 2>/dev/null || echo "Design Tokens")
# Generate header
cat <<EOF
/* ========================================
Design Tokens: ${style_name}
Auto-generated from design-tokens.json
======================================== */
EOF
# ========================================
# Google Fonts Import Generation
# ========================================
# Extract font families and generate Google Fonts import URL
fonts=$(echo "$json_input" | jq -r '
.typography.font_family | to_entries[] | .value
' 2>/dev/null | sed "s/'//g" | cut -d',' -f1 | sort -u)
# Build Google Fonts URL
google_fonts_url="https://fonts.googleapis.com/css2?"
font_params=""
while IFS= read -r font; do
# Skip system fonts and empty lines
if [[ -z "$font" ]] || [[ "$font" =~ ^(system-ui|sans-serif|serif|monospace|cursive|fantasy)$ ]]; then
continue
fi
# Special handling for common web fonts with weights
case "$font" in
"Comic Neue")
font_params+="family=Comic+Neue:wght@300;400;700&"
;;
"Patrick Hand"|"Caveat"|"Dancing Script"|"Architects Daughter"|"Indie Flower"|"Shadows Into Light"|"Permanent Marker")
# URL-encode font name and add common weights
encoded_font=$(echo "$font" | sed 's/ /+/g')
font_params+="family=${encoded_font}:wght@400;700&"
;;
"Segoe Print"|"Bradley Hand"|"Chilanka")
# These are system fonts, skip
;;
*)
# Generic font: add with default weights
encoded_font=$(echo "$font" | sed 's/ /+/g')
font_params+="family=${encoded_font}:wght@400;500;600;700&"
;;
esac
done <<< "$fonts"
# Generate @import if we have fonts
if [[ -n "$font_params" ]]; then
# Remove trailing &
font_params="${font_params%&}"
echo "/* Import Web Fonts */"
echo "@import url('${google_fonts_url}${font_params}&display=swap');"
echo ""
fi
# ========================================
# CSS Custom Properties Generation
# ========================================
echo ":root {"
# Colors - Brand
echo " /* Colors - Brand */"
echo "$json_input" | jq -r '
.colors.brand | to_entries[] |
" --color-brand-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Colors - Surface
echo " /* Colors - Surface */"
echo "$json_input" | jq -r '
.colors.surface | to_entries[] |
" --color-surface-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Colors - Semantic
echo " /* Colors - Semantic */"
echo "$json_input" | jq -r '
.colors.semantic | to_entries[] |
" --color-semantic-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Colors - Text
echo " /* Colors - Text */"
echo "$json_input" | jq -r '
.colors.text | to_entries[] |
" --color-text-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Colors - Border
echo " /* Colors - Border */"
echo "$json_input" | jq -r '
.colors.border | to_entries[] |
" --color-border-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Typography - Font Family
echo " /* Typography - Font Family */"
echo "$json_input" | jq -r '
.typography.font_family | to_entries[] |
" --font-family-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Typography - Font Size
echo " /* Typography - Font Size */"
echo "$json_input" | jq -r '
.typography.font_size | to_entries[] |
" --font-size-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Typography - Font Weight
echo " /* Typography - Font Weight */"
echo "$json_input" | jq -r '
.typography.font_weight | to_entries[] |
" --font-weight-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Typography - Line Height
echo " /* Typography - Line Height */"
echo "$json_input" | jq -r '
.typography.line_height | to_entries[] |
" --line-height-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Typography - Letter Spacing
echo " /* Typography - Letter Spacing */"
echo "$json_input" | jq -r '
.typography.letter_spacing | to_entries[] |
" --letter-spacing-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Spacing
echo " /* Spacing */"
echo "$json_input" | jq -r '
.spacing | to_entries[] |
" --spacing-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Border Radius
echo " /* Border Radius */"
echo "$json_input" | jq -r '
.border_radius | to_entries[] |
" --border-radius-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Shadows
echo " /* Shadows */"
echo "$json_input" | jq -r '
.shadows | to_entries[] |
" --shadow-\(.key): \(.value);"
' 2>/dev/null
echo ""
# Breakpoints
echo " /* Breakpoints */"
echo "$json_input" | jq -r '
.breakpoints | to_entries[] |
" --breakpoint-\(.key): \(.value);"
' 2>/dev/null
echo "}"
echo ""
# ========================================
# Global Font Application
# ========================================
echo "/* ========================================"
echo " Global Font Application"
echo " ======================================== */"
echo ""
echo "body {"
echo " font-family: var(--font-family-body);"
echo " font-size: var(--font-size-base);"
echo " line-height: var(--line-height-normal);"
echo " color: var(--color-text-primary);"
echo " background-color: var(--color-surface-background);"
echo "}"
echo ""
echo "h1, h2, h3, h4, h5, h6, legend {"
echo " font-family: var(--font-family-heading);"
echo "}"
echo ""
echo "/* Reset default margins for better control */"
echo "* {"
echo " margin: 0;"
echo " padding: 0;"
echo " box-sizing: border-box;"
echo "}"

View File

@@ -1,161 +0,0 @@
#!/bin/bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec detect_changed_modules '{"baseBranch":"main","format":"list"}'
# This file will be removed in a future version.
# Detect modules affected by git changes or recent modifications
# Usage: detect_changed_modules.sh [format]
# format: list|grouped|paths (default: paths)
#
# Features:
# - Respects .gitignore patterns (current directory or git root)
# - Detects git changes (staged, unstaged, or last commit)
# - Falls back to recently modified files (last 24 hours)
# Build exclusion filters from .gitignore
build_exclusion_filters() {
local filters=""
# Common system/cache directories to exclude
local system_excludes=(
".git" "__pycache__" "node_modules" ".venv" "venv" "env"
"dist" "build" ".cache" ".pytest_cache" ".mypy_cache"
"coverage" ".nyc_output" "logs" "tmp" "temp"
)
for exclude in "${system_excludes[@]}"; do
filters+=" -not -path '*/$exclude' -not -path '*/$exclude/*'"
done
# Find and parse .gitignore (current dir first, then git root)
local gitignore_file=""
# Check current directory first
if [ -f ".gitignore" ]; then
gitignore_file=".gitignore"
else
# Try to find git root and check for .gitignore there
local git_root=$(git rev-parse --show-toplevel 2>/dev/null)
if [ -n "$git_root" ] && [ -f "$git_root/.gitignore" ]; then
gitignore_file="$git_root/.gitignore"
fi
fi
# Parse .gitignore if found
if [ -n "$gitignore_file" ]; then
while IFS= read -r line; do
# Skip empty lines and comments
[[ -z "$line" || "$line" =~ ^[[:space:]]*# ]] && continue
# Remove trailing slash and whitespace
line=$(echo "$line" | sed 's|/$||' | xargs)
# Skip wildcards patterns (too complex for simple find)
[[ "$line" =~ \* ]] && continue
# Add to filters
filters+=" -not -path '*/$line' -not -path '*/$line/*'"
done < "$gitignore_file"
fi
echo "$filters"
}
detect_changed_modules() {
local format="${1:-paths}"
local changed_files=""
local affected_dirs=""
local exclusion_filters=$(build_exclusion_filters)
# Step 1: Try to get git changes (staged + unstaged)
if git rev-parse --git-dir > /dev/null 2>&1; then
changed_files=$(git diff --name-only HEAD 2>/dev/null; git diff --name-only --cached 2>/dev/null)
# If no changes in working directory, check last commit
if [ -z "$changed_files" ]; then
changed_files=$(git diff --name-only HEAD~1 HEAD 2>/dev/null)
fi
fi
# Step 2: If no git changes, find recently modified source files (last 24 hours)
# Apply exclusion filters from .gitignore
if [ -z "$changed_files" ]; then
changed_files=$(eval "find . -type f \( \
-name '*.md' -o \
-name '*.js' -o -name '*.ts' -o -name '*.jsx' -o -name '*.tsx' -o \
-name '*.py' -o -name '*.go' -o -name '*.rs' -o \
-name '*.java' -o -name '*.cpp' -o -name '*.c' -o -name '*.h' -o \
-name '*.sh' -o -name '*.ps1' -o \
-name '*.json' -o -name '*.yaml' -o -name '*.yml' \
\) $exclusion_filters -mtime -1 2>/dev/null")
fi
# Step 3: Extract unique parent directories
if [ -n "$changed_files" ]; then
affected_dirs=$(echo "$changed_files" | \
sed 's|/[^/]*$||' | \
grep -v '^\.$' | \
sort -u)
# Add current directory if files are in root
if echo "$changed_files" | grep -q '^[^/]*$'; then
affected_dirs=$(echo -e ".\n$affected_dirs" | sort -u)
fi
fi
# Step 4: Output in requested format
case "$format" in
"list")
if [ -n "$affected_dirs" ]; then
echo "$affected_dirs" | while read dir; do
if [ -d "$dir" ]; then
local file_count=$(find "$dir" -maxdepth 1 -type f 2>/dev/null | wc -l)
local depth=$(echo "$dir" | tr -cd '/' | wc -c)
if [ "$dir" = "." ]; then depth=0; fi
local types=$(find "$dir" -maxdepth 1 -type f -name "*.*" 2>/dev/null | \
grep -E '\.[^/]*$' | sed 's/.*\.//' | sort -u | tr '\n' ',' | sed 's/,$//')
local has_claude="no"
[ -f "$dir/CLAUDE.md" ] && has_claude="yes"
echo "depth:$depth|path:$dir|files:$file_count|types:[$types]|has_claude:$has_claude|status:changed"
fi
done
fi
;;
"grouped")
if [ -n "$affected_dirs" ]; then
echo "📊 Affected modules by changes:"
# Group by depth
echo "$affected_dirs" | while read dir; do
if [ -d "$dir" ]; then
local depth=$(echo "$dir" | tr -cd '/' | wc -c)
if [ "$dir" = "." ]; then depth=0; fi
local claude_indicator=""
[ -f "$dir/CLAUDE.md" ] && claude_indicator=" [✓]"
echo "$depth:$dir$claude_indicator"
fi
done | sort -n | awk -F: '
{
if ($1 != prev_depth) {
if (prev_depth != "") print ""
print " 📁 Depth " $1 ":"
prev_depth = $1
}
print " - " $2 " (changed)"
}'
else
echo "📊 No recent changes detected"
fi
;;
"paths"|*)
echo "$affected_dirs"
;;
esac
}
# Execute function if script is run directly
if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
detect_changed_modules "$@"
fi

View File

@@ -1,87 +0,0 @@
#!/usr/bin/env bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec discover_design_files '{"sourceDir":".","outputPath":"output.json"}'
# This file will be removed in a future version.
# discover-design-files.sh - Discover design-related files and output JSON
# Usage: discover-design-files.sh <source_dir> <output_json>
set -euo pipefail
source_dir="${1:-.}"
output_json="${2:-discovered-files.json}"
# Function to find and format files as JSON array
find_files() {
local pattern="$1"
local files
files=$(eval "find \"$source_dir\" -type f $pattern \
! -path \"*/node_modules/*\" \
! -path \"*/dist/*\" \
! -path \"*/.git/*\" \
! -path \"*/build/*\" \
! -path \"*/coverage/*\" \
2>/dev/null | sort || true")
local count
if [ -z "$files" ]; then
count=0
else
count=$(echo "$files" | grep -c . || echo 0)
fi
local json_files=""
if [ "$count" -gt 0 ]; then
json_files=$(echo "$files" | awk '{printf "\"%s\"%s\n", $0, (NR<'$count'?",":"")}' | tr '\n' ' ')
fi
echo "$count|$json_files"
}
# Discover CSS/SCSS files
css_result=$(find_files '\( -name "*.css" -o -name "*.scss" \)')
css_count=${css_result%%|*}
css_files=${css_result#*|}
# Discover JS/TS files (all framework files)
js_result=$(find_files '\( -name "*.js" -o -name "*.ts" -o -name "*.jsx" -o -name "*.tsx" -o -name "*.mjs" -o -name "*.cjs" -o -name "*.vue" -o -name "*.svelte" \)')
js_count=${js_result%%|*}
js_files=${js_result#*|}
# Discover HTML files
html_result=$(find_files '-name "*.html"')
html_count=${html_result%%|*}
html_files=${html_result#*|}
# Calculate total
total_count=$((css_count + js_count + html_count))
# Generate JSON
cat > "$output_json" << EOF
{
"discovery_time": "$(date -u +%Y-%m-%dT%H:%M:%SZ)",
"source_directory": "$(cd "$source_dir" && pwd)",
"file_types": {
"css": {
"count": $css_count,
"files": [${css_files}]
},
"js": {
"count": $js_count,
"files": [${js_files}]
},
"html": {
"count": $html_count,
"files": [${html_files}]
}
},
"total_files": $total_count
}
EOF
# Ensure file is fully written and synchronized to disk
# This prevents race conditions when the file is immediately read by another process
sync "$output_json" 2>/dev/null || sync # Sync specific file, fallback to full sync
sleep 0.1 # Additional safety: 100ms delay for filesystem metadata update
echo "Discovered: CSS=$css_count, JS=$js_count, HTML=$html_count (Total: $total_count)" >&2

View File

@@ -1,243 +0,0 @@
/**
* Animation & Transition Extraction Script
*
* Extracts CSS animations, transitions, and transform patterns from a live web page.
* This script runs in the browser context via Chrome DevTools Protocol.
*
* @returns {Object} Structured animation data
*/
(() => {
const extractionTimestamp = new Date().toISOString();
const currentUrl = window.location.href;
/**
* Parse transition shorthand or individual properties
*/
function parseTransition(element, computedStyle) {
const transition = computedStyle.transition || computedStyle.webkitTransition;
if (!transition || transition === 'none' || transition === 'all 0s ease 0s') {
return null;
}
// Parse shorthand: "property duration easing delay"
const transitions = [];
const parts = transition.split(/,\s*/);
parts.forEach(part => {
const match = part.match(/^(\S+)\s+([\d.]+m?s)\s+(\S+)(?:\s+([\d.]+m?s))?/);
if (match) {
transitions.push({
property: match[1],
duration: match[2],
easing: match[3],
delay: match[4] || '0s'
});
}
});
return transitions.length > 0 ? transitions : null;
}
/**
* Extract animation name and properties
*/
function parseAnimation(element, computedStyle) {
const animationName = computedStyle.animationName || computedStyle.webkitAnimationName;
if (!animationName || animationName === 'none') {
return null;
}
return {
name: animationName,
duration: computedStyle.animationDuration || computedStyle.webkitAnimationDuration,
easing: computedStyle.animationTimingFunction || computedStyle.webkitAnimationTimingFunction,
delay: computedStyle.animationDelay || computedStyle.webkitAnimationDelay || '0s',
iterationCount: computedStyle.animationIterationCount || computedStyle.webkitAnimationIterationCount || '1',
direction: computedStyle.animationDirection || computedStyle.webkitAnimationDirection || 'normal',
fillMode: computedStyle.animationFillMode || computedStyle.webkitAnimationFillMode || 'none'
};
}
/**
* Extract transform value
*/
function parseTransform(computedStyle) {
const transform = computedStyle.transform || computedStyle.webkitTransform;
if (!transform || transform === 'none') {
return null;
}
return transform;
}
/**
* Get element selector (simplified for readability)
*/
function getSelector(element) {
if (element.id) {
return `#${element.id}`;
}
if (element.className && typeof element.className === 'string') {
const classes = element.className.trim().split(/\s+/).slice(0, 2).join('.');
if (classes) {
return `.${classes}`;
}
}
return element.tagName.toLowerCase();
}
/**
* Extract all stylesheets and find @keyframes rules
*/
function extractKeyframes() {
const keyframes = {};
try {
// Iterate through all stylesheets
Array.from(document.styleSheets).forEach(sheet => {
try {
// Skip external stylesheets due to CORS
if (sheet.href && !sheet.href.startsWith(window.location.origin)) {
return;
}
Array.from(sheet.cssRules || sheet.rules || []).forEach(rule => {
// Check for @keyframes rules
if (rule.type === CSSRule.KEYFRAMES_RULE || rule.type === CSSRule.WEBKIT_KEYFRAMES_RULE) {
const name = rule.name;
const frames = {};
Array.from(rule.cssRules || []).forEach(keyframe => {
const key = keyframe.keyText; // e.g., "0%", "50%", "100%"
frames[key] = keyframe.style.cssText;
});
keyframes[name] = frames;
}
});
} catch (e) {
// Skip stylesheets that can't be accessed (CORS)
console.warn('Cannot access stylesheet:', sheet.href, e.message);
}
});
} catch (e) {
console.error('Error extracting keyframes:', e);
}
return keyframes;
}
/**
* Scan visible elements for animations and transitions
*/
function scanElements() {
const elements = document.querySelectorAll('*');
const transitionData = [];
const animationData = [];
const transformData = [];
const uniqueTransitions = new Set();
const uniqueAnimations = new Set();
const uniqueEasings = new Set();
const uniqueDurations = new Set();
elements.forEach(element => {
// Skip invisible elements
const rect = element.getBoundingClientRect();
if (rect.width === 0 && rect.height === 0) {
return;
}
const computedStyle = window.getComputedStyle(element);
// Extract transitions
const transitions = parseTransition(element, computedStyle);
if (transitions) {
const selector = getSelector(element);
transitions.forEach(t => {
const key = `${t.property}-${t.duration}-${t.easing}`;
if (!uniqueTransitions.has(key)) {
uniqueTransitions.add(key);
transitionData.push({
selector,
...t
});
uniqueEasings.add(t.easing);
uniqueDurations.add(t.duration);
}
});
}
// Extract animations
const animation = parseAnimation(element, computedStyle);
if (animation) {
const selector = getSelector(element);
const key = `${animation.name}-${animation.duration}`;
if (!uniqueAnimations.has(key)) {
uniqueAnimations.add(key);
animationData.push({
selector,
...animation
});
uniqueEasings.add(animation.easing);
uniqueDurations.add(animation.duration);
}
}
// Extract transforms (on hover/active, we only get current state)
const transform = parseTransform(computedStyle);
if (transform) {
const selector = getSelector(element);
transformData.push({
selector,
transform
});
}
});
return {
transitions: transitionData,
animations: animationData,
transforms: transformData,
uniqueEasings: Array.from(uniqueEasings),
uniqueDurations: Array.from(uniqueDurations)
};
}
/**
* Main extraction function
*/
function extractAnimations() {
const elementData = scanElements();
const keyframes = extractKeyframes();
return {
metadata: {
timestamp: extractionTimestamp,
url: currentUrl,
method: 'chrome-devtools',
version: '1.0.0'
},
transitions: elementData.transitions,
animations: elementData.animations,
transforms: elementData.transforms,
keyframes: keyframes,
summary: {
total_transitions: elementData.transitions.length,
total_animations: elementData.animations.length,
total_transforms: elementData.transforms.length,
total_keyframes: Object.keys(keyframes).length,
unique_easings: elementData.uniqueEasings,
unique_durations: elementData.uniqueDurations
}
};
}
// Execute extraction
return extractAnimations();
})();

View File

@@ -1,118 +0,0 @@
/**
* Extract Computed Styles from DOM
*
* This script extracts real CSS computed styles from a webpage's DOM
* to provide accurate design tokens for UI replication.
*
* Usage: Execute this function via Chrome DevTools evaluate_script
*/
(() => {
/**
* Extract unique values from a set and sort them
*/
const uniqueSorted = (set) => {
return Array.from(set)
.filter(v => v && v !== 'none' && v !== '0px' && v !== 'rgba(0, 0, 0, 0)')
.sort();
};
/**
* Parse rgb/rgba to OKLCH format (placeholder - returns original for now)
*/
const toOKLCH = (color) => {
// TODO: Implement actual RGB to OKLCH conversion
// For now, return the original color with a note
return `${color} /* TODO: Convert to OKLCH */`;
};
/**
* Extract only key styles from an element
*/
const extractKeyStyles = (element) => {
const s = window.getComputedStyle(element);
return {
color: s.color,
bg: s.backgroundColor,
borderRadius: s.borderRadius,
boxShadow: s.boxShadow,
fontSize: s.fontSize,
fontWeight: s.fontWeight,
padding: s.padding,
margin: s.margin
};
};
/**
* Main extraction function - extract all critical design tokens
*/
const extractDesignTokens = () => {
// Include all key UI elements
const selectors = [
'button', '.btn', '[role="button"]',
'input', 'textarea', 'select',
'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
'.card', 'article', 'section',
'a', 'p', 'nav', 'header', 'footer'
];
// Collect all design tokens
const tokens = {
colors: new Set(),
borderRadii: new Set(),
shadows: new Set(),
fontSizes: new Set(),
fontWeights: new Set(),
spacing: new Set()
};
// Extract from all elements
selectors.forEach(selector => {
try {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
const s = extractKeyStyles(element);
// Collect all tokens (no limits)
if (s.color && s.color !== 'rgba(0, 0, 0, 0)') tokens.colors.add(s.color);
if (s.bg && s.bg !== 'rgba(0, 0, 0, 0)') tokens.colors.add(s.bg);
if (s.borderRadius && s.borderRadius !== '0px') tokens.borderRadii.add(s.borderRadius);
if (s.boxShadow && s.boxShadow !== 'none') tokens.shadows.add(s.boxShadow);
if (s.fontSize) tokens.fontSizes.add(s.fontSize);
if (s.fontWeight) tokens.fontWeights.add(s.fontWeight);
// Extract all spacing values
[s.padding, s.margin].forEach(val => {
if (val && val !== '0px') {
val.split(' ').forEach(v => {
if (v && v !== '0px') tokens.spacing.add(v);
});
}
});
});
} catch (e) {
console.warn(`Error: ${selector}`, e);
}
});
// Return all tokens (no element details to save context)
return {
metadata: {
extractedAt: new Date().toISOString(),
url: window.location.href,
method: 'computed-styles'
},
tokens: {
colors: uniqueSorted(tokens.colors),
borderRadii: uniqueSorted(tokens.borderRadii), // ALL radius values
shadows: uniqueSorted(tokens.shadows), // ALL shadows
fontSizes: uniqueSorted(tokens.fontSizes),
fontWeights: uniqueSorted(tokens.fontWeights),
spacing: uniqueSorted(tokens.spacing)
}
};
};
// Execute and return results
return extractDesignTokens();
})();

View File

@@ -1,411 +0,0 @@
/**
* Extract Layout Structure from DOM - Enhanced Version
*
* Extracts real layout information from DOM to provide accurate
* structural data for UI replication.
*
* Features:
* - Framework detection (Nuxt.js, Next.js, React, Vue, Angular)
* - Multi-strategy container detection (strict → relaxed → class-based → framework-specific)
* - Intelligent main content detection with common class names support
* - Supports modern SPA frameworks
* - Detects non-semantic main containers (.main, .content, etc.)
* - Progressive exploration: Auto-discovers missing selectors when standard patterns fail
* - Suggests new class names to add to script based on actual page structure
*
* Progressive Exploration:
* When fewer than 3 main containers are found, the script automatically:
* 1. Analyzes all large visible containers (≥500×300px)
* 2. Extracts class name patterns (main/content/wrapper/container/page/etc.)
* 3. Suggests new selectors to add to the script
* 4. Returns exploration data in result.exploration
*
* Usage: Execute via Chrome DevTools evaluate_script
* Version: 2.2.0
*/
(() => {
/**
* Get element's bounding box relative to viewport
*/
const getBounds = (element) => {
const rect = element.getBoundingClientRect();
return {
x: Math.round(rect.x),
y: Math.round(rect.y),
width: Math.round(rect.width),
height: Math.round(rect.height)
};
};
/**
* Extract layout properties from an element
*/
const extractLayoutProps = (element) => {
const s = window.getComputedStyle(element);
return {
// Core layout
display: s.display,
position: s.position,
// Flexbox
flexDirection: s.flexDirection,
justifyContent: s.justifyContent,
alignItems: s.alignItems,
flexWrap: s.flexWrap,
gap: s.gap,
// Grid
gridTemplateColumns: s.gridTemplateColumns,
gridTemplateRows: s.gridTemplateRows,
gridAutoFlow: s.gridAutoFlow,
// Dimensions
width: s.width,
height: s.height,
maxWidth: s.maxWidth,
minWidth: s.minWidth,
// Spacing
padding: s.padding,
margin: s.margin
};
};
/**
* Identify layout pattern for an element
*/
const identifyPattern = (props) => {
const { display, flexDirection, gridTemplateColumns } = props;
if (display === 'flex' || display === 'inline-flex') {
if (flexDirection === 'column') return 'flex-column';
if (flexDirection === 'row') return 'flex-row';
return 'flex';
}
if (display === 'grid') {
const cols = gridTemplateColumns;
if (cols && cols !== 'none') {
const colCount = cols.split(' ').length;
return `grid-${colCount}col`;
}
return 'grid';
}
if (display === 'block') return 'block';
return display;
};
/**
* Detect frontend framework
*/
const detectFramework = () => {
if (document.querySelector('#__nuxt')) return { name: 'Nuxt.js', version: 'unknown' };
if (document.querySelector('#__next')) return { name: 'Next.js', version: 'unknown' };
if (document.querySelector('[data-reactroot]')) return { name: 'React', version: 'unknown' };
if (document.querySelector('[ng-version]')) return { name: 'Angular', version: 'unknown' };
if (window.Vue) return { name: 'Vue.js', version: window.Vue.version || 'unknown' };
return { name: 'Unknown', version: 'unknown' };
};
/**
* Build layout tree recursively
*/
const buildLayoutTree = (element, depth = 0, maxDepth = 3) => {
if (depth > maxDepth) return null;
const props = extractLayoutProps(element);
const bounds = getBounds(element);
const pattern = identifyPattern(props);
// Get semantic role
const tagName = element.tagName.toLowerCase();
const classes = Array.from(element.classList).slice(0, 3); // Max 3 classes
const role = element.getAttribute('role');
// Build node
const node = {
tag: tagName,
classes: classes,
role: role,
pattern: pattern,
bounds: bounds,
layout: {
display: props.display,
position: props.position
}
};
// Add flex/grid specific properties
if (props.display === 'flex' || props.display === 'inline-flex') {
node.layout.flexDirection = props.flexDirection;
node.layout.justifyContent = props.justifyContent;
node.layout.alignItems = props.alignItems;
node.layout.gap = props.gap;
}
if (props.display === 'grid') {
node.layout.gridTemplateColumns = props.gridTemplateColumns;
node.layout.gridTemplateRows = props.gridTemplateRows;
node.layout.gap = props.gap;
}
// Process children for container elements
if (props.display === 'flex' || props.display === 'grid' || props.display === 'block') {
const children = Array.from(element.children);
if (children.length > 0 && children.length < 50) { // Limit to 50 children
node.children = children
.map(child => buildLayoutTree(child, depth + 1, maxDepth))
.filter(child => child !== null);
}
}
return node;
};
/**
* Find main layout containers with multi-strategy approach
*/
const findMainContainers = () => {
const containers = [];
const found = new Set();
// Strategy 1: Strict selectors (body direct children)
const strictSelectors = [
'body > header',
'body > nav',
'body > main',
'body > footer'
];
// Strategy 2: Relaxed selectors (any level)
const relaxedSelectors = [
'header',
'nav',
'main',
'footer',
'[role="banner"]',
'[role="navigation"]',
'[role="main"]',
'[role="contentinfo"]'
];
// Strategy 3: Common class-based main content selectors
const commonClassSelectors = [
'.main',
'.content',
'.main-content',
'.page-content',
'.container.main',
'.wrapper > .main',
'div[class*="main-wrapper"]',
'div[class*="content-wrapper"]'
];
// Strategy 4: Framework-specific selectors
const frameworkSelectors = [
'#__nuxt header', '#__nuxt .main', '#__nuxt main', '#__nuxt footer',
'#__next header', '#__next .main', '#__next main', '#__next footer',
'#app header', '#app .main', '#app main', '#app footer',
'[data-app] header', '[data-app] .main', '[data-app] main', '[data-app] footer'
];
// Try all strategies
const allSelectors = [...strictSelectors, ...relaxedSelectors, ...commonClassSelectors, ...frameworkSelectors];
allSelectors.forEach(selector => {
try {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
// Avoid duplicates and invisible elements
if (!found.has(element) && element.offsetParent !== null) {
found.add(element);
const tree = buildLayoutTree(element, 0, 3);
if (tree && tree.bounds.width > 0 && tree.bounds.height > 0) {
containers.push(tree);
}
}
});
} catch (e) {
console.warn(`Selector failed: ${selector}`, e);
}
});
// Fallback: If no containers found, use body's direct children
if (containers.length === 0) {
Array.from(document.body.children).forEach(child => {
if (child.offsetParent !== null && !found.has(child)) {
const tree = buildLayoutTree(child, 0, 2);
if (tree && tree.bounds.width > 100 && tree.bounds.height > 100) {
containers.push(tree);
}
}
});
}
return containers;
};
/**
* Progressive exploration: Discover main containers when standard selectors fail
* Analyzes large visible containers and suggests class name patterns
*/
const exploreMainContainers = () => {
const candidates = [];
const minWidth = 500;
const minHeight = 300;
// Find all large visible divs
const allDivs = document.querySelectorAll('div');
allDivs.forEach(div => {
const rect = div.getBoundingClientRect();
const style = window.getComputedStyle(div);
// Filter: large size, visible, not header/footer
if (rect.width >= minWidth &&
rect.height >= minHeight &&
div.offsetParent !== null &&
!div.closest('header') &&
!div.closest('footer')) {
const classes = Array.from(div.classList);
const area = rect.width * rect.height;
candidates.push({
element: div,
classes: classes,
area: area,
bounds: {
width: Math.round(rect.width),
height: Math.round(rect.height)
},
display: style.display,
depth: getElementDepth(div)
});
}
});
// Sort by area (largest first) and take top candidates
candidates.sort((a, b) => b.area - a.area);
// Extract unique class patterns from top candidates
const classPatterns = new Set();
candidates.slice(0, 20).forEach(c => {
c.classes.forEach(cls => {
// Identify potential main content class patterns
if (cls.match(/main|content|container|wrapper|page|body|layout|app/i)) {
classPatterns.add(cls);
}
});
});
return {
candidates: candidates.slice(0, 10).map(c => ({
classes: c.classes,
bounds: c.bounds,
display: c.display,
depth: c.depth
})),
suggestedSelectors: Array.from(classPatterns).map(cls => `.${cls}`)
};
};
/**
* Get element depth in DOM tree
*/
const getElementDepth = (element) => {
let depth = 0;
let current = element;
while (current.parentElement) {
depth++;
current = current.parentElement;
}
return depth;
};
/**
* Analyze layout patterns
*/
const analyzePatterns = (containers) => {
const patterns = {
flexColumn: 0,
flexRow: 0,
grid: 0,
sticky: 0,
fixed: 0
};
const analyze = (node) => {
if (!node) return;
if (node.pattern === 'flex-column') patterns.flexColumn++;
if (node.pattern === 'flex-row') patterns.flexRow++;
if (node.pattern && node.pattern.startsWith('grid')) patterns.grid++;
if (node.layout.position === 'sticky') patterns.sticky++;
if (node.layout.position === 'fixed') patterns.fixed++;
if (node.children) {
node.children.forEach(analyze);
}
};
containers.forEach(analyze);
return patterns;
};
/**
* Main extraction function with progressive exploration
*/
const extractLayout = () => {
const framework = detectFramework();
const containers = findMainContainers();
const patterns = analyzePatterns(containers);
// Progressive exploration: if too few containers found, explore and suggest
let exploration = null;
const minExpectedContainers = 3; // At least header, main, footer
if (containers.length < minExpectedContainers) {
exploration = exploreMainContainers();
// Add warning message
exploration.warning = `Only ${containers.length} containers found. Consider adding these selectors to the script:`;
exploration.recommendation = exploration.suggestedSelectors.join(', ');
}
const result = {
metadata: {
extractedAt: new Date().toISOString(),
url: window.location.href,
framework: framework,
method: 'layout-structure-enhanced',
version: '2.2.0'
},
statistics: {
totalContainers: containers.length,
patterns: patterns
},
structure: containers
};
// Add exploration results if triggered
if (exploration) {
result.exploration = {
triggered: true,
reason: 'Insufficient containers found with standard selectors',
discoveredCandidates: exploration.candidates,
suggestedSelectors: exploration.suggestedSelectors,
warning: exploration.warning,
recommendation: exploration.recommendation
};
}
return result;
};
// Execute and return results
return extractLayout();
})();

View File

@@ -1,717 +0,0 @@
#!/bin/bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec generate_module_docs '{"path":".","strategy":"single-layer","tool":"gemini"}'
# This file will be removed in a future version.
# Generate documentation for modules and projects with multiple strategies
# Usage: generate_module_docs.sh <strategy> <source_path> <project_name> [tool] [model]
# strategy: full|single|project-readme|project-architecture|http-api
# source_path: Path to the source module directory (or project root for project-level docs)
# project_name: Project name for output path (e.g., "myproject")
# tool: gemini|qwen|codex (default: gemini)
# model: Model name (optional, uses tool defaults)
#
# Default Models:
# gemini: gemini-2.5-flash
# qwen: coder-model
# codex: gpt5-codex
#
# Module-Level Strategies:
# full: Full documentation generation
# - Read: All files in current and subdirectories (@**/*)
# - Generate: API.md + README.md for each directory containing code files
# - Use: Deep directories (Layer 3), comprehensive documentation
#
# single: Single-layer documentation
# - Read: Current directory code + child API.md/README.md files
# - Generate: API.md + README.md only in current directory
# - Use: Upper layers (Layer 1-2), incremental updates
#
# Project-Level Strategies:
# project-readme: Project overview documentation
# - Read: All module API.md and README.md files
# - Generate: README.md (project root)
# - Use: After all module docs are generated
#
# project-architecture: System design documentation
# - Read: All module docs + project README
# - Generate: ARCHITECTURE.md + EXAMPLES.md
# - Use: After project README is generated
#
# http-api: HTTP API documentation
# - Read: API route files + existing docs
# - Generate: api/README.md
# - Use: For projects with HTTP APIs
#
# Output Structure:
# Module docs: .workflow/docs/{project_name}/{source_path}/API.md
# Module docs: .workflow/docs/{project_name}/{source_path}/README.md
# Project docs: .workflow/docs/{project_name}/README.md
# Project docs: .workflow/docs/{project_name}/ARCHITECTURE.md
# Project docs: .workflow/docs/{project_name}/EXAMPLES.md
# API docs: .workflow/docs/{project_name}/api/README.md
#
# Features:
# - Path mirroring: source structure → docs structure
# - Template-driven generation
# - Respects .gitignore patterns
# - Detects code vs navigation folders
# - Tool fallback support
# Build exclusion filters from .gitignore
build_exclusion_filters() {
local filters=""
# Common system/cache directories to exclude
local system_excludes=(
".git" "__pycache__" "node_modules" ".venv" "venv" "env"
"dist" "build" ".cache" ".pytest_cache" ".mypy_cache"
"coverage" ".nyc_output" "logs" "tmp" "temp" ".workflow"
)
for exclude in "${system_excludes[@]}"; do
filters+=" -not -path '*/$exclude' -not -path '*/$exclude/*'"
done
# Find and parse .gitignore (current dir first, then git root)
local gitignore_file=""
# Check current directory first
if [ -f ".gitignore" ]; then
gitignore_file=".gitignore"
else
# Try to find git root and check for .gitignore there
local git_root=$(git rev-parse --show-toplevel 2>/dev/null)
if [ -n "$git_root" ] && [ -f "$git_root/.gitignore" ]; then
gitignore_file="$git_root/.gitignore"
fi
fi
# Parse .gitignore if found
if [ -n "$gitignore_file" ]; then
while IFS= read -r line; do
# Skip empty lines and comments
[[ -z "$line" || "$line" =~ ^[[:space:]]*# ]] && continue
# Remove trailing slash and whitespace
line=$(echo "$line" | sed 's|/$||' | xargs)
# Skip wildcards patterns (too complex for simple find)
[[ "$line" =~ \* ]] && continue
# Add to filters
filters+=" -not -path '*/$line' -not -path '*/$line/*'"
done < "$gitignore_file"
fi
echo "$filters"
}
# Detect folder type (code vs navigation)
detect_folder_type() {
local target_path="$1"
local exclusion_filters="$2"
# Count code files (primary indicators)
local code_count=$(eval "find \"$target_path\" -maxdepth 1 -type f \\( -name '*.ts' -o -name '*.tsx' -o -name '*.js' -o -name '*.jsx' -o -name '*.py' -o -name '*.sh' -o -name '*.go' -o -name '*.rs' \\) $exclusion_filters 2>/dev/null" | wc -l)
if [ $code_count -gt 0 ]; then
echo "code"
else
echo "navigation"
fi
}
# Scan directory structure and generate structured information
scan_directory_structure() {
local target_path="$1"
local strategy="$2"
if [ ! -d "$target_path" ]; then
echo "Directory not found: $target_path"
return 1
fi
local exclusion_filters=$(build_exclusion_filters)
local structure_info=""
# Get basic directory info
local dir_name=$(basename "$target_path")
local total_files=$(eval "find \"$target_path\" -type f $exclusion_filters 2>/dev/null" | wc -l)
local total_dirs=$(eval "find \"$target_path\" -type d $exclusion_filters 2>/dev/null" | wc -l)
local folder_type=$(detect_folder_type "$target_path" "$exclusion_filters")
structure_info+="Directory: $dir_name\n"
structure_info+="Total files: $total_files\n"
structure_info+="Total directories: $total_dirs\n"
structure_info+="Folder type: $folder_type\n\n"
if [ "$strategy" = "full" ]; then
# For full: show all subdirectories with file counts
structure_info+="Subdirectories with files:\n"
while IFS= read -r dir; do
if [ -n "$dir" ] && [ "$dir" != "$target_path" ]; then
local rel_path=${dir#$target_path/}
local file_count=$(eval "find \"$dir\" -maxdepth 1 -type f $exclusion_filters 2>/dev/null" | wc -l)
if [ $file_count -gt 0 ]; then
local subdir_type=$(detect_folder_type "$dir" "$exclusion_filters")
structure_info+=" - $rel_path/ ($file_count files, type: $subdir_type)\n"
fi
fi
done < <(eval "find \"$target_path\" -type d $exclusion_filters 2>/dev/null")
else
# For single: show direct children only
structure_info+="Direct subdirectories:\n"
while IFS= read -r dir; do
if [ -n "$dir" ]; then
local dir_name=$(basename "$dir")
local file_count=$(eval "find \"$dir\" -maxdepth 1 -type f $exclusion_filters 2>/dev/null" | wc -l)
local has_api=$([ -f "$dir/API.md" ] && echo " [has API.md]" || echo "")
local has_readme=$([ -f "$dir/README.md" ] && echo " [has README.md]" || echo "")
structure_info+=" - $dir_name/ ($file_count files)$has_api$has_readme\n"
fi
done < <(eval "find \"$target_path\" -maxdepth 1 -type d $exclusion_filters 2>/dev/null" | grep -v "^$target_path$")
fi
# Show main file types in current directory
structure_info+="\nCurrent directory files:\n"
local code_files=$(eval "find \"$target_path\" -maxdepth 1 -type f \\( -name '*.ts' -o -name '*.tsx' -o -name '*.js' -o -name '*.jsx' -o -name '*.py' -o -name '*.sh' -o -name '*.go' -o -name '*.rs' \\) $exclusion_filters 2>/dev/null" | wc -l)
local config_files=$(eval "find \"$target_path\" -maxdepth 1 -type f \\( -name '*.json' -o -name '*.yaml' -o -name '*.yml' -o -name '*.toml' \\) $exclusion_filters 2>/dev/null" | wc -l)
local doc_files=$(eval "find \"$target_path\" -maxdepth 1 -type f -name '*.md' $exclusion_filters 2>/dev/null" | wc -l)
structure_info+=" - Code files: $code_files\n"
structure_info+=" - Config files: $config_files\n"
structure_info+=" - Documentation: $doc_files\n"
printf "%b" "$structure_info"
}
# Calculate output path based on source path and project name
calculate_output_path() {
local source_path="$1"
local project_name="$2"
local project_root="$3"
# Get absolute path of source (normalize to Unix-style path)
local abs_source=$(cd "$source_path" && pwd)
# Normalize project root to same format
local norm_project_root=$(cd "$project_root" && pwd)
# Calculate relative path from project root
local rel_path="${abs_source#$norm_project_root}"
# Remove leading slash if present
rel_path="${rel_path#/}"
# If source is project root, use project name directly
if [ "$abs_source" = "$norm_project_root" ] || [ -z "$rel_path" ]; then
echo "$norm_project_root/.workflow/docs/$project_name"
else
echo "$norm_project_root/.workflow/docs/$project_name/$rel_path"
fi
}
generate_module_docs() {
local strategy="$1"
local source_path="$2"
local project_name="$3"
local tool="${4:-gemini}"
local model="$5"
# Validate parameters
if [ -z "$strategy" ] || [ -z "$source_path" ] || [ -z "$project_name" ]; then
echo "❌ Error: Strategy, source path, and project name are required"
echo "Usage: generate_module_docs.sh <strategy> <source_path> <project_name> [tool] [model]"
echo "Module strategies: full, single"
echo "Project strategies: project-readme, project-architecture, http-api"
return 1
fi
# Validate strategy
local valid_strategies=("full" "single" "project-readme" "project-architecture" "http-api")
local strategy_valid=false
for valid_strategy in "${valid_strategies[@]}"; do
if [ "$strategy" = "$valid_strategy" ]; then
strategy_valid=true
break
fi
done
if [ "$strategy_valid" = false ]; then
echo "❌ Error: Invalid strategy '$strategy'"
echo "Valid module strategies: full, single"
echo "Valid project strategies: project-readme, project-architecture, http-api"
return 1
fi
if [ ! -d "$source_path" ]; then
echo "❌ Error: Source directory '$source_path' does not exist"
return 1
fi
# Set default models if not specified
if [ -z "$model" ]; then
case "$tool" in
gemini)
model="gemini-2.5-flash"
;;
qwen)
model="coder-model"
;;
codex)
model="gpt5-codex"
;;
*)
model=""
;;
esac
fi
# Build exclusion filters
local exclusion_filters=$(build_exclusion_filters)
# Get project root
local project_root=$(git rev-parse --show-toplevel 2>/dev/null || pwd)
# Determine if this is a project-level strategy
local is_project_level=false
if [[ "$strategy" =~ ^project- ]] || [ "$strategy" = "http-api" ]; then
is_project_level=true
fi
# Calculate output path
local output_path
if [ "$is_project_level" = true ]; then
# Project-level docs go to project root
if [ "$strategy" = "http-api" ]; then
output_path="$project_root/.workflow/docs/$project_name/api"
else
output_path="$project_root/.workflow/docs/$project_name"
fi
else
output_path=$(calculate_output_path "$source_path" "$project_name" "$project_root")
fi
# Create output directory
mkdir -p "$output_path"
# Detect folder type (only for module-level strategies)
local folder_type=""
if [ "$is_project_level" = false ]; then
folder_type=$(detect_folder_type "$source_path" "$exclusion_filters")
fi
# Load templates based on strategy
local api_template=""
local readme_template=""
local template_content=""
if [ "$is_project_level" = true ]; then
# Project-level templates
case "$strategy" in
project-readme)
local proj_readme_path="$HOME/.claude/workflows/cli-templates/prompts/documentation/project-readme.txt"
if [ -f "$proj_readme_path" ]; then
template_content=$(cat "$proj_readme_path")
echo " 📋 Loaded Project README template: $(wc -l < "$proj_readme_path") lines"
fi
;;
project-architecture)
local arch_path="$HOME/.claude/workflows/cli-templates/prompts/documentation/project-architecture.txt"
local examples_path="$HOME/.claude/workflows/cli-templates/prompts/documentation/project-examples.txt"
if [ -f "$arch_path" ]; then
template_content=$(cat "$arch_path")
echo " 📋 Loaded Architecture template: $(wc -l < "$arch_path") lines"
fi
if [ -f "$examples_path" ]; then
template_content="$template_content
EXAMPLES TEMPLATE:
$(cat "$examples_path")"
echo " 📋 Loaded Examples template: $(wc -l < "$examples_path") lines"
fi
;;
http-api)
local api_path="$HOME/.claude/workflows/cli-templates/prompts/documentation/api.txt"
if [ -f "$api_path" ]; then
template_content=$(cat "$api_path")
echo " 📋 Loaded HTTP API template: $(wc -l < "$api_path") lines"
fi
;;
esac
else
# Module-level templates
local api_template_path="$HOME/.claude/workflows/cli-templates/prompts/documentation/api.txt"
local readme_template_path="$HOME/.claude/workflows/cli-templates/prompts/documentation/module-readme.txt"
local nav_template_path="$HOME/.claude/workflows/cli-templates/prompts/documentation/folder-navigation.txt"
if [ "$folder_type" = "code" ]; then
if [ -f "$api_template_path" ]; then
api_template=$(cat "$api_template_path")
echo " 📋 Loaded API template: $(wc -l < "$api_template_path") lines"
fi
if [ -f "$readme_template_path" ]; then
readme_template=$(cat "$readme_template_path")
echo " 📋 Loaded README template: $(wc -l < "$readme_template_path") lines"
fi
else
# Navigation folder uses navigation template
if [ -f "$nav_template_path" ]; then
readme_template=$(cat "$nav_template_path")
echo " 📋 Loaded Navigation template: $(wc -l < "$nav_template_path") lines"
fi
fi
fi
# Scan directory structure (only for module-level strategies)
local structure_info=""
if [ "$is_project_level" = false ]; then
echo " 🔍 Scanning directory structure..."
structure_info=$(scan_directory_structure "$source_path" "$strategy")
fi
# Prepare logging info
local module_name=$(basename "$source_path")
echo "⚡ Generating docs: $source_path$output_path"
echo " Strategy: $strategy | Tool: $tool | Model: $model | Type: $folder_type"
echo " Output: $output_path"
# Build strategy-specific prompt
local final_prompt=""
# Project-level strategies
if [ "$strategy" = "project-readme" ]; then
final_prompt="PURPOSE: Generate comprehensive project overview documentation
PROJECT: $project_name
OUTPUT: Current directory (file will be moved to final location)
Read: @.workflow/docs/$project_name/**/*.md
Context: All module documentation files from the project
Generate ONE documentation file in current directory:
- README.md - Project root documentation
Template:
$template_content
Instructions:
- Create README.md in CURRENT DIRECTORY
- Synthesize information from all module docs
- Include project overview, getting started, and navigation
- Create clear module navigation with links
- Follow template structure exactly"
elif [ "$strategy" = "project-architecture" ]; then
final_prompt="PURPOSE: Generate system design and usage examples documentation
PROJECT: $project_name
OUTPUT: Current directory (files will be moved to final location)
Read: @.workflow/docs/$project_name/**/*.md
Context: All project documentation including module docs and project README
Generate TWO documentation files in current directory:
1. ARCHITECTURE.md - System architecture and design patterns
2. EXAMPLES.md - End-to-end usage examples
Template:
$template_content
Instructions:
- Create both ARCHITECTURE.md and EXAMPLES.md in CURRENT DIRECTORY
- Synthesize architectural patterns from module documentation
- Document system structure, module relationships, and design decisions
- Provide practical code examples and usage scenarios
- Follow template structure for both files"
elif [ "$strategy" = "http-api" ]; then
final_prompt="PURPOSE: Generate HTTP API reference documentation
PROJECT: $project_name
OUTPUT: Current directory (file will be moved to final location)
Read: @**/*.{ts,js,py,go,rs} @.workflow/docs/$project_name/**/*.md
Context: API route files and existing documentation
Generate ONE documentation file in current directory:
- README.md - HTTP API documentation (in api/ subdirectory)
Template:
$template_content
Instructions:
- Create README.md in CURRENT DIRECTORY
- Document all HTTP endpoints (routes, methods, parameters, responses)
- Include authentication requirements and error codes
- Provide request/response examples
- Follow template structure (Part B: HTTP API documentation)"
# Module-level strategies
elif [ "$strategy" = "full" ]; then
# Full strategy: read all files, generate for each directory
if [ "$folder_type" = "code" ]; then
final_prompt="PURPOSE: Generate comprehensive API and module documentation
Directory Structure Analysis:
$structure_info
SOURCE: $source_path
OUTPUT: Current directory (files will be moved to final location)
Read: @**/*
Generate TWO documentation files in current directory:
1. API.md - Code API documentation (functions, classes, interfaces)
Template:
$api_template
2. README.md - Module overview documentation
Template:
$readme_template
Instructions:
- Generate both API.md and README.md in CURRENT DIRECTORY
- If subdirectories contain code files, generate their docs too (recursive)
- Work bottom-up: deepest directories first
- Follow template structure exactly
- Use structure analysis for context"
else
# Navigation folder - README only
final_prompt="PURPOSE: Generate navigation documentation for folder structure
Directory Structure Analysis:
$structure_info
SOURCE: $source_path
OUTPUT: Current directory (file will be moved to final location)
Read: @**/*
Generate ONE documentation file in current directory:
- README.md - Navigation and folder overview
Template:
$readme_template
Instructions:
- Create README.md in CURRENT DIRECTORY
- Focus on folder structure and navigation
- Link to subdirectory documentation
- Use structure analysis for context"
fi
else
# Single strategy: read current + child docs only
if [ "$folder_type" = "code" ]; then
final_prompt="PURPOSE: Generate API and module documentation for current directory
Directory Structure Analysis:
$structure_info
SOURCE: $source_path
OUTPUT: Current directory (files will be moved to final location)
Read: @*/API.md @*/README.md @*.ts @*.tsx @*.js @*.jsx @*.py @*.sh @*.go @*.rs @*.md @*.json @*.yaml @*.yml
Generate TWO documentation files in current directory:
1. API.md - Code API documentation
Template:
$api_template
2. README.md - Module overview
Template:
$readme_template
Instructions:
- Generate both API.md and README.md in CURRENT DIRECTORY
- Reference child documentation, do not duplicate
- Follow template structure
- Use structure analysis for current directory context"
else
# Navigation folder - README only
final_prompt="PURPOSE: Generate navigation documentation
Directory Structure Analysis:
$structure_info
SOURCE: $source_path
OUTPUT: Current directory (file will be moved to final location)
Read: @*/API.md @*/README.md @*.md
Generate ONE documentation file in current directory:
- README.md - Navigation and overview
Template:
$readme_template
Instructions:
- Create README.md in CURRENT DIRECTORY
- Link to child documentation
- Use structure analysis for navigation context"
fi
fi
# Execute documentation generation
local start_time=$(date +%s)
echo " 🔄 Starting documentation generation..."
if cd "$source_path" 2>/dev/null; then
local tool_result=0
# Store current output path for CLI context
export DOC_OUTPUT_PATH="$output_path"
# Record git HEAD before CLI execution (to detect unwanted auto-commits)
local git_head_before=""
if git rev-parse --git-dir >/dev/null 2>&1; then
git_head_before=$(git rev-parse HEAD 2>/dev/null)
fi
# Execute with selected tool
case "$tool" in
qwen)
if [ "$model" = "coder-model" ]; then
qwen -p "$final_prompt" --yolo 2>&1
else
qwen -p "$final_prompt" -m "$model" --yolo 2>&1
fi
tool_result=$?
;;
codex)
codex --full-auto exec "$final_prompt" -m "$model" --skip-git-repo-check -s danger-full-access 2>&1
tool_result=$?
;;
gemini)
gemini -p "$final_prompt" -m "$model" --yolo 2>&1
tool_result=$?
;;
*)
echo " ⚠️ Unknown tool: $tool, defaulting to gemini"
gemini -p "$final_prompt" -m "$model" --yolo 2>&1
tool_result=$?
;;
esac
# Move generated files to output directory
local docs_created=0
local moved_files=""
if [ $tool_result -eq 0 ]; then
if [ "$is_project_level" = true ]; then
# Project-level documentation files
case "$strategy" in
project-readme)
if [ -f "README.md" ]; then
mv "README.md" "$output_path/README.md" 2>/dev/null && {
docs_created=$((docs_created + 1))
moved_files+="README.md "
}
fi
;;
project-architecture)
if [ -f "ARCHITECTURE.md" ]; then
mv "ARCHITECTURE.md" "$output_path/ARCHITECTURE.md" 2>/dev/null && {
docs_created=$((docs_created + 1))
moved_files+="ARCHITECTURE.md "
}
fi
if [ -f "EXAMPLES.md" ]; then
mv "EXAMPLES.md" "$output_path/EXAMPLES.md" 2>/dev/null && {
docs_created=$((docs_created + 1))
moved_files+="EXAMPLES.md "
}
fi
;;
http-api)
if [ -f "README.md" ]; then
mv "README.md" "$output_path/README.md" 2>/dev/null && {
docs_created=$((docs_created + 1))
moved_files+="api/README.md "
}
fi
;;
esac
else
# Module-level documentation files
# Check and move API.md if it exists
if [ "$folder_type" = "code" ] && [ -f "API.md" ]; then
mv "API.md" "$output_path/API.md" 2>/dev/null && {
docs_created=$((docs_created + 1))
moved_files+="API.md "
}
fi
# Check and move README.md if it exists
if [ -f "README.md" ]; then
mv "README.md" "$output_path/README.md" 2>/dev/null && {
docs_created=$((docs_created + 1))
moved_files+="README.md "
}
fi
fi
fi
# Check if CLI tool auto-committed (and revert if needed)
if [ -n "$git_head_before" ]; then
local git_head_after=$(git rev-parse HEAD 2>/dev/null)
if [ "$git_head_before" != "$git_head_after" ]; then
echo " ⚠️ Detected unwanted auto-commit by CLI tool, reverting..."
git reset --soft "$git_head_before" 2>/dev/null
echo " ✅ Auto-commit reverted (files remain staged)"
fi
fi
if [ $docs_created -gt 0 ]; then
local end_time=$(date +%s)
local duration=$((end_time - start_time))
echo " ✅ Generated $docs_created doc(s) in ${duration}s: $moved_files"
cd - > /dev/null
return 0
else
echo " ❌ Documentation generation failed for $source_path"
cd - > /dev/null
return 1
fi
else
echo " ❌ Cannot access directory: $source_path"
return 1
fi
}
# Execute function if script is run directly
if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
# Show help if no arguments or help requested
if [ $# -eq 0 ] || [ "$1" = "-h" ] || [ "$1" = "--help" ]; then
echo "Usage: generate_module_docs.sh <strategy> <source_path> <project_name> [tool] [model]"
echo ""
echo "Module-Level Strategies:"
echo " full - Generate docs for all subdirectories with code"
echo " single - Generate docs only for current directory"
echo ""
echo "Project-Level Strategies:"
echo " project-readme - Generate project root README.md"
echo " project-architecture - Generate ARCHITECTURE.md + EXAMPLES.md"
echo " http-api - Generate HTTP API documentation (api/README.md)"
echo ""
echo "Tools: gemini (default), qwen, codex"
echo "Models: Use tool defaults if not specified"
echo ""
echo "Module Examples:"
echo " ./generate_module_docs.sh full ./src/auth myproject"
echo " ./generate_module_docs.sh single ./components myproject gemini"
echo ""
echo "Project Examples:"
echo " ./generate_module_docs.sh project-readme . myproject"
echo " ./generate_module_docs.sh project-architecture . myproject qwen"
echo " ./generate_module_docs.sh http-api . myproject"
exit 0
fi
generate_module_docs "$@"
fi

View File

@@ -1,170 +0,0 @@
#!/bin/bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec get_modules_by_depth '{"format":"list","path":"."}' OR ccw tool exec get_modules_by_depth '{}'
# This file will be removed in a future version.
# Get modules organized by directory depth (deepest first)
# Usage: get_modules_by_depth.sh [format]
# format: list|grouped|json (default: list)
# Parse .gitignore patterns and build exclusion filters
build_exclusion_filters() {
local filters=""
# Always exclude these system/cache directories and common web dev packages
local system_excludes=(
# Version control and IDE
".git" ".gitignore" ".gitmodules" ".gitattributes"
".svn" ".hg" ".bzr"
".history" ".vscode" ".idea" ".vs" ".vscode-test"
".sublime-text" ".atom"
# Python
"__pycache__" ".pytest_cache" ".mypy_cache" ".tox"
".coverage" "htmlcov" ".nox" ".venv" "venv" "env"
".egg-info" "*.egg-info" ".eggs" ".wheel"
"site-packages" ".python-version" ".pyc"
# Node.js/JavaScript
"node_modules" ".npm" ".yarn" ".pnpm" "yarn-error.log"
".nyc_output" "coverage" ".next" ".nuxt"
".cache" ".parcel-cache" ".vite" "dist" "build"
".turbo" ".vercel" ".netlify"
# Package managers
".pnpm-store" "pnpm-lock.yaml" "yarn.lock" "package-lock.json"
".bundle" "vendor/bundle" "Gemfile.lock"
".gradle" "gradle" "gradlew" "gradlew.bat"
".mvn" "target" ".m2"
# Build/compile outputs
"dist" "build" "out" "output" "_site" "public"
".output" ".generated" "generated" "gen"
"bin" "obj" "Debug" "Release"
# Testing
".pytest_cache" ".coverage" "htmlcov" "test-results"
".nyc_output" "junit.xml" "test_results"
"cypress/screenshots" "cypress/videos"
"playwright-report" ".playwright"
# Logs and temp files
"logs" "*.log" "log" "tmp" "temp" ".tmp" ".temp"
".env" ".env.local" ".env.*.local"
".DS_Store" "Thumbs.db" "*.tmp" "*.swp" "*.swo"
# Documentation build outputs
"_book" "_site" "docs/_build" "site" "gh-pages"
".docusaurus" ".vuepress" ".gitbook"
# Database files
"*.sqlite" "*.sqlite3" "*.db" "data.db"
# OS and editor files
".DS_Store" "Thumbs.db" "desktop.ini"
"*.stackdump" "*.core"
# Cloud and deployment
".serverless" ".terraform" "terraform.tfstate"
".aws" ".azure" ".gcp"
# Mobile development
".gradle" "build" ".expo" ".metro"
"android/app/build" "ios/build" "DerivedData"
# Game development
"Library" "Temp" "ProjectSettings"
"Logs" "MemoryCaptures" "UserSettings"
)
for exclude in "${system_excludes[@]}"; do
filters+=" -not -path '*/$exclude' -not -path '*/$exclude/*'"
done
# Parse .gitignore if it exists
if [ -f ".gitignore" ]; then
while IFS= read -r line; do
# Skip empty lines and comments
[[ -z "$line" || "$line" =~ ^[[:space:]]*# ]] && continue
# Remove trailing slash and whitespace
line=$(echo "$line" | sed 's|/$||' | xargs)
# Add to filters
filters+=" -not -path '*/$line' -not -path '*/$line/*'"
done < .gitignore
fi
echo "$filters"
}
get_modules_by_depth() {
local format="${1:-list}"
local exclusion_filters=$(build_exclusion_filters)
local max_depth=$(eval "find . -type d $exclusion_filters 2>/dev/null" | awk -F/ '{print NF-1}' | sort -n | tail -1)
case "$format" in
"grouped")
echo "📊 Modules by depth (deepest first):"
for depth in $(seq $max_depth -1 0); do
local dirs=$(eval "find . -mindepth $depth -maxdepth $depth -type d $exclusion_filters 2>/dev/null" | \
while read dir; do
if [ $(find "$dir" -maxdepth 1 -type f 2>/dev/null | wc -l) -gt 0 ]; then
local claude_indicator=""
[ -f "$dir/CLAUDE.md" ] && claude_indicator=" [✓]"
echo "$dir$claude_indicator"
fi
done)
if [ -n "$dirs" ]; then
echo " 📁 Depth $depth:"
echo "$dirs" | sed 's/^/ - /'
fi
done
;;
"json")
echo "{"
echo " \"max_depth\": $max_depth,"
echo " \"modules\": {"
for depth in $(seq $max_depth -1 0); do
local dirs=$(eval "find . -mindepth $depth -maxdepth $depth -type d $exclusion_filters 2>/dev/null" | \
while read dir; do
if [ $(find "$dir" -maxdepth 1 -type f 2>/dev/null | wc -l) -gt 0 ]; then
local has_claude="false"
[ -f "$dir/CLAUDE.md" ] && has_claude="true"
echo "{\"path\":\"$dir\",\"has_claude\":$has_claude}"
fi
done | tr '\n' ',')
if [ -n "$dirs" ]; then
dirs=${dirs%,} # Remove trailing comma
echo " \"$depth\": [$dirs]"
[ $depth -gt 0 ] && echo ","
fi
done
echo " }"
echo "}"
;;
"list"|*)
# Simple list format (deepest first)
for depth in $(seq $max_depth -1 0); do
eval "find . -mindepth $depth -maxdepth $depth -type d $exclusion_filters 2>/dev/null" | \
while read dir; do
if [ $(find "$dir" -maxdepth 1 -type f 2>/dev/null | wc -l) -gt 0 ]; then
local file_count=$(find "$dir" -maxdepth 1 -type f 2>/dev/null | wc -l)
local types=$(find "$dir" -maxdepth 1 -type f -name "*.*" 2>/dev/null | \
grep -E '\.[^/]*$' | sed 's/.*\.//' | sort -u | tr '\n' ',' | sed 's/,$//')
local has_claude="no"
[ -f "$dir/CLAUDE.md" ] && has_claude="yes"
echo "depth:$depth|path:$dir|files:$file_count|types:[$types]|has_claude:$has_claude"
fi
done
done
;;
esac
}
# Execute function if script is run directly
if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
get_modules_by_depth "$@"
fi

View File

@@ -1,395 +0,0 @@
#!/bin/bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec ui_generate_preview '{"designPath":"design-run-1","outputDir":"preview"}'
# This file will be removed in a future version.
#
# UI Generate Preview v2.0 - Template-Based Preview Generation
# Purpose: Generate compare.html and index.html using template substitution
# Template: ~/.claude/workflows/_template-compare-matrix.html
#
# Usage: ui-generate-preview.sh <prototypes_dir> [--template <path>]
#
set -e
# Color output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color
# Default template path
TEMPLATE_PATH="$HOME/.claude/workflows/_template-compare-matrix.html"
# Parse arguments
prototypes_dir="${1:-.}"
shift || true
while [[ $# -gt 0 ]]; do
case $1 in
--template)
TEMPLATE_PATH="$2"
shift 2
;;
*)
echo -e "${RED}Unknown option: $1${NC}"
exit 1
;;
esac
done
if [[ ! -d "$prototypes_dir" ]]; then
echo -e "${RED}Error: Directory not found: $prototypes_dir${NC}"
exit 1
fi
cd "$prototypes_dir" || exit 1
echo -e "${GREEN}📊 Auto-detecting matrix dimensions...${NC}"
# Auto-detect styles, layouts, targets from file patterns
# Pattern: {target}-style-{s}-layout-{l}.html
styles=$(find . -maxdepth 1 -name "*-style-*-layout-*.html" | \
sed 's/.*-style-\([0-9]\+\)-.*/\1/' | sort -un)
layouts=$(find . -maxdepth 1 -name "*-style-*-layout-*.html" | \
sed 's/.*-layout-\([0-9]\+\)\.html/\1/' | sort -un)
targets=$(find . -maxdepth 1 -name "*-style-*-layout-*.html" | \
sed 's/\.\///; s/-style-.*//' | sort -u)
S=$(echo "$styles" | wc -l)
L=$(echo "$layouts" | wc -l)
T=$(echo "$targets" | wc -l)
echo -e " Detected: ${GREEN}${S}${NC} styles × ${GREEN}${L}${NC} layouts × ${GREEN}${T}${NC} targets"
if [[ $S -eq 0 ]] || [[ $L -eq 0 ]] || [[ $T -eq 0 ]]; then
echo -e "${RED}Error: No prototype files found matching pattern {target}-style-{s}-layout-{l}.html${NC}"
exit 1
fi
# ============================================================================
# Generate compare.html from template
# ============================================================================
echo -e "${YELLOW}🎨 Generating compare.html from template...${NC}"
if [[ ! -f "$TEMPLATE_PATH" ]]; then
echo -e "${RED}Error: Template not found: $TEMPLATE_PATH${NC}"
exit 1
fi
# Build pages/targets JSON array
PAGES_JSON="["
first=true
for target in $targets; do
if [[ "$first" == true ]]; then
first=false
else
PAGES_JSON+=", "
fi
PAGES_JSON+="\"$target\""
done
PAGES_JSON+="]"
# Generate metadata
RUN_ID="run-$(date +%Y%m%d-%H%M%S)"
SESSION_ID="standalone"
TIMESTAMP=$(date -u +%Y-%m-%dT%H:%M:%SZ 2>/dev/null || date -u +"%Y-%m-%d")
# Replace placeholders in template
cat "$TEMPLATE_PATH" | \
sed "s|{{run_id}}|${RUN_ID}|g" | \
sed "s|{{session_id}}|${SESSION_ID}|g" | \
sed "s|{{timestamp}}|${TIMESTAMP}|g" | \
sed "s|{{style_variants}}|${S}|g" | \
sed "s|{{layout_variants}}|${L}|g" | \
sed "s|{{pages_json}}|${PAGES_JSON}|g" \
> compare.html
echo -e "${GREEN} ✓ Generated compare.html from template${NC}"
# ============================================================================
# Generate index.html
# ============================================================================
echo -e "${YELLOW}📋 Generating index.html...${NC}"
cat > index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Prototypes Index</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
background: #f5f5f5;
}
h1 { margin-bottom: 10px; color: #333; }
.subtitle { color: #666; margin-bottom: 30px; }
.cta {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.cta h2 { margin-bottom: 10px; }
.cta a {
display: inline-block;
background: white;
color: #667eea;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
margin-top: 10px;
}
.cta a:hover { background: #f8f9fa; }
.style-section {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.style-section h2 {
color: #495057;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #e9ecef;
}
.target-group {
margin-bottom: 20px;
}
.target-group h3 {
color: #6c757d;
font-size: 16px;
margin-bottom: 10px;
}
.link-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.prototype-link {
padding: 12px 16px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 6px;
text-decoration: none;
color: #495057;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s;
}
.prototype-link:hover {
background: #e9ecef;
border-color: #667eea;
transform: translateX(2px);
}
.prototype-link .label { font-weight: 500; }
.prototype-link .icon { color: #667eea; }
</style>
</head>
<body>
<h1>🎨 UI Prototypes Index</h1>
<p class="subtitle">Generated __S__×__L__×__T__ = __TOTAL__ prototypes</p>
<div class="cta">
<h2>📊 Interactive Comparison</h2>
<p>View all styles and layouts side-by-side in an interactive matrix</p>
<a href="compare.html">Open Matrix View →</a>
</div>
<h2>📂 All Prototypes</h2>
__CONTENT__
</body>
</html>
EOF
# Build content HTML
CONTENT=""
for style in $styles; do
CONTENT+="<div class='style-section'>"$'\n'
CONTENT+="<h2>Style ${style}</h2>"$'\n'
for target in $targets; do
target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}"
CONTENT+="<div class='target-group'>"$'\n'
CONTENT+="<h3>${target_capitalized}</h3>"$'\n'
CONTENT+="<div class='link-grid'>"$'\n'
for layout in $layouts; do
html_file="${target}-style-${style}-layout-${layout}.html"
if [[ -f "$html_file" ]]; then
CONTENT+="<a href='${html_file}' class='prototype-link' target='_blank'>"$'\n'
CONTENT+="<span class='label'>Layout ${layout}</span>"$'\n'
CONTENT+="<span class='icon'>↗</span>"$'\n'
CONTENT+="</a>"$'\n'
fi
done
CONTENT+="</div></div>"$'\n'
done
CONTENT+="</div>"$'\n'
done
# Calculate total
TOTAL_PROTOTYPES=$((S * L * T))
# Replace placeholders (using a temp file for complex replacement)
{
echo "$CONTENT" > /tmp/content_tmp.txt
sed "s|__S__|${S}|g" index.html | \
sed "s|__L__|${L}|g" | \
sed "s|__T__|${T}|g" | \
sed "s|__TOTAL__|${TOTAL_PROTOTYPES}|g" | \
sed -e "/__CONTENT__/r /tmp/content_tmp.txt" -e "/__CONTENT__/d" > /tmp/index_tmp.html
mv /tmp/index_tmp.html index.html
rm -f /tmp/content_tmp.txt
}
echo -e "${GREEN} ✓ Generated index.html${NC}"
# ============================================================================
# Generate PREVIEW.md
# ============================================================================
echo -e "${YELLOW}📝 Generating PREVIEW.md...${NC}"
cat > PREVIEW.md << EOF
# UI Prototypes Preview Guide
Generated: $(date +"%Y-%m-%d %H:%M:%S")
## 📊 Matrix Dimensions
- **Styles**: ${S}
- **Layouts**: ${L}
- **Targets**: ${T}
- **Total Prototypes**: $((S*L*T))
## 🌐 How to View
### Option 1: Interactive Matrix (Recommended)
Open \`compare.html\` in your browser to see all prototypes in an interactive matrix view.
**Features**:
- Side-by-side comparison of all styles and layouts
- Switch between targets using the dropdown
- Adjust grid columns for better viewing
- Direct links to full-page views
- Selection system with export to JSON
- Fullscreen mode for detailed inspection
### Option 2: Simple Index
Open \`index.html\` for a simple list of all prototypes with direct links.
### Option 3: Direct File Access
Each prototype can be opened directly:
- Pattern: \`{target}-style-{s}-layout-{l}.html\`
- Example: \`dashboard-style-1-layout-1.html\`
## 📁 File Structure
\`\`\`
prototypes/
├── compare.html # Interactive matrix view
├── index.html # Simple navigation index
├── PREVIEW.md # This file
EOF
for style in $styles; do
for target in $targets; do
for layout in $layouts; do
echo "├── ${target}-style-${style}-layout-${layout}.html" >> PREVIEW.md
echo "├── ${target}-style-${style}-layout-${layout}.css" >> PREVIEW.md
done
done
done
cat >> PREVIEW.md << 'EOF2'
```
## 🎨 Style Variants
EOF2
for style in $styles; do
cat >> PREVIEW.md << EOF3
### Style ${style}
EOF3
style_guide="../style-extraction/style-${style}/style-guide.md"
if [[ -f "$style_guide" ]]; then
head -n 10 "$style_guide" | tail -n +2 >> PREVIEW.md 2>/dev/null || echo "Design philosophy and tokens" >> PREVIEW.md
else
echo "Design system ${style}" >> PREVIEW.md
fi
echo "" >> PREVIEW.md
done
cat >> PREVIEW.md << 'EOF4'
## 🎯 Targets
EOF4
for target in $targets; do
target_capitalized="$(echo ${target:0:1} | tr '[:lower:]' '[:upper:]')${target:1}"
echo "- **${target_capitalized}**: ${L} layouts × ${S} styles = $((L*S)) variations" >> PREVIEW.md
done
cat >> PREVIEW.md << 'EOF5'
## 💡 Tips
1. **Comparison**: Use compare.html to see how different styles affect the same layout
2. **Navigation**: Use index.html for quick access to specific prototypes
3. **Selection**: Mark favorites in compare.html using star icons
4. **Export**: Download selection JSON for implementation planning
5. **Inspection**: Open browser DevTools to inspect HTML structure and CSS
6. **Sharing**: All files are standalone - can be shared or deployed directly
## 📝 Next Steps
1. Review prototypes in compare.html
2. Select preferred style × layout combinations
3. Export selections as JSON
4. Provide feedback for refinement
5. Use selected designs for implementation
---
Generated by /workflow:ui-design:generate-v2 (Style-Centric Architecture)
EOF5
echo -e "${GREEN} ✓ Generated PREVIEW.md${NC}"
# ============================================================================
# Completion Summary
# ============================================================================
echo ""
echo -e "${GREEN}✅ Preview generation complete!${NC}"
echo -e " Files created: compare.html, index.html, PREVIEW.md"
echo -e " Matrix: ${S} styles × ${L} layouts × ${T} targets = $((S*L*T)) prototypes"
echo ""
echo -e "${YELLOW}🌐 Next Steps:${NC}"
echo -e " 1. Open compare.html for interactive matrix view"
echo -e " 2. Open index.html for simple navigation"
echo -e " 3. Read PREVIEW.md for detailed usage guide"
echo ""

View File

@@ -1,815 +0,0 @@
#!/bin/bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec ui_instantiate_prototypes '{"designPath":"design-run-1","outputDir":"output"}'
# This file will be removed in a future version.
# UI Prototype Instantiation Script with Preview Generation (v3.0 - Auto-detect)
# Purpose: Generate S × L × P final prototypes from templates + interactive preview files
# Usage:
# Simple: ui-instantiate-prototypes.sh <prototypes_dir>
# Full: ui-instantiate-prototypes.sh <base_path> <pages> <style_variants> <layout_variants> [options]
# Use safer error handling
set -o pipefail
# ============================================================================
# Helper Functions
# ============================================================================
log_info() {
echo "$1"
}
log_success() {
echo "$1"
}
log_error() {
echo "$1"
}
log_warning() {
echo "⚠️ $1"
}
# Auto-detect pages from templates directory
auto_detect_pages() {
local templates_dir="$1/_templates"
if [ ! -d "$templates_dir" ]; then
log_error "Templates directory not found: $templates_dir"
return 1
fi
# Find unique page names from template files (e.g., login-layout-1.html -> login)
local pages=$(find "$templates_dir" -name "*-layout-*.html" -type f | \
sed 's|.*/||' | \
sed 's|-layout-[0-9]*\.html||' | \
sort -u | \
tr '\n' ',' | \
sed 's/,$//')
echo "$pages"
}
# Auto-detect style variants count
auto_detect_style_variants() {
local base_path="$1"
local style_dir="$base_path/../style-extraction"
if [ ! -d "$style_dir" ]; then
log_warning "Style consolidation directory not found: $style_dir"
echo "3" # Default
return
fi
# Count style-* directories
local count=$(find "$style_dir" -maxdepth 1 -type d -name "style-*" | wc -l)
if [ "$count" -eq 0 ]; then
echo "3" # Default
else
echo "$count"
fi
}
# Auto-detect layout variants count
auto_detect_layout_variants() {
local templates_dir="$1/_templates"
if [ ! -d "$templates_dir" ]; then
echo "3" # Default
return
fi
# Find the first page and count its layouts
local first_page=$(find "$templates_dir" -name "*-layout-1.html" -type f | head -1 | sed 's|.*/||' | sed 's|-layout-1\.html||')
if [ -z "$first_page" ]; then
echo "3" # Default
return
fi
# Count layout files for this page
local count=$(find "$templates_dir" -name "${first_page}-layout-*.html" -type f | wc -l)
if [ "$count" -eq 0 ]; then
echo "3" # Default
else
echo "$count"
fi
}
# ============================================================================
# Parse Arguments
# ============================================================================
show_usage() {
cat <<'EOF'
Usage:
Simple (auto-detect): ui-instantiate-prototypes.sh <prototypes_dir> [options]
Full: ui-instantiate-prototypes.sh <base_path> <pages> <style_variants> <layout_variants> [options]
Simple Mode (Recommended):
prototypes_dir Path to prototypes directory (auto-detects everything)
Full Mode:
base_path Base path to prototypes directory
pages Comma-separated list of pages/components
style_variants Number of style variants (1-5)
layout_variants Number of layout variants (1-5)
Options:
--run-id <id> Run ID (default: auto-generated)
--session-id <id> Session ID (default: standalone)
--mode <page|component> Exploration mode (default: page)
--template <path> Path to compare.html template (default: ~/.claude/workflows/_template-compare-matrix.html)
--no-preview Skip preview file generation
--help Show this help message
Examples:
# Simple usage (auto-detect everything)
ui-instantiate-prototypes.sh .workflow/design-run-*/prototypes
# With options
ui-instantiate-prototypes.sh .workflow/design-run-*/prototypes --session-id WFS-auth
# Full manual mode
ui-instantiate-prototypes.sh .workflow/design-run-*/prototypes "login,dashboard" 3 3 --session-id WFS-auth
EOF
}
# Default values
BASE_PATH=""
PAGES=""
STYLE_VARIANTS=""
LAYOUT_VARIANTS=""
RUN_ID="run-$(date +%Y%m%d-%H%M%S)"
SESSION_ID="standalone"
MODE="page"
TEMPLATE_PATH="$HOME/.claude/workflows/_template-compare-matrix.html"
GENERATE_PREVIEW=true
AUTO_DETECT=false
# Parse arguments
if [ $# -lt 1 ]; then
log_error "Missing required arguments"
show_usage
exit 1
fi
# Check if using simple mode (only 1 positional arg before options)
if [ $# -eq 1 ] || [[ "$2" == --* ]]; then
# Simple mode - auto-detect
AUTO_DETECT=true
BASE_PATH="$1"
shift 1
else
# Full mode - manual parameters
if [ $# -lt 4 ]; then
log_error "Full mode requires 4 positional arguments"
show_usage
exit 1
fi
BASE_PATH="$1"
PAGES="$2"
STYLE_VARIANTS="$3"
LAYOUT_VARIANTS="$4"
shift 4
fi
# Parse optional arguments
while [[ $# -gt 0 ]]; do
case $1 in
--run-id)
RUN_ID="$2"
shift 2
;;
--session-id)
SESSION_ID="$2"
shift 2
;;
--mode)
MODE="$2"
shift 2
;;
--template)
TEMPLATE_PATH="$2"
shift 2
;;
--no-preview)
GENERATE_PREVIEW=false
shift
;;
--help)
show_usage
exit 0
;;
*)
log_error "Unknown option: $1"
show_usage
exit 1
;;
esac
done
# ============================================================================
# Auto-detection (if enabled)
# ============================================================================
if [ "$AUTO_DETECT" = true ]; then
log_info "🔍 Auto-detecting configuration from directory..."
# Detect pages
PAGES=$(auto_detect_pages "$BASE_PATH")
if [ -z "$PAGES" ]; then
log_error "Could not auto-detect pages from templates"
exit 1
fi
log_info " Pages: $PAGES"
# Detect style variants
STYLE_VARIANTS=$(auto_detect_style_variants "$BASE_PATH")
log_info " Style variants: $STYLE_VARIANTS"
# Detect layout variants
LAYOUT_VARIANTS=$(auto_detect_layout_variants "$BASE_PATH")
log_info " Layout variants: $LAYOUT_VARIANTS"
echo ""
fi
# ============================================================================
# Validation
# ============================================================================
# Validate base path
if [ ! -d "$BASE_PATH" ]; then
log_error "Base path not found: $BASE_PATH"
exit 1
fi
# Validate style and layout variants
if [ "$STYLE_VARIANTS" -lt 1 ] || [ "$STYLE_VARIANTS" -gt 5 ]; then
log_error "Style variants must be between 1 and 5 (got: $STYLE_VARIANTS)"
exit 1
fi
if [ "$LAYOUT_VARIANTS" -lt 1 ] || [ "$LAYOUT_VARIANTS" -gt 5 ]; then
log_error "Layout variants must be between 1 and 5 (got: $LAYOUT_VARIANTS)"
exit 1
fi
# Validate STYLE_VARIANTS against actual style directories
if [ "$STYLE_VARIANTS" -gt 0 ]; then
style_dir="$BASE_PATH/../style-extraction"
if [ ! -d "$style_dir" ]; then
log_error "Style consolidation directory not found: $style_dir"
log_info "Run /workflow:ui-design:consolidate first"
exit 1
fi
actual_styles=$(find "$style_dir" -maxdepth 1 -type d -name "style-*" 2>/dev/null | wc -l)
if [ "$actual_styles" -eq 0 ]; then
log_error "No style directories found in: $style_dir"
log_info "Run /workflow:ui-design:consolidate first to generate style design systems"
exit 1
fi
if [ "$STYLE_VARIANTS" -gt "$actual_styles" ]; then
log_warning "Requested $STYLE_VARIANTS style variants, but only found $actual_styles directories"
log_info "Available style directories:"
find "$style_dir" -maxdepth 1 -type d -name "style-*" 2>/dev/null | sed 's|.*/||' | sort
log_info "Auto-correcting to $actual_styles style variants"
STYLE_VARIANTS=$actual_styles
fi
fi
# Parse pages into array
IFS=',' read -ra PAGE_ARRAY <<< "$PAGES"
if [ ${#PAGE_ARRAY[@]} -eq 0 ]; then
log_error "No pages found"
exit 1
fi
# ============================================================================
# Header Output
# ============================================================================
echo "========================================="
echo "UI Prototype Instantiation & Preview"
if [ "$AUTO_DETECT" = true ]; then
echo "(Auto-detected configuration)"
fi
echo "========================================="
echo "Base Path: $BASE_PATH"
echo "Mode: $MODE"
echo "Pages/Components: $PAGES"
echo "Style Variants: $STYLE_VARIANTS"
echo "Layout Variants: $LAYOUT_VARIANTS"
echo "Run ID: $RUN_ID"
echo "Session ID: $SESSION_ID"
echo "========================================="
echo ""
# Change to base path
cd "$BASE_PATH" || exit 1
# ============================================================================
# Phase 1: Instantiate Prototypes
# ============================================================================
log_info "🚀 Phase 1: Instantiating prototypes from templates..."
echo ""
total_generated=0
total_failed=0
for page in "${PAGE_ARRAY[@]}"; do
# Trim whitespace
page=$(echo "$page" | xargs)
log_info "Processing page/component: $page"
for s in $(seq 1 "$STYLE_VARIANTS"); do
for l in $(seq 1 "$LAYOUT_VARIANTS"); do
# Define file paths
TEMPLATE_HTML="_templates/${page}-layout-${l}.html"
STRUCTURAL_CSS="_templates/${page}-layout-${l}.css"
TOKEN_CSS="../style-extraction/style-${s}/tokens.css"
OUTPUT_HTML="${page}-style-${s}-layout-${l}.html"
# Copy template and replace placeholders
if [ -f "$TEMPLATE_HTML" ]; then
cp "$TEMPLATE_HTML" "$OUTPUT_HTML" || {
log_error "Failed to copy template: $TEMPLATE_HTML"
((total_failed++))
continue
}
# Replace CSS placeholders (Windows-compatible sed syntax)
sed -i "s|{{STRUCTURAL_CSS}}|${STRUCTURAL_CSS}|g" "$OUTPUT_HTML" || true
sed -i "s|{{TOKEN_CSS}}|${TOKEN_CSS}|g" "$OUTPUT_HTML" || true
log_success "Created: $OUTPUT_HTML"
((total_generated++))
# Create implementation notes (simplified)
NOTES_FILE="${page}-style-${s}-layout-${l}-notes.md"
# Generate notes with simple heredoc
cat > "$NOTES_FILE" <<NOTESEOF
# Implementation Notes: ${page}-style-${s}-layout-${l}
## Generation Details
- **Template**: ${TEMPLATE_HTML}
- **Structural CSS**: ${STRUCTURAL_CSS}
- **Style Tokens**: ${TOKEN_CSS}
- **Layout Strategy**: Layout ${l}
- **Style Variant**: Style ${s}
- **Mode**: ${MODE}
## Template Reuse
This prototype was generated from a shared layout template to ensure consistency
across all style variants. The HTML structure is identical for all ${page}-layout-${l}
prototypes, with only the design tokens (colors, fonts, spacing) varying.
## Design System Reference
Refer to \`../style-extraction/style-${s}/style-guide.md\` for:
- Design philosophy
- Token usage guidelines
- Component patterns
- Accessibility requirements
## Customization
To modify this prototype:
1. Edit the layout template: \`${TEMPLATE_HTML}\` (affects all styles)
2. Edit the structural CSS: \`${STRUCTURAL_CSS}\` (affects all styles)
3. Edit design tokens: \`${TOKEN_CSS}\` (affects only this style variant)
## Run Information
- **Run ID**: ${RUN_ID}
- **Session ID**: ${SESSION_ID}
- **Generated**: $(date -u +%Y-%m-%dT%H:%M:%SZ 2>/dev/null || date -u +%Y-%m-%d)
NOTESEOF
else
log_error "Template not found: $TEMPLATE_HTML"
((total_failed++))
fi
done
done
done
echo ""
log_success "Phase 1 complete: Generated ${total_generated} prototypes"
if [ $total_failed -gt 0 ]; then
log_warning "Failed: ${total_failed} prototypes"
fi
echo ""
# ============================================================================
# Phase 2: Generate Preview Files (if enabled)
# ============================================================================
if [ "$GENERATE_PREVIEW" = false ]; then
log_info "⏭️ Skipping preview generation (--no-preview flag)"
exit 0
fi
log_info "🎨 Phase 2: Generating preview files..."
echo ""
# ============================================================================
# 2a. Generate compare.html from template
# ============================================================================
if [ ! -f "$TEMPLATE_PATH" ]; then
log_warning "Template not found: $TEMPLATE_PATH"
log_info " Skipping compare.html generation"
else
log_info "📄 Generating compare.html from template..."
# Convert page array to JSON format
PAGES_JSON="["
for i in "${!PAGE_ARRAY[@]}"; do
page=$(echo "${PAGE_ARRAY[$i]}" | xargs)
PAGES_JSON+="\"$page\""
if [ $i -lt $((${#PAGE_ARRAY[@]} - 1)) ]; then
PAGES_JSON+=", "
fi
done
PAGES_JSON+="]"
TIMESTAMP=$(date -u +%Y-%m-%dT%H:%M:%SZ 2>/dev/null || date -u +%Y-%m-%d)
# Read template and replace placeholders
cat "$TEMPLATE_PATH" | \
sed "s|{{run_id}}|${RUN_ID}|g" | \
sed "s|{{session_id}}|${SESSION_ID}|g" | \
sed "s|{{timestamp}}|${TIMESTAMP}|g" | \
sed "s|{{style_variants}}|${STYLE_VARIANTS}|g" | \
sed "s|{{layout_variants}}|${LAYOUT_VARIANTS}|g" | \
sed "s|{{pages_json}}|${PAGES_JSON}|g" \
> compare.html
log_success "Generated: compare.html"
fi
# ============================================================================
# 2b. Generate index.html
# ============================================================================
log_info "📄 Generating index.html..."
# Calculate total prototypes
TOTAL_PROTOTYPES=$((STYLE_VARIANTS * LAYOUT_VARIANTS * ${#PAGE_ARRAY[@]}))
# Generate index.html with simple heredoc
cat > index.html <<'INDEXEOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Prototypes - __MODE__ Mode - __RUN_ID__</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
max-width: 900px;
margin: 2rem auto;
padding: 0 2rem;
background: #f9fafb;
}
.header {
background: white;
padding: 2rem;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
h1 {
color: #2563eb;
margin-bottom: 0.5rem;
font-size: 2rem;
}
.meta {
color: #6b7280;
font-size: 0.875rem;
margin-top: 0.5rem;
}
.info {
background: #f3f4f6;
padding: 1.5rem;
border-radius: 0.5rem;
margin: 1.5rem 0;
border-left: 4px solid #2563eb;
}
.cta {
display: inline-block;
background: #2563eb;
color: white;
padding: 1rem 2rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
margin: 1rem 0;
transition: background 0.2s;
}
.cta:hover {
background: #1d4ed8;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.stat {
background: white;
border: 1px solid #e5e7eb;
padding: 1.5rem;
border-radius: 0.5rem;
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.stat-value {
font-size: 2.5rem;
font-weight: bold;
color: #2563eb;
margin-bottom: 0.25rem;
}
.stat-label {
color: #6b7280;
font-size: 0.875rem;
}
.section {
background: white;
padding: 2rem;
border-radius: 0.75rem;
margin-bottom: 2rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
h2 {
color: #1f2937;
margin-bottom: 1rem;
font-size: 1.5rem;
}
ul {
line-height: 1.8;
color: #374151;
}
.pages-list {
list-style: none;
padding: 0;
}
.pages-list li {
background: #f9fafb;
padding: 0.75rem 1rem;
margin: 0.5rem 0;
border-radius: 0.375rem;
border-left: 3px solid #2563eb;
}
.badge {
display: inline-block;
background: #dbeafe;
color: #1e40af;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
margin-left: 0.5rem;
}
</style>
</head>
<body>
<div class="header">
<h1>🎨 UI Prototype __MODE__ Mode</h1>
<div class="meta">
<strong>Run ID:</strong> __RUN_ID__ |
<strong>Session:</strong> __SESSION_ID__ |
<strong>Generated:</strong> __TIMESTAMP__
</div>
</div>
<div class="info">
<p><strong>Matrix Configuration:</strong> __STYLE_VARIANTS__ styles × __LAYOUT_VARIANTS__ layouts × __PAGE_COUNT__ __MODE__s</p>
<p><strong>Total Prototypes:</strong> __TOTAL_PROTOTYPES__ interactive HTML files</p>
</div>
<a href="compare.html" class="cta">🔍 Open Interactive Matrix Comparison →</a>
<div class="stats">
<div class="stat">
<div class="stat-value">__STYLE_VARIANTS__</div>
<div class="stat-label">Style Variants</div>
</div>
<div class="stat">
<div class="stat-value">__LAYOUT_VARIANTS__</div>
<div class="stat-label">Layout Options</div>
</div>
<div class="stat">
<div class="stat-value">__PAGE_COUNT__</div>
<div class="stat-label">__MODE__s</div>
</div>
<div class="stat">
<div class="stat-value">__TOTAL_PROTOTYPES__</div>
<div class="stat-label">Total Prototypes</div>
</div>
</div>
<div class="section">
<h2>🌟 Features</h2>
<ul>
<li><strong>Interactive Matrix View:</strong> __STYLE_VARIANTS__×__LAYOUT_VARIANTS__ grid with synchronized scrolling</li>
<li><strong>Flexible Zoom:</strong> 25%, 50%, 75%, 100% viewport scaling</li>
<li><strong>Fullscreen Mode:</strong> Detailed view for individual prototypes</li>
<li><strong>Selection System:</strong> Mark favorites with export to JSON</li>
<li><strong>__MODE__ Switcher:</strong> Compare different __MODE__s side-by-side</li>
<li><strong>Persistent State:</strong> Selections saved in localStorage</li>
</ul>
</div>
<div class="section">
<h2>📄 Generated __MODE__s</h2>
<ul class="pages-list">
__PAGES_LIST__
</ul>
</div>
<div class="section">
<h2>📚 Next Steps</h2>
<ol>
<li>Open <code>compare.html</code> to explore all variants in matrix view</li>
<li>Use zoom and sync scroll controls to compare details</li>
<li>Select your preferred style×layout combinations</li>
<li>Export selections as JSON for implementation planning</li>
<li>Review implementation notes in <code>*-notes.md</code> files</li>
</ol>
</div>
</body>
</html>
INDEXEOF
# Build pages list HTML
PAGES_LIST_HTML=""
for page in "${PAGE_ARRAY[@]}"; do
page=$(echo "$page" | xargs)
VARIANT_COUNT=$((STYLE_VARIANTS * LAYOUT_VARIANTS))
PAGES_LIST_HTML+=" <li>\n"
PAGES_LIST_HTML+=" <strong>${page}</strong>\n"
PAGES_LIST_HTML+=" <span class=\"badge\">${STYLE_VARIANTS}×${LAYOUT_VARIANTS} = ${VARIANT_COUNT} variants</span>\n"
PAGES_LIST_HTML+=" </li>\n"
done
# Replace all placeholders in index.html
MODE_UPPER=$(echo "$MODE" | awk '{print toupper(substr($0,1,1)) tolower(substr($0,2))}')
sed -i "s|__RUN_ID__|${RUN_ID}|g" index.html
sed -i "s|__SESSION_ID__|${SESSION_ID}|g" index.html
sed -i "s|__TIMESTAMP__|${TIMESTAMP}|g" index.html
sed -i "s|__MODE__|${MODE_UPPER}|g" index.html
sed -i "s|__STYLE_VARIANTS__|${STYLE_VARIANTS}|g" index.html
sed -i "s|__LAYOUT_VARIANTS__|${LAYOUT_VARIANTS}|g" index.html
sed -i "s|__PAGE_COUNT__|${#PAGE_ARRAY[@]}|g" index.html
sed -i "s|__TOTAL_PROTOTYPES__|${TOTAL_PROTOTYPES}|g" index.html
sed -i "s|__PAGES_LIST__|${PAGES_LIST_HTML}|g" index.html
log_success "Generated: index.html"
# ============================================================================
# 2c. Generate PREVIEW.md
# ============================================================================
log_info "📄 Generating PREVIEW.md..."
cat > PREVIEW.md <<PREVIEWEOF
# UI Prototype Preview Guide
## Quick Start
1. Open \`index.html\` for overview and navigation
2. Open \`compare.html\` for interactive matrix comparison
3. Use browser developer tools to inspect responsive behavior
## Configuration
- **Exploration Mode:** ${MODE_UPPER}
- **Run ID:** ${RUN_ID}
- **Session ID:** ${SESSION_ID}
- **Style Variants:** ${STYLE_VARIANTS}
- **Layout Options:** ${LAYOUT_VARIANTS}
- **${MODE_UPPER}s:** ${PAGES}
- **Total Prototypes:** ${TOTAL_PROTOTYPES}
- **Generated:** ${TIMESTAMP}
## File Naming Convention
\`\`\`
{${MODE}}-style-{s}-layout-{l}.html
\`\`\`
**Example:** \`dashboard-style-1-layout-2.html\`
- ${MODE_UPPER}: dashboard
- Style: Design system 1
- Layout: Layout variant 2
## Interactive Features (compare.html)
### Matrix View
- **Grid Layout:** ${STYLE_VARIANTS}×${LAYOUT_VARIANTS} table with all prototypes visible
- **Synchronized Scroll:** All iframes scroll together (toggle with button)
- **Zoom Controls:** Adjust viewport scale (25%, 50%, 75%, 100%)
- **${MODE_UPPER} Selector:** Switch between different ${MODE}s instantly
### Prototype Actions
- **⭐ Selection:** Click star icon to mark favorites
- **⛶ Fullscreen:** View prototype in fullscreen overlay
- **↗ New Tab:** Open prototype in dedicated browser tab
### Selection Export
1. Select preferred prototypes using star icons
2. Click "Export Selection" button
3. Downloads JSON file: \`selection-${RUN_ID}.json\`
4. Use exported file for implementation planning
## Design System References
Each prototype references a specific style design system:
PREVIEWEOF
# Add style references
for s in $(seq 1 "$STYLE_VARIANTS"); do
cat >> PREVIEW.md <<STYLEEOF
### Style ${s}
- **Tokens:** \`../style-extraction/style-${s}/design-tokens.json\`
- **CSS Variables:** \`../style-extraction/style-${s}/tokens.css\`
- **Style Guide:** \`../style-extraction/style-${s}/style-guide.md\`
STYLEEOF
done
cat >> PREVIEW.md <<'FOOTEREOF'
## Responsive Testing
All prototypes are mobile-first responsive. Test at these breakpoints:
- **Mobile:** 375px - 767px
- **Tablet:** 768px - 1023px
- **Desktop:** 1024px+
Use browser DevTools responsive mode for testing.
## Accessibility Features
- Semantic HTML5 structure
- ARIA attributes for screen readers
- Keyboard navigation support
- Proper heading hierarchy
- Focus indicators
## Next Steps
1. **Review:** Open `compare.html` and explore all variants
2. **Select:** Mark preferred prototypes using star icons
3. **Export:** Download selection JSON for implementation
4. **Implement:** Use `/workflow:ui-design:update` to integrate selected designs
5. **Plan:** Run `/workflow:plan` to generate implementation tasks
---
**Generated by:** `ui-instantiate-prototypes.sh`
**Version:** 3.0 (auto-detect mode)
FOOTEREOF
log_success "Generated: PREVIEW.md"
# ============================================================================
# Completion Summary
# ============================================================================
echo ""
echo "========================================="
echo "✅ Generation Complete!"
echo "========================================="
echo ""
echo "📊 Summary:"
echo " Prototypes: ${total_generated} generated"
if [ $total_failed -gt 0 ]; then
echo " Failed: ${total_failed}"
fi
echo " Preview Files: compare.html, index.html, PREVIEW.md"
echo " Matrix: ${STYLE_VARIANTS}×${LAYOUT_VARIANTS} (${#PAGE_ARRAY[@]} ${MODE}s)"
echo " Total Files: ${TOTAL_PROTOTYPES} prototypes + preview files"
echo ""
echo "🌐 Next Steps:"
echo " 1. Open: ${BASE_PATH}/index.html"
echo " 2. Explore: ${BASE_PATH}/compare.html"
echo " 3. Review: ${BASE_PATH}/PREVIEW.md"
echo ""
echo "Performance: Template-based approach with ${STYLE_VARIANTS}× speedup"
echo "========================================="

View File

@@ -1,337 +0,0 @@
#!/bin/bash
# ⚠️ DEPRECATED: This script is deprecated.
# Please use: ccw tool exec update_module_claude '{"strategy":"single-layer","path":".","tool":"gemini"}'
# This file will be removed in a future version.
# Update CLAUDE.md for modules with two strategies
# Usage: update_module_claude.sh <strategy> <module_path> [tool] [model]
# strategy: single-layer|multi-layer
# module_path: Path to the module directory
# tool: gemini|qwen|codex (default: gemini)
# model: Model name (optional, uses tool defaults)
#
# Default Models:
# gemini: gemini-2.5-flash
# qwen: coder-model
# codex: gpt5-codex
#
# Strategies:
# single-layer: Upward aggregation
# - Read: Current directory code + child CLAUDE.md files
# - Generate: Single ./CLAUDE.md in current directory
# - Use: Large projects, incremental bottom-up updates
#
# multi-layer: Downward distribution
# - Read: All files in current and subdirectories
# - Generate: CLAUDE.md for each directory containing files
# - Use: Small projects, full documentation generation
#
# Features:
# - Minimal prompts based on unified template
# - Respects .gitignore patterns
# - Path-focused processing (script only cares about paths)
# - Template-driven generation
# Build exclusion filters from .gitignore
build_exclusion_filters() {
local filters=""
# Common system/cache directories to exclude
local system_excludes=(
".git" "__pycache__" "node_modules" ".venv" "venv" "env"
"dist" "build" ".cache" ".pytest_cache" ".mypy_cache"
"coverage" ".nyc_output" "logs" "tmp" "temp"
)
for exclude in "${system_excludes[@]}"; do
filters+=" -not -path '*/$exclude' -not -path '*/$exclude/*'"
done
# Find and parse .gitignore (current dir first, then git root)
local gitignore_file=""
# Check current directory first
if [ -f ".gitignore" ]; then
gitignore_file=".gitignore"
else
# Try to find git root and check for .gitignore there
local git_root=$(git rev-parse --show-toplevel 2>/dev/null)
if [ -n "$git_root" ] && [ -f "$git_root/.gitignore" ]; then
gitignore_file="$git_root/.gitignore"
fi
fi
# Parse .gitignore if found
if [ -n "$gitignore_file" ]; then
while IFS= read -r line; do
# Skip empty lines and comments
[[ -z "$line" || "$line" =~ ^[[:space:]]*# ]] && continue
# Remove trailing slash and whitespace
line=$(echo "$line" | sed 's|/$||' | xargs)
# Skip wildcards patterns (too complex for simple find)
[[ "$line" =~ \* ]] && continue
# Add to filters
filters+=" -not -path '*/$line' -not -path '*/$line/*'"
done < "$gitignore_file"
fi
echo "$filters"
}
# Scan directory structure and generate structured information
scan_directory_structure() {
local target_path="$1"
local strategy="$2"
if [ ! -d "$target_path" ]; then
echo "Directory not found: $target_path"
return 1
fi
local exclusion_filters=$(build_exclusion_filters)
local structure_info=""
# Get basic directory info
local dir_name=$(basename "$target_path")
local total_files=$(eval "find \"$target_path\" -type f $exclusion_filters 2>/dev/null" | wc -l)
local total_dirs=$(eval "find \"$target_path\" -type d $exclusion_filters 2>/dev/null" | wc -l)
structure_info+="Directory: $dir_name\n"
structure_info+="Total files: $total_files\n"
structure_info+="Total directories: $total_dirs\n\n"
if [ "$strategy" = "multi-layer" ]; then
# For multi-layer: show all subdirectories with file counts
structure_info+="Subdirectories with files:\n"
while IFS= read -r dir; do
if [ -n "$dir" ] && [ "$dir" != "$target_path" ]; then
local rel_path=${dir#$target_path/}
local file_count=$(eval "find \"$dir\" -maxdepth 1 -type f $exclusion_filters 2>/dev/null" | wc -l)
if [ $file_count -gt 0 ]; then
structure_info+=" - $rel_path/ ($file_count files)\n"
fi
fi
done < <(eval "find \"$target_path\" -type d $exclusion_filters 2>/dev/null")
else
# For single-layer: show direct children only
structure_info+="Direct subdirectories:\n"
while IFS= read -r dir; do
if [ -n "$dir" ]; then
local dir_name=$(basename "$dir")
local file_count=$(eval "find \"$dir\" -maxdepth 1 -type f $exclusion_filters 2>/dev/null" | wc -l)
local has_claude=$([ -f "$dir/CLAUDE.md" ] && echo " [has CLAUDE.md]" || echo "")
structure_info+=" - $dir_name/ ($file_count files)$has_claude\n"
fi
done < <(eval "find \"$target_path\" -maxdepth 1 -type d $exclusion_filters 2>/dev/null" | grep -v "^$target_path$")
fi
# Show main file types in current directory
structure_info+="\nCurrent directory files:\n"
local code_files=$(eval "find \"$target_path\" -maxdepth 1 -type f \\( -name '*.ts' -o -name '*.tsx' -o -name '*.js' -o -name '*.jsx' -o -name '*.py' -o -name '*.sh' \\) $exclusion_filters 2>/dev/null" | wc -l)
local config_files=$(eval "find \"$target_path\" -maxdepth 1 -type f \\( -name '*.json' -o -name '*.yaml' -o -name '*.yml' -o -name '*.toml' \\) $exclusion_filters 2>/dev/null" | wc -l)
local doc_files=$(eval "find \"$target_path\" -maxdepth 1 -type f -name '*.md' $exclusion_filters 2>/dev/null" | wc -l)
structure_info+=" - Code files: $code_files\n"
structure_info+=" - Config files: $config_files\n"
structure_info+=" - Documentation: $doc_files\n"
printf "%b" "$structure_info"
}
update_module_claude() {
local strategy="$1"
local module_path="$2"
local tool="${3:-gemini}"
local model="$4"
# Validate parameters
if [ -z "$strategy" ] || [ -z "$module_path" ]; then
echo "❌ Error: Strategy and module path are required"
echo "Usage: update_module_claude.sh <strategy> <module_path> [tool] [model]"
echo "Strategies: single-layer|multi-layer"
return 1
fi
# Validate strategy
if [ "$strategy" != "single-layer" ] && [ "$strategy" != "multi-layer" ]; then
echo "❌ Error: Invalid strategy '$strategy'"
echo "Valid strategies: single-layer, multi-layer"
return 1
fi
if [ ! -d "$module_path" ]; then
echo "❌ Error: Directory '$module_path' does not exist"
return 1
fi
# Set default models if not specified
if [ -z "$model" ]; then
case "$tool" in
gemini)
model="gemini-2.5-flash"
;;
qwen)
model="coder-model"
;;
codex)
model="gpt5-codex"
;;
*)
model=""
;;
esac
fi
# Build exclusion filters from .gitignore
local exclusion_filters=$(build_exclusion_filters)
# Check if directory has files (excluding gitignored paths)
local file_count=$(eval "find \"$module_path\" -maxdepth 1 -type f $exclusion_filters 2>/dev/null" | wc -l)
if [ $file_count -eq 0 ]; then
echo "⚠️ Skipping '$module_path' - no files found (after .gitignore filtering)"
return 0
fi
# Use unified template for all modules
local template_path="$HOME/.claude/workflows/cli-templates/prompts/memory/02-document-module-structure.txt"
# Read template content directly
local template_content=""
if [ -f "$template_path" ]; then
template_content=$(cat "$template_path")
echo " 📋 Loaded template: $(wc -l < "$template_path") lines"
else
echo " ⚠️ Template not found: $template_path"
echo " Using fallback template..."
template_content="Create comprehensive CLAUDE.md documentation following standard structure with Purpose, Structure, Components, Dependencies, Integration, and Implementation sections."
fi
# Scan directory structure first
echo " 🔍 Scanning directory structure..."
local structure_info=$(scan_directory_structure "$module_path" "$strategy")
# Prepare logging info
local module_name=$(basename "$module_path")
echo "⚡ Updating: $module_path"
echo " Strategy: $strategy | Tool: $tool | Model: $model | Files: $file_count"
echo " Template: $(basename "$template_path") ($(echo "$template_content" | wc -l) lines)"
echo " Structure: Scanned $(echo "$structure_info" | wc -l) lines of structure info"
# Build minimal strategy-specific prompt with explicit paths and structure info
local final_prompt=""
if [ "$strategy" = "multi-layer" ]; then
# multi-layer strategy: read all, generate for each directory
final_prompt="Directory Structure Analysis:
$structure_info
Read: @**/*
Generate CLAUDE.md files:
- Primary: ./CLAUDE.md (current directory)
- Additional: CLAUDE.md in each subdirectory containing files
Template Guidelines:
$template_content
Instructions:
- Work bottom-up: deepest directories first
- Parent directories reference children
- Each CLAUDE.md file must be in its respective directory
- Follow the template guidelines above for consistent structure
- Use the structure analysis to understand directory hierarchy"
else
# single-layer strategy: read current + child CLAUDE.md, generate current only
final_prompt="Directory Structure Analysis:
$structure_info
Read: @*/CLAUDE.md @*.ts @*.tsx @*.js @*.jsx @*.py @*.sh @*.md @*.json @*.yaml @*.yml
Generate single file: ./CLAUDE.md
Template Guidelines:
$template_content
Instructions:
- Create exactly one CLAUDE.md file in the current directory
- Reference child CLAUDE.md files, do not duplicate their content
- Follow the template guidelines above for consistent structure
- Use the structure analysis to understand the current directory context"
fi
# Execute update
local start_time=$(date +%s)
echo " 🔄 Starting update..."
if cd "$module_path" 2>/dev/null; then
local tool_result=0
# Execute with selected tool
# NOTE: Model parameter (-m) is placed AFTER the prompt
case "$tool" in
qwen)
if [ "$model" = "coder-model" ]; then
# coder-model is default, -m is optional
qwen -p "$final_prompt" --yolo 2>&1
else
qwen -p "$final_prompt" -m "$model" --yolo 2>&1
fi
tool_result=$?
;;
codex)
codex --full-auto exec "$final_prompt" -m "$model" --skip-git-repo-check -s danger-full-access 2>&1
tool_result=$?
;;
gemini)
gemini -p "$final_prompt" -m "$model" --yolo 2>&1
tool_result=$?
;;
*)
echo " ⚠️ Unknown tool: $tool, defaulting to gemini"
gemini -p "$final_prompt" -m "$model" --yolo 2>&1
tool_result=$?
;;
esac
if [ $tool_result -eq 0 ]; then
local end_time=$(date +%s)
local duration=$((end_time - start_time))
echo " ✅ Completed in ${duration}s"
cd - > /dev/null
return 0
else
echo " ❌ Update failed for $module_path"
cd - > /dev/null
return 1
fi
else
echo " ❌ Cannot access directory: $module_path"
return 1
fi
}
# Execute function if script is run directly
if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
# Show help if no arguments or help requested
if [ $# -eq 0 ] || [ "$1" = "-h" ] || [ "$1" = "--help" ]; then
echo "Usage: update_module_claude.sh <strategy> <module_path> [tool] [model]"
echo ""
echo "Strategies:"
echo " single-layer - Read current dir code + child CLAUDE.md, generate ./CLAUDE.md"
echo " multi-layer - Read all files, generate CLAUDE.md for each directory"
echo ""
echo "Tools: gemini (default), qwen, codex"
echo "Models: Use tool defaults if not specified"
echo ""
echo "Examples:"
echo " ./update_module_claude.sh single-layer ./src/auth"
echo " ./update_module_claude.sh multi-layer ./components gemini gemini-2.5-flash"
exit 0
fi
update_module_claude "$@"
fi

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,122 @@
# Rule Template: API Rules (Backend/Fullstack Only)
## Variables
- {TECH_STACK_NAME}: Tech stack display name
- {FILE_EXT}: File extension pattern
- {API_FRAMEWORK}: API framework (Express, FastAPI, etc)
## Output Format
```markdown
---
paths:
- "**/api/**/*.{FILE_EXT}"
- "**/routes/**/*.{FILE_EXT}"
- "**/endpoints/**/*.{FILE_EXT}"
- "**/controllers/**/*.{FILE_EXT}"
- "**/handlers/**/*.{FILE_EXT}"
---
# {TECH_STACK_NAME} API Rules
## Endpoint Design
[REST/GraphQL conventions from Exa research]
### URL Structure
- Resource naming (plural nouns)
- Nesting depth limits
- Query parameter conventions
- Version prefixing
### HTTP Methods
- GET: Read operations
- POST: Create operations
- PUT/PATCH: Update operations
- DELETE: Remove operations
### Status Codes
- 2xx: Success responses
- 4xx: Client errors
- 5xx: Server errors
## Request Validation
[Input validation patterns]
### Schema Validation
```{lang}
// Example validation schema
```
### Required Fields
- Validation approach
- Error messages format
- Sanitization rules
## Response Format
[Standard response structures]
### Success Response
```json
{
"data": {},
"meta": {}
}
```
### Pagination
```json
{
"data": [],
"pagination": {
"page": 1,
"limit": 20,
"total": 100
}
}
```
## Error Responses
[Error handling for APIs]
### Error Format
```json
{
"error": {
"code": "ERROR_CODE",
"message": "Human readable message",
"details": {}
}
}
```
### Common Error Codes
- VALIDATION_ERROR
- NOT_FOUND
- UNAUTHORIZED
- FORBIDDEN
## Authentication & Authorization
[Auth patterns]
- Token handling
- Permission checks
- Rate limiting
## Documentation
[API documentation standards]
- OpenAPI/Swagger
- Inline documentation
- Example requests/responses
```
## Content Guidelines
- Focus on API-specific patterns
- Include request/response examples
- Cover security considerations
- Reference framework conventions

View File

@@ -0,0 +1,122 @@
# Rule Template: Component Rules (Frontend/Fullstack Only)
## Variables
- {TECH_STACK_NAME}: Tech stack display name
- {FILE_EXT}: File extension pattern
- {UI_FRAMEWORK}: UI framework (React, Vue, etc)
## Output Format
```markdown
---
paths:
- "**/components/**/*.{FILE_EXT}"
- "**/ui/**/*.{FILE_EXT}"
- "**/views/**/*.{FILE_EXT}"
- "**/pages/**/*.{FILE_EXT}"
---
# {TECH_STACK_NAME} Component Rules
## Component Structure
[Organization patterns from Exa research]
### File Organization
```
components/
├── common/ # Shared components
├── features/ # Feature-specific
├── layout/ # Layout components
└── ui/ # Base UI elements
```
### Component Template
```{lang}
// Standard component structure
```
### Naming Conventions
- PascalCase for components
- Descriptive names
- Prefix conventions (if any)
## Props & State
[State management guidelines]
### Props Definition
```{lang}
// Props type/interface example
```
### Props Best Practices
- Required vs optional
- Default values
- Prop validation
- Prop naming
### Local State
- When to use local state
- State initialization
- State updates
### Shared State
- State management approach
- Context usage
- Store patterns
## Styling
[CSS/styling conventions]
### Approach
- [CSS Modules/Styled Components/Tailwind/etc]
### Style Organization
```{lang}
// Style example
```
### Naming Conventions
- Class naming (BEM, etc)
- CSS variable usage
- Theme integration
## Accessibility
[A11y requirements]
### Essential Requirements
- Semantic HTML
- ARIA labels
- Keyboard navigation
- Focus management
### Testing A11y
- Automated checks
- Manual testing
- Screen reader testing
## Performance
[Performance guidelines]
### Optimization Patterns
- Memoization
- Lazy loading
- Code splitting
- Virtual lists
### Avoiding Re-renders
- When to memoize
- Callback optimization
- State structure
```
## Content Guidelines
- Focus on component-specific patterns
- Include framework-specific examples
- Cover accessibility requirements
- Address performance considerations

View File

@@ -0,0 +1,89 @@
# Rule Template: Configuration Rules
## Variables
- {TECH_STACK_NAME}: Tech stack display name
- {CONFIG_FILES}: List of config file patterns
## Output Format
```markdown
---
paths:
- "*.config.*"
- ".*rc"
- ".*rc.{js,json,yaml,yml}"
- "package.json"
- "tsconfig*.json"
- "pyproject.toml"
- "Cargo.toml"
- "go.mod"
- ".env*"
---
# {TECH_STACK_NAME} Configuration Rules
## Project Setup
[Configuration guidelines from Exa research]
### Essential Config Files
- [List primary config files]
- [Purpose of each]
### Recommended Structure
```
project/
├── [config files]
├── src/
└── tests/
```
## Tooling
[Linters, formatters, bundlers]
### Linting
- Tool: [ESLint/Pylint/etc]
- Config file: [.eslintrc/pyproject.toml/etc]
- Key rules to enable
### Formatting
- Tool: [Prettier/Black/etc]
- Integration with editor
- Pre-commit hooks
### Build Tools
- Bundler: [Webpack/Vite/etc]
- Build configuration
- Optimization settings
## Environment
[Environment management]
### Environment Variables
- Naming conventions
- Required vs optional
- Secret handling
- .env file structure
### Development vs Production
- Environment-specific configs
- Feature flags
- Debug settings
## Dependencies
[Dependency management]
- Lock file usage
- Version pinning strategy
- Security updates
- Peer dependencies
```
## Content Guidelines
- Focus on config file best practices
- Include security considerations
- Cover development workflow setup
- Mention CI/CD integration where relevant

View File

@@ -0,0 +1,60 @@
# Rule Template: Core Principles
## Variables
- {TECH_STACK_NAME}: Tech stack display name
- {FILE_EXT}: File extension pattern
## Output Format
```markdown
---
paths: **/*.{FILE_EXT}
---
# {TECH_STACK_NAME} Core Principles
## Philosophy
[Synthesize core philosophy from Exa research]
- Key paradigms and mental models
- Design philosophy
- Community conventions
## Naming Conventions
[Language-specific naming rules]
- Variables and functions
- Classes and types
- Files and directories
- Constants and enums
## Code Organization
[Structure and module guidelines]
- File structure patterns
- Module boundaries
- Import organization
- Dependency management
## Type Safety
[Type system best practices - if applicable]
- Type annotation guidelines
- Generic usage patterns
- Type inference vs explicit types
- Null/undefined handling
## Documentation
[Documentation standards]
- Comment style
- JSDoc/docstring format
- README conventions
```
## Content Guidelines
- Focus on universal principles that apply to ALL files
- Keep rules actionable and specific
- Include rationale for each rule
- Reference official style guides where applicable

View File

@@ -0,0 +1,70 @@
# Rule Template: Implementation Patterns
## Variables
- {TECH_STACK_NAME}: Tech stack display name
- {FILE_EXT}: File extension pattern
## Output Format
```markdown
---
paths: src/**/*.{FILE_EXT}
---
# {TECH_STACK_NAME} Implementation Patterns
## Common Patterns
[With code examples from Exa research]
### Pattern 1: [Name]
```{lang}
// Example code
```
**When to use**: [Context]
**Benefits**: [Why this pattern]
### Pattern 2: [Name]
...
## Anti-Patterns to Avoid
[Common mistakes with examples]
### Anti-Pattern 1: [Name]
```{lang}
// Bad example
```
**Problem**: [Why it's bad]
**Solution**: [Better approach]
## Error Handling
[Error handling conventions]
- Error types and hierarchy
- Try-catch patterns
- Error propagation
- Logging practices
## Async Patterns
[Asynchronous code conventions - if applicable]
- Promise handling
- Async/await usage
- Concurrency patterns
- Error handling in async code
## State Management
[State handling patterns]
- Local state patterns
- Shared state approaches
- Immutability practices
```
## Content Guidelines
- Focus on source code implementation
- Provide concrete code examples
- Show both good and bad patterns
- Include context for when to apply each pattern

View File

@@ -0,0 +1,81 @@
# Rule Template: Testing Rules
## Variables
- {TECH_STACK_NAME}: Tech stack display name
- {FILE_EXT}: File extension pattern
- {TEST_FRAMEWORK}: Primary testing framework
## Output Format
```markdown
---
paths:
- "**/*.{test,spec}.{FILE_EXT}"
- "tests/**/*.{FILE_EXT}"
- "__tests__/**/*.{FILE_EXT}"
- "**/test_*.{FILE_EXT}"
- "**/*_test.{FILE_EXT}"
---
# {TECH_STACK_NAME} Testing Rules
## Testing Framework
[Recommended frameworks from Exa research]
- Primary: {TEST_FRAMEWORK}
- Assertion library
- Mocking library
- Coverage tool
## Test Structure
[Organization patterns]
### File Naming
- Unit tests: `*.test.{ext}` or `*.spec.{ext}`
- Integration tests: `*.integration.test.{ext}`
- E2E tests: `*.e2e.test.{ext}`
### Test Organization
```{lang}
describe('[Component/Module]', () => {
describe('[method/feature]', () => {
it('should [expected behavior]', () => {
// Arrange
// Act
// Assert
});
});
});
```
## Mocking & Fixtures
[Best practices]
- Mock creation patterns
- Fixture organization
- Test data factories
- Cleanup strategies
## Assertions
[Assertion patterns]
- Common assertions
- Custom matchers
- Async assertions
- Error assertions
## Coverage Requirements
[Coverage guidelines]
- Minimum coverage thresholds
- What to cover vs skip
- Coverage report interpretation
```
## Content Guidelines
- Include framework-specific patterns
- Show test structure examples
- Cover both unit and integration testing
- Include async testing patterns

View File

@@ -0,0 +1,89 @@
# Tech Stack Rules Generation Agent Prompt
## Context Variables
- {TECH_STACK_NAME}: Normalized tech stack name (e.g., "typescript-react")
- {PRIMARY_LANG}: Primary language (e.g., "typescript")
- {FILE_EXT}: File extension pattern (e.g., "{ts,tsx}")
- {FRAMEWORK_TYPE}: frontend | backend | fullstack | library
- {COMPONENTS}: Array of tech components
- {OUTPUT_DIR}: .claude/rules/tech/{TECH_STACK_NAME}/
## Agent Instructions
Generate path-conditional rules for Claude Code automatic loading.
### Step 1: Execute Exa Research
Run 4-6 parallel queries based on tech stack:
**Base Queries** (always execute):
```
mcp__exa__get_code_context_exa(query: "{PRIMARY_LANG} best practices principles 2025", tokensNum: 8000)
mcp__exa__get_code_context_exa(query: "{PRIMARY_LANG} implementation patterns examples", tokensNum: 7000)
mcp__exa__get_code_context_exa(query: "{PRIMARY_LANG} testing strategies conventions", tokensNum: 5000)
mcp__exa__web_search_exa(query: "{PRIMARY_LANG} configuration setup 2025", numResults: 5)
```
**Component Queries** (for each framework in COMPONENTS):
```
mcp__exa__get_code_context_exa(query: "{PRIMARY_LANG} {component} integration patterns", tokensNum: 5000)
```
### Step 2: Read Rule Templates
Read each template file before generating content:
```
Read(~/.claude/workflows/cli-templates/prompts/rules/rule-core.txt)
Read(~/.claude/workflows/cli-templates/prompts/rules/rule-patterns.txt)
Read(~/.claude/workflows/cli-templates/prompts/rules/rule-testing.txt)
Read(~/.claude/workflows/cli-templates/prompts/rules/rule-config.txt)
Read(~/.claude/workflows/cli-templates/prompts/rules/rule-api.txt) # Only if backend/fullstack
Read(~/.claude/workflows/cli-templates/prompts/rules/rule-components.txt) # Only if frontend/fullstack
```
### Step 3: Generate Rule Files
Create directory and write files:
```bash
mkdir -p "{OUTPUT_DIR}"
```
**Always Generate**:
- core.md (from rule-core.txt template)
- patterns.md (from rule-patterns.txt template)
- testing.md (from rule-testing.txt template)
- config.md (from rule-config.txt template)
**Conditional**:
- api.md: Only if FRAMEWORK_TYPE == 'backend' or 'fullstack'
- components.md: Only if FRAMEWORK_TYPE == 'frontend' or 'fullstack'
### Step 4: Write Metadata
```json
{
"tech_stack": "{TECH_STACK_NAME}",
"primary_lang": "{PRIMARY_LANG}",
"file_ext": "{FILE_EXT}",
"framework_type": "{FRAMEWORK_TYPE}",
"components": ["{COMPONENTS}"],
"generated_at": "{ISO_TIMESTAMP}",
"source": "exa-research",
"files_generated": ["core.md", "patterns.md", "testing.md", "config.md", ...]
}
```
### Step 5: Report Completion
Provide summary:
- Files created with their path patterns
- Exa queries executed (count)
- Sources consulted (count)
## Critical Requirements
1. Every .md file MUST start with `paths` YAML frontmatter
2. Use {FILE_EXT} consistently across all rule files
3. Synthesize Exa research into actionable rules
4. Include code examples from Exa sources
5. Keep each file focused on its specific domain

View File

@@ -21,26 +21,11 @@ type: search-guideline
**grep**: Built-in pattern matching (fallback when rg unavailable)
**get_modules_by_depth.sh**: Program architecture analysis (MANDATORY before planning)
## 📋 Tool Selection Matrix
| Need | Tool | Use Case |
|------|------|----------|
| **Workflow history** | Skill(workflow-progress) | WFS sessions lessons/conflicts - `/memory:workflow-skill-memory` |
| **Tech stack docs** | Skill({tech-name}) | Stack APIs/guides - `/memory:tech-research` |
| **Project docs** | Skill({project-name}) | Project modules/architecture - `/memory:skill-memory` |
| **Semantic discovery** | codebase-retrieval | Find files relevant to task/feature context |
| **Pattern matching** | rg | Search code content with regex |
| **File name lookup** | find | Locate files by name patterns |
| **Architecture** | get_modules_by_depth.sh | Understand program structure |
## 🔧 Quick Command Reference
```bash
# SKILL Packages (FIRST PRIORITY - fastest context loading)
Skill(command: "workflow-progress") # Workflow: WFS sessions history, lessons, conflicts
Skill(command: "react-dev") # Tech: React APIs, patterns, best practices
Skill(command: "claude_dms3") # Project: Project modules, architecture, examples
# Semantic File Discovery (codebase-retrieval)
cd [directory] && gemini -p "
PURPOSE: Discover files relevant to task/feature

View File

@@ -1,6 +1,6 @@
# Intelligent Tools Selection Strategy
## 📋 Table of Contents
## Table of Contents
1. [Quick Start](#-quick-start)
2. [Tool Specifications](#-tool-specifications)
3. [Command Templates](#-command-templates)
@@ -9,7 +9,7 @@
---
## Quick Start
## Quick Start
### Universal Prompt Template
@@ -29,85 +29,76 @@ RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/pattern.txt) | [
- **Analysis/Documentation** → Gemini (preferred) or Qwen (fallback)
- **Implementation/Testing** → Codex
### Quick Command Syntax
### CCW Unified CLI Syntax
```bash
# Gemini/Qwen
cd [dir] && gemini -p "[prompt]" [--approval-mode yolo]
# Basic execution
ccw cli exec "<prompt>" --tool <gemini|qwen|codex> --mode <analysis|write|auto>
# Codex
codex -C [dir] --full-auto exec "[prompt]" [--skip-git-repo-check -s danger-full-access]
# With working directory
ccw cli exec "<prompt>" --tool gemini --cd <path>
# With additional directories
ccw cli exec "<prompt>" --tool gemini --includeDirs ../shared,../types
# Full example
ccw cli exec "<prompt>" --tool codex --mode auto --cd ./project --includeDirs ./lib
```
### CLI Subcommands
| Command | Description |
|---------|-------------|
| `ccw cli status` | Check CLI tools availability |
| `ccw cli exec "<prompt>"` | Execute a CLI tool |
| `ccw cli history` | Show execution history |
| `ccw cli detail <id>` | Show execution detail |
### Model Selection
**Available Models** (user selects via `-m` after prompt):
**Available Models** (override via `--model`):
- Gemini: `gemini-2.5-pro`, `gemini-2.5-flash`
- Qwen: `coder-model`, `vision-model`
- Codex: `gpt-5.1`, `gpt-5.1-codex`, `gpt-5.1-codex-mini`
**Usage**: `-m <model>` placed AFTER `-p "prompt"` (e.g., `gemini -p "..." -m gemini-2.5-flash`)
### Quick Decision Matrix
| Scenario | Tool | MODE | Template |
|----------|------|------|----------|
| Execution Tracing | Gemini → Qwen | analysis | `analysis/01-trace-code-execution.txt` |
| Bug Diagnosis | Gemini → Qwen | analysis | `analysis/01-diagnose-bug-root-cause.txt` |
| Architecture Planning | Gemini → Qwen | analysis | `planning/01-plan-architecture-design.txt` |
| Code Pattern Analysis | Gemini → Qwen | analysis | `analysis/02-analyze-code-patterns.txt` |
| Architecture Review | Gemini → Qwen | analysis | `analysis/02-review-architecture.txt` |
| Document Analysis | Gemini → Qwen | analysis | `analysis/02-analyze-technical-document.txt` |
| Feature Implementation | Codex | auto | `development/02-implement-feature.txt` |
| Component Development | Codex | auto | `development/02-implement-component-ui.txt` |
| Test Generation | Codex | write | `development/02-generate-tests.txt` |
**Best Practice**: Omit `--model` for optimal auto-selection
### Core Principles
- **Use tools early and often** - Tools are faster and more thorough
- **When in doubt, use both** - Parallel usage provides comprehensive coverage
- **Default to tools** - Use for most coding tasks, no matter how small
- **Minimize context noise** - Use `cd` + `--include-directories` to focus on relevant files
- **⚠️ Choose templates by need** - Select templates based on task requirements:
- `00-*` for universal fallback when no specific template matches
- `01-*` for general exploratory/diagnostic work
- `02-*` for common implementation/analysis tasks
- `03-*` for specialized domains
- **⚠️ Always specify templates** - Include appropriate template in RULES field via `$(cat ~/.claude/workflows/cli-templates/prompts/.../...txt)`
- **⚠️ Universal templates as fallback** - Use universal templates when no specific template matches your needs:
- `universal/00-universal-rigorous-style.txt` for precision-critical tasks
- `universal/00-universal-creative-style.txt` for exploratory/innovative tasks
- **⚠️ Write protection** - Require EXPLICIT MODE=write or MODE=auto specification
- **Unified CLI** - Always use `ccw cli exec` for consistent parameter handling
- **Choose templates by need** - See [Template System](#template-system) for naming conventions and selection guide
- **Write protection** - Require EXPLICIT MODE=write or MODE=auto specification
---
## 🎯 Tool Specifications
## Tool Specifications
### MODE Options
**analysis** (default for Gemini/Qwen)
**analysis** (default)
- Read-only operations, no file modifications
- Analysis output returned as text response
- Use for: code review, architecture analysis, pattern discovery
- Permission: Default, no special parameters needed
- CCW: `ccw cli exec "<prompt>" --mode analysis`
**write** (Gemini/Qwen/Codex)
**write**
- File creation/modification/deletion allowed
- Requires explicit MODE=write specification
- Requires explicit `--mode write` specification
- Use for: documentation generation, code creation, file modifications
- Permission:
- Gemini/Qwen: `--approval-mode yolo`
- Codex: `--skip-git-repo-check -s danger-full-access`
- CCW: `ccw cli exec "<prompt>" --mode write`
**auto** (Codex only)
- Full autonomous development operations
- Requires explicit MODE=auto specification
- Requires explicit `--mode auto` specification
- Use for: feature implementation, bug fixes, autonomous development
- Permission: `--skip-git-repo-check -s danger-full-access`
- CCW: `ccw cli exec "<prompt>" --tool codex --mode auto`
### Gemini & Qwen
**Commands**: `gemini` (primary) | `qwen` (fallback)
**Via CCW**: `ccw cli exec "<prompt>" --tool gemini` or `--tool qwen`
**Strengths**: Large context window, pattern recognition
@@ -122,7 +113,7 @@ codex -C [dir] --full-auto exec "[prompt]" [--skip-git-repo-check -s danger-full
### Codex
**Command**: `codex --full-auto exec`
**Via CCW**: `ccw cli exec "<prompt>" --tool codex --mode auto`
**Strengths**: Autonomous development, mathematical reasoning
@@ -130,26 +121,26 @@ codex -C [dir] --full-auto exec "[prompt]" [--skip-git-repo-check -s danger-full
**Default MODE**: No default, must be explicitly specified
**Session Management**:
**Session Management** (via native codex):
- `codex resume` - Resume previous session (picker)
- `codex resume --last` - Resume most recent session
- `codex -i <image_file>` - Attach image to prompt
**Multi-task Pattern**:
- **First task**: MUST use full Standard Prompt Template with `exec` to establish complete context
- **Subsequent tasks**: Can use brief prompt with `exec "..." resume --last` (inherits context from session)
### CCW Unified Parameter Mapping
**Prompt Requirements**:
- **Without `resume --last`**: ALWAYS use full Standard Prompt Template
- **With `resume --last`**: Brief description sufficient (previous template context inherited)
CCW automatically maps parameters to tool-specific syntax:
**Auto-Resume Rules**:
- **Use `resume --last`**: Related tasks, extending previous work, multi-step workflow
- **Don't use**: First task, new independent work, different module
| CCW Parameter | Gemini/Qwen | Codex |
|---------------|-------------|-------|
| `--cd <path>` | `cd <path> &&` (prepend) | `-C <path>` |
| `--includeDirs <dirs>` | `--include-directories <dirs>` | `--add-dir <dir>` (per dir) |
| `--mode write` | `--approval-mode yolo` | `--skip-git-repo-check -s danger-full-access` |
| `--mode auto` | N/A | `--skip-git-repo-check -s danger-full-access` |
| `--model <m>` | `-m <m>` | `-m <m>` |
---
## 🎯 Command Templates
## Command Templates
### Universal Template Structure
@@ -177,7 +168,7 @@ Every command MUST follow this structure:
- **File Patterns**: Use @ syntax for file references (default: `@**/*` for all files)
- `@**/*` - All files in current directory tree
- `@src/**/*.ts` - TypeScript files in src directory
- `@../shared/**/*` - Files from sibling directory (requires `--include-directories`)
- `@../shared/**/*` - Files from sibling directory (requires `--includeDirs`)
- **Memory Context**: Reference previous session findings and context
- Related tasks: `Building on previous analysis from [session/commit]`
- Tech stack: `Using patterns from [tech-stack-name] documentation`
@@ -215,157 +206,132 @@ EXPECTED: [deliverable format, quality criteria, output structure, testing requi
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/[category]/[0X-template-name].txt) | [additional constraints] | [MODE]=[READ-ONLY|CREATE/MODIFY/DELETE|FULL operations]
```
**Template Selection Guide**:
- Choose template based on your specific task, not by sequence number
- `01-*` templates: General-purpose, broad applicability
- `02-*` templates: Common specialized scenarios
- `03-*` templates: Domain-specific needs
### CCW CLI Execution
### Tool-Specific Configuration
Use the **[Standard Prompt Template](#standard-prompt-template)** for all tools. CCW provides unified command syntax.
Use the **[Standard Prompt Template](#standard-prompt-template)** for all tools. This section only covers tool-specific command syntax.
#### Basic Command Format
#### Gemini & Qwen
**Command Format**: `cd [directory] && [tool] -p "[Standard Prompt Template]" [options]`
**Syntax Elements**:
- **Directory**: `cd [directory] &&` (navigate to target directory)
- **Tool**: `gemini` (primary) | `qwen` (fallback)
- **Prompt**: `-p "[Standard Prompt Template]"` (prompt BEFORE options)
- **Model**: `-m [model-name]` (optional, NOT recommended - tools auto-select best model)
- Gemini: `gemini-2.5-pro` (default) | `gemini-2.5-flash`
- Qwen: `coder-model` (default) | `vision-model`
- **Best practice**: Omit `-m` parameter for optimal model selection
- **Position**: If used, place AFTER `-p "prompt"`
- **Write Permission**: `--approval-mode yolo` (ONLY for MODE=write, placed AFTER prompt)
**Command Examples**:
```bash
# Analysis Mode (default, read-only)
cd [directory] && gemini -p "[Standard Prompt Template]"
# Write Mode (requires MODE=write in template + --approval-mode yolo)
cd [directory] && gemini -p "[Standard Prompt Template with MODE: write]" --approval-mode yolo
# Fallback to Qwen
cd [directory] && qwen -p "[Standard Prompt Template]"
# Multi-directory support
cd [directory] && gemini -p "[Standard Prompt Template]" --include-directories ../shared,../types
ccw cli exec "<Standard Prompt Template>" [options]
```
#### Codex
#### Common Options
**Command Format**: `codex -C [directory] --full-auto exec "[Standard Prompt Template]" [options]`
| Option | Description | Default |
|--------|-------------|---------|
| `--tool <tool>` | CLI tool: gemini, qwen, codex | gemini |
| `--mode <mode>` | Mode: analysis, write, auto | analysis |
| `--model <model>` | Model override | auto-select |
| `--cd <path>` | Working directory | current dir |
| `--includeDirs <dirs>` | Additional directories (comma-separated) | none |
| `--timeout <ms>` | Timeout in milliseconds | 300000 |
| `--no-stream` | Disable streaming output | false |
**Syntax Elements**:
- **Directory**: `-C [directory]` (target directory parameter)
- **Execution Mode**: `--full-auto exec` (required for autonomous execution)
- **Prompt**: `exec "[Standard Prompt Template]"` (prompt BEFORE options)
- **Model**: `-m [model-name]` (optional, NOT recommended - Codex auto-selects best model)
- Available: `gpt-5.1` | `gpt-5.1-codex` | `gpt-5.1-codex-mini`
- **Best practice**: Omit `-m` parameter for optimal model selection
- **Write Permission**: `--skip-git-repo-check -s danger-full-access`
- **⚠️ CRITICAL**: MUST be placed at **command END** (AFTER prompt and all other parameters)
- **ONLY use for**: MODE=auto or MODE=write
- **NEVER place before prompt** - command will fail
- **Session Resume**: `resume --last` (placed AFTER prompt, BEFORE permission flags)
#### Command Examples
**Command Examples**:
```bash
# Auto Mode (requires MODE=auto in template + permission flags)
codex -C [directory] --full-auto exec "[Standard Prompt Template with MODE: auto]" --skip-git-repo-check -s danger-full-access
# Analysis Mode (default, read-only) - Gemini
ccw cli exec "
PURPOSE: Analyze authentication with shared utilities context
TASK: Review auth implementation and its dependencies
MODE: analysis
CONTEXT: @**/* @../shared/**/*
EXPECTED: Complete analysis with cross-directory dependencies
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-patterns.txt) | analysis=READ-ONLY
" --tool gemini --cd src/auth --includeDirs ../shared,../types
# Write Mode (requires MODE=write in template + permission flags)
codex -C [directory] --full-auto exec "[Standard Prompt Template with MODE: write]" --skip-git-repo-check -s danger-full-access
# Write Mode - Gemini with file modifications
ccw cli exec "
PURPOSE: Generate documentation for API module
TASK: • Create API docs • Add usage examples • Update README
MODE: write
CONTEXT: @src/api/**/*
EXPECTED: Complete API documentation
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/development/02-implement-feature.txt) | write=CREATE/MODIFY/DELETE
" --tool gemini --mode write --cd src
# Session continuity
# First task - MUST use full Standard Prompt Template to establish context
codex -C project --full-auto exec "[Standard Prompt Template with MODE: auto]" --skip-git-repo-check -s danger-full-access
# Subsequent tasks - Can use brief prompt ONLY when using 'resume --last'
# (inherits full context from previous session, no need to repeat template)
codex --full-auto exec "Add JWT refresh token validation" resume --last --skip-git-repo-check -s danger-full-access
# With image attachment
codex -C [directory] -i design.png --full-auto exec "[Standard Prompt Template]" --skip-git-repo-check -s danger-full-access
```
**Complete Example (Codex with full template)**:
```bash
# First task - establish session with full template
codex -C project --full-auto exec "
# Auto Mode - Codex for implementation
ccw cli exec "
PURPOSE: Implement authentication module
TASK: • Create auth service • Add user validation • Setup JWT tokens
MODE: auto
CONTEXT: @**/* | Memory: Following security patterns from project standards
EXPECTED: Complete auth module with tests
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/development/02-implement-feature.txt) | Follow existing patterns | auto=FULL operations
" --skip-git-repo-check -s danger-full-access
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/development/02-implement-feature.txt) | auto=FULL operations
" --tool codex --mode auto --cd project
# Subsequent tasks - brief description with resume
codex --full-auto exec "Add JWT refresh token validation" resume --last --skip-git-repo-check -s danger-full-access
# Fallback to Qwen
ccw cli exec "
PURPOSE: Analyze code patterns
TASK: Review implementation patterns
MODE: analysis
CONTEXT: @**/*
EXPECTED: Pattern analysis report
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-patterns.txt) | analysis=READ-ONLY
" --tool qwen
```
#### Tool Fallback Strategy
```bash
# Primary: Gemini
ccw cli exec "<prompt>" --tool gemini
# Fallback: Qwen (if Gemini fails or unavailable)
ccw cli exec "<prompt>" --tool qwen
# Check tool availability
ccw cli status
```
### Directory Context Configuration
**Tool Directory Navigation**:
- **Gemini & Qwen**: `cd path/to/project && gemini -p "prompt"`
- **Codex**: `codex -C path/to/project --full-auto exec "task"`
- **Path types**: Supports both relative (`../project`) and absolute (`/full/path`)
**CCW Directory Options**:
- `--cd <path>`: Set working directory for execution
- `--includeDirs <dir1,dir2>`: Include additional directories
#### Critical Directory Scope Rules
**Once `cd` to a directory**:
- @ references ONLY apply to current directory and subdirectories
- `@**/*` = All files within current directory tree
- `@*.ts` = TypeScript files in current directory tree
**When using `--cd` to set working directory**:
- @ references ONLY apply to that directory and subdirectories
- `@**/*` = All files within working directory tree
- `@*.ts` = TypeScript files in working directory tree
- `@src/**/*` = Files within src subdirectory
- CANNOT reference parent/sibling directories via @ alone
**To reference files outside current directory (TWO-STEP REQUIREMENT)**:
1. Add `--include-directories` parameter to make external directories ACCESSIBLE
**To reference files outside working directory (TWO-STEP REQUIREMENT)**:
1. Add `--includeDirs` parameter to make external directories ACCESSIBLE
2. Explicitly reference external files in CONTEXT field with @ patterns
3. ⚠️ BOTH steps are MANDATORY
3. Both steps are MANDATORY
Example: `cd src/auth && gemini -p "CONTEXT: @**/* @../shared/**/*" --include-directories ../shared`
**Rule**: If CONTEXT contains `@../dir/**/*`, command MUST include `--include-directories ../dir`
#### Multi-Directory Support (Gemini & Qwen)
**Parameter**: `--include-directories <dir1,dir2,...>`
- Includes additional directories beyond current `cd` directory
- Can be specified multiple times or comma-separated
- Maximum 5 directories
- REQUIRED when working in subdirectory but needing parent/sibling context
**Syntax**:
Example:
```bash
# Comma-separated format
gemini -p "prompt" --include-directories /path/to/project1,/path/to/project2
ccw cli exec "CONTEXT: @**/* @../shared/**/*" --tool gemini --cd src/auth --includeDirs ../shared
```
# Multiple flags format
gemini -p "prompt" --include-directories /path/to/project1 --include-directories /path/to/project2
**Rule**: If CONTEXT contains `@../dir/**/*`, command MUST include `--includeDirs ../dir`
# Recommended: cd + --include-directories
cd src/auth && gemini -p "
#### Multi-Directory Examples
```bash
# Single additional directory
ccw cli exec "<prompt>" --tool gemini --cd src/auth --includeDirs ../shared
# Multiple additional directories
ccw cli exec "<prompt>" --tool gemini --cd src/auth --includeDirs ../shared,../types,../utils
# With full prompt template
ccw cli exec "
PURPOSE: Analyze authentication with shared utilities context
TASK: Review auth implementation and its dependencies
MODE: analysis
CONTEXT: @**/* @../shared/**/* @../types/**/*
EXPECTED: Complete analysis with cross-directory dependencies
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-patterns.txt) | Focus on integration patterns | analysis=READ-ONLY
" --include-directories ../shared,../types
" --tool gemini --cd src/auth --includeDirs ../shared,../types
```
**Best Practices**:
- Use `cd` to navigate to primary focus directory
- Use `--include-directories` for additional context
- ⚠️ CONTEXT must explicitly list external files AND command must include `--include-directories`
- Pattern matching rule: `@../dir/**/*` in CONTEXT → `--include-directories ../dir` in command (MANDATORY)
### CONTEXT Field Configuration
CONTEXT field consists of: **File Patterns** + **Memory Context**
@@ -434,7 +400,7 @@ mcp__code-index__search_code_advanced(pattern="interface.*Props", file_pattern="
CONTEXT: @src/components/Auth.tsx @src/types/auth.d.ts @src/hooks/useAuth.ts | Memory: Previous refactoring identified type inconsistencies, following React hooks patterns
# Step 3: Execute CLI with precise references
cd src && gemini -p "
ccw cli exec "
PURPOSE: Analyze authentication components for type safety improvements
TASK:
• Review auth component patterns and props interfaces
@@ -444,14 +410,14 @@ MODE: analysis
CONTEXT: @components/Auth.tsx @types/auth.d.ts @hooks/useAuth.ts | Memory: Previous refactoring identified type inconsistencies, following React hooks patterns, related implementation in @hooks/useAuth.ts (commit abc123)
EXPECTED: Comprehensive analysis report with type safety recommendations, code examples, and references to previous findings
RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-patterns.txt) | Focus on type safety and component composition | analysis=READ-ONLY
"
" --tool gemini --cd src
```
### RULES Field Configuration
**Basic Format**: `RULES: $(cat ~/.claude/workflows/cli-templates/prompts/[category]/[template].txt) | [constraints]`
**⚠️ Command Substitution Rules**:
**Command Substitution Rules**:
- **Template reference only, never read**: Use `$(cat ...)` directly, do NOT read template content first
- **NEVER use escape characters**: `\$`, `\"`, `\'` will break command substitution
- **In prompt context**: Path needs NO quotes (tilde expands correctly)
@@ -460,16 +426,13 @@ RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-
- **Why**: Shell executes `$(...)` in subshell where path is safe
**Examples**:
- Universal rigorous: `$(cat ~/.claude/workflows/cli-templates/prompts/universal/00-universal-rigorous-style.txt) | Critical production refactoring`
- Universal creative: `$(cat ~/.claude/workflows/cli-templates/prompts/universal/00-universal-creative-style.txt) | Explore alternative architecture approaches`
- General template: `$(cat ~/.claude/workflows/cli-templates/prompts/analysis/01-diagnose-bug-root-cause.txt) | Focus on authentication module`
- Specialized template: `$(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-patterns.txt) | React hooks only`
- Multiple: `$(cat template1.txt) $(cat template2.txt) | Enterprise standards`
- No template: `Focus on security patterns, include dependency analysis`
### Template System
**Base**: `~/.claude/workflows/cli-templates/`
**Base**: `~/.claude/workflows/cli-templates/
**Naming Convention**:
- `00-*` - **Universal fallback templates** (use when no specific template matches)
@@ -479,65 +442,21 @@ RULES: $(cat ~/.claude/workflows/cli-templates/prompts/analysis/02-analyze-code-
**Note**: Number prefix indicates category and frequency, not required usage order. Choose based on task needs.
**Universal Templates (Fallback)**:
**Universal Templates**:
When no specific template matches your task requirements, use one of these universal templates based on the desired execution style:
1. **Rigorous Style** (`universal/00-universal-rigorous-style.txt`)
- **Use for**: Precision-critical tasks requiring systematic methodology
- **Characteristics**:
- Strict adherence to standards and specifications
- Comprehensive validation and edge case handling
- Defensive programming and error prevention
- Full documentation and traceability
- **Best for**: Production code, critical systems, refactoring, compliance tasks
- **Thinking mode**: Systematic, methodical, standards-driven
2. **Creative Style** (`universal/00-universal-creative-style.txt`)
- **Use for**: Exploratory tasks requiring innovative solutions
- **Characteristics**:
- Multi-perspective problem exploration
- Pattern synthesis from different domains
- Alternative approach generation
- Elegant simplicity pursuit
- **Best for**: New feature design, architecture exploration, optimization, problem-solving
- **Thinking mode**: Exploratory, synthesis-driven, innovation-focused
**Selection Guide**:
- **Rigorous**: When correctness, reliability, and compliance are paramount
- **Creative**: When innovation, flexibility, and elegant solutions are needed
- **Specific template**: When task matches predefined category (analysis, development, planning, etc.)
**Available Templates**:
```
prompts/
├── universal/ # ← Universal fallback templates
│ ├── 00-universal-rigorous-style.txt # Precision & standards-driven
│ └── 00-universal-creative-style.txt # Innovation & exploration-focused
├── analysis/
│ ├── 01-trace-code-execution.txt
│ ├── 01-diagnose-bug-root-cause.txt
│ ├── 02-analyze-code-patterns.txt
│ ├── 02-analyze-technical-document.txt
│ ├── 02-review-architecture.txt
│ ├── 02-review-code-quality.txt
│ ├── 03-analyze-performance.txt
│ ├── 03-assess-security-risks.txt
│ └── 03-review-quality-standards.txt
├── development/
│ ├── 02-implement-feature.txt
│ ├── 02-refactor-codebase.txt
│ ├── 02-generate-tests.txt
│ ├── 02-implement-component-ui.txt
│ └── 03-debug-runtime-issues.txt
└── planning/
├── 01-plan-architecture-design.txt
├── 02-breakdown-task-steps.txt
├── 02-design-component-spec.txt
├── 03-evaluate-concept-feasibility.txt
└── 03-plan-migration-strategy.txt
```
**Task-Template Matrix**:
| Task Type | Tool | Template |
@@ -567,10 +486,9 @@ prompts/
| Test Generation | Codex | `development/02-generate-tests.txt` |
| Component Implementation | Codex | `development/02-implement-component-ui.txt` |
| Debugging | Codex | `development/03-debug-runtime-issues.txt` |
---
## ⚙️ Execution Configuration
## Execution Configuration
### Dynamic Timeout Allocation
@@ -584,31 +502,45 @@ prompts/
**Codex Multiplier**: 3x of allocated time (minimum 15min / 900000ms)
**Application**: All bash() wrapped commands including Gemini, Qwen and Codex executions
**CCW Timeout Usage**:
```bash
ccw cli exec "<prompt>" --tool gemini --timeout 600000 # 10 minutes
ccw cli exec "<prompt>" --tool codex --timeout 1800000 # 30 minutes
```
**Auto-detection**: Analyze PURPOSE and TASK fields to determine timeout
### Permission Framework
**⚠️ Single-Use Explicit Authorization**: Each CLI execution requires explicit user command instruction - one command authorizes ONE execution only. Analysis does NOT authorize write operations. Previous authorization does NOT carry over. Each operation needs NEW explicit user directive.
**Single-Use Explicit Authorization**: Each CLI execution requires explicit user command instruction - one command authorizes ONE execution only. Analysis does NOT authorize write operations. Previous authorization does NOT carry over. Each operation needs NEW explicit user directive.
**Mode Hierarchy**:
- **analysis** (default): Read-only, safe for auto-execution
- **write**: Requires explicit MODE=write specification
- **auto**: Requires explicit MODE=auto specification
- **write**: Requires explicit `--mode write` specification
- **auto**: Requires explicit `--mode auto` specification
- **Exception**: User provides clear instructions like "modify", "create", "implement"
**Tool-Specific Permissions**:
- **Gemini/Qwen**: Use `--approval-mode yolo` ONLY when MODE=write (placed AFTER prompt)
- **Codex**: Use `--skip-git-repo-check -s danger-full-access` ONLY when MODE=auto or MODE=write (placed at command END)
- **Default**: All tools default to analysis/read-only mode
**CCW Mode Permissions**:
```bash
# Analysis (default, no special permissions)
ccw cli exec "<prompt>" --tool gemini
# Write mode (enables file modifications)
ccw cli exec "<prompt>" --tool gemini --mode write
# Auto mode (full autonomous operations, Codex only)
ccw cli exec "<prompt>" --tool codex --mode auto
```
**Default**: All tools default to analysis/read-only mode
---
## 🔧 Best Practices
## Best Practices
### Workflow Principles
- **Use CCW unified interface** - `ccw cli exec` for all tool executions
- **Start with templates** - Use predefined templates for consistency
- **Be specific** - Clear PURPOSE, TASK, and EXPECTED fields with detailed descriptions
- **Include constraints** - File patterns, scope, requirements in RULES
@@ -623,18 +555,18 @@ prompts/
- Memory: Previous sessions, tech stack patterns, cross-references
- **Document context** - Always reference CLAUDE.md and relevant documentation
- **Default to full context** - Use `@**/*` unless specific files needed
- **⚠️ No escape characters** - NEVER use `\$`, `\"`, `\'` in CLI commands
- **No escape characters** - NEVER use `\$`, `\"`, `\'` in CLI commands
### Context Optimization Strategy
**Directory Navigation**: Use `cd [directory] &&` pattern to reduce irrelevant context
**Directory Navigation**: Use `--cd [directory]` to focus on specific directory
**When to change directory**:
- Specific directory mentioned → Use `cd directory &&`
**When to set working directory**:
- Specific directory mentioned → Use `--cd directory`
- Focused analysis needed → Target specific directory
- Multi-directory scope → Use `cd` + `--include-directories`
- Multi-directory scope → Use `--cd` + `--includeDirs`
**When to use `--include-directories`**:
**When to use `--includeDirs`**:
- Working in subdirectory but need parent/sibling context
- Cross-directory dependency analysis required
- Multiple related modules need simultaneous access
@@ -642,21 +574,22 @@ prompts/
### Workflow Integration
When planning any coding task, **ALWAYS** integrate CLI tools:
When planning any coding task, **ALWAYS** integrate CLI tools via CCW:
1. **Understanding Phase**: Use Gemini for analysis (Qwen as fallback)
2. **Architecture Phase**: Use Gemini for design and analysis (Qwen as fallback)
3. **Implementation Phase**: Use Codex for development
4. **Quality Phase**: Use Codex for testing and validation
1. **Understanding Phase**: `ccw cli exec "<prompt>" --tool gemini`
2. **Architecture Phase**: `ccw cli exec "<prompt>" --tool gemini`
3. **Implementation Phase**: `ccw cli exec "<prompt>" --tool codex --mode auto`
4. **Quality Phase**: `ccw cli exec "<prompt>" --tool codex --mode write`
### Planning Checklist
For every development task:
- [ ] **Purpose defined** - Clear goal and intent
- [ ] **Mode selected** - Execution mode and permission level determined
- [ ] **Mode selected** - Execution mode (`--mode analysis|write|auto`)
- [ ] **Context gathered** - File references and session memory documented (default `@**/*`)
- [ ] **Directory navigation** - Determine if `cd` or `cd + --include-directories` needed
- [ ] **Gemini analysis** completed for understanding
- [ ] **Template applied** - Use Standard Prompt Template (universal for all tools)
- [ ] **Directory navigation** - Determine if `--cd` or `--cd + --includeDirs` needed
- [ ] **Tool selected** - `--tool gemini|qwen|codex` based on task type
- [ ] **Template applied** - Use Standard Prompt Template
- [ ] **Constraints specified** - File patterns, scope, requirements
- [ ] **Implementation approach** - Tool selection and workflow
- [ ] **Timeout configured** - `--timeout` based on task complexity

View File

@@ -12,7 +12,6 @@
## ⚡ CCW MCP Tools
**优先使用 MCP 工具** (无需 Shell 转义,直接 JSON 参数)
### edit_file