diff --git a/.claude/skills/team-ux-improve/SKILL.md b/.claude/skills/team-ux-improve/SKILL.md new file mode 100644 index 00000000..9ca38800 --- /dev/null +++ b/.claude/skills/team-ux-improve/SKILL.md @@ -0,0 +1,283 @@ +--- +name: team-ux-improve +description: Unified team skill for UX improvement. Systematically discovers and fixes UI/UX interaction issues including unresponsive buttons, missing feedback, and state refresh problems. Uses team-worker agent architecture with role-spec files for domain logic. Coordinator orchestrates pipeline, workers are team-worker agents. Triggers on "team ux improve". +allowed-tools: Agent, AskUserQuestion, Read, Write, Edit, Bash, Glob, Grep, TaskList, TaskGet, TaskUpdate, TaskCreate, TeamCreate, TeamDelete, SendMessage, mcp__ace-tool__search_context, mcp__ccw-tools__read_file, mcp__ccw-tools__write_file, mcp__ccw-tools__edit_file, mcp__ccw-tools__team_msg +--- + +# Team UX Improve + +Unified team skill for systematically discovering and fixing UI/UX interaction issues. Built on **team-worker agent architecture** — all worker roles share a single agent definition with role-specific Phase 2-4 loaded from markdown specs. + +## Architecture + +``` ++-------------------------------------------------------------------+ +| Skill(skill="team-ux-improve") | +| args=" [--framework react|vue]" | ++-------------------+-----------------------------------------------+ + | + Orchestration Mode (auto -> coordinator) + | + Coordinator (inline) + Phase 0-5 orchestration + | + +-------+-------+-------+-------+-------+ + v v v v v v + [team-worker agents, each loaded with a role-spec] + scanner diagnoser designer implementer tester + + Utility Members (spawned by coordinator for utility work): + [explorer] +``` + +## Role Router + +This skill is **coordinator-only**. Workers do NOT invoke this skill — they are spawned as `team-worker` agents directly. + +### Input Parsing + +Parse `$ARGUMENTS`. No `--role` needed — always routes to coordinator. + +### Role Registry + +| Role | Spec | Task Prefix | Type | Inner Loop | +|------|------|-------------|------|------------| +| coordinator | [roles/coordinator/role.md](roles/coordinator/role.md) | (none) | orchestrator | - | +| scanner | [role-specs/scanner.md](role-specs/scanner.md) | SCAN-* | worker | false | +| diagnoser | [role-specs/diagnoser.md](role-specs/diagnoser.md) | DIAG-* | worker | false | +| designer | [role-specs/designer.md](role-specs/designer.md) | DESIGN-* | worker | false | +| implementer | [role-specs/implementer.md](role-specs/implementer.md) | IMPL-* | worker | true | +| tester | [role-specs/tester.md](role-specs/tester.md) | TEST-* | worker | false | + +### Utility Member Registry + +**⚠️ COORDINATOR ONLY**: Utility members can only be spawned by Coordinator. Workers CANNOT call Agent() to spawn utility members. Workers must use CLI tools instead. + +| Utility Member | Spec | Callable By | Purpose | +|----------------|------|-------------|---------| +| explorer | [role-specs/explorer.md](role-specs/explorer.md) | **Coordinator only** | Explore codebase for UI component patterns, state management conventions, and framework-specific patterns | + +### Worker Alternatives + +Workers needing similar capabilities must use CLI tools: + +| Capability | CLI Command | Example | +|------------|-------------|---------| +| Codebase exploration | `ccw cli --tool gemini --mode analysis` | Explore architecture patterns | +| Multi-perspective critique | Parallel CLI calls | Security + performance + quality reviews | +| Document generation | `ccw cli --tool gemini --mode write` | Generate implementation guide | + +### Dispatch + +Always route to coordinator. Coordinator reads `roles/coordinator/role.md` and executes its phases. + +### Orchestration Mode + +User provides project path and optional framework flag. + +**Invocation**: `Skill(skill="team-ux-improve", args=" [--framework react|vue]")` + +**Lifecycle**: +``` +User provides project path + -> coordinator Phase 1-3: Requirement clarification -> TeamCreate -> Create task chain + -> coordinator Phase 4: spawn first batch workers (background) -> STOP + -> Worker (team-worker agent) executes -> SendMessage callback -> coordinator advances + -> Loop until pipeline complete -> Phase 5 report + completion action +``` + +**User Commands** (wake paused coordinator): + +| Command | Action | +|---------|--------| +| `check` / `status` | Output execution status graph, no advancement | +| `resume` / `continue` | Check worker states, advance next step | + +--- + +## Command Execution Protocol + +When coordinator needs to execute a command (dispatch, monitor): + +1. **Read the command file**: `roles/coordinator/commands/.md` +2. **Follow the workflow** defined in the command file (Phase 2-4 structure) +3. **Commands are inline execution guides** - NOT separate agents or subprocesses +4. **Execute synchronously** - complete the command workflow before proceeding + +Example: +``` +Phase 3 needs task dispatch + -> Read roles/coordinator/commands/dispatch.md + -> Execute Phase 2 (Context Loading) + -> Execute Phase 3 (Task Chain Creation) + -> Execute Phase 4 (Validation) + -> Continue to Phase 4 +``` + +--- + +## Coordinator Spawn Template + +### v5 Worker Spawn (all roles) + +When coordinator spawns workers, use `team-worker` agent with role-spec path: + +``` +Agent({ + subagent_type: "team-worker", + description: "Spawn worker", + team_name: , + name: "", + run_in_background: true, + prompt: `## Role Assignment +role: +role_spec: .claude/skills/team-ux-improve/role-specs/.md +session: +session_id: +team_name: +requirement: +inner_loop: + +Read role_spec file to load Phase 2-4 domain instructions. +Execute built-in Phase 1 (task discovery) -> role-spec Phase 2-4 -> built-in Phase 5 (report).` +}) +``` + +**Inner Loop roles** (implementer): Set `inner_loop: true`. The team-worker agent handles the loop internally. + +**Single-task roles** (scanner, diagnoser, designer, tester): Set `inner_loop: false`. + +--- + +## Pipeline Definitions + +### Pipeline Diagram + +``` +scanner (SCAN) → diagnoser (DIAG) → designer (DESIGN) → implementer (IMPL) → tester (TEST) + +Stage 1: UI Scanning + └─ scanner: Scan UI components for interaction issues + +Stage 2: Root Cause Diagnosis + └─ diagnoser: Diagnose root causes of identified issues + +Stage 3: Solution Design + └─ designer: Design feedback mechanisms and state management solutions + +Stage 4: Code Implementation + └─ implementer: Generate fix code with proper state handling + +Stage 5: Test Validation + └─ tester: Generate and run tests to verify fixes +``` + +### Cadence Control + +**Beat model**: Event-driven, each beat = coordinator wake -> process -> spawn -> STOP. + +``` +Beat Cycle (single beat) +====================================================================== + Event Coordinator Workers +---------------------------------------------------------------------- + callback/resume --> +- handleCallback -+ + | mark completed | + | check pipeline | + +- handleSpawnNext -+ + | find ready tasks | + | spawn workers ---+--> [team-worker scanner] Phase 1-5 + | (parallel OK) --+--> [team-worker diagnoser] Phase 1-5 + +- STOP (idle) -----+ | + | + callback <-----------------------------------------+ + (next beat) SendMessage + TaskUpdate(completed) +====================================================================== + + Fast-Advance (skips coordinator for simple linear successors) +====================================================================== + [Worker scanner] Phase 5 complete + +- 1 ready task? simple successor? + | --> spawn team-worker diagnoser directly + | --> log fast_advance to message bus (coordinator syncs on next wake) + +- complex case? --> SendMessage to coordinator +====================================================================== +``` + +**Checkpoints**: + +| Checkpoint | Trigger | Location | Behavior | +|------------|---------|----------|----------| +| Pipeline complete | All tasks completed | coordinator Phase 5 | Execute completion action | + +### Task Metadata Registry + +| Task ID | Role | Phase | Dependencies | Description | +|---------|------|-------|-------------|-------------| +| SCAN-001 | scanner | 2-4 | [] | Scan UI components for interaction issues | +| DIAG-001 | diagnoser | 2-4 | [SCAN-001] | Diagnose root causes of identified issues | +| DESIGN-001 | designer | 2-4 | [DIAG-001] | Design feedback mechanisms and state management solutions | +| IMPL-001 | implementer | 2-4 | [DESIGN-001] | Generate fix code with proper state handling | +| TEST-001 | tester | 2-4 | [IMPL-001] | Generate and run tests to verify fixes | + +--- + +## Completion Action + +When the pipeline completes (all tasks done, coordinator Phase 5): + +``` +AskUserQuestion({ + questions: [{ + question: "Team pipeline complete. What would you like to do?", + header: "Completion", + multiSelect: false, + options: [ + { label: "Archive & Clean (Recommended)", description: "Archive session, clean up tasks and team resources" }, + { label: "Keep Active", description: "Keep session active for follow-up work or inspection" }, + { label: "Export Results", description: "Export deliverables to a specified location, then clean" } + ] + }] +}) +``` + +| Choice | Action | +|--------|--------| +| Archive & Clean | Update session status="completed" -> TeamDelete(ux-improve) -> output final summary | +| Keep Active | Update session status="paused" -> output resume instructions: `Skill(skill="team-ux-improve", args="resume")` | +| Export Results | AskUserQuestion for target path -> copy deliverables -> Archive & Clean | + +--- + +## Session Directory + +``` +.workflow/.team/ux-improve-/ +├── .msg/ +│ ├── messages.jsonl ← Messages + state_update audit log +│ └── meta.json ← Pipeline config + role state snapshot +├── artifacts/ ← Role deliverables +│ ├── scan-report.md ← scanner output +│ ├── diagnosis.md ← diagnoser output +│ ├── design-guide.md ← designer output +│ ├── fixes/ ← implementer output +│ └── test-report.md ← tester output +├── explorations/ ← explorer cache +│ └── cache-index.json +└── wisdom/ ← Knowledge base + ├── ui-patterns.md + └── state-management.md +``` + +## Error Handling + +| Scenario | Resolution | +|----------|------------| +| Role spec file not found | Error with expected path (role-specs/.md) | +| Command file not found | Fallback to inline execution in coordinator role.md | +| Utility member spec not found | Error with expected path (role-specs/explorer.md) | +| Fast-advance orphan detected | Coordinator resets task to pending on next check | +| team-worker agent unavailable | Error: requires .claude/agents/team-worker.md | +| Completion action timeout | Default to Keep Active | +| Framework detection fails | Prompt user for framework selection | +| No UI issues found | Complete with empty fix list | diff --git a/.claude/skills/team-ux-improve/role-specs/designer.md b/.claude/skills/team-ux-improve/role-specs/designer.md new file mode 100644 index 00000000..2af86395 --- /dev/null +++ b/.claude/skills/team-ux-improve/role-specs/designer.md @@ -0,0 +1,177 @@ +--- +prefix: DESIGN +inner_loop: false +message_types: + success: design_complete + error: error +--- + +# UX Designer + +Design feedback mechanisms (loading/error/success states) and state management patterns (React/Vue reactive updates). + +## Phase 2: Context & Pattern Loading + +1. Load diagnosis report from `/artifacts/diagnosis.md` +2. Load diagnoser state via `team_msg(operation="get_state", session_id=, role="diagnoser")` +3. Detect framework from project structure +4. Load framework-specific patterns: + +| Framework | State Pattern | Event Pattern | +|-----------|---------------|---------------| +| React | useState, useRef | onClick, onChange | +| Vue | ref, reactive | @click, @change | + +### Complex Design (use CLI) + +For complex multi-component solutions: + +``` +Bash(`ccw cli -p "PURPOSE: Design comprehensive feedback mechanism for multi-step form +CONTEXT: @ +EXPECTED: Complete design with state flow diagram and code patterns +CONSTRAINTS: Must support React hooks" --tool gemini --mode analysis`) +``` + +## Phase 3: Solution Design + +For each diagnosed issue, design solution: + +### Feedback Mechanism Design + +| Issue Type | Solution Design | +|------------|-----------------| +| Missing loading | Add loading state + UI indicator (spinner, disabled button) | +| Missing error | Add error state + error message display | +| Missing success | Add success state + confirmation toast/message | +| No empty state | Add conditional rendering for empty data | + +### State Management Design + +**React Pattern**: +```typescript +// Add state variables +const [isLoading, setIsLoading] = useState(false); +const [error, setError] = useState(null); + +// Wrap async operation +const handleSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + setIsLoading(true); + setError(null); + + try { + const response = await fetch('/api/upload', { method: 'POST', body: formData }); + if (!response.ok) throw new Error('Upload failed'); + // Success handling + } catch (err: any) { + setError(err.message || 'An error occurred'); + } finally { + setIsLoading(false); + } +}; + +// UI binding + +{error &&

