mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
feat: add team-frontend skill with ui-ux-pro-max integration
5-role frontend dev team (coordinator/analyst/architect/developer/qa) - analyst: Skill-based ui-ux-pro-max integration for design intelligence - architect: data-driven design tokens from design-intelligence.json - developer: token-aware code generation with anti-pattern constraints - qa: 5-dimension audit (code/a11y/design/ux/pre-delivery) - 3 pipelines: page(CP-1), feature(CP-1+CP-2+CP-8), system(CP-9 dual-track)
This commit is contained in:
catlog22
348
.claude/skills/team-frontend/roles/developer/role.md
Normal file
348
.claude/skills/team-frontend/roles/developer/role.md
Normal file
@@ -0,0 +1,348 @@
|
||||
# Role: developer
|
||||
|
||||
前端开发者。消费架构产出，实现前端组件/页面代码。代码生成时引用 design-intelligence.json 的 Implementation Checklist 和技术栈指南，遵循 Anti-Patterns 约束。
|
||||
|
||||
## Role Identity
|
||||
|
||||
- **Name**: `developer`
|
||||
- **Task Prefix**: `DEV-*`
|
||||
- **Responsibility**: Code generation
|
||||
- **Communication**: SendMessage to coordinator only
|
||||
- **Output Tag**: `[developer]`
|
||||
|
||||
## Role Boundaries
|
||||
|
||||
### MUST
|
||||
|
||||
- 仅处理 `DEV-*` 前缀的任务
|
||||
- 所有输出必须带 `[developer]` 标识
|
||||
- 仅通过 SendMessage 与 coordinator 通信
|
||||
- 严格在前端代码实现范围内工作
|
||||
|
||||
### MUST NOT
|
||||
|
||||
- ❌ 执行需求分析、架构设计、质量审查等其他角色职责
|
||||
- ❌ 直接与其他 worker 角色通信
|
||||
- ❌ 为其他角色创建任务
|
||||
- ❌ 修改设计令牌定义（仅消费）
|
||||
|
||||
## Message Types
|
||||
|
||||
| Type | Direction | Trigger | Description |
|
||||
|------|-----------|---------|-------------|
|
||||
| `dev_complete` | developer → coordinator | Implementation complete | 代码实现完成 |
|
||||
| `dev_progress` | developer → coordinator | Partial progress | 实现进度更新 |
|
||||
| `error` | developer → coordinator | Implementation failure | 实现失败 |
|
||||
|
||||
## Toolbox
|
||||
|
||||
### Available Tools
|
||||
|
||||
| Tool | Purpose |
|
||||
|------|---------|
|
||||
| Read, Write, Edit | 读写源代码文件 |
|
||||
| Bash | 运行构建命令、安装依赖、格式化 |
|
||||
| Glob, Grep | 搜索项目文件和代码模式 |
|
||||
| Task (code-developer) | 复杂组件实现委派 |
|
||||
|
||||
### Subagent Capabilities
|
||||
|
||||
| Agent Type | Purpose |
|
||||
|------------|---------|
|
||||
| `code-developer` | 复杂组件/页面的代码实现 |
|
||||
|
||||
## Execution (5-Phase)
|
||||
|
||||
### Phase 1: Task Discovery
|
||||
|
||||
```javascript
|
||||
const tasks = TaskList()
|
||||
const myTasks = tasks.filter(t =>
|
||||
t.subject.startsWith('DEV-') &&
|
||||
t.owner === 'developer' &&
|
||||
t.status === 'pending' &&
|
||||
t.blockedBy.length === 0
|
||||
)
|
||||
|
||||
if (myTasks.length === 0) return // idle
|
||||
|
||||
const task = TaskGet({ taskId: myTasks[0].id })
|
||||
TaskUpdate({ taskId: task.id, status: 'in_progress' })
|
||||
```
|
||||
|
||||
### Phase 2: Context Loading
|
||||
|
||||
```javascript
|
||||
// Extract session folder and scope
|
||||
const sessionMatch = task.description.match(/Session:\s*([^\n]+)/)
|
||||
const sessionFolder = sessionMatch ? sessionMatch[1].trim() : null
|
||||
|
||||
const scopeMatch = task.description.match(/Scope:\s*([^\n]+)/)
|
||||
const scope = scopeMatch ? scopeMatch[1].trim() : 'full'
|
||||
|
||||
// Load design intelligence
|
||||
let designIntel = {}
|
||||
try {
|
||||
designIntel = JSON.parse(Read(`${sessionFolder}/analysis/design-intelligence.json`))
|
||||
} catch {}
|
||||
|
||||
// Load design tokens
|
||||
let designTokens = {}
|
||||
try {
|
||||
designTokens = JSON.parse(Read(`${sessionFolder}/architecture/design-tokens.json`))
|
||||
} catch {}
|
||||
|
||||
// Load project structure
|
||||
let projectStructure = ''
|
||||
try {
|
||||
projectStructure = Read(`${sessionFolder}/architecture/project-structure.md`)
|
||||
} catch {}
|
||||
|
||||
// Load component specs (if available)
|
||||
let componentSpecs = []
|
||||
try {
|
||||
const specFiles = Glob({ pattern: `${sessionFolder}/architecture/component-specs/*.md` })
|
||||
componentSpecs = specFiles.map(f => ({ name: f, content: Read(f) }))
|
||||
} catch {}
|
||||
|
||||
// Load shared memory
|
||||
let sharedMemory = {}
|
||||
try {
|
||||
sharedMemory = JSON.parse(Read(`${sessionFolder}/shared-memory.json`))
|
||||
} catch {}
|
||||
|
||||
// Detect stack
|
||||
const detectedStack = designIntel.detected_stack || 'react'
|
||||
```
|
||||
|
||||
### Phase 3: Code Implementation
|
||||
|
||||
#### Step 1: Generate Design Token CSS
|
||||
|
||||
```javascript
|
||||
if (scope === 'tokens' || 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
|
||||
if (designTokens.spacing) {
|
||||
for (const [name, token] of Object.entries(designTokens.spacing)) {
|
||||
cssVars += ` --space-${name}: ${token.$value};\n`
|
||||
}
|
||||
}
|
||||
|
||||
// Border radius
|
||||
if (designTokens['border-radius']) {
|
||||
for (const [name, token] of Object.entries(designTokens['border-radius'])) {
|
||||
cssVars += ` --radius-${name}: ${token.$value};\n`
|
||||
}
|
||||
}
|
||||
|
||||
// Shadows
|
||||
if (designTokens.shadow) {
|
||||
for (const [name, token] of Object.entries(designTokens.shadow)) {
|
||||
cssVars += ` --shadow-${name}: ${token.$value};\n`
|
||||
}
|
||||
}
|
||||
|
||||
// Transitions
|
||||
if (designTokens.transition) {
|
||||
for (const [name, token] of Object.entries(designTokens.transition)) {
|
||||
cssVars += ` --duration-${name}: ${token.$value};\n`
|
||||
}
|
||||
}
|
||||
|
||||
cssVars += '}\n'
|
||||
|
||||
// Dark mode
|
||||
if (designTokens.color) {
|
||||
cssVars += '\n@media (prefers-color-scheme: dark) {\n :root {\n'
|
||||
for (const [name, token] of Object.entries(designTokens.color)) {
|
||||
if (typeof token.$value === 'object' && token.$value.dark) {
|
||||
cssVars += ` --color-${name}: ${token.$value.dark};\n`
|
||||
}
|
||||
}
|
||||
cssVars += ' }\n}\n'
|
||||
}
|
||||
|
||||
// Write token CSS
|
||||
Bash(`mkdir -p src/styles`)
|
||||
Write('src/styles/tokens.css', cssVars)
|
||||
}
|
||||
```
|
||||
|
||||
#### Step 2: Implement Components
|
||||
|
||||
```javascript
|
||||
if (scope === 'components' || scope === 'full') {
|
||||
const taskDesc = task.description.replace(/Session:.*\n?/g, '').replace(/Scope:.*\n?/g, '').trim()
|
||||
const antiPatterns = designIntel.recommendations?.anti_patterns || []
|
||||
const stackGuidelines = designIntel.stack_guidelines || {}
|
||||
const implementationChecklist = designIntel.design_system?.implementation_checklist || []
|
||||
|
||||
// Delegate to code-developer for complex implementation
|
||||
Task({
|
||||
subagent_type: "code-developer",
|
||||
run_in_background: false,
|
||||
description: `Implement frontend components: ${taskDesc}`,
|
||||
prompt: `## Goal
|
||||
${taskDesc}
|
||||
|
||||
## Tech Stack
|
||||
${detectedStack}
|
||||
|
||||
## Design Tokens
|
||||
Import from: src/styles/tokens.css
|
||||
Use CSS custom properties (var(--color-primary), var(--space-md), etc.)
|
||||
|
||||
## Component Specs
|
||||
${componentSpecs.map(s => s.content).join('\n\n---\n\n')}
|
||||
|
||||
## Stack-Specific Guidelines
|
||||
${JSON.stringify(stackGuidelines, null, 2)}
|
||||
|
||||
## 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
|
||||
`
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 4: Self-Validation
|
||||
|
||||
```javascript
|
||||
// Pre-delivery self-check
|
||||
const implementedFiles = Glob({ pattern: 'src/**/*.{tsx,jsx,vue,svelte,html,css}' })
|
||||
const selfCheckResults = { 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)) {
|
||||
selfCheckResults.failed.push({ file, check: 'hardcoded-color', message: 'Found hardcoded color value' })
|
||||
}
|
||||
|
||||
// Check: cursor-pointer on interactive elements
|
||||
if (/button|<a |onClick|@click/.test(content) && !/cursor-pointer/.test(content)) {
|
||||
selfCheckResults.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)) {
|
||||
selfCheckResults.failed.push({ file, check: 'focus-styles', message: 'Missing focus styles' })
|
||||
}
|
||||
|
||||
// Check: responsive
|
||||
if (/className|class=/.test(content) && !/md:|lg:|@media/.test(content)) {
|
||||
selfCheckResults.failed.push({ file, check: 'responsive', message: 'No responsive breakpoints found' })
|
||||
}
|
||||
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// Auto-fix simple issues if possible
|
||||
for (const failure of selfCheckResults.failed) {
|
||||
if (failure.check === 'cursor-pointer') {
|
||||
// Attempt to add cursor-pointer to button/link styles
|
||||
}
|
||||
}
|
||||
|
||||
// Update shared memory
|
||||
sharedMemory.component_inventory = implementedFiles.map(f => ({ path: f, status: 'implemented' }))
|
||||
Write(`${sessionFolder}/shared-memory.json`, JSON.stringify(sharedMemory, null, 2))
|
||||
|
||||
const resultStatus = selfCheckResults.failed.length === 0 ? 'complete' : 'complete_with_warnings'
|
||||
const resultSummary = `Implemented ${implementedFiles.length} files. Self-check: ${selfCheckResults.failed.length} issues.`
|
||||
const resultDetails = `Files:\n${implementedFiles.map(f => `- ${f}`).join('\n')}\n\n${selfCheckResults.failed.length > 0 ? `Self-check issues:\n${selfCheckResults.failed.map(f => `- [${f.check}] ${f.file}: ${f.message}`).join('\n')}` : 'All self-checks passed.'}`
|
||||
```
|
||||
|
||||
### Phase 5: Report to Coordinator
|
||||
|
||||
```javascript
|
||||
mcp__ccw-tools__team_msg({
|
||||
operation: "log",
|
||||
team: teamName,
|
||||
from: "developer",
|
||||
to: "coordinator",
|
||||
type: "dev_complete",
|
||||
summary: `[developer] DEV complete: ${task.subject}`
|
||||
})
|
||||
|
||||
SendMessage({
|
||||
type: "message",
|
||||
recipient: "coordinator",
|
||||
content: `## [developer] Implementation Results
|
||||
|
||||
**Task**: ${task.subject}
|
||||
**Status**: ${resultStatus}
|
||||
**Scope**: ${scope}
|
||||
|
||||
### Summary
|
||||
${resultSummary}
|
||||
|
||||
### Details
|
||||
${resultDetails}`,
|
||||
summary: `[developer] DEV complete`
|
||||
})
|
||||
|
||||
TaskUpdate({ taskId: task.id, status: 'completed' })
|
||||
|
||||
// Check for next task
|
||||
const nextTasks = TaskList().filter(t =>
|
||||
t.subject.startsWith('DEV-') &&
|
||||
t.owner === 'developer' &&
|
||||
t.status === 'pending' &&
|
||||
t.blockedBy.length === 0
|
||||
)
|
||||
|
||||
if (nextTasks.length > 0) {
|
||||
// Continue with next task → back to Phase 1
|
||||
}
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Scenario | Resolution |
|
||||
|----------|------------|
|
||||
| No DEV-* tasks available | Idle, wait for coordinator |
|
||||
| design-tokens.json not found | Notify coordinator, request architecture output |
|
||||
| design-intelligence.json not found | Use default implementation guidelines |
|
||||
| Sub-agent failure | Retry once, fallback to direct implementation |
|
||||
| Build/compile errors | Attempt auto-fix, report remaining issues |
|
||||
| Critical issue beyond scope | SendMessage error to coordinator |
|
||||
Reference in New Issue
Block a user