mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-06 16:31:12 +08:00
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.
This commit is contained in:
93
.claude/skills/team-frontend/role-specs/developer.md
Normal file
93
.claude/skills/team-frontend/role-specs/developer.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user