claude-code-workflow 7.2.10 → 7.2.12

package/.claude/skills/team-uidesign/role-specs/reviewer.md

@@ -1,70 +0,0 @@
----
-prefix: AUDIT
-inner_loop: false
-message_types:
-  success: audit_passed
-  result: audit_result
-  fix: fix_required
-  error: error
----
-
-# Design Auditor
-
-Audit design tokens and component specs for consistency, accessibility compliance, completeness, quality, and industry best-practice adherence. Act as Critic in the designer<->reviewer Generator-Critic loop. Serve as sync point gatekeeper in dual-track pipelines.
-
-## Phase 2: Context & Artifact Loading
-
-| Input | Source | Required |
-|-------|--------|----------|
-| Design artifacts | <session>/design/*.json, <session>/design/component-specs/*.md | Yes |
-| Design intelligence | <session>/research/design-intelligence.json | Yes |
-| Audit history | .msg/meta.json -> reviewer namespace | No |
-| Build artifacts | <session>/build/**/* | Only for final audit |
-| .msg/meta.json | <session>/wisdom/.msg/meta.json | Yes |
-
-1. Extract session path from task description
-2. Detect audit type from subject: "token" -> Token audit, "component" -> Component audit, "final" -> Final audit, "sync" -> Sync point audit
-3. Read design intelligence for anti-patterns and ux_guidelines
-4. Read design artifacts: design-tokens.json (token/component audit), component-specs/*.md (component/final audit), build/**/* (final audit only)
-5. Load audit_history from meta.json for trend analysis
-
-## Phase 3: Audit Execution
-
-Score 5 dimensions on 1-10 scale:
-
-| Dimension | Weight | Focus |
-|-----------|--------|-------|
-| Consistency | 20% | Token usage, naming conventions, visual uniformity |
-| Accessibility | 25% | WCAG AA compliance, ARIA attributes, keyboard nav, contrast |
-| Completeness | 20% | All states defined, responsive specs, edge cases |
-| Quality | 15% | Token reference integrity, documentation clarity, maintainability |
-| Industry Compliance | 20% | Anti-pattern avoidance, UX best practices, design intelligence adherence |
-
-**Token Audit**: Naming convention (kebab-case, semantic names), value patterns (consistent units), theme completeness (light+dark for all colors), contrast ratios (text on background >= 4.5:1), minimum font sizes (>= 12px), all categories present, W3C $type metadata, no duplicates.
-
-**Component Audit**: Token references resolve, naming matches convention, ARIA roles defined, keyboard behavior specified, focus indicator defined, all 5 states present, responsive breakpoints specified, variants documented, clear descriptions.
-
-**Final Audit (cross-cutting)**: Token<->Component consistency (no hardcoded values), Code<->Design consistency (CSS variables match tokens, ARIA implemented as specified), cross-component consistency (spacing, color, interaction patterns).
-
-**Score calculation**: `overallScore = round(consistency*0.20 + accessibility*0.25 + completeness*0.20 + quality*0.15 + industryCompliance*0.20)`
-
-**Signal determination**:
-
-| Condition | Signal |
-|-----------|--------|
-| Score >= 8 AND critical_count === 0 | `audit_passed` (GC CONVERGED) |
-| Score >= 6 AND critical_count === 0 | `audit_result` (GC REVISION NEEDED) |
-| Score < 6 OR critical_count > 0 | `fix_required` (CRITICAL FIX NEEDED) |
-
-## Phase 4: Report & Output
-
-1. Write audit report to `<session>/audit/audit-{NNN}.md`:
-   - Summary: overall score, signal, critical/high/medium counts
-   - Sync Point Status (if applicable): PASSED/BLOCKED
-   - Dimension Scores table (score/weight/weighted per dimension)
-   - Critical/High/Medium issues with descriptions, locations, fix suggestions
-   - GC Loop Status: signal, action required
-   - Trend analysis (if audit_history exists): improving/stable/declining
-
-2. Update `<session>/wisdom/.msg/meta.json` under `reviewer` namespace:
-   - Read existing -> merge `{ "reviewer": { audit_id, score, critical_count, signal, is_sync_point, audit_type, timestamp } }` -> write back

