Your First Project

mkdir task-manager
cd task-manager
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
npx @itz4blitz/agentful init
claude

# Product Specification
 
## Overview
A simple task management application for personal productivity.
 
## Goals
- [ ] Users can add tasks
- [ ] Users can mark tasks complete
- [ ] Users can delete tasks
- [ ] Users can filter tasks by status
- [ ] 80%+ test coverage
 
## Tech Stack
 
### Frontend
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: React useState
 
### Testing
- Unit: Vitest
 
## Features (Priority Order)
 
### 1. Add Task - CRITICAL
**Description**: Users can add new tasks
 
**Acceptance Criteria**:
- [ ] Input field for task description
- [ ] Add button
- [ ] Task appears in list
- [ ] Input clears after adding
- [ ] Validation: empty tasks not allowed
- [ ] Validation: max 200 characters
 
**Technical Notes**:
- Use input with text type
- Show error message for invalid input
- Focus input after adding
 
### 2. Toggle Task Completion - CRITICAL
**Description**: Users can mark tasks complete/incomplete
 
**Acceptance Criteria**:
- [ ] Checkbox to toggle
- [ ] Visual indicator for completed tasks (strikethrough)
- [ ] Completion status persists
 
**Technical Notes**:
- Use checkbox element
- Add line-through style for completed
- Gray out completed task text
 
### 3. Delete Task - HIGH
**Description**: Users can delete tasks
 
**Acceptance Criteria**:
- [ ] Delete button on each task
- [ ] Task removes from list
 
**Technical Notes**:
- Use trash icon or "Delete" button
- Red color for delete action
 
### 4. Filter Tasks - MEDIUM
**Description**: Users can filter tasks by status
 
**Acceptance Criteria**:
- [ ] Filter buttons: All, Active, Completed
- [ ] Only show tasks matching filter
- [ ] Active filter highlighted
- [ ] Task count updates per filter
 
**Technical Notes**:
- Use button group for filters
- Update count when filter changes
 
### 5. Task Counter - LOW
**Description**: Display count of remaining tasks
 
**Acceptance Criteria**:
- [ ] Show "X tasks left" text
- [ ] Updates in real-time
- [ ] Only counts active (incomplete) tasks
 
## Architecture Notes
 
### Folder Structure
 
src/
├── app/
│   ├── page.tsx          # Main task manager page
│   ├── layout.tsx        # Root layout
│   └── globals.css       # Global styles
├── components/
│   ├── TaskList.tsx      # Task list component
│   ├── TaskItem.tsx      # Individual task
│   ├── TaskInput.tsx     # Add task input
│   └── TaskFilters.tsx   # Filter buttons
└── lib/
    └── types.ts          # TypeScript types
 
### Design Patterns
- TypeScript for all components
- Functional components with hooks
- Explicit props interfaces
- Separation of concerns
 
### Constraints
- Mobile-first responsive design
- Accessible (keyboard navigation, ARIA labels)
- Client-side only
- Tailwind utility classes
 
## Success Criteria
1. All critical and high features implemented
2. All tests passing with 80%+ coverage
3. No type errors
4. No lint errors
5. Responsive on mobile (375px+)
6. Accessible with keyboard

/agentful-start

Orchestrator planning work...
Feature queue:
1. Add Task (CRITICAL)
2. Toggle Task Completion (CRITICAL)
3. Delete Task (HIGH)
4. Filter Tasks (MEDIUM)
5. Task Counter (LOW)
 
Starting: Add Task feature

Frontend Agent implementing...
Created:
- src/lib/types.ts
- src/components/TaskInput.tsx
- src/components/TaskList.tsx
- src/components/TaskItem.tsx
- src/app/page.tsx

Tester Agent writing tests...
Created:
- src/components/__tests__/TaskInput.test.tsx
- src/components/__tests__/TaskList.test.tsx
- src/components/__tests__/TaskItem.test.tsx
 
Running tests... 14 passing

Reviewer Agent validating...
TypeScript: ✓ No errors
ESLint: ✓ No errors
Tests: ✓ All passing
Coverage: ✓ 87%
 
Feature complete: Add Task (100%)

/agentful-status

Working on: Filter Tasks feature
Phase: implementation
Iterations: 15
 
Progress: 60%
 
Features:
✓ Add Task (100%)
✓ Toggle Task Completion (100%)
✓ Delete Task (100%)
• Filter Tasks (40%)
○ Task Counter (0%)
 
Quality Gates:
✓ Tests Passing (42/42)
✓ No Type Errors
✓ Coverage 87%
 
Reading from: .claude/product/index.md

Decision needed:
For "Delete Task", should we:
1. Show confirmation dialog before deleting
2. Delete immediately without confirmation

/agentful-decide

Option 2: Delete immediately

# View structure
tree src/components
 
# Test coverage
npm run test -- --coverage
 
# Type check
npx tsc --noEmit
 
# Lint
npm run lint
 
# Run dev server
npm run dev

src/
├── app/
│   ├── page.tsx
│   ├── layout.tsx
│   └── globals.css
├── components/
│   ├── TaskInput.tsx
│   ├── TaskList.tsx
│   ├── TaskItem.tsx
│   └── TaskFilters.tsx
├── lib/
│   └── types.ts
└── components/
    └── __tests__/
        ├── TaskInput.test.tsx
        ├── TaskList.test.tsx
        ├── TaskItem.test.tsx
        └── TaskFilters.test.tsx

/agentful-status

npx tsc --noEmit
# Fix manually if needed
/agentful-start  # Continue development

### 6. Task Due Dates - MEDIUM
**Description**: Add due dates to tasks
 
**Acceptance Criteria**:
- [ ] Date picker on add task
- [ ] Display due date on task
- [ ] Sort by due date

/agentful-start

mkdir -p .claude/product/domains/tasks
mv .claude/product/index.md .claude/product/index.md.bak
# Split content into domain files