{error}

} +``` + +**Vue Pattern**: +```typescript +// Add reactive state +const isLoading = ref(false); +const error = ref(null); + +// Wrap async operation +const handleSubmit = async () => { + isLoading.value = true; + error.value = null; + + try { + const response = await fetch('/api/upload', { method: 'POST', body: formData }); + if (!response.ok) throw new Error('Upload failed'); + // Success handling + } catch (err: any) { + error.value = err.message || 'An error occurred'; + } finally { + isLoading.value = false; + } +}; + +// UI binding + +

{{ error }}

+``` + +### Input Control Design + +| Issue | Solution | +|-------|----------| +| Text input for file path | Add file picker: `` | +| Text input for folder path | Add directory picker: `` | +| No validation | Add validation rules and error messages | + +## Phase 4: Design Document Generation + +1. Generate implementation guide for each issue: + +```markdown +# Design Guide + +## Issue #1: Upload form no loading state + +### Solution Design +Add loading state with UI feedback and error handling. + +### State Variables (React) +```typescript +const [isLoading, setIsLoading] = useState(false); +const [error, setError] = useState(null); +``` + +### Event Handler +```typescript +const handleUpload = async (event: React.FormEvent) => { + event.preventDefault(); + setIsLoading(true); + setError(null); + + try { + // API call + } catch (err: any) { + setError(err.message); + } finally { + setIsLoading(false); + } +}; +``` + +### UI Binding +```tsx + +{error &&

