Implement

Language Configuration

Before generating any content, check aico.json in project root for language field to determine the output language. If not set, default to English.

Process

1. •

   Check task file EXISTS (MANDATORY):

   • •Look for docs/reference/frontend/tasks/{story-id}.md
   • •If NOT exists → STOP and tell user: "Please run /frontend.tasks first to break down the story"
   • •If exists → proceed to step 1
2. •

   Read constraints FIRST (before any code):

   • •docs/reference/frontend/design-system.md - Colors, typography, spacing
   • •docs/reference/frontend/constraints.md - Tech stack, patterns
   • •docs/reference/frontend/designs/{name}.md - Component specs
3. •

   Execute each step in order:

   • •Run the action
   • •Run verification command
   • •If fail → fix before proceeding
   • •If pass → continue to next step
4. •

   After all steps:

   • •Run unit tests
   • •Run build check
5. •

   Update task status in docs/reference/frontend/tasks/{story}.md

6. •

   Notify PM for acceptance - Notify PM to verify (PM checks all related tasks and updates Story status)

7. •

   Commit changes (user decides when to commit)

Execution Flow

Check Task File → Read Constraints → Execute Steps → Verify Each → Test → Mark Complete → Notify PM → Commit

Step Execution Rules

Rule 1: Follow Constraints Exactly

// ❌ Wrong: Ignore design system
<button className="bg-blue-500 text-white">

// ✅ Right: Use design tokens
<button className="bg-primary text-primary-foreground">

Rule 2: Verify Before Proceeding

Each step has a Verify section - MUST run it and confirm expected output before moving on.

Rule 3: No Skipping

• •Execute ALL steps in order
• •Do NOT combine steps
• •Do NOT skip verification

Post-Implementation Checklist

1. •Run tests: npm test [component]
2. •Run build: npm run build
3. •Update task status in tasks file
4. •Notify PM: Tell PM frontend tasks are complete, request acceptance
5. •Commit (user decides when): git commit -m "feat([scope]): [description]"

Error Handling

Key Rules

• •ALWAYS read all constraint files before writing any code
• •MUST run verification command for each step
• •ALWAYS run tests before marking task complete
• •MUST update task status in tasks/{story}.md
• •MUST notify PM after completing all tasks (PM handles story verification)
• •Let user decide when to commit

Common Mistakes

• •❌ Implement without task file → ✅ ALWAYS run /frontend.tasks first to break down story
• •❌ Skip reading constraints → ✅ ALWAYS read before coding
• •❌ Skip verification → ✅ Run verify command for each step
• •❌ Skip tests → ✅ Run tests before marking complete
• •❌ Forget to update task status → ✅ Update tasks/{story}.md
• •❌ Directly update story status → ✅ Notify PM, let PM verify and update story

TDD Deep Dive

The TDD Iron Law

NO PRODUCTION CODE WITHOUT A FAILING TEST FIRST

Write code before the test? Delete it. Start over.

Red-Green-Refactor Cycle

RED → Verify Fails → GREEN → Verify Passes → REFACTOR → Repeat

1. RED - Write Failing Test

test('Button shows loading state when clicked', async () => {
  render(<SubmitButton onClick={mockSubmit} />)
  await userEvent.click(screen.getByRole('button'))
  expect(screen.getByRole('button')).toBeDisabled()
  expect(screen.getByTestId('spinner')).toBeInTheDocument()
})

2. Verify RED - Watch It Fail

npm test -- --watch ComponentName

3. GREEN - Write Minimal Code

Write simplest code to pass the test. Don't add features not in test.

4. Verify GREEN - Watch It Pass

5. REFACTOR - Clean Up

Only after green. Keep tests passing.

Testing Library Query Priority

1. •getByRole - accessible by everyone
2. •getByLabelText - form fields
3. •getByText - non-interactive elements
4. •getByTestId - last resort

Test Coverage Requirements

TDD Red Flags - STOP and Start Over

• •Code before test
• •Test passes immediately
• •Testing implementation details
• •querySelector everywhere

Iron Law

NO CODE WITHOUT APPROVED PLAN

This rule is non-negotiable. Before writing code:

1. •Task breakdown must exist and be approved
2. •Acceptance criteria must be defined
3. •Dependencies must be identified and available

Rationalization Defense