claude-code-workflow 7.2.10 → 7.2.11

package/.claude/skills/team-testing/role-specs/generator.md

@@ -1,96 +0,0 @@
----
-prefix: TESTGEN
-inner_loop: true
-message_types:
-  success: tests_generated
-  revision: tests_revised
-  error: error
----
-
-# Test Generator
-
-Generate test code by layer (L1 unit / L2 integration / L3 E2E). Acts as the Generator in the Generator-Critic loop. Supports revision mode for GC loop iterations.
-
-## Phase 2: Context Loading
-
-| Input | Source | Required |
-|-------|--------|----------|
-| Task description | From task subject/description | Yes |
-| Session path | Extracted from task description | Yes |
-| Test strategy | <session>/strategy/test-strategy.md | Yes |
-| .msg/meta.json | <session>/wisdom/.msg/meta.json | No |
-
-1. Extract session path and layer from task description
-2. Read test strategy:
-
-```
-Read("<session>/strategy/test-strategy.md")
-```
-
-3. Read source files to test (from strategy priority_files, limit 20)
-4. Read .msg/meta.json for framework and scope context
-
-5. Detect revision mode:
-
-| Condition | Mode |
-|-----------|------|
-| Task subject contains "fix" or "revised" | Revision -- load previous failures |
-| Otherwise | Fresh generation |
-
-For revision mode:
-- Read latest result file for failure details
-- Read effective test patterns from .msg/meta.json
-
-6. Read wisdom files if available
-
-## Phase 3: Test Generation
-
-**Strategy selection by complexity**:
-
-| File Count | Strategy |
-|------------|----------|
-| <= 3 files | Direct: inline Write/Edit |
-| 3-5 files | Single code-developer agent |
-| > 5 files | Batch: group by module, one agent per batch |
-
-**Direct generation** (per source file):
-1. Generate test path: `<session>/tests/<layer>/<test-file>`
-2. Generate test code: happy path, edge cases, error handling
-3. Write test file
-
-**CLI delegation** (medium/high complexity):
-
-```
-Bash({
-  command: `ccw cli -p "PURPOSE: Generate <layer> tests using <framework> to achieve coverage target; success = all priority files covered with quality tests
-TASK: • Analyze source files • Generate test cases (happy path, edge cases, errors) • Write test files with proper structure • Ensure import resolution
-MODE: write
-CONTEXT: @<source-files> @<session>/strategy/test-strategy.md | Memory: Framework: <framework>, Layer: <layer>, Round: <round>
-<if-revision: Previous failures: <failure-details>
-Effective patterns: <patterns-from-meta>>
-EXPECTED: Test files in <session>/tests/<layer>/ with: proper test structure, comprehensive coverage, correct imports, framework conventions
-CONSTRAINTS: Follow test strategy priorities | Use framework best practices | <layer>-appropriate assertions
-Source files to test:
-<file-list-with-content>" --tool gemini --mode write --cd <session>`,
-  run_in_background: false
-})
-```
-
-**Output verification**:
-
-```
-Glob("<session>/tests/<layer>/**/*")
-```
-
-## Phase 4: Self-Validation & State Update
-
-**Validation checks**:
-
-| Check | Method | Action on Fail |
-|-------|--------|----------------|
-| Syntax | `tsc --noEmit` or equivalent | Auto-fix imports/types |
-| File count | Count generated files | Report issue |
-| Import resolution | Check broken imports | Fix import paths |
-
-Update `<session>/wisdom/.msg/meta.json` under `generator` namespace:
-- Merge `{ "generator": { test_files, layer, round, is_revision } }`

package/.claude/skills/team-testing/role-specs/strategist.md

@@ -1,82 +0,0 @@
----
-prefix: STRATEGY
-inner_loop: false
-message_types:
-  success: strategy_ready
-  error: error
----
-
-# Test Strategist
-
-Analyze git diff, determine test layers, define coverage targets, and formulate test strategy with prioritized execution order.
-
-## Phase 2: Context & Environment Detection
-
-| Input | Source | Required |
-|-------|--------|----------|
-| Task description | From task subject/description | Yes |
-| Session path | Extracted from task description | Yes |
-| .msg/meta.json | <session>/wisdom/.msg/meta.json | No |
-
-1. Extract session path and scope from task description
-2. Get git diff for change analysis:
-
-```
-Bash("git diff HEAD~1 --name-only 2>/dev/null || git diff --cached --name-only")
-Bash("git diff HEAD~1 -- <changed-files> 2>/dev/null || git diff --cached -- <changed-files>")
-```
-
-3. Detect test framework from project files:
-
-| Signal File | Framework | Test Pattern |
-|-------------|-----------|-------------|
-| jest.config.js/ts | Jest | `**/*.test.{ts,tsx,js}` |
-| vitest.config.ts/js | Vitest | `**/*.test.{ts,tsx}` |
-| pytest.ini / pyproject.toml | Pytest | `**/test_*.py` |
-| No detection | Default | Jest patterns |
-
-4. Scan existing test patterns:
-
-```
-Glob("**/*.test.*")
-Glob("**/*.spec.*")
-```
-
-5. Read .msg/meta.json if exists for session context
-
-## Phase 3: Strategy Formulation
-
-**Change analysis dimensions**:
-
-| Change Type | Analysis | Priority |
-|-------------|----------|----------|
-| New files | Need new tests | High |
-| Modified functions | Need updated tests | Medium |
-| Deleted files | Need test cleanup | Low |
-| Config changes | May need integration tests | Variable |
-
-**Strategy output structure**:
-
-1. **Change Analysis Table**: File, Change Type, Impact, Priority
-2. **Test Layer Recommendations**:
-   - L1 Unit: Scope, Coverage Target, Priority Files, Patterns
-   - L2 Integration: Scope, Coverage Target, Integration Points
-   - L3 E2E: Scope, Coverage Target, User Scenarios
-3. **Risk Assessment**: Risk, Probability, Impact, Mitigation
-4. **Test Execution Order**: Prioritized sequence
-
-Write strategy to `<session>/strategy/test-strategy.md`
-
-**Self-validation**:
-
-| Check | Criteria | Fallback |
-|-------|----------|----------|
-| Has L1 scope | L1 scope not empty | Default to all changed files |
-| Has coverage targets | L1 target > 0 | Use defaults (80/60/40) |
-| Has priority files | List not empty | Use all changed files |
-
-## Phase 4: Wisdom & State Update
-
-1. Write discoveries to `<session>/wisdom/conventions.md` (detected framework, patterns)
-2. Update `<session>/wisdom/.msg/meta.json` under `strategist` namespace:
-   - Read existing -> merge `{ "strategist": { framework, layers, coverage_targets, priority_files, risks } }` -> write back

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

@@ -1,72 +0,0 @@
----
-prefix: DESIGN
-inner_loop: false
-message_types:
-  success: design_ready
-  revision: design_revision
-  progress: design_progress
-  error: error
----
-
-# Design Token & Component Spec Author
-
-Define visual language through design tokens (W3C Design Tokens Format) and component specifications. Consume design intelligence from researcher. Act as Generator in the designer<->reviewer Generator-Critic loop.
-
-## Phase 2: Context & Artifact Loading
-
-| Input | Source | Required |
-|-------|--------|----------|
-| Research artifacts | <session>/research/*.json | Yes |
-| Design intelligence | <session>/research/design-intelligence.json | Yes |
-| .msg/meta.json | <session>/wisdom/.msg/meta.json | Yes |
-| Audit feedback | <session>/audit/audit-*.md | Only for GC fix tasks |
-
-1. Extract session path from task description
-2. Read research findings: design-system-analysis.json, component-inventory.json, accessibility-audit.json
-3. Read design intelligence: recommended colors/typography/style, anti-patterns, ux_guidelines
-4. Detect task type from subject: "token" -> Token design, "component" -> Component spec, "fix"/"revision" -> GC fix
-5. If GC fix task: read latest audit feedback from audit files
-
-## Phase 3: Design Execution
-
-**Token System Design (DESIGN-001)**:
-- Define complete token system following W3C Design Tokens Format
-- Categories: Color (primary, secondary, background, surface, text, semantic), Typography (font-family, font-size, font-weight, line-height), Spacing (xs-2xl), Shadow (sm/md/lg), Border (radius, width), Breakpoint (mobile/tablet/desktop/wide)
-- All color tokens must have light/dark variants using `$value: { light: ..., dark: ... }`
-- Integrate design intelligence: recommended.colors -> color tokens, recommended.typography -> font stacks
-- Document anti-patterns from design intelligence for implementer reference
-- Output: `<session>/design/design-tokens.json`
-
-**Component Specification (DESIGN-002)**:
-- Define component specs consuming design tokens
-- Each spec contains: Overview (type: atom/molecule/organism, purpose), Design Tokens Consumed (token -> usage -> value reference), States (default/hover/focus/active/disabled), Responsive Behavior (changes per breakpoint), Accessibility (role, ARIA, keyboard, focus indicator, contrast), Variants, Anti-Patterns, Implementation Hints
-- All interactive states required: default, hover (background/opacity change), focus (outline 2px solid, offset 2px), active (pressed), disabled (opacity 0.5, cursor not-allowed)
-- Output: `<session>/design/component-specs/{component-name}.md`
-
-**GC Fix Mode (DESIGN-fix-N)**:
-- Parse audit feedback for specific issues
-- Re-read affected design artifacts; apply fixes (token value adjustments, missing states, accessibility gaps, naming fixes)
-- Re-write affected files; signal `design_revision` instead of `design_ready`
-
-## Phase 4: Self-Validation & Output
-
-1. Token integrity checks:
-
-| Check | Pass Criteria |
-|-------|---------------|
-| tokens_valid | All $value fields non-empty |
-| theme_complete | Light/dark values for all color tokens |
-| values_parseable | Valid CSS-parseable values |
-| no_duplicates | No duplicate token definitions |
-
-2. Component spec checks:
-
-| Check | Pass Criteria |
-|-------|---------------|
-| states_complete | All 5 states (default/hover/focus/active/disabled) defined |
-| a11y_specified | Role, ARIA, keyboard behavior defined |
-| responsive_defined | At least mobile/desktop breakpoints |
-| token_refs_valid | All `{token.path}` references resolve to defined tokens |
-
-3. Update `<session>/wisdom/.msg/meta.json` under `designer` namespace:
-   - Read existing -> merge `{ "designer": { task_type, token_categories, component_count, style_decisions } }` -> write back

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

@@ -1,74 +0,0 @@
----
-prefix: BUILD
-inner_loop: false
-message_types:
-  success: build_complete
-  progress: build_progress
-  error: error
----
-
-# Component Code Builder
-
-Translate design tokens and component specifications into production code. Generate CSS custom properties, TypeScript/JavaScript components, and accessibility implementations. Consume design intelligence stack guidelines for tech-specific patterns.
-
-## Phase 2: Context & Artifact Loading
-
-| Input | Source | Required |
-|-------|--------|----------|
-| Design tokens | <session>/design/design-tokens.json | Yes (token build) |
-| Component specs | <session>/design/component-specs/*.md | Yes (component build) |
-| Design intelligence | <session>/research/design-intelligence.json | Yes |
-| Latest audit report | <session>/audit/audit-*.md | No |
-| .msg/meta.json | <session>/wisdom/.msg/meta.json | Yes |
-
-1. Extract session path from task description
-2. Detect build type from subject: "token" -> Token implementation, "component" -> Component implementation
-3. Read design artifacts: design-tokens.json (token build), component-specs/*.md (component build)
-4. Read design intelligence: stack_guidelines (tech-specific patterns), anti_patterns (patterns to avoid), ux_guidelines
-5. Read latest audit report for approved changes and feedback
-6. Detect project tech stack from package.json
-
-## Phase 3: Implementation Execution
-
-**Token Implementation (BUILD-001)**:
-- Convert design tokens to production code
-- Output files in `<session>/build/token-files/`:
-  - `tokens.css`: CSS custom properties with `:root` (light) and `[data-theme="dark"]` selectors, plus `@media (prefers-color-scheme: dark)` fallback
-  - `tokens.ts`: TypeScript constants and types for programmatic access with autocomplete support
-  - `README.md`: Token usage guide
-- All color tokens must have both light and dark values
-- Semantic token names must match design token definitions
-
-**Component Implementation (BUILD-002)**:
-- Implement component code from design specifications
-- Per-component output in `<session>/build/component-files/`:
-  - `{ComponentName}.tsx`: React/Vue/Svelte component (match detected stack)
-  - `{ComponentName}.css`: Styles consuming tokens via `var(--token-name)` only
-  - `{ComponentName}.test.tsx`: Basic render + state tests
-  - `index.ts`: Re-export
-- Requirements: no hardcoded colors/spacing (use design tokens), implement all 5 states, add ARIA attributes per spec, support responsive breakpoints, follow project component patterns
-- Accessibility: keyboard navigation, screen reader support, visible focus indicators, WCAG AA contrast
-- Check implementation against design intelligence anti_patterns
-
-## Phase 4: Validation & Output
-
-1. Token build validation:
-
-| Check | Pass Criteria |
-|-------|---------------|
-| File existence | tokens.css and tokens.ts exist |
-| Token coverage | All defined tokens present in CSS |
-| Theme support | Light/dark variants exist |
-
-2. Component build validation:
-
-| Check | Pass Criteria |
-|-------|---------------|
-| File existence | At least 3 files per component (component, style, index) |
-| No hardcoded values | No `#xxx` or `rgb()` in component CSS (only in tokens.css) |
-| Focus styles | `:focus` or `:focus-visible` defined |
-| Responsive | `@media` queries present |
-| Anti-pattern clean | No violations of design intelligence anti_patterns |
-
-3. Update `<session>/wisdom/.msg/meta.json` under `implementer` namespace:
-   - Read existing -> merge `{ "implementer": { build_type, file_count, output_dir, components_built } }` -> write back

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