{error}

} +``` + +### Acceptance Criteria +- Loading state shows during upload +- Button disabled during upload +- Error message displays on failure +- Success confirmation on completion +``` + +2. Write guide to `/artifacts/design-guide.md` +3. Share state via team_msg: + ``` + team_msg(operation="log", session_id=, from="designer", + type="state_update", data={ + designed_solutions: , + framework: , + patterns_used: [] + }) + ``` diff --git a/.claude/skills/team-ux-improve/role-specs/diagnoser.md b/.claude/skills/team-ux-improve/role-specs/diagnoser.md new file mode 100644 index 00000000..d8d54ce3 --- /dev/null +++ b/.claude/skills/team-ux-improve/role-specs/diagnoser.md @@ -0,0 +1,96 @@ +--- +prefix: DIAG +inner_loop: false +message_types: + success: diag_complete + error: error +--- + +# State Diagnoser + +Diagnose root causes of UI issues: state management problems, event binding failures, async handling errors. + +## Phase 2: Context & Complexity Assessment + +1. Load scan report from `/artifacts/scan-report.md` +2. Load scanner state via `team_msg(operation="get_state", session_id=, role="scanner")` +3. Assess issue complexity: + +| Complexity | Criteria | Strategy | +|------------|----------|----------| +| High | 5+ issues, cross-component state | CLI delegation | +| Medium | 2-4 issues, single component | CLI for analysis | +| Low | 1 issue, simple pattern | Inline analysis | + +### Complex Analysis (use CLI) + +For complex multi-file state management issues: + +``` +Bash(`ccw cli -p "PURPOSE: Analyze state management patterns and identify root causes +CONTEXT: @ +EXPECTED: Root cause analysis with fix recommendations +CONSTRAINTS: Focus on reactive update patterns" --tool gemini --mode analysis`) +``` + +## Phase 3: Root Cause Analysis + +For each issue from scan report: + +### State Management Diagnosis + +| Pattern | Root Cause | Fix Strategy | +|---------|------------|--------------| +| Array.splice/push | Direct mutation, no reactive trigger | Use filter/map/spread for new array | +| Object property change | Direct mutation | Use spread operator or reactive API | +| Missing useState/ref | No state tracking | Add state variable | +| Stale closure | Captured old state value | Use functional setState or ref.current | + +### Event Binding Diagnosis + +| Pattern | Root Cause | Fix Strategy | +|---------|------------|--------------| +| onClick without handler | Missing event binding | Add event handler function | +| Async without await | Unhandled promise | Add async/await or .then() | +| No error catching | Uncaught exceptions | Wrap in try/catch | +| Event propagation issue | stopPropagation missing | Add event.stopPropagation() | + +### Async Handling Diagnosis + +| Pattern | Root Cause | Fix Strategy | +|---------|------------|--------------| +| No loading state | Missing async state tracking | Add isLoading state | +| No error handling | Missing catch block | Add try/catch with error state | +| Race condition | Multiple concurrent requests | Add request cancellation or debounce | + +## Phase 4: Diagnosis Report + +1. Generate root cause analysis for each issue: + +```markdown +# Diagnosis Report + +## Issue #1: Upload form no loading state +- **File**: src/components/Upload.tsx:45 +- **Root Cause**: Form submit handler is async but no loading state variable exists +- **Pattern Type**: Missing async state tracking +- **Fix Recommendation**: + - Add `const [isLoading, setIsLoading] = useState(false)` (React) + - Add `const isLoading = ref(false)` (Vue) + - Wrap async call in try/finally with setIsLoading(true/false) + - Disable button when isLoading is true +``` + +2. Write report to `/artifacts/diagnosis.md` +3. Share state via team_msg: + ``` + team_msg(operation="log", session_id=, from="diagnoser", + type="state_update", data={ + diagnosed_issues: , + pattern_types: { + state_management: , + event_binding: , + async_handling: + } + }) + ``` diff --git a/.claude/skills/team-ux-improve/role-specs/explorer.md b/.claude/skills/team-ux-improve/role-specs/explorer.md new file mode 100644 index 00000000..d3df9c16 --- /dev/null +++ b/.claude/skills/team-ux-improve/role-specs/explorer.md @@ -0,0 +1,91 @@ +--- +prefix: EXPLORE +inner_loop: false +message_types: + success: explore_complete + error: error +--- + +# Codebase Explorer + +Explore codebase for UI component patterns, state management conventions, and framework-specific patterns. Callable by coordinator only. + +## Phase 2: Exploration Scope + +1. Parse exploration request from task description +2. Determine file patterns based on framework: + +| Framework | Patterns | +|-----------|----------| +| React | `**/*.tsx`, `**/*.jsx`, `**/use*.ts`, `**/store*.ts` | +| Vue | `**/*.vue`, `**/composables/*.ts`, `**/stores/*.ts` | + +3. Check exploration cache: `/explorations/cache-index.json` + - If cache hit and fresh -> return cached results + - If cache miss or stale -> proceed to Phase 3 + +## Phase 3: Codebase Exploration + +Use ACE search for semantic queries: + +``` +mcp__ace-tool__search_context( + project_root_path="", + query="" +) +``` + +Exploration dimensions: + +| Dimension | Query | Purpose | +|-----------|-------|---------| +| Component patterns | "UI components with user interactions" | Find interactive components | +| State management | "State management patterns useState ref reactive" | Identify state conventions | +| Event handling | "Event handlers onClick onChange onSubmit" | Map event patterns | +| Error handling | "Error handling try catch error state" | Find error patterns | +| Feedback mechanisms | "Loading state spinner progress indicator" | Find existing feedback | + +For each dimension, collect: +- File paths +- Pattern examples +- Convention notes + +## Phase 4: Exploration Summary + +1. Generate pattern summary: + +```markdown +# Exploration Summary + +## Framework: React/Vue + +## Component Patterns +- Button components use +- Form components use + +## State Management Conventions +- Global state: Zustand/Pinia +- Local state: useState/ref +- Async state: custom hooks/composables + +## Event Handling Patterns +- Form submit: +- Button click: + +## Existing Feedback Mechanisms +- Loading: +- Error: +- Success: +``` + +2. Cache results to `/explorations/cache-index.json` +3. Write summary to `/explorations/exploration-summary.md` +4. Share state via team_msg: + ``` + team_msg(operation="log", session_id=, from="explorer", + type="state_update", data={ + framework: , + components_found: , + patterns_identified: [] + }) + ``` diff --git a/.claude/skills/team-ux-improve/role-specs/implementer.md b/.claude/skills/team-ux-improve/role-specs/implementer.md new file mode 100644 index 00000000..1e6710bf --- /dev/null +++ b/.claude/skills/team-ux-improve/role-specs/implementer.md @@ -0,0 +1,125 @@ +--- +prefix: IMPL +inner_loop: true +message_types: + success: impl_complete + error: error +--- + +# Code Implementer + +Generate executable fix code with proper state management, event handling, and UI feedback bindings. + +## Phase 2: Task & Design Loading + +1. Extract session path from task description +2. Read design guide: `/artifacts/design-guide.md` +3. Extract implementation tasks from design guide +4. Load framework conventions from wisdom files (if available) +5. **For inner loop**: Load context_accumulator from prior IMPL tasks + +### Context Accumulator (Inner Loop) + +``` +context_accumulator = { + completed_fixes: [, ], + modified_files: [, ], + patterns_applied: [] +} +``` + +## Phase 3: Code Implementation + +Implementation backend selection: + +| Backend | Condition | Method | +|---------|-----------|--------| +| CLI | Complex multi-file changes | `ccw cli --tool gemini --mode write` | +| Direct | Simple single-file changes | Inline Edit/Write | + +### CLI Implementation (Complex) + +``` +Bash(`ccw cli -p "PURPOSE: Implement loading state and error handling for upload form +TASK: + - Add useState for isLoading and error + - Wrap async call in try/catch/finally + - Update UI bindings for button and error display +CONTEXT: @src/components/Upload.tsx +EXPECTED: Modified Upload.tsx with complete implementation +CONSTRAINTS: Maintain existing code style" --tool gemini --mode write`) +``` + +### Direct Implementation (Simple) + +For simple state variable additions or UI binding changes: + +``` +Edit({ + file_path: "src/components/Upload.tsx", + old_string: "const handleUpload = async () => {", + new_string: "const [isLoading, setIsLoading] = useState(false);\nconst [error, setError] = useState(null);\n\nconst handleUpload = async () => {\n setIsLoading(true);\n setError(null);\n try {" +}) +``` + +### Implementation Steps + +For each fix in design guide: +1. Read target file +2. Determine complexity (simple vs complex) +3. Apply fix using appropriate backend +4. Verify syntax (no compilation errors) +5. Append to context_accumulator + +## Phase 4: Self-Validation + +| Check | Method | Pass Criteria | +|-------|--------|---------------| +| Syntax | IDE diagnostics or tsc --noEmit | No errors | +| File existence | Verify planned files exist | All present | +| Acceptance criteria | Match against design guide | All met | + +Validation steps: +1. Run syntax check on modified files +2. Verify all files from design guide exist +3. Check acceptance criteria from design guide +4. If validation fails -> attempt auto-fix (max 2 attempts) + +### Context Accumulator Update + +Append to context_accumulator: +``` +{ + completed_fixes: [...prev, ], + modified_files: [...prev, ], + patterns_applied: [...prev, ] +} +``` + +Write summary to `/artifacts/fixes/README.md`: +```markdown +# Implementation Summary + +## Completed Fixes +- Issue #1: Upload form loading state - DONE +- Issue #2: Error handling - DONE + +## Modified Files +- src/components/Upload.tsx +- src/components/Form.tsx + +## Patterns Applied +- React useState for loading/error states +- try/catch/finally for async handling +- Conditional rendering for error messages +``` + +Share state via team_msg: +``` +team_msg(operation="log", session_id=, from="implementer", + type="state_update", data={ + completed_fixes: , + modified_files: [], + validation_passed: true + }) +``` diff --git a/.claude/skills/team-ux-improve/role-specs/scanner.md b/.claude/skills/team-ux-improve/role-specs/scanner.md new file mode 100644 index 00000000..7387dea5 --- /dev/null +++ b/.claude/skills/team-ux-improve/role-specs/scanner.md @@ -0,0 +1,105 @@ +--- +prefix: SCAN +inner_loop: false +message_types: + success: scan_complete + error: error +--- + +# UI Scanner + +Scan UI components to identify interaction issues: unresponsive buttons, missing feedback mechanisms, state not refreshing. + +## Phase 2: Context Loading + +| Input | Source | Required | +|-------|--------|----------| +| Project path | Task description CONTEXT | Yes | +| Framework | Task description CONTEXT | Yes | +| Scan scope | Task description CONSTRAINTS | Yes | + +1. Extract session path and project path from task description +2. Detect framework from project structure: + +| Signal | Framework | +|--------|-----------| +| package.json has "react" | React | +| package.json has "vue" | Vue | +| *.tsx files present | React | +| *.vue files present | Vue | + +3. Build file pattern list for scanning: + - React: `**/*.tsx`, `**/*.jsx`, `**/use*.ts` + - Vue: `**/*.vue`, `**/composables/*.ts` + +### Complex Analysis (use CLI) + +For large projects with many components: + +``` +Bash(`ccw cli -p "PURPOSE: Discover all UI components with user interactions +CONTEXT: @/**/*.tsx @/**/*.vue +EXPECTED: Component list with interaction types (click, submit, input, select) +CONSTRAINTS: Focus on interactive components only" --tool gemini --mode analysis`) +``` + +## Phase 3: Component Scanning + +Scan strategy: + +| Category | Detection Pattern | Severity | +|----------|-------------------|----------| +| Unresponsive actions | onClick/\@click without async handling or error catching | High | +| Missing loading state | Form submit without isLoading/loading ref | High | +| State not refreshing | Array.splice/push without reactive reassignment | High | +| Missing error feedback | try/catch without error state or user notification | Medium | +| Missing success feedback | API call without success confirmation | Medium | +| No empty state | Data list without empty state placeholder | Low | +| Input without validation | Form input without validation rules | Low | +| Missing file selector | Text input for file/folder path without picker | Medium | + +For each component file: +1. Read file content +2. Scan for interaction patterns using Grep +3. Check for feedback mechanisms (loading, error, success states) +4. Check state update patterns (mutation vs reactive) +5. Record issues with file:line references + +## Phase 4: Issue Report Generation + +1. Classify issues by severity (High/Medium/Low) +2. Group by category (unresponsive, missing feedback, state issues, input UX) +3. Generate structured report: + +```markdown +# UI Scan Report + +## Summary +- Total issues: +- High: | Medium: | Low: + +## Issues + +### High Severity +| # | File:Line | Component | Issue | Category | +|---|-----------|-----------|-------|----------| +| 1 | src/components/Upload.tsx:45 | UploadForm | No loading state on submit | Missing feedback | + +### Medium Severity +... + +### Low Severity +... +``` + +4. Write report to `/artifacts/scan-report.md` +5. Share state via team_msg: + ``` + team_msg(operation="log", session_id=, from="scanner", + type="state_update", data={ + total_issues: , + high: , medium: , low: , + categories: [], + scanned_files: + }) + ``` diff --git a/.claude/skills/team-ux-improve/role-specs/tester.md b/.claude/skills/team-ux-improve/role-specs/tester.md new file mode 100644 index 00000000..39b302fb --- /dev/null +++ b/.claude/skills/team-ux-improve/role-specs/tester.md @@ -0,0 +1,152 @@ +--- +prefix: TEST +inner_loop: false +message_types: + success: test_complete + error: error + fix: fix_required +--- + +# Test Engineer + +Generate and run tests to verify fixes (loading states, error handling, state updates). + +## Phase 2: Environment Detection + +1. Detect test framework from project files: + +| Signal | Framework | +|--------|-----------| +| package.json has "jest" | Jest | +| package.json has "vitest" | Vitest | +| package.json has "@testing-library/react" | React Testing Library | +| package.json has "@vue/test-utils" | Vue Test Utils | + +2. Get changed files from implementer state: + ``` + team_msg(operation="get_state", session_id=, role="implementer") + ``` + +3. Load test strategy from design guide + +## Phase 3: Test Generation & Execution + +### Test Generation + +For each modified file, generate test cases: + +**React Example**: +```typescript +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import Upload from '../Upload'; + +describe('Upload Component', () => { + it('shows loading state during upload', async () => { + global.fetch = vi.fn(() => Promise.resolve({ ok: true })); + + render(); + const uploadButton = screen.getByRole('button', { name: /upload/i }); + + fireEvent.click(uploadButton); + + // Check loading state + await waitFor(() => { + expect(screen.getByText(/uploading.../i)).toBeInTheDocument(); + expect(uploadButton).toBeDisabled(); + }); + + // Check normal state restored + await waitFor(() => { + expect(uploadButton).not.toBeDisabled(); + }); + }); + + it('displays error message on failure', async () => { + global.fetch = vi.fn(() => Promise.reject(new Error('Upload failed'))); + + render(); + fireEvent.click(screen.getByRole('button', { name: /upload/i })); + + await waitFor(() => { + expect(screen.getByText(/upload failed/i)).toBeInTheDocument(); + }); + }); +}); +``` + +### Test Execution + +Iterative test-fix cycle (max 5 iterations): + +1. Run tests: `npm test` or `npm run test:unit` +2. Parse results -> calculate pass rate +3. If pass rate >= 95% -> exit (success) +4. If pass rate < 95% and iterations < 5: + - Analyze failures + - Use CLI to generate fixes: + ``` + Bash(`ccw cli -p "PURPOSE: Fix test failures + CONTEXT: @ @ + EXPECTED: Fixed code that passes tests + CONSTRAINTS: Maintain existing functionality" --tool gemini --mode write`) + ``` + - Increment iteration counter + - Loop to step 1 +5. If iterations >= 5 -> send fix_required message + +## Phase 4: Test Report + +Generate test report: + +```markdown +# Test Report + +## Summary +- Total tests: +- Passed: +- Failed: +- Pass rate: % +- Fix iterations: + +## Test Results + +### Passed Tests +- ✅ Upload Component > shows loading state during upload +- ✅ Upload Component > displays error message on failure + +### Failed Tests +- ❌ Form Component > validates input before submit + - Error: Expected validation message not found + +## Coverage +- Statements: 85% +- Branches: 78% +- Functions: 90% +- Lines: 84% + +## Remaining Issues +- Form validation test failing (needs manual review) +``` + +Write report to `/artifacts/test-report.md` + +Share state via team_msg: +``` +team_msg(operation="log", session_id=, from="tester", + type="state_update", data={ + total_tests: , + passed: , + failed: , + pass_rate: , + fix_iterations: + }) +``` + +If pass rate < 95%, send fix_required message: +``` +SendMessage({ + recipient: "coordinator", + type: "message", + content: "[tester] Test validation incomplete. Pass rate: %. Manual review needed." +}) +``` diff --git a/.claude/skills/team-ux-improve/roles/coordinator/commands/dispatch.md b/.claude/skills/team-ux-improve/roles/coordinator/commands/dispatch.md new file mode 100644 index 00000000..3ff79f7b --- /dev/null +++ b/.claude/skills/team-ux-improve/roles/coordinator/commands/dispatch.md @@ -0,0 +1,212 @@ +# Dispatch Command + +## Purpose + +Create task chains based on execution mode. Generate structured task descriptions with PURPOSE/TASK/CONTEXT/EXPECTED/CONSTRAINTS format. + +--- + +## Phase 2: Context Loading + +| Input | Source | Required | +|-------|--------|----------| +| Session ID | coordinator Phase 2 | Yes | +| Project path | coordinator Phase 1 | Yes | +| Framework | coordinator Phase 1 | Yes | +| Pipeline mode | meta.json | Yes | + +1. Load session ID from coordinator context +2. Load project path and framework from meta.json +3. Determine pipeline mode (standard) + +--- + +## Phase 3: Task Chain Creation + +### Task Description Template + +Every task description uses structured format for clarity: + +``` +TaskCreate({ + subject: "", + owner: "", + description: "PURPOSE: | Success: +TASK: + - + - + - +CONTEXT: + - Session: + - Scope: + - Upstream artifacts: , + - Key files: , (if applicable) + - State: via team_msg(operation="get_state", role=) +EXPECTED: + +CONSTRAINTS: +--- +InnerLoop: +", + blockedBy: [], + status: "pending" +}) +``` + +### Standard Pipeline Tasks + +**SCAN-001: UI Component Scanning** +``` +TaskCreate({ + subject: "SCAN-001", + owner: "scanner", + description: "PURPOSE: Scan UI components to identify interaction issues (unresponsive buttons, missing feedback, state not refreshing) | Success: Complete issue report with file:line references and severity classification +TASK: + - Detect framework (React/Vue) from project structure + - Scan UI components for interaction patterns using ACE search and file analysis + - Identify missing feedback mechanisms (loading states, error handling, success confirmation) + - Detect unresponsive actions (event binding issues, async handling problems) + - Check state update patterns (mutation vs reactive updates) +CONTEXT: + - Session: + - Scope: Project path: , Framework: + - File patterns: **/*.tsx, **/*.vue, **/*.jsx + - Focus: UI components with user interactions +EXPECTED: artifacts/scan-report.md with structured issue list (severity: High/Medium/Low, file:line, description, category) +CONSTRAINTS: Focus on interaction issues only, exclude styling/layout problems +--- +InnerLoop: false", + blockedBy: [], + status: "pending" +}) +``` + +**DIAG-001: Root Cause Diagnosis** +``` +TaskCreate({ + subject: "DIAG-001", + owner: "diagnoser", + description: "PURPOSE: Diagnose root causes of identified UI issues | Success: Complete diagnosis report with fix recommendations for each issue +TASK: + - Load scan report from artifacts/scan-report.md + - Analyze state management patterns (direct mutation vs reactive updates) + - Trace event binding and propagation + - Check async handling (promises, callbacks, error catching) + - Identify framework-specific anti-patterns + - Use CLI for complex multi-file analysis when needed +CONTEXT: + - Session: + - Scope: Issues from scan report + - Upstream artifacts: artifacts/scan-report.md + - State: via team_msg(operation="get_state", role="scanner") +EXPECTED: artifacts/diagnosis.md with root cause analysis (issue ID, root cause, pattern type, fix recommendation) +CONSTRAINTS: Focus on actionable root causes, provide specific fix strategies +--- +InnerLoop: false", + blockedBy: ["SCAN-001"], + status: "pending" +}) +``` + +**DESIGN-001: Solution Design** +``` +TaskCreate({ + subject: "DESIGN-001", + owner: "designer", + description: "PURPOSE: Design feedback mechanisms and state management solutions for identified issues | Success: Complete implementation guide with code patterns and examples +TASK: + - Load diagnosis report from artifacts/diagnosis.md + - Design feedback mechanisms (loading/error/success states) for each issue + - Design state management patterns (useState/ref, reactive updates) + - Design input control improvements (file selectors, validation) + - Generate framework-specific code patterns (React/Vue) + - Use CLI for complex multi-component solutions when needed +CONTEXT: + - Session: + - Scope: Issues from diagnosis report + - Upstream artifacts: artifacts/diagnosis.md + - Framework: + - State: via team_msg(operation="get_state", role="diagnoser") +EXPECTED: artifacts/design-guide.md with implementation guide (issue ID, solution design, code patterns, state management examples, UI binding templates) +CONSTRAINTS: Solutions must be framework-appropriate, provide complete working examples +--- +InnerLoop: false", + blockedBy: ["DIAG-001"], + status: "pending" +}) +``` + +**IMPL-001: Code Implementation** +``` +TaskCreate({ + subject: "IMPL-001", + owner: "implementer", + description: "PURPOSE: Generate fix code with proper state management, event handling, and UI feedback bindings | Success: All fixes implemented and validated +TASK: + - Load design guide from artifacts/design-guide.md + - Extract implementation tasks from design guide + - Generate fix code with proper state management (useState/ref) + - Add event handlers with error catching + - Implement UI feedback bindings (loading/error/success) + - Use CLI for complex multi-file changes, direct Edit/Write for simple changes + - Validate syntax and file existence after each fix +CONTEXT: + - Session: + - Scope: Fixes from design guide + - Upstream artifacts: artifacts/design-guide.md + - Framework: + - State: via team_msg(operation="get_state", role="designer") + - Context accumulator: Load from prior IMPL tasks (inner loop) +EXPECTED: artifacts/fixes/ directory with all fix files, implementation summary in artifacts/fixes/README.md +CONSTRAINTS: Maintain existing code style, ensure backward compatibility, validate all changes +--- +InnerLoop: true", + blockedBy: ["DESIGN-001"], + status: "pending" +}) +``` + +**TEST-001: Test Validation** +``` +TaskCreate({ + subject: "TEST-001", + owner: "tester", + description: "PURPOSE: Generate and run tests to verify fixes (loading states, error handling, state updates) | Success: Pass rate >= 95%, all critical fixes validated +TASK: + - Detect test framework (Jest/Vitest) from project + - Get changed files from implementer state + - Load test strategy from design guide + - Generate test cases for loading states, error handling, state updates + - Run tests and parse results + - If pass rate < 95%, use CLI to generate fixes (max 5 iterations) + - Generate test report with pass/fail counts, coverage, fix iterations +CONTEXT: + - Session: + - Scope: Fixes from implementer + - Upstream artifacts: artifacts/fixes/, artifacts/design-guide.md + - Framework: + - State: via team_msg(operation="get_state", role="implementer") +EXPECTED: artifacts/test-report.md with test results (pass/fail counts, coverage metrics, fix iterations, remaining issues) +CONSTRAINTS: Pass rate threshold: 95%, max fix iterations: 5 +--- +InnerLoop: false", + blockedBy: ["IMPL-001"], + status: "pending" +}) +``` + +--- + +## Phase 4: Validation + +1. Verify all tasks created successfully +2. Check task dependency chain is valid (no cycles) +3. Verify all task owners match Role Registry +4. Confirm task prefixes match role frontmatter +5. Output task count and dependency graph + +| Check | Pass Criteria | +|-------|---------------| +| Task count | 5 tasks created | +| Dependencies | Linear chain: SCAN → DIAG → DESIGN → IMPL → TEST | +| Owners | All owners in Role Registry | +| Prefixes | Match role frontmatter | diff --git a/.claude/skills/team-ux-improve/roles/coordinator/commands/monitor.md b/.claude/skills/team-ux-improve/roles/coordinator/commands/monitor.md new file mode 100644 index 00000000..0255458c --- /dev/null +++ b/.claude/skills/team-ux-improve/roles/coordinator/commands/monitor.md @@ -0,0 +1,131 @@ +# Monitor Command + +## Purpose + +Handle worker callbacks, status checks, pipeline advancement, and completion detection. + +--- + +## Handlers + +### handleCallback + +**Trigger**: Worker SendMessage with `[scanner]`, `[diagnoser]`, `[designer]`, `[implementer]`, or `[tester]` tag. + +1. Parse worker role from message tag +2. Mark corresponding task as completed: `TaskUpdate({ taskId: , status: "completed" })` +3. Log completion to message bus: + ``` + team_msg(operation="log", session_id=, from="coordinator", + type="task_complete", data={ role: , task_id: }) + ``` +4. Check if all tasks completed -> handleComplete +5. Otherwise -> handleSpawnNext + +### handleCheck + +**Trigger**: User "check" or "status" command. + +1. Load TaskList +2. Build status graph: + ``` + Pipeline Status: + ✅ SCAN-001 (scanner) - completed + ✅ DIAG-001 (diagnoser) - completed + 🔄 DESIGN-001 (designer) - in_progress + ⏳ IMPL-001 (implementer) - pending [blocked by DESIGN-001] + ⏳ TEST-001 (tester) - pending [blocked by IMPL-001] + ``` +3. Output status graph, do NOT advance pipeline +4. STOP + +### handleResume + +**Trigger**: User "resume" or "continue" command. + +1. Load TaskList +2. Check for fast-advance orphans: + - Tasks with status "in_progress" but no active worker + - Reset orphans to "pending" +3. -> handleSpawnNext + +### handleSpawnNext + +**Trigger**: After handleCallback or handleResume. + +1. Load TaskList +2. Find ready tasks: + - status = "pending" + - All blockedBy tasks have status "completed" +3. For each ready task: + - Extract role from task owner + - Extract inner_loop from task description metadata + - Spawn team-worker agent: + ``` + Agent({ + subagent_type: "team-worker", + description: "Spawn worker", + team_name: "ux-improve", + name: "", + run_in_background: true, + prompt: `## Role Assignment + role: + role_spec: .claude/skills/team-ux-improve/role-specs/.md + session: + session_id: + team_name: ux-improve + requirement: + inner_loop: + + Read role_spec file to load Phase 2-4 domain instructions. + Execute built-in Phase 1 -> role-spec Phase 2-4 -> built-in Phase 5.` + }) + ``` +4. STOP (wait for next callback) + +### handleConsensus + +**Trigger**: consensus_blocked message from worker. + +Route by severity: + +| Severity | Action | +|----------|--------| +| HIGH | Pause pipeline, AskUserQuestion for resolution | +| MEDIUM | Log warning, continue pipeline | +| LOW | Log info, continue pipeline | + +### handleComplete + +**Trigger**: All tasks have status "completed". + +1. Verify all tasks completed via TaskList +2. Generate pipeline summary: + - Total tasks: 5 + - Duration: + - Deliverables: list artifact paths +3. Execute completion action (see coordinator Phase 5) + +--- + +## Fast-Advance Detection + +When handleCallback detects a completed task: + +| Condition | Action | +|-----------|--------| +| Exactly 1 ready successor, simple linear | Worker already fast-advanced, log sync | +| Multiple ready successors | Coordinator spawns all | +| No ready successors, all done | -> handleComplete | +| No ready successors, some pending | Wait (blocked tasks) | + +--- + +## Error Handling + +| Scenario | Resolution | +|----------|------------| +| Worker callback with unknown role | Log warning, ignore | +| Task not found for callback | Log error, check TaskList | +| Spawn fails | Mark task as failed, log error, try next ready task | +| All tasks failed | Report failure, execute completion action | diff --git a/.claude/skills/team-ux-improve/roles/coordinator/role.md b/.claude/skills/team-ux-improve/roles/coordinator/role.md new file mode 100644 index 00000000..3e1efa46 --- /dev/null +++ b/.claude/skills/team-ux-improve/roles/coordinator/role.md @@ -0,0 +1,220 @@ +# Coordinator Role + +## Identity + +- **Name**: coordinator +- **Type**: Orchestration +- **Responsibility**: Orchestrate UX improvement pipeline, spawn workers, monitor progress, handle completion + +## Boundaries + +### MUST + +- Parse user requirements (project path, framework) +- Create team and session structure +- Generate task chain via dispatch.md +- Spawn team-worker agents with correct role-spec paths +- Monitor worker callbacks and advance pipeline +- Execute completion action when pipeline finishes +- Handle user commands (check, resume) + +### MUST NOT + +- Execute worker domain logic directly +- Skip completion action +- Spawn workers as general-purpose agents (must use team-worker) + +--- + +## Command Execution Protocol + +When coordinator needs to execute a command (dispatch, monitor): + +1. **Read the command file**: `roles/coordinator/commands/.md` +2. **Follow the workflow** defined in the command file (Phase 2-4 structure) +3. **Commands are inline execution guides** - NOT separate agents or subprocesses +4. **Execute synchronously** - complete the command workflow before proceeding + +Example: +``` +Phase 3 needs task dispatch + -> Read roles/coordinator/commands/dispatch.md + -> Execute Phase 2 (Context Loading) + -> Execute Phase 3 (Task Chain Creation) + -> Execute Phase 4 (Validation) + -> Continue to Phase 4 +``` + +--- + +## Entry Router + +When coordinator is invoked, detect invocation type: + +| Detection | Condition | Handler | +|-----------|-----------|---------| +| Worker callback | Message contains `[scanner]`, `[diagnoser]`, etc. | -> handleCallback | +| Status check | Arguments contain "check" or "status" | -> handleCheck | +| Manual resume | Arguments contain "resume" or "continue" | -> handleResume | +| Interrupted session | Active/paused session exists | -> Phase 0 (Resume Check) | +| New session | None of above | -> Phase 1 (Requirement Clarification) | + +For callback/check/resume: load `commands/monitor.md` and execute handler, then STOP. + +### Router Implementation + +1. **Load session context** (if exists): + - Scan `.workflow/.team/ux-improve-*/.msg/meta.json` for active/paused sessions + - If found, extract known worker roles from meta.json or SKILL.md Role Registry + +2. **Parse $ARGUMENTS** for detection keywords + +3. **Route to handler**: + - For monitor handlers: Read `commands/monitor.md`, execute matched handler, STOP + - For Phase 0: Execute Session Resume Check below + - For Phase 1: Execute Requirement Clarification below + +--- + +## Phase 0: Session Resume Check + +**Trigger**: Interrupted session detected (active/paused session exists) + +1. Load session meta.json +2. Audit TaskList -> reconcile session state vs task status +3. Reset in_progress tasks -> pending (interrupted tasks) +4. Check for fast-advance orphans (tasks spawned but not in TaskList) +5. AskUserQuestion: "Resume session ? [Yes/No/New]" + - Yes -> Phase 4 (coordination loop) + - No -> Archive old session -> Phase 1 + - New -> Keep old session paused -> Phase 1 + +--- + +## Phase 1: Requirement Clarification + +1. Parse $ARGUMENTS for project path and framework flag +2. If project path missing -> AskUserQuestion for path +3. If framework not specified -> detect from package.json or ask user +4. Validate project path exists +5. Store: project_path, framework (react|vue) + +--- + +## Phase 2: Team Creation + +1. Generate session ID: `ux-improve-` +2. Create session directory structure: + ``` + .workflow/.team// + ├── .msg/ + ├── artifacts/ + ├── explorations/ + └── wisdom/ + ``` +3. TeamCreate(team_name="ux-improve") +4. Initialize meta.json with pipeline config: + ``` + team_msg(operation="log", session_id=, from="coordinator", + type="state_update", + data={ + pipeline_mode: "standard", + pipeline_stages: ["scan", "diagnose", "design", "implement", "test"], + project_path: , + framework: + }) + ``` + +--- + +## Phase 3: Task Chain Creation + +Delegate to dispatch.md: + +1. Read `roles/coordinator/commands/dispatch.md` +2. Execute Phase 2 (Context Loading) +3. Execute Phase 3 (Task Chain Creation) +4. Execute Phase 4 (Validation) + +--- + +## Phase 4: Spawn-and-Stop Coordination + +1. Find ready tasks (status=pending, no blockedBy or all blockedBy completed) +2. For each ready task: + - Extract role from task owner + - Spawn team-worker agent with role-spec path + - Use spawn template from SKILL.md +3. STOP (idle, wait for worker callbacks) + +**Spawn template**: +``` +Agent({ + subagent_type: "team-worker", + description: "Spawn worker", + team_name: "ux-improve", + name: "", + run_in_background: true, + prompt: `## Role Assignment +role: +role_spec: .claude/skills/team-ux-improve/role-specs/.md +session: +session_id: +team_name: ux-improve +requirement: +inner_loop: + +Read role_spec file to load Phase 2-4 domain instructions. +Execute built-in Phase 1 (task discovery) -> role-spec Phase 2-4 -> built-in Phase 5 (report).` +}) +``` + +**Inner loop roles**: implementer (inner_loop: true) + +--- + +## Phase 5: Report + Completion Action + +1. Load session state -> count completed tasks, duration +2. List deliverables with output paths: + - artifacts/scan-report.md + - artifacts/diagnosis.md + - artifacts/design-guide.md + - artifacts/fixes/ + - artifacts/test-report.md +3. **Completion Action** (interactive mode): + +``` +AskUserQuestion({ + questions: [{ + question: "Team pipeline complete. What would you like to do?", + header: "Completion", + multiSelect: false, + options: [ + { label: "Archive & Clean (Recommended)", description: "Archive session, clean up tasks and team resources" }, + { label: "Keep Active", description: "Keep session active for follow-up work or inspection" }, + { label: "Export Results", description: "Export deliverables to a specified location, then clean" } + ] + }] +}) +``` + +4. Handle user choice: + +| Choice | Steps | +|--------|-------| +| Archive & Clean | TaskList -> verify all completed -> update session status="completed" -> TeamDelete("ux-improve") -> output final summary with artifact paths | +| Keep Active | Update session status="paused" -> output: "Session paused. Resume with: Skill(skill='team-ux-improve', args='resume')" | +| Export Results | AskUserQuestion for target directory -> copy all artifacts -> Archive & Clean flow | + +--- + +## Error Handling + +| Scenario | Resolution | +|----------|------------| +| Project path invalid | Re-prompt user for valid path | +| Framework detection fails | AskUserQuestion for framework selection | +| Worker spawn fails | Log error, mark task as failed, continue with other tasks | +| TeamCreate fails | Error: cannot proceed without team | +| Completion action timeout (5 min) | Default to Keep Active | diff --git a/.claude/skills/team-ux-improve/specs/team-config.json b/.claude/skills/team-ux-improve/specs/team-config.json new file mode 100644 index 00000000..53efc366 --- /dev/null +++ b/.claude/skills/team-ux-improve/specs/team-config.json @@ -0,0 +1,181 @@ +{ + "version": "5.0.0", + "team_name": "ux-improve", + "team_display_name": "UX Improve", + "team_purpose": "Systematically discover and fix UI/UX interaction issues including unresponsive buttons, missing feedback, and state refresh problems", + "skill_name": "team-ux-improve", + "skill_path": ".claude/skills/team-ux-improve/", + "worker_agent": "team-worker", + "pipeline_type": "Standard", + "completion_action": "interactive", + "has_inline_discuss": false, + "has_shared_explore": true, + "roles": [ + { + "name": "coordinator", + "display_name": "Coordinator", + "type": "orchestrator", + "responsibility_type": "orchestration", + "role_spec": "roles/coordinator/role.md", + "task_prefix": null, + "inner_loop": false, + "allowed_tools": ["Agent", "AskUserQuestion", "Read", "Write", "Bash", "Glob", "Grep", "TaskList", "TaskGet", "TaskUpdate", "TaskCreate", "TeamCreate", "TeamDelete", "SendMessage", "mcp__ccw-tools__team_msg"], + "description": "Orchestrates the UX improvement pipeline, spawns workers, monitors progress" + }, + { + "name": "scanner", + "display_name": "UI Scanner", + "type": "worker", + "responsibility_type": "read_only_analysis", + "role_spec": "role-specs/scanner.md", + "task_prefix": "SCAN", + "inner_loop": false, + "allowed_tools": ["Read", "Grep", "Glob", "Bash", "mcp__ace-tool__search_context", "mcp__ccw-tools__read_file", "mcp__ccw-tools__team_msg", "TaskList", "TaskGet", "TaskUpdate", "SendMessage"], + "description": "Scans UI components to identify interaction issues (unresponsive buttons, missing feedback, state not refreshing)", + "frontmatter": { + "prefix": "SCAN", + "inner_loop": false, + "message_types": { + "success": "scan_complete", + "error": "error" + } + } + }, + { + "name": "diagnoser", + "display_name": "State Diagnoser", + "type": "worker", + "responsibility_type": "orchestration", + "role_spec": "role-specs/diagnoser.md", + "task_prefix": "DIAG", + "inner_loop": false, + "allowed_tools": ["Read", "Grep", "Bash", "mcp__ace-tool__search_context", "mcp__ccw-tools__read_file", "mcp__ccw-tools__team_msg", "TaskList", "TaskGet", "TaskUpdate", "SendMessage"], + "description": "Diagnoses root causes of UI issues: state management problems, event binding failures, async handling errors", + "frontmatter": { + "prefix": "DIAG", + "inner_loop": false, + "message_types": { + "success": "diag_complete", + "error": "error" + } + } + }, + { + "name": "designer", + "display_name": "UX Designer", + "type": "worker", + "responsibility_type": "orchestration", + "role_spec": "role-specs/designer.md", + "task_prefix": "DESIGN", + "inner_loop": false, + "allowed_tools": ["Read", "Write", "Bash", "mcp__ccw-tools__read_file", "mcp__ccw-tools__write_file", "mcp__ccw-tools__team_msg", "TaskList", "TaskGet", "TaskUpdate", "SendMessage"], + "description": "Designs feedback mechanisms (loading/error/success states) and state management patterns (React/Vue reactive updates)", + "frontmatter": { + "prefix": "DESIGN", + "inner_loop": false, + "message_types": { + "success": "design_complete", + "error": "error" + } + } + }, + { + "name": "implementer", + "display_name": "Code Implementer", + "type": "worker", + "responsibility_type": "code_generation", + "role_spec": "role-specs/implementer.md", + "task_prefix": "IMPL", + "inner_loop": true, + "allowed_tools": ["Read", "Write", "Edit", "Bash", "mcp__ccw-tools__read_file", "mcp__ccw-tools__write_file", "mcp__ccw-tools__edit_file", "mcp__ccw-tools__team_msg", "TaskList", "TaskGet", "TaskUpdate", "SendMessage"], + "description": "Generates executable fix code with proper state management, event handling, and UI feedback bindings", + "frontmatter": { + "prefix": "IMPL", + "inner_loop": true, + "message_types": { + "success": "impl_complete", + "error": "error" + } + } + }, + { + "name": "tester", + "display_name": "Test Engineer", + "type": "worker", + "responsibility_type": "validation", + "role_spec": "role-specs/tester.md", + "task_prefix": "TEST", + "inner_loop": false, + "allowed_tools": ["Read", "Write", "Bash", "mcp__ccw-tools__read_file", "mcp__ccw-tools__write_file", "mcp__ccw-tools__team_msg", "TaskList", "TaskGet", "TaskUpdate", "SendMessage"], + "description": "Generates test cases to verify fixes (loading states, error handling, state updates)", + "frontmatter": { + "prefix": "TEST", + "inner_loop": false, + "message_types": { + "success": "test_complete", + "error": "error", + "fix": "fix_required" + } + } + } + ], + "utility_members": [ + { + "name": "explorer", + "display_name": "Codebase Explorer", + "role_spec": "role-specs/explorer.md", + "callable_by": "coordinator", + "purpose": "Explore codebase for UI component patterns, state management conventions, and framework-specific patterns", + "allowed_tools": ["Read", "Grep", "Glob", "Bash", "mcp__ace-tool__search_context", "mcp__ccw-tools__read_file", "mcp__ccw-tools__team_msg"], + "frontmatter": { + "prefix": "EXPLORE", + "inner_loop": false, + "message_types": { + "success": "explore_complete", + "error": "error" + } + } + } + ], + "pipeline": { + "stages": [ + { + "stage_id": 1, + "stage_name": "UI Scanning", + "roles": ["scanner"], + "dependencies": [], + "description": "Scan UI components for interaction issues" + }, + { + "stage_id": 2, + "stage_name": "Root Cause Diagnosis", + "roles": ["diagnoser"], + "dependencies": ["scanner"], + "description": "Diagnose root causes of identified issues" + }, + { + "stage_id": 3, + "stage_name": "Solution Design", + "roles": ["designer"], + "dependencies": ["diagnoser"], + "description": "Design feedback mechanisms and state management solutions" + }, + { + "stage_id": 4, + "stage_name": "Code Implementation", + "roles": ["implementer"], + "dependencies": ["designer"], + "description": "Generate fix code with proper state handling" + }, + { + "stage_id": 5, + "stage_name": "Test Validation", + "roles": ["tester"], + "dependencies": ["implementer"], + "description": "Generate and run tests to verify fixes" + } + ], + "diagram": "scanner (SCAN) → diagnoser (DIAG) → designer (DESIGN) → implementer (IMPL) → tester (TEST)", + "fast_advance_eligible": ["scanner→diagnoser", "diagnoser→designer", "designer→implementer"] + } +} diff --git a/ccw/frontend/src/components/shared/SkillCreateDialog.tsx b/ccw/frontend/src/components/shared/SkillCreateDialog.tsx index 2a3ed796..690a1633 100644 --- a/ccw/frontend/src/components/shared/SkillCreateDialog.tsx +++ b/ccw/frontend/src/components/shared/SkillCreateDialog.tsx @@ -16,6 +16,7 @@ import { XCircle, Loader2, Info, + FolderOpen, } from 'lucide-react'; import { Dialog, @@ -31,6 +32,7 @@ import { Textarea } from '@/components/ui/Textarea'; import { Label } from '@/components/ui/Label'; import { validateSkillImport, createSkill } from '@/lib/api'; import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore'; +import { FloatingFileBrowser } from '@/components/terminal-dashboard/FloatingFileBrowser'; import { cn } from '@/lib/utils'; export interface SkillCreateDialogProps { @@ -58,7 +60,6 @@ export function SkillCreateDialog({ open, onOpenChange, onCreated, cliType = 'cl // Import mode state const [sourcePath, setSourcePath] = useState(''); - const [customName, setCustomName] = useState(''); const [validationResult, setValidationResult] = useState(null); const [isValidating, setIsValidating] = useState(false); @@ -68,16 +69,19 @@ export function SkillCreateDialog({ open, onOpenChange, onCreated, cliType = 'cl const [isCreating, setIsCreating] = useState(false); + // File browser state + const [isFileBrowserOpen, setIsFileBrowserOpen] = useState(false); + const resetState = useCallback(() => { setMode('import'); setLocation('project'); setSourcePath(''); - setCustomName(''); setValidationResult(null); setIsValidating(false); setSkillName(''); setDescription(''); setIsCreating(false); + setIsFileBrowserOpen(false); }, []); const handleOpenChange = useCallback((open: boolean) => { @@ -122,7 +126,7 @@ export function SkillCreateDialog({ open, onOpenChange, onCreated, cliType = 'cl mode, location, sourcePath: mode === 'import' ? sourcePath.trim() : undefined, - skillName: mode === 'import' ? (customName.trim() || undefined) : skillName.trim(), + skillName: mode === 'cli-generate' ? skillName.trim() : undefined, description: mode === 'cli-generate' ? description.trim() : undefined, generationType: mode === 'cli-generate' ? 'description' : undefined, projectPath, @@ -142,7 +146,7 @@ export function SkillCreateDialog({ open, onOpenChange, onCreated, cliType = 'cl } finally { setIsCreating(false); } - }, [mode, location, sourcePath, customName, skillName, description, validationResult, projectPath, handleOpenChange, onCreated, formatMessage]); + }, [mode, location, sourcePath, skillName, description, validationResult, projectPath, handleOpenChange, onCreated, formatMessage]); const canCreate = mode === 'import' ? sourcePath.trim() && validationResult?.valid && !isCreating @@ -250,32 +254,30 @@ export function SkillCreateDialog({ open, onOpenChange, onCreated, cliType = 'cl
- { - setSourcePath(e.target.value); - setValidationResult(null); - }} - placeholder={formatMessage({ id: 'skills.create.sourcePathPlaceholder' })} - className="font-mono text-sm" - /> +
+ { + setSourcePath(e.target.value); + setValidationResult(null); + }} + placeholder={formatMessage({ id: 'skills.create.sourcePathPlaceholder' })} + className="font-mono text-sm flex-1" + /> + +

