mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-28 09:23:08 +08:00
feat(team-lifecycle-v2): integrate ui-ux-pro-max + shared memory into frontend pipeline
- fe-developer: add design-intelligence.json consumption, token CSS generation (:root + dark mode), self-validation, anti-patterns/checklist in prompts - fe-qa: add industry-aware audit (standard/strict), Do/Don't rules, emoji/focus-visible/prefers-reduced-motion/cursor-pointer checks, anti-pattern matching from design-intelligence.json, shared memory update - fe-qa/commands: add pre-delivery-checklist.md (CSS-level precision checks) - SKILL.md: add ui-ux-pro-max integration section, shared memory section, command tree update for fe-qa/commands - team-config.json: add ui_ux_pro_max and shared_memory config blocks
This commit is contained in:
catlog22
@@ -85,6 +85,9 @@ roles/
|
||||
├── fe-developer/ # Frontend pipeline role
|
||||
│ └── role.md # Frontend component/page implementation
|
||||
└── fe-qa/ # Frontend pipeline role
|
||||
├── role.md
|
||||
└── commands/
|
||||
└── pre-delivery-checklist.md
|
||||
└── role.md # 5-dimension frontend QA + GC loop
|
||||
```
|
||||
|
||||
@@ -520,6 +523,79 @@ Coordinator supports `--resume` / `--continue` flags to resume interrupted sessi
|
||||
10. **Kick** — 向首个可执行任务的 worker 发送 `task_unblocked` 消息，打破 resume 死锁
|
||||
11. Jumps to Phase 4 coordination loop
|
||||
|
||||
## ui-ux-pro-max Integration (Frontend Pipelines)
|
||||
|
||||
When frontend pipelines are active, the design intelligence chain leverages ui-ux-pro-max:
|
||||
|
||||
### Design Intelligence Chain
|
||||
|
||||
```
|
||||
analyst (RESEARCH-001)
|
||||
└→ Skill(skill="ui-ux-pro-max", args="${industry} ${keywords} --design-system")
|
||||
└→ Output: {session}/analysis/design-intelligence.json
|
||||
|
||||
architect (via planner PLAN-001)
|
||||
└→ Consumes design-intelligence.json → generates design-tokens.json
|
||||
└→ Output: {session}/architecture/design-tokens.json
|
||||
|
||||
fe-developer (DEV-FE-*)
|
||||
└→ Consumes design-tokens.json → generates src/styles/tokens.css (:root + dark mode)
|
||||
└→ Consumes anti-patterns + implementation checklist from design-intelligence.json
|
||||
|
||||
fe-qa (QA-FE-*)
|
||||
└→ Consumes design-intelligence.json → industry anti-pattern checks
|
||||
└→ Consumes design-tokens.json → design compliance checks
|
||||
└→ Uses industry strictness (standard/strict) for audit depth
|
||||
```
|
||||
|
||||
### Skill Invocation
|
||||
|
||||
```javascript
|
||||
// Full design system recommendation
|
||||
Skill(skill="ui-ux-pro-max", args="${industry} ${keywords} --design-system")
|
||||
|
||||
// Domain-specific search (UX guidelines, typography, color)
|
||||
Skill(skill="ui-ux-pro-max", args="${query} --domain ${domain}")
|
||||
|
||||
// Tech stack guidelines
|
||||
Skill(skill="ui-ux-pro-max", args="${query} --stack ${stack}")
|
||||
|
||||
// Persist design system (cross-session reuse)
|
||||
Skill(skill="ui-ux-pro-max", args="${query} --design-system --persist -p ${projectName}")
|
||||
```
|
||||
|
||||
### Supported Domains & Stacks
|
||||
|
||||
- **Domains**: product, style, typography, color, landing, chart, ux, web
|
||||
- **Stacks**: html-tailwind, react, nextjs, vue, svelte, shadcn, swiftui, react-native, flutter
|
||||
|
||||
### Fallback
|
||||
|
||||
若 ui-ux-pro-max skill 未安装，降级为 LLM 通用设计知识。安装命令：`/plugin install ui-ux-pro-max@ui-ux-pro-max-skill`
|
||||
|
||||
## Shared Memory (Frontend Pipelines)
|
||||
|
||||
Frontend pipelines use `shared-memory.json` for cross-role state accumulation:
|
||||
|
||||
```json
|
||||
{
|
||||
"design_intelligence": {},
|
||||
"design_token_registry": {
|
||||
"colors": {}, "typography": {}, "spacing": {}, "shadows": {}
|
||||
},
|
||||
"component_inventory": [],
|
||||
"style_decisions": [],
|
||||
"qa_history": [],
|
||||
"industry_context": { "industry": "SaaS/科技", "config": { "strictness": "standard" } }
|
||||
}
|
||||
```
|
||||
|
||||
| Role | Phase 2 (Read) | Phase 4/5 (Write) |
|
||||
|------|---------------|-------------------|
|
||||
| coordinator | — | Initialize shared-memory.json |
|
||||
| fe-developer | design_intelligence, design_token_registry | component_inventory |
|
||||
| fe-qa | design_intelligence, industry_context, qa_history | qa_history |
|
||||
|
||||
## Coordinator Spawn Template
|
||||
|
||||
When coordinator creates teammates, use this pattern:
|
||||
|
||||
@@ -102,6 +102,10 @@ try { plan = JSON.parse(Read(`${sessionFolder}/plan/plan.json`)) } catch {}
|
||||
let designTokens = null
|
||||
try { designTokens = JSON.parse(Read(`${sessionFolder}/architecture/design-tokens.json`)) } catch {}
|
||||
|
||||
// Load design intelligence (from analyst via ui-ux-pro-max)
|
||||
let designIntel = {}
|
||||
try { designIntel = JSON.parse(Read(`${sessionFolder}/analysis/design-intelligence.json`)) } catch {}
|
||||
|
||||
// Load component specs (if available)
|
||||
let componentSpecs = []
|
||||
try {
|
||||
@@ -109,8 +113,8 @@ try {
|
||||
componentSpecs = specFiles.map(f => ({ path: f, content: Read(f) }))
|
||||
} catch {}
|
||||
|
||||
// Load shared memory (if available)
|
||||
let sharedMemory = null
|
||||
// Load shared memory (cross-role state)
|
||||
let sharedMemory = {}
|
||||
try { sharedMemory = JSON.parse(Read(`${sessionFolder}/shared-memory.json`)) } catch {}
|
||||
|
||||
// Load wisdom
|
||||
@@ -120,10 +124,20 @@ if (sessionFolder) {
|
||||
try { wisdom.decisions = Read(`${sessionFolder}/wisdom/decisions.md`) } catch {}
|
||||
}
|
||||
|
||||
// Extract design constraints from design intelligence
|
||||
const antiPatterns = designIntel.recommendations?.anti_patterns || []
|
||||
const implementationChecklist = designIntel.design_system?.implementation_checklist || []
|
||||
const stackGuidelines = designIntel.stack_guidelines || {}
|
||||
|
||||
// Detect frontend tech stack
|
||||
let techStack = {}
|
||||
try { techStack = JSON.parse(Read('.workflow/project-tech.json')) } catch {}
|
||||
const feTech = detectFrontendStack(techStack)
|
||||
// Override with design intelligence detection if available
|
||||
if (designIntel.detected_stack) {
|
||||
const diStack = designIntel.detected_stack
|
||||
if (['react', 'nextjs', 'vue', 'svelte', 'nuxt'].includes(diStack)) feTech.framework = diStack
|
||||
}
|
||||
|
||||
function detectFrontendStack(tech) {
|
||||
const deps = tech?.dependencies || {}
|
||||
@@ -143,30 +157,77 @@ function detectFrontendStack(tech) {
|
||||
|
||||
### Phase 3: Frontend Implementation
|
||||
|
||||
#### Step 1: Generate Design Token CSS (if tokens available)
|
||||
|
||||
```javascript
|
||||
if (designTokens && task.description.includes('Scope: tokens') || task.description.includes('Scope: full')) {
|
||||
// Convert design-tokens.json to CSS custom properties
|
||||
let cssVars = ':root {\n'
|
||||
|
||||
// Colors
|
||||
if (designTokens.color) {
|
||||
for (const [name, token] of Object.entries(designTokens.color)) {
|
||||
const value = typeof token.$value === 'object' ? token.$value.light : token.$value
|
||||
cssVars += ` --color-${name}: ${value};\n`
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
if (designTokens.typography?.['font-family']) {
|
||||
for (const [name, token] of Object.entries(designTokens.typography['font-family'])) {
|
||||
const value = Array.isArray(token.$value) ? token.$value.join(', ') : token.$value
|
||||
cssVars += ` --font-${name}: ${value};\n`
|
||||
}
|
||||
}
|
||||
if (designTokens.typography?.['font-size']) {
|
||||
for (const [name, token] of Object.entries(designTokens.typography['font-size'])) {
|
||||
cssVars += ` --text-${name}: ${token.$value};\n`
|
||||
}
|
||||
}
|
||||
|
||||
// Spacing, border-radius, shadow, transition
|
||||
for (const category of ['spacing', 'border-radius', 'shadow', 'transition']) {
|
||||
const prefix = { spacing: 'space', 'border-radius': 'radius', shadow: 'shadow', transition: 'duration' }[category]
|
||||
if (designTokens[category]) {
|
||||
for (const [name, token] of Object.entries(designTokens[category])) {
|
||||
cssVars += ` --${prefix}-${name}: ${token.$value};\n`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
cssVars += '}\n'
|
||||
|
||||
// Dark mode overrides
|
||||
if (designTokens.color) {
|
||||
const darkOverrides = Object.entries(designTokens.color)
|
||||
.filter(([, token]) => typeof token.$value === 'object' && token.$value.dark)
|
||||
if (darkOverrides.length > 0) {
|
||||
cssVars += '\n@media (prefers-color-scheme: dark) {\n :root {\n'
|
||||
for (const [name, token] of darkOverrides) {
|
||||
cssVars += ` --color-${name}: ${token.$value.dark};\n`
|
||||
}
|
||||
cssVars += ' }\n}\n'
|
||||
}
|
||||
}
|
||||
|
||||
Bash(`mkdir -p src/styles`)
|
||||
Write('src/styles/tokens.css', cssVars)
|
||||
}
|
||||
```
|
||||
|
||||
#### Step 2: Implement Components
|
||||
|
||||
```javascript
|
||||
// Extract task-specific details from plan
|
||||
const taskId = task.subject.match(/DEV-FE-(\d+)/)?.[0]
|
||||
const taskDetail = plan?.task_ids?.includes(taskId)
|
||||
? JSON.parse(Read(`${sessionFolder}/plan/.task/${taskId}.json`))
|
||||
: { title: task.subject, description: task.description, files: [] }
|
||||
|
||||
// Build implementation context
|
||||
const implContext = {
|
||||
task: taskDetail,
|
||||
designTokens,
|
||||
componentSpecs,
|
||||
techStack: feTech,
|
||||
conventions: wisdom.conventions || '',
|
||||
decisions: wisdom.decisions || ''
|
||||
}
|
||||
|
||||
// Determine implementation strategy
|
||||
const isSimple = (taskDetail.files || []).length <= 3 &&
|
||||
!task.description.includes('system') &&
|
||||
!task.description.includes('多组件')
|
||||
|
||||
if (isSimple) {
|
||||
// Direct implementation via code-developer subagent
|
||||
Task({
|
||||
subagent_type: "code-developer",
|
||||
run_in_background: false,
|
||||
@@ -176,7 +237,7 @@ if (isSimple) {
|
||||
Task: ${taskDetail.title}
|
||||
Description: ${taskDetail.description}
|
||||
|
||||
${designTokens ? `## Design Tokens\n${JSON.stringify(designTokens, null, 2).substring(0, 1000)}` : ''}
|
||||
${designTokens ? `## Design Tokens\nImport from: src/styles/tokens.css\nUse CSS custom properties (var(--color-primary), var(--space-md), etc.)\n${JSON.stringify(designTokens, null, 2).substring(0, 1000)}` : ''}
|
||||
${componentSpecs.length > 0 ? `## Component Specs\n${componentSpecs.map(s => s.content.substring(0, 500)).join('\n---\n')}` : ''}
|
||||
|
||||
## Tech Stack
|
||||
@@ -184,11 +245,24 @@ ${componentSpecs.length > 0 ? `## Component Specs\n${componentSpecs.map(s => s.c
|
||||
- Styling: ${feTech.styling}
|
||||
${feTech.ui_lib ? `- UI Library: ${feTech.ui_lib}` : ''}
|
||||
|
||||
## Requirements
|
||||
- Semantic HTML with proper ARIA attributes
|
||||
- Responsive design (mobile-first)
|
||||
- Follow existing code conventions
|
||||
- Use existing design tokens if available
|
||||
## Stack-Specific Guidelines
|
||||
${JSON.stringify(stackGuidelines, null, 2).substring(0, 500)}
|
||||
|
||||
## Implementation Checklist (MUST verify each item)
|
||||
${implementationChecklist.map(item => `- [ ] ${item}`).join('\n') || '- [ ] Semantic HTML\n- [ ] Keyboard accessible\n- [ ] Responsive layout\n- [ ] Dark mode support'}
|
||||
|
||||
## Anti-Patterns to AVOID
|
||||
${antiPatterns.map(p => `- ❌ ${p}`).join('\n') || 'None specified'}
|
||||
|
||||
## Coding Standards
|
||||
- Use design token CSS variables, never hardcode colors/spacing
|
||||
- All interactive elements must have cursor: pointer
|
||||
- Transitions: 150-300ms (use 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
|
||||
|
||||
## Files to modify/create
|
||||
${(taskDetail.files || []).map(f => `- ${f.path}: ${f.change}`).join('\n') || 'Determine from task description'}
|
||||
@@ -197,22 +271,64 @@ ${(taskDetail.files || []).map(f => `- ${f.path}: ${f.change}`).join('\n') || 'D
|
||||
${wisdom.conventions || 'Follow project existing patterns'}`
|
||||
})
|
||||
} else {
|
||||
// Complex: use CLI for generation
|
||||
Bash({
|
||||
command: `ccw cli -p "PURPOSE: Implement frontend components for '${taskDetail.title}'
|
||||
TASK: ${taskDetail.description}
|
||||
MODE: write
|
||||
CONTEXT: @src/**/*.{tsx,jsx,vue,svelte,css,scss,html} @public/**/*
|
||||
EXPECTED: Production-ready frontend code with accessibility, responsive design, design token usage
|
||||
CONSTRAINTS: Framework=${feTech.framework}, Styling=${feTech.styling}${feTech.ui_lib ? ', UI=' + feTech.ui_lib : ''}" --tool gemini --mode write --rule development-implement-component-ui`,
|
||||
CONSTRAINTS: Framework=${feTech.framework}, Styling=${feTech.styling}${feTech.ui_lib ? ', UI=' + feTech.ui_lib : ''}
|
||||
ANTI-PATTERNS: ${antiPatterns.join(', ') || 'None'}
|
||||
CHECKLIST: ${implementationChecklist.join(', ') || 'Semantic HTML, keyboard accessible, responsive, dark mode'}" --tool gemini --mode write --rule development-implement-component-ui`,
|
||||
run_in_background: true
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 4: Wisdom Contribution
|
||||
### Phase 4: Self-Validation + Wisdom + Shared Memory
|
||||
|
||||
```javascript
|
||||
// === Self-Validation (pre-QA check) ===
|
||||
const implementedFiles = Glob({ pattern: 'src/**/*.{tsx,jsx,vue,svelte,html,css}' })
|
||||
const selfCheck = { passed: [], failed: [] }
|
||||
|
||||
for (const file of implementedFiles.slice(0, 20)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
|
||||
// Check: no hardcoded colors (hex outside tokens.css)
|
||||
if (file !== 'src/styles/tokens.css' && /#[0-9a-fA-F]{3,8}/.test(content)) {
|
||||
selfCheck.failed.push({ file, check: 'hardcoded-color', message: 'Hardcoded color — use var(--color-*)' })
|
||||
}
|
||||
|
||||
// Check: cursor-pointer on interactive elements
|
||||
if (/button|<a |onClick|@click/.test(content) && !/cursor-pointer/.test(content)) {
|
||||
selfCheck.failed.push({ file, check: 'cursor-pointer', message: 'Missing cursor-pointer on interactive element' })
|
||||
}
|
||||
|
||||
// Check: focus styles
|
||||
if (/button|input|select|textarea|<a /.test(content) && !/focus/.test(content)) {
|
||||
selfCheck.failed.push({ file, check: 'focus-styles', message: 'Missing focus styles for keyboard navigation' })
|
||||
}
|
||||
|
||||
// Check: responsive breakpoints
|
||||
if (/className|class=/.test(content) && !/md:|lg:|@media/.test(content) && /\.(tsx|jsx|vue|html)$/.test(file)) {
|
||||
selfCheck.failed.push({ file, check: 'responsive', message: 'No responsive breakpoints found' })
|
||||
}
|
||||
|
||||
// Check: prefers-reduced-motion for animations
|
||||
if (/animation|@keyframes/.test(content) && !/prefers-reduced-motion/.test(content)) {
|
||||
selfCheck.failed.push({ file, check: 'reduced-motion', message: 'Animation without prefers-reduced-motion' })
|
||||
}
|
||||
|
||||
// Check: emoji as icons
|
||||
if (/[\u{1F300}-\u{1F9FF}]/u.test(content)) {
|
||||
selfCheck.failed.push({ file, check: 'emoji-icon', message: 'Emoji used as icon — use SVG/icon library' })
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// === Wisdom Contribution ===
|
||||
if (sessionFolder) {
|
||||
const timestamp = new Date().toISOString().substring(0, 10)
|
||||
try {
|
||||
@@ -222,6 +338,14 @@ if (sessionFolder) {
|
||||
Write(conventionsPath, existing + '\n' + entry)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// === Update Shared Memory ===
|
||||
if (sessionFolder) {
|
||||
try {
|
||||
sharedMemory.component_inventory = implementedFiles.map(f => ({ path: f, status: 'implemented' }))
|
||||
Write(`${sessionFolder}/shared-memory.json`, JSON.stringify(sharedMemory, null, 2))
|
||||
} catch {}
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 5: Report to Coordinator
|
||||
@@ -233,11 +357,13 @@ const feFiles = changedFiles.filter(f =>
|
||||
/\.(tsx|jsx|vue|svelte|css|scss|html)$/.test(f)
|
||||
)
|
||||
|
||||
const resultStatus = selfCheck.failed.length === 0 ? 'complete' : 'complete_with_warnings'
|
||||
|
||||
mcp__ccw-tools__team_msg({
|
||||
operation: "log", team: teamName,
|
||||
from: "fe-developer", to: "coordinator",
|
||||
type: "dev_fe_complete",
|
||||
summary: `[fe-developer] DEV-FE complete: ${feFiles.length} frontend files`,
|
||||
summary: `[fe-developer] DEV-FE complete: ${feFiles.length} files, self-check: ${selfCheck.failed.length} issues`,
|
||||
ref: sessionFolder
|
||||
})
|
||||
|
||||
@@ -247,18 +373,24 @@ SendMessage({
|
||||
content: `[fe-developer] ## Frontend Implementation Complete
|
||||
|
||||
**Task**: ${task.subject}
|
||||
**Status**: ${resultStatus}
|
||||
**Framework**: ${feTech.framework} | **Styling**: ${feTech.styling}
|
||||
**Design Intelligence**: ${designIntel._source || 'not available'}
|
||||
|
||||
### Files Modified
|
||||
${feFiles.slice(0, 10).map(f => `- \`${f}\``).join('\n') || 'See git diff'}
|
||||
|
||||
### Design Token Usage
|
||||
${designTokens ? 'Applied design tokens from architecture' : 'No design tokens available — used project defaults'}
|
||||
${designTokens ? 'Applied design tokens from architecture → src/styles/tokens.css' : 'No design tokens available — used project defaults'}
|
||||
|
||||
### Self-Validation
|
||||
${selfCheck.failed.length === 0 ? '✅ All checks passed' : `⚠️ ${selfCheck.failed.length} issues:\n${selfCheck.failed.slice(0, 5).map(f => `- [${f.check}] ${f.file}: ${f.message}`).join('\n')}`}
|
||||
|
||||
### Accessibility
|
||||
- Semantic HTML structure
|
||||
- ARIA attributes applied
|
||||
- Keyboard navigation supported`,
|
||||
- Keyboard navigation supported
|
||||
- Focus-visible styles included`,
|
||||
summary: `[fe-developer] DEV-FE complete: ${feFiles.length} files`
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
# Command: pre-delivery-checklist
|
||||
|
||||
> 最终交付前的 CSS 级别精准检查清单，融合 ui-ux-pro-max Pre-Delivery Checklist 和 ux-guidelines Do/Don't 规则。
|
||||
|
||||
## When to Use
|
||||
|
||||
- Phase 3 of fe-qa role, Dimension 5: Pre-Delivery
|
||||
- Final review or code-review type tasks
|
||||
|
||||
## Strategy
|
||||
|
||||
### Delegation Mode
|
||||
|
||||
**Mode**: Direct (inline pattern matching in fe-qa Phase 3)
|
||||
|
||||
## Checklist Items
|
||||
|
||||
### Accessibility
|
||||
|
||||
| # | Check | Pattern | Severity | Do | Don't |
|
||||
|---|-------|---------|----------|-----|-------|
|
||||
| 1 | Images have alt text | `<img` without `alt=` | CRITICAL | Always provide descriptive alt text | Leave alt empty without role="presentation" |
|
||||
| 2 | Form inputs have labels | `<input` without `<label`/`aria-label` | HIGH | Associate every input with a label | Use placeholder as sole label |
|
||||
| 3 | Focus states visible | Interactive elements without `focus` styles | HIGH | Add focus-visible outline | Remove default focus ring without replacement |
|
||||
| 4 | Color contrast 4.5:1 | Light text on light background | HIGH | Ensure 4.5:1 minimum ratio | Use low-contrast decorative text for content |
|
||||
| 5 | prefers-reduced-motion | Animations without media query | MEDIUM | Wrap in @media (prefers-reduced-motion: no-preference) | Force animations on all users |
|
||||
| 6 | Heading hierarchy | Skipped heading levels (h1→h3) | MEDIUM | Use sequential heading levels | Skip levels for visual sizing |
|
||||
|
||||
### Interaction
|
||||
|
||||
| # | Check | Pattern | Severity | Do | Don't |
|
||||
|---|-------|---------|----------|-----|-------|
|
||||
| 7 | cursor-pointer on clickable | Buttons/links without cursor-pointer | MEDIUM | Add cursor: pointer to all clickable elements | Leave default cursor |
|
||||
| 8 | Transitions 150-300ms | Duration outside range | LOW | Use 150-300ms for micro-interactions | Use >500ms or <100ms transitions |
|
||||
| 9 | Loading states | Async ops without loading indicator | MEDIUM | Show skeleton/spinner during fetch | Leave blank screen while loading |
|
||||
| 10 | Error states | Async ops without error handling | HIGH | Show user-friendly error message | Silently fail or show raw error |
|
||||
|
||||
### Design Compliance
|
||||
|
||||
| # | Check | Pattern | Severity | Do | Don't |
|
||||
|---|-------|---------|----------|-----|-------|
|
||||
| 11 | No hardcoded colors | Hex values outside tokens.css | HIGH | Use var(--color-*) tokens | Hardcode #hex values |
|
||||
| 12 | No hardcoded spacing | px values for margin/padding | MEDIUM | Use var(--space-*) tokens | Hardcode pixel values |
|
||||
| 13 | No emoji as icons | Unicode emoji in UI | HIGH | Use proper SVG/icon library | Use emoji for functional icons |
|
||||
| 14 | Dark mode support | No prefers-color-scheme | MEDIUM | Support light/dark themes | Design for light mode only |
|
||||
|
||||
### Layout
|
||||
|
||||
| # | Check | Pattern | Severity | Do | Don't |
|
||||
|---|-------|---------|----------|-----|-------|
|
||||
| 15 | Responsive breakpoints | No md:/lg:/@media | MEDIUM | Mobile-first responsive design | Desktop-only layout |
|
||||
| 16 | No horizontal scroll | Fixed widths > viewport | HIGH | Use relative/fluid widths | Set fixed pixel widths on containers |
|
||||
|
||||
## Execution
|
||||
|
||||
```javascript
|
||||
function runPreDeliveryChecklist(fileContents) {
|
||||
const results = { passed: 0, failed: 0, items: [] }
|
||||
|
||||
const checks = [
|
||||
{ id: 1, check: "Images have alt text", test: (c) => /<img\s/.test(c) && !/<img\s[^>]*alt=/.test(c), severity: 'CRITICAL' },
|
||||
{ id: 7, check: "cursor-pointer on clickable", test: (c) => /button|onClick/.test(c) && !/cursor-pointer/.test(c), severity: 'MEDIUM' },
|
||||
{ id: 11, check: "No hardcoded colors", test: (c, f) => f !== 'src/styles/tokens.css' && /#[0-9a-fA-F]{6}/.test(c), severity: 'HIGH' },
|
||||
{ id: 13, check: "No emoji as icons", test: (c) => /[\u{1F300}-\u{1F9FF}]/u.test(c), severity: 'HIGH' },
|
||||
{ id: 14, check: "Dark mode support", test: (c) => !/prefers-color-scheme|dark:|\.dark/.test(c), severity: 'MEDIUM', global: true },
|
||||
{ id: 15, check: "Responsive breakpoints", test: (c) => !/md:|lg:|@media.*min-width/.test(c), severity: 'MEDIUM', global: true }
|
||||
]
|
||||
|
||||
// Per-file checks
|
||||
for (const [file, content] of Object.entries(fileContents)) {
|
||||
for (const check of checks.filter(c => !c.global)) {
|
||||
if (check.test(content, file)) {
|
||||
results.failed++
|
||||
results.items.push({ ...check, file, status: 'FAIL' })
|
||||
} else {
|
||||
results.passed++
|
||||
results.items.push({ ...check, file, status: 'PASS' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Global checks (across all content)
|
||||
const allContent = Object.values(fileContents).join('\n')
|
||||
for (const check of checks.filter(c => c.global)) {
|
||||
if (check.test(allContent)) {
|
||||
results.failed++
|
||||
results.items.push({ ...check, file: 'global', status: 'FAIL' })
|
||||
} else {
|
||||
results.passed++
|
||||
results.items.push({ ...check, file: 'global', status: 'PASS' })
|
||||
}
|
||||
}
|
||||
|
||||
return results
|
||||
}
|
||||
```
|
||||
|
||||
## Output Format
|
||||
|
||||
```
|
||||
## Pre-Delivery Checklist Results
|
||||
- Passed: X / Y
|
||||
- Failed: Z
|
||||
|
||||
### Failed Items
|
||||
- [CRITICAL] #1 Images have alt text — src/components/Hero.tsx
|
||||
- [HIGH] #11 No hardcoded colors — src/styles/custom.css
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Scenario | Resolution |
|
||||
|----------|------------|
|
||||
| No files to check | Report empty checklist, score 10/10 |
|
||||
| File read error | Skip file, note in report |
|
||||
| Regex error | Skip check, note in report |
|
||||
@@ -1,6 +1,6 @@
|
||||
# Role: fe-qa
|
||||
|
||||
前端质量保证。5 维度代码审查 + Generator-Critic 循环确保前端代码质量。
|
||||
前端质量保证。5 维度代码审查 + Generator-Critic 循环确保前端代码质量。融合 ui-ux-pro-max 的 Pre-Delivery Checklist、ux-guidelines Do/Don't 规则、行业反模式库。
|
||||
|
||||
## Role Identity
|
||||
|
||||
@@ -17,8 +17,9 @@
|
||||
- 所有输出带 `[fe-qa]` 标识
|
||||
- 仅通过 SendMessage 与 coordinator 通信
|
||||
- 执行 5 维度审查（代码质量、可访问性、设计合规、UX 最佳实践、Pre-Delivery）
|
||||
- 提供可操作的修复建议（不仅指出问题）
|
||||
- 提供可操作的修复建议（Do/Don't 格式）
|
||||
- 支持 Generator-Critic 循环（最多 2 轮）
|
||||
- 加载 design-intelligence.json 用于行业反模式检查
|
||||
|
||||
### MUST NOT
|
||||
- ❌ 直接修改源代码（仅提供审查意见）
|
||||
@@ -57,7 +58,7 @@ Bash(`ccw team log --team "${teamName}" --from "fe-qa" --to "coordinator" --type
|
||||
## Toolbox
|
||||
|
||||
### Available Commands
|
||||
- None (inline execution)
|
||||
- [commands/pre-delivery-checklist.md](commands/pre-delivery-checklist.md) — CSS 级别精准交付检查
|
||||
|
||||
### CLI Capabilities
|
||||
|
||||
@@ -68,13 +69,13 @@ Bash(`ccw team log --team "${teamName}" --from "fe-qa" --to "coordinator" --type
|
||||
|
||||
## Review Dimensions
|
||||
|
||||
| Dimension | Weight | Focus |
|
||||
|-----------|--------|-------|
|
||||
| Code Quality | 25% | TypeScript 类型安全、组件结构、状态管理、错误处理 |
|
||||
| Accessibility | 25% | 语义 HTML、ARIA、键盘导航、色彩对比、屏幕阅读器 |
|
||||
| Design Compliance | 20% | 设计令牌使用、间距/排版一致性、响应式断点 |
|
||||
| UX Best Practices | 15% | 加载状态、错误状态、空状态、动画性能、交互反馈 |
|
||||
| Pre-Delivery | 15% | 构建无错、无 console.log、无硬编码、国际化就绪 |
|
||||
| Dimension | Weight | Source | Focus |
|
||||
|-----------|--------|--------|-------|
|
||||
| Code Quality | 25% | Standard code review | TypeScript 类型安全、组件结构、状态管理、错误处理 |
|
||||
| Accessibility | 25% | ux-guidelines rules | 语义 HTML、ARIA、键盘导航、色彩对比、focus-visible、prefers-reduced-motion |
|
||||
| Design Compliance | 20% | design-intelligence.json | 设计令牌使用、行业反模式、emoji 检查、间距/排版一致性 |
|
||||
| UX Best Practices | 15% | ux-guidelines Do/Don't | 加载状态、错误状态、空状态、cursor-pointer、响应式、动画时长 |
|
||||
| Pre-Delivery | 15% | Pre-Delivery Checklist | 暗色模式、无 console.log、无硬编码、国际化就绪、must-have 检查 |
|
||||
|
||||
## Execution (5-Phase)
|
||||
|
||||
@@ -102,6 +103,21 @@ const sessionFolder = task.description.match(/Session:\s*([^\n]+)/)?.[1]?.trim()
|
||||
let designTokens = null
|
||||
try { designTokens = JSON.parse(Read(`${sessionFolder}/architecture/design-tokens.json`)) } catch {}
|
||||
|
||||
// Load design intelligence (from analyst via ui-ux-pro-max)
|
||||
let designIntel = {}
|
||||
try { designIntel = JSON.parse(Read(`${sessionFolder}/analysis/design-intelligence.json`)) } catch {}
|
||||
|
||||
// Load shared memory for industry context + QA history
|
||||
let sharedMemory = {}
|
||||
try { sharedMemory = JSON.parse(Read(`${sessionFolder}/shared-memory.json`)) } catch {}
|
||||
|
||||
const industryContext = sharedMemory.industry_context || {}
|
||||
const antiPatterns = designIntel.recommendations?.anti_patterns || []
|
||||
const mustHave = designIntel.recommendations?.must_have || []
|
||||
|
||||
// Determine audit strictness from industry (standard / strict for medical/financial)
|
||||
const strictness = industryContext.config?.strictness || 'standard'
|
||||
|
||||
// Load component specs
|
||||
let componentSpecs = []
|
||||
try {
|
||||
@@ -123,6 +139,12 @@ const maxGCRounds = 2
|
||||
// Get changed frontend files
|
||||
const changedFiles = Bash(`git diff --name-only HEAD~1 2>/dev/null || git diff --name-only --cached 2>/dev/null || echo ""`)
|
||||
.split('\n').filter(f => /\.(tsx|jsx|vue|svelte|css|scss|html|ts|js)$/.test(f))
|
||||
|
||||
// Read file contents for review
|
||||
const fileContents = {}
|
||||
for (const file of changedFiles.slice(0, 30)) {
|
||||
try { fileContents[file] = Read(file) } catch {}
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 3: 5-Dimension Review
|
||||
@@ -139,123 +161,230 @@ const review = {
|
||||
}
|
||||
|
||||
// === Dimension 1: Code Quality (25%) ===
|
||||
const codeQuality = { name: 'code-quality', weight: 0.25, score: 0, issues: [] }
|
||||
for (const file of changedFiles.slice(0, 15)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: any type usage
|
||||
if (/:\s*any\b/.test(content)) {
|
||||
codeQuality.issues.push({ file, severity: 'medium', issue: 'Using `any` type', fix: 'Replace with specific type' })
|
||||
}
|
||||
// Check: missing error boundaries (React)
|
||||
if (/\.tsx$/.test(file) && /export/.test(content) && !/ErrorBoundary/.test(content) && /throw/.test(content)) {
|
||||
codeQuality.issues.push({ file, severity: 'low', issue: 'No error boundary for component with throw', fix: 'Wrap with ErrorBoundary' })
|
||||
}
|
||||
// Check: inline styles (should use design tokens)
|
||||
if (/style=\{?\{/.test(content) && designTokens) {
|
||||
codeQuality.issues.push({ file, severity: 'medium', issue: 'Inline styles detected', fix: 'Use design tokens or CSS classes' })
|
||||
}
|
||||
} catch {}
|
||||
const codeQuality = { name: 'code-quality', weight: 0.25, score: 10, issues: [] }
|
||||
for (const [file, content] of Object.entries(fileContents)) {
|
||||
if (/:\s*any\b/.test(content)) {
|
||||
codeQuality.issues.push({ file, severity: 'medium', issue: 'Using `any` type', fix: 'Replace with specific type', do: 'Define proper TypeScript types', dont: 'Use `any` to bypass type checking' })
|
||||
codeQuality.score -= 1.5
|
||||
}
|
||||
if (/\.tsx$/.test(file) && /export/.test(content) && !/ErrorBoundary/.test(content) && /throw/.test(content)) {
|
||||
codeQuality.issues.push({ file, severity: 'low', issue: 'No error boundary for component with throw', fix: 'Wrap with ErrorBoundary' })
|
||||
codeQuality.score -= 0.5
|
||||
}
|
||||
if (/style=\{?\{/.test(content) && designTokens) {
|
||||
codeQuality.issues.push({ file, severity: 'medium', issue: 'Inline styles detected', fix: 'Use design tokens or CSS classes', do: 'Use var(--color-*) tokens', dont: 'Hardcode style values inline' })
|
||||
codeQuality.score -= 1.5
|
||||
}
|
||||
if (/catch\s*\(\s*\)\s*\{[\s]*\}/.test(content)) {
|
||||
codeQuality.issues.push({ file, severity: 'high', issue: 'Empty catch block', fix: 'Add error handling logic', do: 'Log or handle the error', dont: 'Silently swallow exceptions' })
|
||||
codeQuality.score -= 2
|
||||
}
|
||||
if (content.split('\n').length > 300) {
|
||||
codeQuality.issues.push({ file, severity: 'medium', issue: 'File exceeds 300 lines', fix: 'Split into smaller modules' })
|
||||
codeQuality.score -= 1
|
||||
}
|
||||
}
|
||||
codeQuality.score = Math.max(0, 10 - codeQuality.issues.length * 1.5)
|
||||
codeQuality.score = Math.max(0, codeQuality.score)
|
||||
review.dimensions.push(codeQuality)
|
||||
|
||||
// === Dimension 2: Accessibility (25%) ===
|
||||
const a11y = { name: 'accessibility', weight: 0.25, score: 0, issues: [] }
|
||||
for (const file of changedFiles.filter(f => /\.(tsx|jsx|vue|svelte|html)$/.test(f)).slice(0, 10)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: img without alt
|
||||
if (/<img[^>]*(?!alt=)[^>]*>/i.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Image missing alt attribute', fix: 'Add descriptive alt text' })
|
||||
const a11y = { name: 'accessibility', weight: 0.25, score: 10, issues: [] }
|
||||
for (const [file, content] of Object.entries(fileContents)) {
|
||||
if (!/\.(tsx|jsx|vue|svelte|html)$/.test(file)) continue
|
||||
|
||||
if (/<img\s/.test(content) && !/<img\s[^>]*alt=/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Image missing alt attribute', fix: 'Add descriptive alt text', do: 'Always provide alt text', dont: 'Leave alt empty without role="presentation"' })
|
||||
a11y.score -= 3
|
||||
}
|
||||
if (/onClick/.test(content) && !/onKeyDown|onKeyPress|onKeyUp|role=.button/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'medium', issue: 'Click handler without keyboard equivalent', fix: 'Add onKeyDown or role="button" tabIndex={0}' })
|
||||
a11y.score -= 1.5
|
||||
}
|
||||
if (/<input\s/.test(content) && !/<label/.test(content) && !/aria-label/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Form input without label', fix: 'Add <label> or aria-label', do: 'Associate every input with a label', dont: 'Use placeholder as sole label' })
|
||||
a11y.score -= 2
|
||||
}
|
||||
if (/<button\s/.test(content) && /<button\s[^>]*>\s*</.test(content) && !/aria-label/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Button may lack accessible text (icon-only?)', fix: 'Add aria-label', do: 'Add aria-label for icon-only buttons', dont: 'Use title as sole accessible name' })
|
||||
a11y.score -= 2
|
||||
}
|
||||
// Heading hierarchy
|
||||
const headings = content.match(/<h([1-6])/g)?.map(h => parseInt(h[2])) || []
|
||||
for (let i = 1; i < headings.length; i++) {
|
||||
if (headings[i] - headings[i-1] > 1) {
|
||||
a11y.issues.push({ file, severity: 'medium', issue: `Heading level skipped: h${headings[i-1]} → h${headings[i]}`, fix: 'Use sequential heading levels' })
|
||||
a11y.score -= 1
|
||||
}
|
||||
// Check: click handler without keyboard
|
||||
if (/onClick/.test(content) && !/onKeyDown|onKeyPress|onKeyUp|role=.button/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'medium', issue: 'Click handler without keyboard equivalent', fix: 'Add onKeyDown or role="button" tabIndex={0}' })
|
||||
}
|
||||
// Check: missing form labels
|
||||
if (/<input[^>]*(?!aria-label|id=)[^>]*>/i.test(content) && !/<label/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Form input without label', fix: 'Add <label> or aria-label' })
|
||||
}
|
||||
// Check: color contrast (flag hardcoded colors)
|
||||
if (/#[0-9a-f]{3,6}/i.test(content) && !/token|theme|var\(--/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'low', issue: 'Hardcoded color — verify contrast ratio', fix: 'Use design tokens for consistent contrast' })
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
// Focus-visible styles
|
||||
if (/button|<a |input|select/.test(content) && !/focus-visible|focus:/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Interactive element missing focus styles', fix: 'Add focus-visible outline', do: 'Add focus-visible outline', dont: 'Remove default focus ring without replacement' })
|
||||
a11y.score -= 2
|
||||
}
|
||||
// ARIA role with tabindex
|
||||
if (/role="(button|link)"/.test(content) && !/tabindex/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'medium', issue: 'Element with ARIA role may need tabindex', fix: 'Add tabindex={0}' })
|
||||
a11y.score -= 1
|
||||
}
|
||||
// Hardcoded color contrast
|
||||
if (/#[0-9a-f]{3,6}/i.test(content) && !/token|theme|var\(--/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'low', issue: 'Hardcoded color — verify contrast ratio', fix: 'Use design tokens for consistent contrast' })
|
||||
a11y.score -= 0.5
|
||||
}
|
||||
}
|
||||
a11y.score = Math.max(0, 10 - a11y.issues.filter(i => i.severity === 'high').length * 3 - a11y.issues.filter(i => i.severity === 'medium').length * 1.5)
|
||||
|
||||
// Strict mode: additional checks for medical/financial
|
||||
if (strictness === 'strict') {
|
||||
for (const [file, content] of Object.entries(fileContents)) {
|
||||
if (/animation|transition|@keyframes/.test(content) && !/prefers-reduced-motion/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Animation without prefers-reduced-motion', fix: 'Wrap in @media (prefers-reduced-motion: no-preference)', do: 'Respect motion preferences', dont: 'Force animations on all users' })
|
||||
a11y.score -= 2
|
||||
}
|
||||
}
|
||||
}
|
||||
a11y.score = Math.max(0, a11y.score)
|
||||
review.dimensions.push(a11y)
|
||||
|
||||
// === Dimension 3: Design Compliance (20%) ===
|
||||
const designCompliance = { name: 'design-compliance', weight: 0.20, score: 0, issues: [] }
|
||||
if (designTokens) {
|
||||
for (const file of changedFiles.filter(f => /\.(tsx|jsx|vue|svelte|css|scss)$/.test(f)).slice(0, 10)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: hardcoded spacing values
|
||||
if (/margin:\s*\d+px|padding:\s*\d+px/.test(content) && !/var\(--/.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'medium', issue: 'Hardcoded spacing', fix: 'Use spacing tokens' })
|
||||
const designCompliance = { name: 'design-compliance', weight: 0.20, score: 10, issues: [] }
|
||||
for (const [file, content] of Object.entries(fileContents)) {
|
||||
if (file !== 'src/styles/tokens.css' && /#[0-9a-fA-F]{3,8}/.test(content)) {
|
||||
const count = (content.match(/#[0-9a-fA-F]{3,8}/g) || []).length
|
||||
designCompliance.issues.push({ file, severity: 'high', issue: `${count} hardcoded color(s)`, fix: 'Use var(--color-*) tokens', do: 'Use var(--color-primary)', dont: 'Hardcode #hex values' })
|
||||
designCompliance.score -= 2
|
||||
}
|
||||
if (/margin|padding/.test(content) && /:\s*\d+px/.test(content) && !/var\(--space/.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'medium', issue: 'Hardcoded spacing', fix: 'Use var(--space-*) tokens', do: 'Use var(--space-md)', dont: 'Hardcode 16px' })
|
||||
designCompliance.score -= 1
|
||||
}
|
||||
if (/font-size:\s*\d+/.test(content) && !/var\(--/.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'medium', issue: 'Hardcoded font size', fix: 'Use var(--text-*) tokens' })
|
||||
designCompliance.score -= 1
|
||||
}
|
||||
if (/[\u{1F300}-\u{1F9FF}]/u.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'high', issue: 'Emoji used as functional icon', fix: 'Use SVG/icon library', do: 'Use proper SVG/icon library', dont: 'Use emoji for functional icons' })
|
||||
designCompliance.score -= 2
|
||||
}
|
||||
// Industry anti-patterns from design-intelligence.json
|
||||
for (const pattern of antiPatterns) {
|
||||
if (typeof pattern === 'string') {
|
||||
const pl = pattern.toLowerCase()
|
||||
if (pl.includes('gradient') && /gradient/.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'high', issue: `Industry anti-pattern: ${pattern}` })
|
||||
designCompliance.score -= 3
|
||||
}
|
||||
// Check: hardcoded font sizes
|
||||
if (/font-size:\s*\d+/.test(content) && !/var\(--/.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'medium', issue: 'Hardcoded font size', fix: 'Use typography tokens' })
|
||||
if (pl.includes('emoji') && /[\u{1F300}-\u{1F9FF}]/u.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'high', issue: `Industry anti-pattern: ${pattern}` })
|
||||
designCompliance.score -= 2
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
}
|
||||
designCompliance.score = designTokens ? Math.max(0, 10 - designCompliance.issues.length * 2) : 7 // default if no tokens
|
||||
if (!designTokens) designCompliance.score = 7
|
||||
designCompliance.score = Math.max(0, designCompliance.score)
|
||||
review.dimensions.push(designCompliance)
|
||||
|
||||
// === Dimension 4: UX Best Practices (15%) ===
|
||||
const uxPractices = { name: 'ux-practices', weight: 0.15, score: 0, issues: [] }
|
||||
for (const file of changedFiles.filter(f => /\.(tsx|jsx|vue|svelte)$/.test(f)).slice(0, 10)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: loading states
|
||||
if (/fetch|useQuery|useSWR|axios/.test(content) && !/loading|isLoading|skeleton|spinner/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'medium', issue: 'Data fetching without loading state', fix: 'Add loading indicator' })
|
||||
const uxPractices = { name: 'ux-practices', weight: 0.15, score: 10, issues: [] }
|
||||
for (const [file, content] of Object.entries(fileContents)) {
|
||||
// cursor-pointer on clickable (CSS files)
|
||||
if (/button|<a |onClick|@click/.test(content) && !/cursor-pointer/.test(content) && /\.(css|scss)$/.test(file)) {
|
||||
uxPractices.issues.push({ file, severity: 'medium', issue: 'Missing cursor: pointer on clickable', fix: 'Add cursor: pointer', do: 'Add cursor: pointer to all clickable elements', dont: 'Leave default cursor' })
|
||||
uxPractices.score -= 1
|
||||
}
|
||||
// Transition duration range (150-300ms)
|
||||
const durations = content.match(/duration[:-]\s*(\d+)/g) || []
|
||||
for (const d of durations) {
|
||||
const ms = parseInt(d.match(/\d+/)[0])
|
||||
if (ms > 0 && (ms < 100 || ms > 500)) {
|
||||
uxPractices.issues.push({ file, severity: 'low', issue: `Transition ${ms}ms outside 150-300ms range`, fix: 'Use 150-300ms for micro-interactions' })
|
||||
uxPractices.score -= 0.5
|
||||
}
|
||||
// Check: error states
|
||||
if (/fetch|useQuery|useSWR|axios/.test(content) && !/error|isError|catch/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'medium', issue: 'Data fetching without error handling', fix: 'Add error state UI' })
|
||||
}
|
||||
// Check: empty states
|
||||
if (/\.map\(/.test(content) && !/empty|no.*data|no.*result|length\s*===?\s*0/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'low', issue: 'List rendering without empty state', fix: 'Add empty state message' })
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
if (!/\.(tsx|jsx|vue|svelte)$/.test(file)) continue
|
||||
// Loading states
|
||||
if (/fetch|useQuery|useSWR|axios/.test(content) && !/loading|isLoading|skeleton|spinner/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'medium', issue: 'Data fetching without loading state', fix: 'Add loading indicator', do: 'Show skeleton/spinner during fetch', dont: 'Leave blank screen while loading' })
|
||||
uxPractices.score -= 1
|
||||
}
|
||||
// Error states
|
||||
if (/fetch|useQuery|useSWR|axios/.test(content) && !/error|isError|catch/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'high', issue: 'Data fetching without error handling', fix: 'Add error state UI', do: 'Show user-friendly error message', dont: 'Silently fail or show raw error' })
|
||||
uxPractices.score -= 2
|
||||
}
|
||||
// Empty states
|
||||
if (/\.map\(/.test(content) && !/empty|no.*data|no.*result|length\s*===?\s*0/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'low', issue: 'List rendering without empty state', fix: 'Add empty state message' })
|
||||
uxPractices.score -= 0.5
|
||||
}
|
||||
// Responsive breakpoints
|
||||
if (/className|class=/.test(content) && !/md:|lg:|@media/.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'medium', issue: 'No responsive breakpoints', fix: 'Mobile-first responsive design', do: 'Mobile-first responsive design', dont: 'Design for desktop only' })
|
||||
uxPractices.score -= 1
|
||||
}
|
||||
}
|
||||
uxPractices.score = Math.max(0, 10 - uxPractices.issues.length * 2)
|
||||
uxPractices.score = Math.max(0, uxPractices.score)
|
||||
review.dimensions.push(uxPractices)
|
||||
|
||||
// === Dimension 5: Pre-Delivery (15%) ===
|
||||
const preDelivery = { name: 'pre-delivery', weight: 0.15, score: 0, issues: [] }
|
||||
for (const file of changedFiles.slice(0, 15)) {
|
||||
// Detailed checklist: commands/pre-delivery-checklist.md
|
||||
const preDelivery = { name: 'pre-delivery', weight: 0.15, score: 10, issues: [] }
|
||||
const allContent = Object.values(fileContents).join('\n')
|
||||
|
||||
// Per-file checks
|
||||
for (const [file, content] of Object.entries(fileContents)) {
|
||||
if (/console\.(log|debug|info)\(/.test(content) && !/test|spec|\.test\./.test(file)) {
|
||||
preDelivery.issues.push({ file, severity: 'medium', issue: 'console.log in production code', fix: 'Remove or use proper logger' })
|
||||
preDelivery.score -= 1
|
||||
}
|
||||
if (/\.(tsx|jsx)$/.test(file) && />\s*[A-Z][a-z]+\s+[a-z]+/.test(content) && !/t\(|intl|i18n|formatMessage/.test(content)) {
|
||||
preDelivery.issues.push({ file, severity: 'low', issue: 'Hardcoded text — consider i18n', fix: 'Extract to translation keys' })
|
||||
preDelivery.score -= 0.5
|
||||
}
|
||||
if (/TODO|FIXME|HACK|XXX/.test(content)) {
|
||||
preDelivery.issues.push({ file, severity: 'low', issue: 'TODO/FIXME comment found', fix: 'Resolve or create issue' })
|
||||
preDelivery.score -= 0.5
|
||||
}
|
||||
}
|
||||
|
||||
// Global checklist items (from pre-delivery-checklist.md)
|
||||
const checklist = [
|
||||
{ check: "No emoji as functional icons", test: () => /[\u{1F300}-\u{1F9FF}]/u.test(allContent), severity: 'high' },
|
||||
{ check: "cursor-pointer on clickable", test: () => /button|onClick/.test(allContent) && !/cursor-pointer/.test(allContent), severity: 'medium' },
|
||||
{ check: "Focus states visible", test: () => /button|input|<a /.test(allContent) && !/focus/.test(allContent), severity: 'high' },
|
||||
{ check: "prefers-reduced-motion", test: () => /animation|@keyframes/.test(allContent) && !/prefers-reduced-motion/.test(allContent), severity: 'medium' },
|
||||
{ check: "Responsive breakpoints", test: () => !/md:|lg:|@media.*min-width/.test(allContent), severity: 'medium' },
|
||||
{ check: "No hardcoded colors", test: () => { const nt = Object.entries(fileContents).filter(([f]) => f !== 'src/styles/tokens.css'); return nt.some(([,c]) => /#[0-9a-fA-F]{6}/.test(c)) }, severity: 'high' },
|
||||
{ check: "Dark mode support", test: () => !/prefers-color-scheme|dark:|\.dark/.test(allContent), severity: 'medium' }
|
||||
]
|
||||
for (const item of checklist) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: console.log
|
||||
if (/console\.(log|debug|info)\(/.test(content) && !/test|spec|\.test\./.test(file)) {
|
||||
preDelivery.issues.push({ file, severity: 'medium', issue: 'console.log in production code', fix: 'Remove or use proper logger' })
|
||||
}
|
||||
// Check: hardcoded strings (i18n)
|
||||
if (/\.(tsx|jsx)$/.test(file) && />\s*[A-Z][a-z]+\s+[a-z]+/.test(content) && !/t\(|intl|i18n|formatMessage/.test(content)) {
|
||||
preDelivery.issues.push({ file, severity: 'low', issue: 'Hardcoded text — consider i18n', fix: 'Extract to translation keys' })
|
||||
}
|
||||
// Check: TODO/FIXME
|
||||
if (/TODO|FIXME|HACK|XXX/.test(content)) {
|
||||
preDelivery.issues.push({ file, severity: 'low', issue: 'TODO/FIXME comment found', fix: 'Resolve or create issue' })
|
||||
if (item.test()) {
|
||||
preDelivery.issues.push({ check: item.check, severity: item.severity, issue: `Pre-delivery: ${item.check}` })
|
||||
preDelivery.score -= (item.severity === 'high' ? 2 : item.severity === 'medium' ? 1 : 0.5)
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
preDelivery.score = Math.max(0, 10 - preDelivery.issues.filter(i => i.severity !== 'low').length * 2)
|
||||
|
||||
// Must-have checks from industry config
|
||||
for (const req of mustHave) {
|
||||
if (req === 'wcag-aaa' && !/aria-/.test(allContent)) {
|
||||
preDelivery.issues.push({ severity: 'high', issue: 'WCAG AAA required but no ARIA attributes found' })
|
||||
preDelivery.score -= 3
|
||||
}
|
||||
if (req === 'high-contrast' && !/high-contrast|forced-colors/.test(allContent)) {
|
||||
preDelivery.issues.push({ severity: 'medium', issue: 'High contrast mode not supported' })
|
||||
preDelivery.score -= 1
|
||||
}
|
||||
}
|
||||
preDelivery.score = Math.max(0, preDelivery.score)
|
||||
review.dimensions.push(preDelivery)
|
||||
|
||||
// Calculate overall score
|
||||
// === Calculate Overall Score ===
|
||||
review.overall_score = review.dimensions.reduce((sum, d) => sum + d.score * d.weight, 0)
|
||||
review.issues = review.dimensions.flatMap(d => d.issues)
|
||||
const criticalCount = review.issues.filter(i => i.severity === 'high').length
|
||||
|
||||
// Determine verdict
|
||||
if (review.overall_score >= 8 && criticalCount === 0) {
|
||||
review.verdict = 'PASS'
|
||||
} else if (gcRound >= maxGCRounds) {
|
||||
@@ -265,7 +394,7 @@ if (review.overall_score >= 8 && criticalCount === 0) {
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 4: Package Results
|
||||
### Phase 4: Package Results + Shared Memory
|
||||
|
||||
```javascript
|
||||
const outputPath = sessionFolder
|
||||
@@ -283,11 +412,28 @@ if (sessionFolder && review.issues.length > 0) {
|
||||
const timestamp = new Date().toISOString().substring(0, 10)
|
||||
const highIssues = review.issues.filter(i => i.severity === 'high')
|
||||
if (highIssues.length > 0) {
|
||||
const entries = highIssues.map(i => `- [${timestamp}] [fe-qa] ${i.issue} in ${i.file}`).join('\n')
|
||||
const entries = highIssues.map(i => `- [${timestamp}] [fe-qa] ${i.issue} in ${i.file || 'global'}`).join('\n')
|
||||
Write(issuesPath, existing + '\n' + entries)
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// Update shared memory with QA history
|
||||
if (sessionFolder) {
|
||||
try {
|
||||
sharedMemory.qa_history = sharedMemory.qa_history || []
|
||||
sharedMemory.qa_history.push({
|
||||
task_subject: task.subject,
|
||||
gc_round: gcRound,
|
||||
verdict: review.verdict,
|
||||
score: review.overall_score,
|
||||
critical_count: criticalCount,
|
||||
total_issues: review.issues.length,
|
||||
timestamp: new Date().toISOString()
|
||||
})
|
||||
Write(`${sessionFolder}/shared-memory.json`, JSON.stringify(sharedMemory, null, 2))
|
||||
} catch {}
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 5: Report to Coordinator
|
||||
@@ -314,15 +460,17 @@ SendMessage({
|
||||
**Round**: ${gcRound}/${maxGCRounds}
|
||||
**Verdict**: ${review.verdict}
|
||||
**Score**: ${review.overall_score.toFixed(1)}/10
|
||||
**Strictness**: ${strictness}
|
||||
**Design Intelligence**: ${designIntel._source || 'not available'}
|
||||
|
||||
### Dimension Scores
|
||||
${review.dimensions.map(d => `- **${d.name}**: ${d.score.toFixed(1)}/10 (${d.issues.length} issues)`).join('\n')}
|
||||
|
||||
### Critical Issues (${criticalCount})
|
||||
${review.issues.filter(i => i.severity === 'high').map(i => `- \`${i.file}\`: ${i.issue} → ${i.fix}`).join('\n') || 'None'}
|
||||
${review.issues.filter(i => i.severity === 'high').map(i => `- \`${i.file || i.check}\`: ${i.issue} → ${i.fix || ''}${i.do ? `\n ✅ Do: ${i.do}` : ''}${i.dont ? `\n ❌ Don't: ${i.dont}` : ''}`).join('\n') || 'None'}
|
||||
|
||||
### Medium Issues
|
||||
${review.issues.filter(i => i.severity === 'medium').slice(0, 5).map(i => `- \`${i.file}\`: ${i.issue} → ${i.fix}`).join('\n') || 'None'}
|
||||
${review.issues.filter(i => i.severity === 'medium').slice(0, 5).map(i => `- \`${i.file || i.check}\`: ${i.issue} → ${i.fix || ''}`).join('\n') || 'None'}
|
||||
|
||||
${review.verdict === 'NEEDS_FIX' ? `\n### Action Required\nfe-developer 需修复 ${criticalCount} 个 critical 问题后重新提交。` : ''}
|
||||
|
||||
@@ -356,5 +504,7 @@ Round 2: DEV-FE-002 → QA-FE-002
|
||||
| No QA-FE-* tasks | Idle, wait for coordinator |
|
||||
| No changed frontend files | Report empty review, score = N/A |
|
||||
| Design tokens not found | Skip design compliance dimension, adjust weights |
|
||||
| design-intelligence.json not found | Skip industry anti-patterns, use standard strictness |
|
||||
| Git diff fails | Use Glob to find recent frontend files |
|
||||
| Max GC rounds exceeded | Force verdict (PASS_WITH_WARNINGS or FAIL) |
|
||||
| ui-ux-pro-max not installed | Continue without design intelligence, note in report |
|
||||
|
||||
@@ -119,6 +119,28 @@
|
||||
}
|
||||
},
|
||||
|
||||
"ui_ux_pro_max": {
|
||||
"skill_name": "ui-ux-pro-max",
|
||||
"install_command": "/plugin install ui-ux-pro-max@ui-ux-pro-max-skill",
|
||||
"invocation": "Skill(skill=\"ui-ux-pro-max\", args=\"...\")",
|
||||
"domains": ["product", "style", "typography", "color", "landing", "chart", "ux", "web"],
|
||||
"stacks": ["html-tailwind", "react", "nextjs", "vue", "svelte", "shadcn", "swiftui", "react-native", "flutter"],
|
||||
"fallback": "llm-general-knowledge",
|
||||
"design_intelligence_chain": ["analyst → design-intelligence.json", "architect → design-tokens.json", "fe-developer → tokens.css", "fe-qa → anti-pattern audit"]
|
||||
},
|
||||
|
||||
"shared_memory": {
|
||||
"file": "shared-memory.json",
|
||||
"schema": {
|
||||
"design_intelligence": "From analyst via ui-ux-pro-max",
|
||||
"design_token_registry": "From architect, consumed by fe-developer/fe-qa",
|
||||
"component_inventory": "From fe-developer, list of implemented components",
|
||||
"style_decisions": "Accumulated design decisions",
|
||||
"qa_history": "From fe-qa, audit trail",
|
||||
"industry_context": "Industry + strictness config"
|
||||
}
|
||||
},
|
||||
|
||||
"collaboration_patterns": ["CP-1", "CP-2", "CP-4", "CP-5", "CP-6", "CP-10"],
|
||||
|
||||
"session_dirs": {
|
||||
|
||||
Reference in New Issue
Block a user