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

    ___    __  ____________  ____  ___   ____________
   /   |  / / / /_  __/ __ \/ __ \/ _ | / ____/  _/ /
  / /| | / / / / / / /_/ / /_/ /  __ |/ /    / // /
 / ___ |/ /_/ / / / / _, _/ _, _/ /_/ / /___/ // /
/_/  |_|_____/ /_/_/ /_/ |_/_/ |_|\____/\____/___/
 
                   v1.0.0
 
Creating .claude/ directory structure...
Initializing state files...
Creating template files...
  ✓ Created CLAUDE.md
  ✓ Created .claude/product/index.md (hierarchical structure)
 
Added .agentful/ to .gitignore
 
✅ agentful initialized successfully!
 
Next steps:
  1. Edit your product specification (see options below)
  2. Run: claude
  3. Type: /agentful-start

# Product Specification
 
## Overview
A simple task management application for personal productivity. Users can add, complete, and delete tasks with a clean, intuitive interface.
 
## Goals
- [ ] Users can add tasks with descriptions
- [ ] Users can mark tasks as complete
- [ ] Users can delete tasks
- [ ] Users can filter tasks by status
- [ ] 80%+ test coverage
- [ ] No type errors (adapts to stack)
 
## Tech Stack
 
### Frontend
- **Framework**: Next.js 14
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **State Management**: React useState/useReducer
 
### Backend
- **Runtime**: Node.js
- **Framework**: Next.js API Routes (not needed for this project)
 
### Database
- **Database**: None (local state only)
 
### Testing
- **Unit**: Vitest
- **E2E**: None (skip for this project)
 
### Deployment
- **Hosting**: Vercel (future)
 
## Features (Priority Order)
 
### 1. Add Task - CRITICAL
**Description**: Users can add new tasks to their list
 
**Acceptance Criteria**:
- [ ] Input field for task description
- [ ] Add button
- [ ] Task appears in list after adding
- [ ] Input clears after adding
- [ ] Validation: empty tasks not allowed
- [ ] Validation: max 200 characters
 
**User Stories**:
- As a user, I want to add tasks so that I can remember what I need to do
- As a user, I want the input to clear after adding so I can quickly add multiple tasks
 
**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 as complete/incomplete
 
**Acceptance Criteria**:
- [ ] Checkbox or click to toggle
- [ ] Visual indicator for completed tasks (strikethrough)
- [ ] Completion status persists in local state
 
**User Stories**:
- As a user, I want to mark tasks complete so I can see my progress
 
**Technical Notes**:
- Use checkbox or clickable element
- Add line-through style for completed tasks
- Gray out completed task text
 
---
 
### 3. Delete Task - HIGH
**Description**: Users can delete tasks they no longer need
 
**Acceptance Criteria**:
- [ ] Delete button on each task
- [ ] Confirmation before deleting (optional, skip for MVP)
- [ ] Task removes from list after deletion
 
**User Stories**:
- As a user, I want to delete tasks so I can keep my list clean
 
**Technical Notes**:
- Use trash icon or "Delete" text button
- Red color for delete action
- Smooth removal animation (optional)
 
---
 
### 4. Filter Tasks - MEDIUM
**Description**: Users can filter tasks by completion status
 
**Acceptance Criteria**:
- [ ] Filter buttons: All, Active, Completed
- [ ] Only show tasks matching selected filter
- [ ] Active filter highlighted
- [ ] Task count updates per filter
 
**User Stories**:
- As a user, I want to see only active tasks so I can focus on what's left
 
**Technical Notes**:
- Use button group for filters
- Update task count when filter changes
- Persist filter selection in state
 
---
 
### 5. Task Counter - LOW
**Description**: Display count of remaining active tasks
 
**Acceptance Criteria**:
- [ ] Show "X tasks left" text
- [ ] Updates in real-time
- [ ] Only counts active (incomplete) tasks
 
**User Stories**:
- As a user, I want to see how many tasks are left so I know my progress
 
**Technical Notes**:
- Display near filter buttons
- Update whenever tasks change
 
---
 
## Architecture Notes
 
### Folder Structure

 
### Design Patterns
 
- Use TypeScript for all components
- Functional components with hooks
- Props interfaces explicitly defined
- Separation of concerns (UI, state, logic)
 
### Constraints
 
- Mobile-first responsive design
- Accessible (keyboard navigation, ARIA labels)
- Client-side only (no API routes needed)
- Use Tailwind utility classes
 
## Out of Scope (for MVP)
 
- User authentication
- Task editing
- Task priorities
- Due dates
- Persistent storage (localStorage is fine)
- Cloud sync
 
## Success Criteria
 
The product is complete when:
 