{formatMessage({ id: 'skills.create.sourcePathHint' })}

-
- - setCustomName(e.target.value)} - placeholder={formatMessage({ id: 'skills.create.customNamePlaceholder' })} - /> -
- {/* Validation Result */} {isValidating && (
@@ -401,6 +403,19 @@ export function SkillCreateDialog({ open, onOpenChange, onCreated, cliType = 'cl + + {/* File Browser for selecting source folder */} + setIsFileBrowserOpen(false)} + rootPath={projectPath} + onInsertPath={(path) => { + setSourcePath(path); + setValidationResult(null); + setIsFileBrowserOpen(false); + }} + initialSelectedPath={sourcePath || null} + /> ); } diff --git a/ccw/src/tools/cli-executor-core.ts b/ccw/src/tools/cli-executor-core.ts index 75e089a7..65adc6e3 100644 --- a/ccw/src/tools/cli-executor-core.ts +++ b/ccw/src/tools/cli-executor-core.ts @@ -1340,11 +1340,30 @@ async function executeCliTool( export const schema: ToolSchema = { name: 'cli_executor', description: `Execute external CLI tools (gemini/qwen/codex) with unified interface. -Modes: -- analysis: Read-only operations (default) -- write: File modifications allowed -- auto: Full autonomous operations (codex only) -- review: Code review mode (codex uses 'codex review' subcommand, others accept but no operation change)`, + +**Required Parameters:** + **tool** (string): CLI tool to execute - "gemini" | "qwen" | "codex". + **prompt** (string): Prompt to send to the CLI tool. + +**Optional Parameters:** + *mode* (string): Execution mode (default: "analysis"). + - "analysis": Read-only operations, no file modifications. + - "write": File modifications allowed. + - "auto": Full autonomous operations (codex only). + - "review": Code review mode (codex uses 'codex review' subcommand). + *model* (string): Model override (tool-specific, e.g., "gemini-2.5-pro"). + *cd* (string): Working directory for execution. + *includeDirs* (string): Additional directories (comma-separated). + +**Examples:** + cli_executor(tool="gemini", prompt="Analyze the auth module") + cli_executor(tool="gemini", prompt="Fix the bug", mode="write") + cli_executor(tool="codex", prompt="Review changes", mode="review") + cli_executor(tool="qwen", prompt="Implement feature", mode="write", cd="src/auth") + +**Mode-Tool Compatibility:** + - gemini/qwen: analysis, write + - codex: analysis, write, auto, review`, inputSchema: { type: 'object', properties: { diff --git a/ccw/src/tools/core-memory.ts b/ccw/src/tools/core-memory.ts index 8baaaac0..793a5daa 100644 --- a/ccw/src/tools/core-memory.ts +++ b/ccw/src/tools/core-memory.ts @@ -588,27 +588,60 @@ async function execute(params: Params): Promise { // Tool schema for MCP export const schema: ToolSchema = { name: 'core_memory', - description: `Core memory management for strategic context. + description: `Core memory management for strategic context. Choose an operation and provide its required parameters. -Usage: - core_memory(operation="list") # List all memories - core_memory(operation="list", tags=["auth","api"]) # List memories with specific tags - core_memory(operation="import", text="important context") # Import text as new memory - core_memory(operation="export", id="CMEM-xxx") # Export memory as plain text - core_memory(operation="summary", id="CMEM-xxx") # Generate AI summary - core_memory(operation="embed", source_id="CMEM-xxx") # Generate embeddings for memory - core_memory(operation="search", query="authentication") # Search memories semantically - core_memory(operation="embed_status") # Check embedding status - core_memory(operation="extract") # Trigger batch memory extraction (V2) - core_memory(operation="extract_status") # Check extraction pipeline status - core_memory(operation="consolidate") # Trigger memory consolidation (V2) - core_memory(operation="consolidate_status") # Check consolidation status - core_memory(operation="jobs") # List all V2 pipeline jobs +**Operations & Required Parameters:** -Path parameter (highest priority): - core_memory(operation="list", path="/path/to/project") # Use specific project path +* **list**: List all memories. + * *limit* (number): Max results (default: 100). + * *tags* (array): Filter by tags (AND logic). + * *path* (string): Project path (overrides auto-detection). -Memory IDs use format: CMEM-YYYYMMDD-HHMMSS`, +* **import**: Import text as new memory. + * **text** (string, **REQUIRED**): Content to import. + * *path* (string): Project path. + +* **export**: Export memory as plain text. + * **id** (string, **REQUIRED**): Memory ID (e.g., CMEM-20260305-120000). + * *path* (string): Project path. + +* **summary**: Generate AI summary for a memory. + * **id** (string, **REQUIRED**): Memory ID. + * *tool* (string): AI tool for summary ("gemini" or "qwen", default: "gemini"). + * *path* (string): Project path. + +* **search**: Search memories semantically. + * **query** (string, **REQUIRED**): Search query. + * *top_k* (number): Max results (default: 10). + * *min_score* (number): Min similarity score (default: 0.3). + * *source_type* (string): Filter by type ("core_memory" | "workflow" | "cli_history"). + * *path* (string): Project path. + +* **embed**: Generate embeddings for memory chunks. + * *source_id* (string): Specific memory to embed (optional, embeds all if omitted). + * *batch_size* (number): Batch size (default: 8). + * *force* (boolean): Force re-embedding (default: false). + * *path* (string): Project path. + +* **embed_status**: Check embedding status. (No required params) + +* **extract**: Trigger batch memory extraction (V2, fire-and-forget). + * *max_sessions* (number): Max sessions to process. + * *path* (string): Project path. + +* **extract_status**: Check extraction pipeline status. (No required params) + +* **consolidate**: Trigger memory consolidation (V2, fire-and-forget). + * *path* (string): Project path. + +* **consolidate_status**: Check consolidation status. (No required params) + +* **jobs**: List all V2 pipeline jobs. + * *kind* (string): Filter by job kind (e.g., "extraction", "consolidation"). + * *status_filter* (string): Filter by status ("pending" | "running" | "done" | "error"). + * *path* (string): Project path. + +**Memory ID Format:** CMEM-YYYYMMDD-HHMMSS (e.g., CMEM-20260305-143022)`, inputSchema: { type: 'object', properties: { diff --git a/ccw/src/tools/edit-file.ts b/ccw/src/tools/edit-file.ts index a9463630..9db16c0a 100644 --- a/ccw/src/tools/edit-file.ts +++ b/ccw/src/tools/edit-file.ts @@ -454,32 +454,37 @@ function executeLineMode(content: string, params: LineModeParams): LineModeResul // Tool schema for MCP export const schema: ToolSchema = { name: 'edit_file', - description: `Edit file using two modes: "update" for text replacement (default) and "line" for line-based operations. + description: `Edit file using ONE of two modes. Provide parameters for only ONE mode - mixing modes causes validation error. -**Update Mode** (default): -- Use oldText/newText for single replacement OR edits for multiple replacements -- Parameters: oldText, newText, replaceAll, dryRun -- Cannot use line mode parameters (operation, line, end_line, text) -- Validation: oldText/newText and edits are mutually exclusive +**Mode 1: update** (default) - Text replacement + **path** (string, **REQUIRED**): File path to edit. + **oldText** (string, **REQUIRED** if not using edits): Text to find and replace. + **newText** (string, **REQUIRED** if using oldText): Replacement text. + * OR use **edits** (array) for multiple replacements: [{oldText:"a", newText:"b"}, ...] + *replaceAll* (boolean): Replace all occurrences (default: false). + *dryRun* (boolean): Preview diff without modifying (default: false). -**Line Mode**: -- Use for precise line-based operations -- Parameters: operation (insert_before/insert_after/replace/delete), line, end_line, text, dryRun -- Cannot use update mode parameters (oldText, newText, edits, replaceAll) + Example: + edit_file(path="file.ts", oldText="old", newText="new") + edit_file(path="file.ts", edits=[{oldText:"a", newText:"b"}]) + edit_file(path="file.ts", oldText="x", newText="y", replaceAll=true) -Usage (update mode - single replacement): - edit_file(path="f.js", oldText="old", newText="new") +**Mode 2: line** - Line-based operations + **path** (string, **REQUIRED**): File path to edit. + **operation** (string, **REQUIRED**): "insert_before" | "insert_after" | "replace" | "delete". + **line** (number, **REQUIRED**): 1-based line number. + *text* (string): Content for insert/replace operations. + *end_line* (number): End line for range operations (replace/delete). + *dryRun* (boolean): Preview diff without modifying (default: false). -Usage (update mode - multiple replacements): - edit_file(path="f.js", edits=[{oldText:"a",newText:"b"},{oldText:"c",newText:"d"}]) + Example: + edit_file(path="file.ts", mode="line", operation="insert_after", line=10, text="new line") + edit_file(path="file.ts", mode="line", operation="delete", line=5, end_line=8) -Usage (line mode): - edit_file(path="f.js", mode="line", operation="insert_after", line=10, text="new line") - edit_file(path="f.js", mode="line", operation="delete", line=5, end_line=8) - -Options: dryRun=true (preview diff), replaceAll=true (update mode only) - -**Important**: Each mode only accepts its own parameters. Providing parameters from both modes will cause a validation error.`, +**⚠️ MUTUAL EXCLUSIVITY:** +- update mode: Use ONLY oldText/newText OR edits, plus replaceAll, dryRun +- line mode: Use ONLY operation, line, end_line, text, dryRun +- DO NOT mix parameters from both modes`, inputSchema: { type: 'object', properties: { diff --git a/ccw/src/tools/session-manager.ts b/ccw/src/tools/session-manager.ts index fcbf6fb7..1c55314d 100644 --- a/ccw/src/tools/session-manager.ts +++ b/ccw/src/tools/session-manager.ts @@ -1022,15 +1022,51 @@ async function execute(params: Params): Promise { export const schema: ToolSchema = { name: 'session_manager', - description: `Workflow session management. + description: `Workflow session management. Choose an operation and provide its required parameters. -Usage: - session_manager(operation="init", type="workflow", description="...") - session_manager(operation="list", location="active|archived|both") - session_manager(operation="read", sessionId="WFS-xxx", contentType="plan|task|summary") - session_manager(operation="write", sessionId="WFS-xxx", contentType="plan", content={...}) - session_manager(operation="archive", sessionId="WFS-xxx") - session_manager(operation="stats", sessionId="WFS-xxx")`, +**Operations & Required Parameters:** + +* **init**: Initialize a new workflow session. + * **metadata** (object, **REQUIRED**): Session metadata with project, type, description. + * Returns: New session ID. + +* **list**: List workflow sessions. + * *location* (string): Filter by "active" | "archived" | "both" (default: "both"). + * *include_metadata* (boolean): Include session metadata (default: false). + +* **read**: Read content from a session file. + * **session_id** (string, **REQUIRED**): Session ID (e.g., WFS-my-session). + * **content_type** (string, **REQUIRED**): Type to read - "plan" | "task" | "summary" | "session" | "process" | "chat" | "brainstorm" | "review-dim" | "review-iter" | "review-fix" | "todo" | "context". + * *path_params* (object): Dynamic path parameters (task_id, filename, dimension, iteration). + +* **write**: Write content to a session file. + * **session_id** (string, **REQUIRED**): Session ID. + * **content_type** (string, **REQUIRED**): Type to write (see read operation). + * **content** (object, **REQUIRED**): Content to write (object for JSON, string for text). + * *path_params* (object): Dynamic path parameters. + +* **update**: Update existing content. + * **session_id** (string, **REQUIRED**): Session ID. + * **content_type** (string, **REQUIRED**): Type to update. + * **content** (object, **REQUIRED**): Updated content. + * *path_params* (object): Dynamic path parameters. + +* **archive**: Archive a completed session. + * **session_id** (string, **REQUIRED**): Session ID. + * *update_status* (boolean): Mark status as completed (default: true). + +* **mkdir**: Create session directories. + * **session_id** (string, **REQUIRED**): Session ID. + * **dirs** (array, **REQUIRED**): Directory paths to create. + +* **delete**: Delete a file within a session. + * **session_id** (string, **REQUIRED**): Session ID. + * **file_path** (string, **REQUIRED**): Relative file path to delete. + +* **stats**: Get session statistics. + * **session_id** (string, **REQUIRED**): Session ID. + +**Session ID Format:** WFS-{name}-{date} (e.g., WFS-my-project-2026-03-05)`, inputSchema: { type: 'object', properties: { diff --git a/ccw/src/tools/smart-search.ts b/ccw/src/tools/smart-search.ts index 52fbf542..f2f24178 100644 --- a/ccw/src/tools/smart-search.ts +++ b/ccw/src/tools/smart-search.ts @@ -2032,38 +2032,46 @@ async function executePriorityFallbackMode(params: Params): Promise