feat: Implement UX improvement pipeline with role specifications and task management

- Added role specifications for explorer, implementer, scanner, tester, and diagnoser.
- Created dispatch and monitor commands for orchestrating task execution.
- Defined team configuration for the UX improvement pipeline, including roles and responsibilities.
- Established structured task descriptions for scanning, diagnosing, designing, implementing, and testing UI components.
- Introduced caching mechanisms for exploration results and context accumulation for implementer tasks.
- Enhanced error handling and validation processes across roles.

.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 `<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 |
+
+### 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`
+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>]
+            })
+   ```