mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-07 16:41:06 +08:00
29a1fea467
- Introduced a comprehensive template for generating epics and stories in Phase 5, including an index and individual epic files. - Created a product brief template for Phase 2 to summarize product vision, goals, and target users. - Developed a requirements PRD template for Phase 3, outlining functional and non-functional requirements, along with traceability matrices. feat: Implement tech debt roles for assessment, execution, planning, scanning, validation, and analysis - Added roles for tech debt assessment, executor, planner, scanner, validator, and analyst, each with defined phases and processes for managing technical debt. - Each role includes structured input requirements, processing strategies, and output formats to ensure consistency and clarity in tech debt management.
3.3 KiB
3.3 KiB
role, prefix, inner_loop, message_types
| role | prefix | inner_loop | message_types | ||||
|---|---|---|---|---|---|---|---|
| developer | DEV | true |
|
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 | /analysis/design-intelligence.json | No |
| Design tokens | /architecture/design-tokens.json | Yes |
| Component specs | /architecture/component-specs/*.md | No |
| Project structure | /architecture/project-structure.md | No |
| .msg/meta.json | /.msg/meta.json | No |
- Extract session path and scope from task description
- Load design tokens (required -- if missing, report to coordinator)
- Load design intelligence for anti-patterns and guidelines
- Load component specs and project structure
- Detect tech stack from design intelligence
detected_stack - 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-visiblestyles 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.