1. All critical and high features implemented and tested
2. All tests passing with 80%+ coverage
3. No type errors (adapts to stack)
4. No lint errors
5. Responsive on mobile (375px+)
6. Accessible with keyboard
 
## Notes
 
- Keep it simple - this is a learning project
- Focus on clean code and tests
- Use TypeScript strictly (no any types)
- Follow Tailwind best practices
- Write tests as you go (via agentful)

claude

/agentful-start

🏗️  Architect Agent analyzing...
 
Detected tech stack:
- Next.js 14
- TypeScript
- Tailwind CSS
- Vitest
 
Generated specialized agents:
✓ nextjs-agent
✓ typescript-agent
✓ tailwind-agent
✓ vitest-agent
✓ react-agent
 
Architecture analysis complete.

📋 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 files:
✓ src/lib/types.ts (Task interface)
✓ src/components/TaskInput.tsx
✓ src/components/TaskList.tsx
✓ src/components/TaskItem.tsx
✓ src/app/page.tsx (main page)
 
Updated files:
✓ src/app/globals.css (Tailwind imports)

🧪 Tester Agent writing tests...
 
Created test files:
✓ src/components/__tests__/TaskInput.test.tsx
✓ src/components/__tests__/TaskList.test.tsx
✓ src/components/__tests__/TaskItem.test.tsx
 
Running tests...
✓ TaskInput renders correctly
✓ TaskInput validates empty input
✓ TaskInput validates max length
✓ TaskList displays tasks
✓ TaskItem toggles completion
✓ TaskItem deletes task
 
14 tests passing

🔍 Reviewer Agent validating...
 
Running quality checks...
 
TypeScript: ✅ No errors
ESLint: ✅ No errors
Tests: ✅ All passing
Coverage: ✅ 87%
Dead Code: ✅ None found
Security: ✅ No issues
 
Feature complete: Add Task (100%)

Next: Toggle Task Completion
→ @frontend implementing toggle functionality
→ @tester writing toggle tests
→ @reviewer validating quality
 
Feature complete: Toggle Task Completion (100%)
 
Next: Delete Task
→ @frontend implementing delete functionality
...

/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%
   ✅ No Dead Code
   ✅ No Security Issues
 
No pending decisions.
 
Next Actions:
   • /agentful-start    - Continue development
   • /agentful-validate - Run quality checks

⚠️  Decision needed:
 
For the "Delete Task" feature, should we:
1. Show confirmation dialog before deleting
2. Delete immediately without confirmation
 
Context: This affects user experience. Confirmation is safer but
adds friction. Immediate delete is faster but riskier.

/agentful-decide

Option 2: Delete immediately without confirmation
We can add undo functionality in v2 if needed.

# View component structure
tree src/components
 
# View test coverage
npm run test -- --coverage
 
# Run TypeScript check
npx tsc --noEmit
 
# Run linting
npm run lint

# Start development server
npm run dev

# Final validation
/agentful-validate

✅ All tests passing (48/48)
✅ No type errors (adapts to stack)
✅ No ESLint errors
✅ Test coverage: 87%
✅ No dead code detected
✅ No security issues
 
Project complete! 🎉

src/
├── app/
│   ├── page.tsx              # Main page with task manager
│   ├── layout.tsx            # Root layout
│   └── globals.css           # Tailwind styles
├── components/
│   ├── TaskInput.tsx         # Add task input component
│   ├── TaskList.tsx          # Task list container
│   ├── TaskItem.tsx          # Individual task display
│   └── TaskFilters.tsx       # Filter button group
├── lib/
│   └── types.ts              # TypeScript interfaces
└── components/
    └── __tests__/
        ├── TaskInput.test.tsx    # 8 tests
        ├── TaskList.test.tsx     # 12 tests
        ├── TaskItem.test.tsx     # 14 tests
        └── TaskFilters.test.tsx  # 14 tests

# Check status
/agentful-status
 
# Look for:
# - Pending decisions? → /agentful-decide
# - High iteration count? → /agentful-start to resume
# - Errors? → /agentful-validate

🧪 Tester Agent: Adding edge case tests...
Coverage now: 82% ✅

# Check specific errors
npx tsc --noEmit
 
# Manually fix if needed
# Then /agentful-start to continue

### 6. Task Due Dates - MEDIUM
**Description**: Add due dates to tasks
...

### 6. Task Due Dates - MEDIUM
**Description**: Add due dates to tasks
...

/agentful-start

### 1. Add Task - CRITICAL
**Acceptance Criteria**:
- [ ] Input field for task description
- [ ] Add button
- [ ] Priority selector (Low/Medium/High) ← NEW
...

/agentful-start

// src/components/TaskItem.tsx
<div className="bg-blue-500 ...">  // Change color