Files
Claude-Code-Workflow/.codex/skills/team-frontend/roles/architect/role.md
catlog22 1e560ab8e8 feat: migrate all codex team skills from spawn_agents_on_csv to spawn_agent + wait_agent architecture
- Delete 21 old team skill directories using CSV-wave pipeline pattern (~100+ files)
- Delete old team-lifecycle (v3) and team-planex-v2
- Create generic team-worker.toml and team-supervisor.toml (replacing tlv4-specific TOMLs)
- Convert 19 team skills from Claude Code format (Agent/SendMessage/TaskCreate)
  to Codex format (spawn_agent/wait_agent/tasks.json/request_user_input)
- Update team-lifecycle-v4 to use generic agent types (team_worker/team_supervisor)
- Convert all coordinator role files: dispatch.md, monitor.md, role.md
- Convert all worker role files: remove run_in_background, fix Bash syntax
- Convert all specs/pipelines.md references
- Final state: 20 team skills, 217 .md files, zero Claude Code API residuals

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-24 16:54:48 +08:00

3.3 KiB

role, prefix, inner_loop, message_types
role prefix inner_loop message_types
architect ARCH false
success error
arch_ready error

Frontend Architect

Consume design-intelligence.json to define design token system, component architecture, and project structure. Token values prioritize ui-ux-pro-max recommendations. Produce architecture artifacts for developer consumption.

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 Yes
.msg/meta.json /.msg/meta.json No
  1. Extract session path and scope from task description
  2. Load design intelligence from analyst output
  3. Load .msg/meta.json for shared state (industry_context, design_intelligence)
  4. Detect existing project structure via Glob src/**/*

Fail-safe: If design-intelligence.json not found, use default token values and log warning.

Phase 3: Architecture Design

Scope selection:

Scope Output
tokens Design token system only
components Component specs only
full Both tokens and components + project structure

Step 1: Design Token System (scope: tokens or full):

Generate <session>/architecture/design-tokens.json with categories:

Category Content Source
color Primary, secondary, background, surface, text, CTA ui-ux-pro-max
typography Font families, font sizes (scale) ui-ux-pro-max
spacing xs through 2xl Standard scale
border-radius sm, md, lg, full Standard scale
shadow sm, md, lg Standard elevation
transition fast, normal, slow Standard durations

Use $type + $value format (Design Tokens Community Group). Support light/dark mode via nested values.

Step 2: Component Architecture (scope: components or full):

Generate component specs in <session>/architecture/component-specs/:

  • Design reference (style, stack)
  • Props table (name, type, default, description)
  • Variants table
  • Accessibility requirements (role, keyboard, ARIA, contrast)
  • Anti-patterns to avoid (from design intelligence)

Step 3: Project Structure (scope: full):

Generate <session>/architecture/project-structure.md with stack-specific layout:

Stack Key Directories
react src/components/, src/pages/, src/hooks/, src/styles/
nextjs app/(routes)/, app/components/, app/lib/, app/styles/
vue src/components/, src/views/, src/composables/, src/styles/
html-tailwind src/components/, src/pages/, src/styles/

Phase 4: Self-Review

Check Method Pass Criteria
JSON validity Parse design-tokens.json No errors
Required categories Check color, typography, spacing All present
Anti-pattern compliance Token values vs anti-patterns No violations
Component specs complete Each has props + accessibility All complete
File existence Verify all planned files All present

Update .msg/meta.json: merge design_token_registry and component_inventory keys.