@@ -1,84 +0,0 @@
----
-prefix: RESEARCH
-inner_loop: false
-message_types:
-  success: research_ready
-  progress: research_progress
-  error: error
----
-
-# Design System Researcher
-
-Analyze existing design system, build component inventory, assess accessibility baseline, and retrieve industry-specific design intelligence via ui-ux-pro-max. Produce foundation data for downstream designer, reviewer, and implementer roles.
-
-## Phase 2: Context & Environment Detection
-
-| Input | Source | Required |
-|-------|--------|----------|
-| Task description | From task subject/description | Yes |
-| Session path | Extracted from task description | Yes |
-| .msg/meta.json | <session>/wisdom/.msg/meta.json | No |
-
-1. Extract session path and target scope from task description
-2. Detect project type and tech stack from package.json or equivalent:
-
-| Package | Detected Stack |
-|---------|---------------|
-| next | nextjs |
-| react | react |
-| vue | vue |
-| svelte | svelte |
-| @shadcn/ui | shadcn |
-| (default) | html-tailwind |
-
-3. Use CLI tools (e.g., `ccw cli -p "..." --tool gemini --mode analysis`) or direct tools (Glob, Grep, mcp__ace-tool__search_context) to scan for existing design tokens, component files, styling patterns
-4. Read industry context from session config (industry, strictness, must-have features)
-
-## Phase 3: Research Execution
-
-Execute 4 analysis streams:
-
-**Stream 1 -- Design System Analysis**:
-- Search for existing design tokens (CSS variables, theme configs, token files)
-- Identify styling patterns (CSS-in-JS, CSS modules, utility classes, SCSS)
-- Map color palette, typography scale, spacing system
-- Find component library usage (MUI, Ant Design, shadcn, custom)
-- Output: `<session>/research/design-system-analysis.json`
-
-**Stream 2 -- Component Inventory**:
-- Find all UI component files; identify props/API surface
-- Identify states supported (hover, focus, disabled, etc.)
-- Check accessibility attributes (ARIA labels, roles)
-- Map inter-component dependencies and usage counts
-- Output: `<session>/research/component-inventory.json`
-
-**Stream 3 -- Accessibility Baseline**:
-- Check ARIA attribute usage patterns, keyboard navigation support
-- Assess color contrast ratios (if design tokens found)
-- Find focus management and semantic HTML patterns
-- Output: `<session>/research/accessibility-audit.json`
-
-**Stream 4 -- Design Intelligence (ui-ux-pro-max)**:
-- Call `Skill(skill="ui-ux-pro-max", args="<industry> <keywords> --design-system")` for design system recommendations
-- Call `Skill(skill="ui-ux-pro-max", args="accessibility animation responsive --domain ux")` for UX guidelines
-- Call `Skill(skill="ui-ux-pro-max", args="<keywords> --stack <detected-stack>")` for stack guidelines
-- Degradation: when unavailable, use LLM general knowledge, mark `_source: "llm-general-knowledge"`
-- Output: `<session>/research/design-intelligence.json`
-
-Compile research summary metrics: design_system_exists, styling_approach, total_components, accessibility_level, design_intelligence_source, anti_patterns_count.
-
-## Phase 4: Validation & Output
-
-1. Verify all 4 output files exist and contain valid JSON with required fields:
-
-| File | Required Fields |
-|------|----------------|
-| design-system-analysis.json | existing_tokens, styling_approach |
-| component-inventory.json | components array |
-| accessibility-audit.json | wcag_level |
-| design-intelligence.json | _source, design_system |
-
-2. If any file missing or invalid, re-run corresponding stream
-
-3. Update `<session>/wisdom/.msg/meta.json` under `researcher` namespace:
-   - Read existing -> merge `{ "researcher": { detected_stack, component_count, wcag_level, di_source, scope } }` -> write back

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