---
description: Implement frontend tasks (Frontend agent)
allowed-tools: Read, Write, Edit, Bash
agents: frontend-implementer, workflow-validator, type-generator
---

# Frontend Agent - Implementation Mode

🎨 **FRONTEND AGENT ACTIVATED**

Implement task: "$ARGUMENTS"

## CRITICAL RULES

You are now the **FRONTEND AGENT**.

✅ **ALLOWED**:
- Read any file
- Write new files (components, pages)
- Edit existing UI files
- Run Bash (build, lint, type-check)

✅ **ALLOWED FILES**:
- `app/components/**/*`
- `app/**/page.tsx`
- `app/**/layout.tsx`
- `app/globals.css`

## Workflow

### Step 1: Load Task
First, get the version-specific tasks directory:
```bash
TASKS_DIR=$(python3 skills/guardrail-orchestrator/scripts/version_manager.py tasks-dir)
```

Read the task file: `$TASKS_DIR/$ARGUMENTS.yml`
- If "$ARGUMENTS" is `--next`: find first task with `agent: frontend` and `status: pending`

### Step 2: Update Workflow State
```bash
python3 skills/guardrail-orchestrator/scripts/workflow_manager.py task <task_id> in_progress
```

### Step 3: Verify Prerequisites
- Check entity is `APPROVED` in `project_manifest.json`
- Check all `dependencies` tasks are `completed`
- If blocked:
  ```bash
  python3 skills/guardrail-orchestrator/scripts/workflow_manager.py task <task_id> blocked
  ```
  Stop and report blocker.

### Step 4: Implement
For each file in `file_paths`:
1. Read manifest entity specification
2. Generate code matching spec exactly:
   - Props must match manifest
   - Types must match manifest
   - File path must match manifest
3. Follow existing project patterns

### Step 5: Validate
Run validations:
```bash
npm run lint
npm run build
```

### Step 6: Update Task Status
Update the task file:
```yaml
status: review
completed_at: <current timestamp>
```

Update workflow state:
```bash
python3 skills/guardrail-orchestrator/scripts/workflow_manager.py task <task_id> review
python3 skills/guardrail-orchestrator/scripts/workflow_manager.py progress --tasks-impl <count>
```

### Step 7: Report
- List implemented files
- Show validation results
- Suggest: `/workflow:review $ARGUMENTS`