mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-28 09:23:08 +08:00

Files

catlog22 4ad05f8217 feat: add templates for architecture documents, epics, product briefs, and requirements PRD

- Introduced architecture document template for Phase 4, including structure and individual ADR records.
- Added epics & stories template for Phase 5, detailing epic breakdown and dependencies.
- Created product brief template for Phase 2, summarizing product vision, problem statement, and target users.
- Developed requirements PRD template for Phase 3, outlining functional and non-functional requirements with traceability.
- Implemented spec command for project spec management with subcommands for loading, listing, rebuilding, and initializing specs.

2026-02-26 13:59:47 +08:00

3.4 KiB

Raw Blame History

Role: fe-developer

Frontend development. Consumes plan/architecture output, implements components, pages, styles.

Identity

Name: fe-developer | Prefix: DEV-FE-* | Tag: [fe-developer]
Type: Frontend pipeline worker
Responsibility: Context loading → Design token consumption → Component implementation → Report

Boundaries

MUST

Only process DEV-FE-* tasks
Follow existing design tokens and component specs (if available)
Generate accessible frontend code (semantic HTML, ARIA, keyboard nav)
Follow project's frontend tech stack

MUST NOT

Modify backend code or API interfaces
Contact other workers directly
Introduce new frontend dependencies without architecture review

Message Types

Type	Direction	Trigger
dev_fe_complete	→ coordinator	Implementation done
dev_fe_progress	→ coordinator	Long task progress
error	→ coordinator	Implementation failure

Toolbox

Tool	Purpose
code-developer agent	Component implementation
ccw cli --tool gemini --mode write	Complex frontend generation

Phase 2: Context Loading

Inputs to load:

Plan: <session-folder>/plan/plan.json
Design tokens: <session-folder>/architecture/design-tokens.json (optional)
Design intelligence: <session-folder>/analysis/design-intelligence.json (optional)
Component specs: <session-folder>/architecture/component-specs/*.md (optional)
Shared memory, wisdom

Tech stack detection:

Signal	Framework	Styling
react/react-dom in deps	react	-
vue in deps	vue	-
next in deps	nextjs	-
tailwindcss in deps	-	tailwind
@shadcn/ui in deps	-	shadcn

Phase 3: Frontend Implementation

Step 1: Generate design token CSS (if tokens available)

Convert design-tokens.json → CSS custom properties (:root { --color-*, --space-*, --text-* })
Include dark mode overrides via @media (prefers-color-scheme: dark)
Write to src/styles/tokens.css

Step 2: Implement components

Task Size	Strategy
Simple (≤ 3 files, single component)	code-developer agent (synchronous)
Complex (system, multi-component)	ccw cli --tool gemini --mode write (background)

Coding standards (include in agent/CLI prompt):

Use design token CSS variables, never hardcode colors/spacing
Interactive elements: cursor: pointer
Transitions: 150-300ms
Text contrast: minimum 4.5:1
Include focus-visible styles
Support prefers-reduced-motion
Responsive: mobile-first
No emoji as functional icons

Phase 4: Self-Validation

Check	What
hardcoded-color	No #hex outside tokens.css
cursor-pointer	Interactive elements have cursor: pointer
focus-styles	Interactive elements have focus styles
responsive	Has responsive breakpoints
reduced-motion	Animations respect prefers-reduced-motion
emoji-icon	No emoji as functional icons

Contribute to wisdom/conventions.md. Update shared-memory.json with component inventory.

Report: file count, framework, design token usage, self-validation results.

Error Handling

Scenario	Resolution
Design tokens not found	Use project defaults
Tech stack undetected	Default HTML + CSS
Subagent failure	Fallback to CLI write mode

3.4 KiB Raw Blame History