Task Breakdown

⚠️ CRITICAL RULES - READ FIRST

BEFORE doing anything, you MUST:

1. CHECK EXISTING TASK FILE FIRST:

   • ALWAYS check if

     story-{story-name}.md

     already exists in

     docs/reference/frontend/tasks/

   • If exists: READ it and continue from current progress (add new tasks or update existing ones)
   • If not exists: Create new task breakdown file
   • NEVER re-break down existing tasks

2. FILE NAMING:

   • Pattern:

     story-{story-name}.md

     (single file per story)
   • Example:

     story-user-profile.md

   • All tasks for this story go into this ONE file
   • Tasks are separated by

     ---

     dividers

3. MULTIPLE TASKS IN ONE FILE:

   • One file contains ALL tasks for the story
   • Each task = independently testable section
   • Clear scope and acceptance criteria per task
   • Tasks numbered sequentially (Task 1, Task 2, etc.)

4. ALWAYS SAVE TO CORRECT PATH:

   • Path:

     docs/reference/frontend/tasks/story-{story-name}.md

   • NO exceptions, NO other locations

5. READ CONTEXT FIRST:

   • Read story from

     docs/reference/pm/stories/

   • Read design from

     docs/reference/frontend/designs/

     if exists
   • Read design system from

     docs/reference/frontend/design-system.md

   • Read constraints from

     docs/reference/frontend/constraints.md

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. Read story/PRD: Load from

   docs/reference/pm/stories/

   or

   docs/reference/pm/versions/

2. Read design (if exists): Load from

   docs/reference/frontend/designs/

3. Read constraints: Load design system and technical constraints
4. Identify components: What UI elements are needed
5. Identify interactions: What logic and events are needed
6. Break into tasks: Independently testable, single responsibility
7. Order by dependencies: Setup → Static UI → Dynamic → Tests
8. Generate single file: Create

   story-{story-name}.md

   with all tasks in sections
9. Update Story file: Add "Related Tasks" section to story file with link to task file
10. Summary: Show created file and next steps

Task File Format

See Task File Template for complete structure.

Key points:

• Single file contains all tasks for the story
• Tasks numbered sequentially (Task 1, Task 2, etc.)
• Each task has: Description, Context, Acceptance Criteria, Scope, Implementation Steps
• Progress section at the end tracks completion
• Both story-based and standalone use the same format (only filename differs)

Updating Story File

After generating the task file, ALWAYS update the story file to add the "Related Tasks" section:

## Related Tasks

### Frontend Tasks

Task breakdown: [docs/reference/frontend/tasks/story-user-profile.md](../frontend/tasks/story-user-profile.md)

**Progress**: 0/5 tasks completed

- [ ] Task 1: Setup Component
- [ ] Task 2: Implement Header
- [ ] Task 3: Implement Avatar
- [ ] Task 4: Implement Bio
- [ ] Task 5: Add Tests

Key points:

• Add this section at the end of the story file (before any existing notes)
• Include link to the task file
• Use

  - [ ]

  checkboxes for each task (will be checked when task completes)
• List tasks in execution order (Setup → UI → Logic → Tests)
• Keep the section organized by frontend/backend if both exist
• Include progress counter (X/Y tasks completed)

Output Example

After breaking down "user-profile" story:

Created task file for story 'user-profile':

✓ docs/reference/frontend/tasks/story-user-profile.md

Task breakdown includes:
- Task 1: Setup Component Structure (setup)
- Task 2: Implement Header Section (feature)
- Task 3: Implement Avatar Component (feature)
- Task 4: Implement Bio Section (feature)
- Task 5: Add Comprehensive Tests (testing)

Total: 5 tasks

Next steps:
1. Review task breakdown in story-user-profile.md
2. Use /frontend.plan to add detailed steps to specific tasks
3. Use /frontend.implement to start executing tasks

Key Rules

• ALWAYS create a single file containing all tasks for the story
• MUST use

  story-{story-name}.md

  naming (NOT multiple files)
• ALWAYS include test tasks at the end
• MUST note dependencies between tasks (in each task's metadata)
• Keep tasks focused - not too big, not too small
• Each task section is self-contained with clear acceptance criteria
• Separate tasks with

  ---

  dividers
• Include Story Progress section at the end of file

Common Mistakes

• ❌ Tasks too large (full page) → ✅ Break into sections
• ❌ Tasks too small (add one button) → ✅ Group related work
• ❌ Skip dependencies → ✅ Note which tasks depend on others
• ❌ Forget testing → ✅ Always include test tasks
• ❌ Create multiple files → ✅ Use single file with multiple task sections