Feature Development Workflow Command

Command

/feature

Description

Orchestrates a complete feature development workflow from requirements through implementation, testing, and PR creation. Follows a structured approach that covers backend, frontend, database, and testing concerns systematically.

Behavior

Arguments

• $ARGUMENTS -- Feature description (e.g., "user profile page with avatar upload")

Workflow Phases

Phase 1: Planning

1. Analyze requirements: Break down the feature description into specific tasks
2. Identify affected areas: List files, APIs, database tables, and UI components
3. Define the data model: Schema changes, migrations, types/interfaces
4. Design the API: Endpoints, request/response shapes, error handling
5. Plan the UI: Components, state management, user flows
6. Estimate scope: Present a task list for approval before coding

Copy
## Feature Plan: User Profile Page

### Tasks
- [ ] Database: Add `avatar_url` column to users table
- [ ] Backend: POST /api/users/:id/avatar (upload endpoint)
- [ ] Backend: GET /api/users/:id/profile (profile data)
- [ ] Frontend: ProfilePage component
- [ ] Frontend: AvatarUpload component
- [ ] Tests: API endpoint tests
- [ ] Tests: Component tests

Proceed with implementation? (yes/no)

Phase 2: Database & Backend

1. Create database migration (if needed)
2. Define TypeScript types/interfaces
3. Implement service layer (business logic)
4. Implement API route handlers
5. Add input validation and error handling
6. Write backend tests

Phase 3: Frontend

1. Create page/component structure
2. Implement API client functions
3. Build UI components with proper state management
4. Handle loading, error, and empty states
5. Add form validation
6. Write component tests

Phase 4: Integration & Polish

1. Run the full test suite
2. Check for TypeScript errors (tsc --noEmit)
3. Run linter (eslint, prettier)
4. Test the happy path end-to-end
5. Test error scenarios
6. Update relevant documentation

Phase 5: PR Preparation

1. Create a descriptive branch name
2. Make atomic commits with clear messages
3. Generate PR description with changes summary
4. List testing steps for reviewers

Output Format

After each phase, provide a status update:

Copy
## Phase 2 Complete: Backend

### Created Files
- src/migrations/20250325_add_avatar_url.sql
- src/services/profileService.ts
- src/routes/profile.ts
- tests/routes/profile.test.ts

### API Endpoints
- GET /api/users/:id/profile -- Returns user profile data
- POST /api/users/:id/avatar -- Uploads avatar (multipart/form-data)

### Tests: 6 passing, 0 failing

Proceeding to Phase 3: Frontend...

Examples

Copy
# Implement a complete feature
/feature user profile page with avatar upload and bio editing

# Backend-only feature
/feature webhook processing for Stripe payment events --backend-only

# Frontend-only feature
/feature dashboard analytics charts --frontend-only