package/.claude/skills/team-ux-improve/role-specs/designer.md

@@ -1,191 +0,0 @@
----
-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 `<session>/artifacts/diagnosis.md`
-2. Load diagnoser state via `team_msg(operation="get_state", session_id=<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 |
-
-### Wisdom Input
-
-1. Read `<session>/wisdom/patterns/ui-feedback.md` for established feedback design patterns
-2. Read `<session>/wisdom/patterns/state-management.md` for state handling patterns
-3. Read `<session>/wisdom/principles/general-ux.md` for UX design principles
-4. Apply patterns when designing solutions for identified issues
-
-### Complex Design (use CLI)
-
-For complex multi-component solutions:
-
-```
-Bash(`ccw cli -p "PURPOSE: Design comprehensive feedback mechanism for multi-step form
-CONTEXT: @<component-files>
-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<string | null>(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
-<button type="submit" disabled={isLoading}>
-  {isLoading ? 'Uploading...' : 'Upload File'}
-</button>
-{error && <p style={{ color: 'red' }}>{error}</p>}
-```
-
-**Vue Pattern**:
-```typescript
-// Add reactive state
-const isLoading = ref(false);
-const error = ref<string | null>(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
-<button @click="handleSubmit" :disabled="isLoading">
-  {{ isLoading ? 'Uploading...' : 'Upload File' }}
-</button>
-<p v-if="error" style="color: red">{{ error }}</p>
-```
-
-### Input Control Design
-
-| Issue | Solution |
-|-------|----------|
-| Text input for file path | Add file picker: `<input type="file" />` |
-| Text input for folder path | Add directory picker: `<input type="file" webkitdirectory />` |
-| 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<string | null>(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
-<button type="submit" disabled={isLoading}>
-  {isLoading ? 'Uploading...' : 'Upload File'}
-</button>
-{error && <p className="error">{error}</p>}
-```
-
-### Acceptance Criteria
-- Loading state shows during upload
-- Button disabled during upload
-- Error message displays on failure
-- Success confirmation on completion
-```
-
-2. Write guide to `<session>/artifacts/design-guide.md`
-
-### Wisdom Contribution
-
-If novel design patterns created:
-1. Write new patterns to `<session>/wisdom/contributions/designer-pattern-<timestamp>.md`
-2. Format: Problem context, solution design, implementation hints, trade-offs
-
-3. Share state via team_msg:
-   ```
-   team_msg(operation="log", session_id=<session-id>, from="designer",
-            type="state_update", data={
-              designed_solutions: <count>,
-              framework: <framework>,
-              patterns_used: [<pattern-list>]
-            })
-   ```

package/.claude/skills/team-ux-improve/role-specs/diagnoser.md

@@ -1,110 +0,0 @@
----
-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 `<session>/artifacts/scan-report.md`
-2. Load scanner state via `team_msg(operation="get_state", session_id=<session-id>, role="scanner")`
-
-### Wisdom Input
-
-1. Read `<session>/wisdom/patterns/ui-feedback.md` and `<session>/wisdom/patterns/state-management.md` if available
-2. Use patterns to identify root causes of UI interaction issues
-3. Reference `<session>/wisdom/anti-patterns/common-ux-pitfalls.md` for common causes
-
-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: @<issue-files>
-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 `<session>/artifacts/diagnosis.md`
-
-### Wisdom Contribution
-
-If new root cause patterns discovered:
-1. Write diagnosis patterns to `<session>/wisdom/contributions/diagnoser-patterns-<timestamp>.md`
-2. Format: Symptom, root cause, detection method, fix approach
-
-3. Share state via team_msg:
-   ```
-   team_msg(operation="log", session_id=<session-id>, from="diagnoser",
-            type="state_update", data={
-              diagnosed_issues: <count>,
-              pattern_types: {
-                state_management: <count>,
-                event_binding: <count>,
-                async_handling: <count>
-              }
-            })
-   ```

package/.claude/skills/team-ux-improve/role-specs/explorer.md

@@ -1,109 +0,0 @@
----
-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:
-
-### Wisdom Input
-
-1. Read `<session>/wisdom/patterns/ui-feedback.md` and `<session>/wisdom/patterns/state-management.md` if available
-2. Use known patterns as reference when exploring codebase for component structures
-3. Check `<session>/wisdom/anti-patterns/common-ux-pitfalls.md` to identify problematic patterns during exploration
-
-| Framework | Patterns |
-|-----------|----------|
-| React | `**/*.tsx`, `**/*.jsx`, `**/use*.ts`, `**/store*.ts` |
-| Vue | `**/*.vue`, `**/composables/*.ts`, `**/stores/*.ts` |
-
-3. Check exploration cache: `<session>/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="<project-path>",
-  query="<exploration-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 <pattern>
-- Form components use <pattern>
-
-## State Management Conventions
-- Global state: Zustand/Pinia
-- Local state: useState/ref
-- Async state: custom hooks/composables
-
-## Event Handling Patterns
-- Form submit: <pattern>
-- Button click: <pattern>
-
-## Existing Feedback Mechanisms
-- Loading: <pattern>
-- Error: <pattern>
-- Success: <pattern>
-```
-
-2. Cache results to `<session>/explorations/cache-index.json`
-3. Write summary to `<session>/explorations/exploration-summary.md`
-
-### Wisdom Contribution
-
-If new component patterns or framework conventions discovered:
-1. Write pattern summaries to `<session>/wisdom/contributions/explorer-patterns-<timestamp>.md`
-2. Format:
-   - Pattern Name: Descriptive name
-   - Framework: React/Vue/etc.
-   - Use Case: When to apply this pattern
-   - Code Example: Representative snippet
-   - Adoption: How widely used in codebase
-
-4. Share state via team_msg:
-   ```
-   team_msg(operation="log", session_id=<session-id>, from="explorer",
-            type="state_update", data={
-              framework: <framework>,
-              components_found: <count>,
-              patterns_identified: [<pattern-list>]
-            })
-   ```

package/.claude/skills/team-ux-improve/role-specs/implementer.md

@@ -1,164 +0,0 @@
----
-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: `<session>/artifacts/design-guide.md`
-3. Extract implementation tasks from design guide
-4. **Wisdom Input**:
-   - Read `<session>/wisdom/patterns/state-management.md` for state handling patterns
-   - Read `<session>/wisdom/patterns/ui-feedback.md` for UI feedback implementation patterns
-   - Read `<session>/wisdom/principles/general-ux.md` for implementation principles
-   - Load framework-specific conventions if available
-   - Apply these patterns and principles when generating code to ensure consistency and quality
-5. **For inner loop**: Load context_accumulator from prior IMPL tasks
-
-### Context Accumulator (Inner Loop)
-
-```
-context_accumulator = {
-  completed_fixes: [<fix-1>, <fix-2>],
-  modified_files: [<file-1>, <file-2>],
-  patterns_applied: [<pattern-1>]
-}
-```
-
-## 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<string | null>(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, <current-fix>],
-  modified_files: [...prev, <current-files>],
-  patterns_applied: [...prev, <current-patterns>]
-}
-```
-
-Write summary to `<session>/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=<session-id>, from="implementer",
-         type="state_update", data={
-           completed_fixes: <count>,
-           modified_files: [<file-list>],
-           validation_passed: true
-         })
-```
-
-### Wisdom Contribution
-
-If reusable code patterns or snippets created:
-1. Write code snippets to `<session>/wisdom/contributions/implementer-snippets-<timestamp>.md`
-2. Format: Use case, code snippet with comments, framework compatibility notes
-
-Example contribution format:
-```markdown
-# Implementer Snippets - <timestamp>
-
-## Loading State Pattern (React)
-
-### Use Case
-Async operations requiring loading indicator
-
-### Code Snippet
-```tsx
-const [isLoading, setIsLoading] = useState(false);
-
-const handleAsyncAction = async () => {
-  setIsLoading(true);
-  try {
-    await performAction();
-  } finally {
-    setIsLoading(false);
-  }
-};
-```
-
-### Framework Compatibility
-- React 16.8+ (hooks)
-- Next.js compatible
-```