feat: Add coordinator commands and role specifications for UI design team

- Implemented the 'monitor' command for coordinator role to handle monitoring events, task completion, and pipeline management. - Created role specifications for the coordinator, detailing responsibilities, command execution protocols, and session management. - Added role specifications for the analyst, discussant, explorer, and synthesizer in the ultra-analyze skill, defining their context loading, analysis, and synthesis processes.
2026-03-06 16:31:12 +08:00 · 2026-03-03 23:35:41 +08:00
parent a7ed0365f7
commit 26bda9c634
188 changed files with 9332 additions and 3512 deletions
--- a/.claude/skills/team-frontend/role-specs/analyst.md
+++ b/.claude/skills/team-frontend/role-specs/analyst.md
@@ -0,0 +1,92 @@
+---
+prefix: ANALYZE
+inner_loop: false
+subagents: []
+message_types:
+  success: analyze_ready
+  error: error
+---
+
+# Requirements Analyst
+
+Analyze frontend requirements and retrieve industry design intelligence via ui-ux-pro-max skill. Produce design-intelligence.json and requirements.md for downstream consumption by architect and developer roles.
+
+## Phase 2: Context Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Task description | From task subject/description | Yes |
+| Session path | Extracted from task description | Yes |
+| Industry context | Extracted from task description | Yes |
+| .msg/meta.json | <session>/.msg/meta.json | No |
+
+1. Extract session path, industry type, and tech stack from task description
+2. Detect existing design system:
+
+| Signal | Detection Method |
+|--------|-----------------|
+| Token files | Glob `**/*token*.*` |
+| CSS files | Glob `**/*.css` |
+| Package.json | Read for framework dependencies |
+
+3. Detect tech stack from package.json:
+
+| Dependency | Stack |
+|------------|-------|
+| `next` | nextjs |
+| `react` | react |
+| `vue` | vue |
+| `svelte` | svelte |
+| `@shadcn/ui` | shadcn |
+| (none) | html-tailwind |
+
+4. Load .msg/meta.json for shared state
+
+## Phase 3: Design Intelligence Retrieval
+
+Retrieve design intelligence via ui-ux-pro-max skill integration.
+
+**Step 1: Invoke ui-ux-pro-max** (primary path):
+
+| Action | Invocation |
+|--------|------------|
+| Full design system | `Skill(skill="ui-ux-pro-max", args="<industry> <keywords> --design-system")` |
+| UX guidelines | `Skill(skill="ui-ux-pro-max", args="accessibility animation responsive --domain ux")` |
+| Tech stack guide | `Skill(skill="ui-ux-pro-max", args="<keywords> --stack <detected-stack>")` |
+
+**Step 2: Fallback** (if skill unavailable):
+- Generate design recommendations from LLM general knowledge
+- Log warning: `ui-ux-pro-max not installed. Install via: /plugin install ui-ux-pro-max@ui-ux-pro-max-skill`
+
+**Step 3: Analyze existing codebase** (if token/CSS files found):
+- Explore existing design patterns (color palette, typography scale, spacing, component patterns)
+
+**Step 4: Competitive reference** (optional, if industry is not "Other"):
+- `WebSearch({ query: "<industry> web design trends best practices" })`
+
+**Step 5: Compile design-intelligence.json**:
+
+| Field | Source |
+|-------|--------|
+| `_source` | "ui-ux-pro-max-skill" or "llm-general-knowledge" |
+| `industry` | Task description |
+| `detected_stack` | Phase 2 detection |
+| `design_system` | Skill output (colors, typography, effects) |
+| `ux_guidelines` | Skill UX domain output |
+| `stack_guidelines` | Skill stack output |
+| `recommendations` | Synthesized: style, anti-patterns, must-have |
+
+**Output files**:
+- `<session>/analysis/design-intelligence.json`
+- `<session>/analysis/requirements.md`
+
+## Phase 4: Self-Review
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| JSON validity | Parse design-intelligence.json | No parse errors |
+| Required fields | Check _source, industry, design_system | All present |
+| Anti-patterns populated | Check recommendations.anti_patterns | Non-empty array |
+| Requirements doc exists | File check | requirements.md written |
+
+Update .msg/meta.json: merge `design_intelligence` and `industry_context` keys.
--- a/.claude/skills/team-frontend/role-specs/architect.md
+++ b/.claude/skills/team-frontend/role-specs/architect.md
@@ -0,0 +1,86 @@
+---
+prefix: ARCH
+inner_loop: false
+subagents: []
+message_types:
+  success: arch_ready
+  error: error
+---
+
+# Frontend Architect
+
+Consume design-intelligence.json to define design token system, component architecture, and project structure. Token values prioritize ui-ux-pro-max recommendations. Produce architecture artifacts for developer consumption.
+
+## Phase 2: Context Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Task description | From task subject/description | Yes |
+| Session path | Extracted from task description | Yes |
+| Scope | Extracted from task description (tokens/components/full) | No (default: full) |
+| Design intelligence | <session>/analysis/design-intelligence.json | Yes |
+| .msg/meta.json | <session>/.msg/meta.json | No |
+
+1. Extract session path and scope from task description
+2. Load design intelligence from analyst output
+3. Load .msg/meta.json for shared state (industry_context, design_intelligence)
+4. Detect existing project structure via Glob `src/**/*`
+
+**Fail-safe**: If design-intelligence.json not found, use default token values and log warning.
+
+## Phase 3: Architecture Design
+
+**Scope selection**:
+
+| Scope | Output |
+|-------|--------|
+| `tokens` | Design token system only |
+| `components` | Component specs only |
+| `full` | Both tokens and components + project structure |
+
+**Step 1: Design Token System** (scope: tokens or full):
+
+Generate `<session>/architecture/design-tokens.json` with categories:
+
+| Category | Content | Source |
+|----------|---------|--------|
+| `color` | Primary, secondary, background, surface, text, CTA | ui-ux-pro-max |
+| `typography` | Font families, font sizes (scale) | ui-ux-pro-max |
+| `spacing` | xs through 2xl | Standard scale |
+| `border-radius` | sm, md, lg, full | Standard scale |
+| `shadow` | sm, md, lg | Standard elevation |
+| `transition` | fast, normal, slow | Standard durations |
+
+Use `$type` + `$value` format (Design Tokens Community Group). Support light/dark mode via nested values.
+
+**Step 2: Component Architecture** (scope: components or full):
+
+Generate component specs in `<session>/architecture/component-specs/`:
+- Design reference (style, stack)
+- Props table (name, type, default, description)
+- Variants table
+- Accessibility requirements (role, keyboard, ARIA, contrast)
+- Anti-patterns to avoid (from design intelligence)
+
+**Step 3: Project Structure** (scope: full):
+
+Generate `<session>/architecture/project-structure.md` with stack-specific layout:
+
+| Stack | Key Directories |
+|-------|----------------|
+| react | src/components/, src/pages/, src/hooks/, src/styles/ |
+| nextjs | app/(routes)/, app/components/, app/lib/, app/styles/ |
+| vue | src/components/, src/views/, src/composables/, src/styles/ |
+| html-tailwind | src/components/, src/pages/, src/styles/ |
+
+## Phase 4: Self-Review
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| JSON validity | Parse design-tokens.json | No errors |
+| Required categories | Check color, typography, spacing | All present |
+| Anti-pattern compliance | Token values vs anti-patterns | No violations |
+| Component specs complete | Each has props + accessibility | All complete |
+| File existence | Verify all planned files | All present |
+
+Update .msg/meta.json: merge `design_token_registry` and `component_inventory` keys.
--- a/.claude/skills/team-frontend/role-specs/developer.md
+++ b/.claude/skills/team-frontend/role-specs/developer.md
@@ -0,0 +1,93 @@
+---
+prefix: DEV
+inner_loop: true
+subagents: []
+message_types:
+  success: dev_complete
+  error: error
+---
+
+# Frontend Developer
+
+Consume architecture artifacts (design tokens, component specs, project structure) to implement frontend code. Reference design-intelligence.json for implementation checklist, tech stack guidelines, and anti-pattern constraints.
+
+## Phase 2: Context Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Task description | From task subject/description | Yes |
+| Session path | Extracted from task description | Yes |
+| Scope | Extracted from task description (tokens/components/full) | No (default: full) |
+| Design intelligence | <session>/analysis/design-intelligence.json | No |
+| Design tokens | <session>/architecture/design-tokens.json | Yes |
+| Component specs | <session>/architecture/component-specs/*.md | No |
+| Project structure | <session>/architecture/project-structure.md | No |
+| .msg/meta.json | <session>/.msg/meta.json | No |
+
+1. Extract session path and scope from task description
+2. Load design tokens (required -- if missing, report to coordinator)
+3. Load design intelligence for anti-patterns and guidelines
+4. Load component specs and project structure
+5. Detect tech stack from design intelligence `detected_stack`
+6. Load .msg/meta.json for shared state
+
+## Phase 3: Code Implementation
+
+**Scope selection**:
+
+| Scope | Output |
+|-------|--------|
+| `tokens` | CSS custom properties from design tokens |
+| `components` | Component code from specs |
+| `full` | Both token CSS and components |
+
+**Step 1: Generate Design Token CSS** (scope: tokens or full):
+
+Convert design-tokens.json to `src/styles/tokens.css`:
+
+| JSON Category | CSS Variable Prefix |
+|---------------|---------------------|
+| color | `--color-` |
+| typography.font-family | `--font-` |
+| typography.font-size | `--text-` |
+| spacing | `--space-` |
+| border-radius | `--radius-` |
+| shadow | `--shadow-` |
+| transition | `--duration-` |
+
+Add `@media (prefers-color-scheme: dark)` override for color tokens.
+
+**Step 2: Implement Components** (scope: components or full):
+
+Implementation strategy by complexity:
+
+| Condition | Strategy |
+|-----------|----------|
+| <= 2 components | Direct inline Edit/Write |
+| 3-5 components | Single batch implementation |
+| > 5 components | Group by module, implement per batch |
+
+**Coding standards** (mandatory):
+- Use design token CSS variables -- never hardcode colors/spacing
+- All interactive elements: `cursor: pointer`
+- Transitions: 150-300ms via `var(--duration-normal)`
+- Text contrast: minimum 4.5:1 ratio
+- Include `focus-visible` styles for keyboard navigation
+- Support `prefers-reduced-motion`
+- Responsive: mobile-first with md/lg breakpoints
+- No emoji as functional icons
+
+## Phase 4: Self-Review
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| Hardcoded colors | Scan for hex codes outside tokens.css | None found |
+| cursor-pointer | Check buttons/links | All have cursor-pointer |
+| Focus styles | Check interactive elements | All have focus styles |
+| Responsive | Check for breakpoints | Breakpoints present |
+| File existence | Verify all planned files | All present |
+| Import resolution | Check no broken imports | All imports resolve |
+
+Auto-fix where possible: add missing cursor-pointer, basic focus styles.
+
+Update .msg/meta.json: merge `component_inventory` key with implemented file list.
--- a/.claude/skills/team-frontend/role-specs/qa.md
+++ b/.claude/skills/team-frontend/role-specs/qa.md
@@ -0,0 +1,79 @@
+---
+prefix: QA
+inner_loop: false
+subagents: []
+message_types:
+  success: qa_passed
+  error: error
+---
+
+# QA Engineer
+
+Execute 5-dimension quality audit integrating ux-guidelines Do/Don't rules, pre-delivery checklist, and industry anti-pattern library. Perform CSS-level precise review on architecture artifacts and implementation code.
+
+## Phase 2: Context Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Task description | From task subject/description | Yes |
+| Session path | Extracted from task description | Yes |
+| Review type | Extracted from task description | No (default: code-review) |
+| Design intelligence | <session>/analysis/design-intelligence.json | No |
+| Design tokens | <session>/architecture/design-tokens.json | No |
+| .msg/meta.json | <session>/.msg/meta.json | No |
+
+1. Extract session path and review type from task description
+2. Load design intelligence (for anti-patterns, must-have rules)
+3. Load design tokens (for compliance checks)
+4. Load .msg/meta.json (for industry context, strictness level)
+5. Collect files to review based on review type:
+
+| Type | Files to Review |
+|------|-----------------|
+| architecture-review | `<session>/architecture/**/*` |
+| token-review | `<session>/architecture/**/*` |
+| code-review | `src/**/*.{tsx,jsx,vue,svelte,html,css}` |
+| final | `src/**/*.{tsx,jsx,vue,svelte,html,css}` |
+
+## Phase 3: 5-Dimension Audit
+
+| Dimension | Weight | Focus |
+|-----------|--------|-------|
+| Code Quality | 0.20 | Structure, naming, maintainability |
+| Accessibility | 0.25 | WCAG compliance, keyboard nav, screen reader |
+| Design Compliance | 0.20 | Anti-pattern check, design token usage |
+| UX Best Practices | 0.20 | Interaction patterns, responsive, animations |
+| Pre-Delivery | 0.15 | Final checklist (code-review/final types only) |
+
+**Dimension 1 -- Code Quality**: File length (>300 LOC), console.log, empty catch, unused imports.
+
+**Dimension 2 -- Accessibility**: Image alt text, input labels, button text, heading hierarchy, focus styles, ARIA roles. Strict mode (medical/financial): prefers-reduced-motion required.
+
+**Dimension 3 -- Design Compliance**: Hardcoded colors (must use `var(--color-*)`), hardcoded spacing, industry anti-patterns from design intelligence.
+
+**Dimension 4 -- UX Best Practices**: cursor-pointer on clickable, transition 150-300ms, responsive design, loading states, error states.
+
+**Dimension 5 -- Pre-Delivery** (final/code-review only): No emoji icons, cursor-pointer, transitions, focus states, reduced-motion, responsive, no hardcoded colors, dark mode support.
+
+**Score calculation**: `score = sum(dimension_score * weight)`
+
+**Verdict**:
+
+| Condition | Verdict | Message Type |
+|-----------|---------|-------------|
+| score >= 8 AND critical == 0 | PASSED | `qa_passed` |
+| score >= 6 AND critical == 0 | PASSED_WITH_WARNINGS | `qa_result` |
+| score < 6 OR critical > 0 | FIX_REQUIRED | `fix_required` |
+
+## Phase 4: Self-Review
+
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| All dimensions scored | Check 5 dimension scores | All present |
+| Audit report written | File check | audit-NNN.md exists |
+| Verdict determined | Score calculated | Verdict assigned |
+| Issues categorized | Severity labels | All issues have severity |
+
+Write audit report to `<session>/qa/audit-<NNN>.md` with: summary, dimension scores, issues by severity, passed dimensions.
+
+Update .msg/meta.json: append to `qa_history` array.