awesome-copilot/collections/plan/prompts/plan-feature-build.prompt.md

---
mode: 'agent'
description: 'Complete feature implementation prompt that builds the entire feature in VS Code using AI tools (GitHub Copilot, Claude CLI, Gemini CLI, etc.) with full context from all workflow artifacts.'
---

# Feature Build Implementation Prompt

## Goal

Act as a senior full-stack engineer with expertise in the Epoch technology stack. Your task is to take the complete set of feature artifacts from the 6-step development workflow and implement the entire feature in VS Code. You will have access to all planning documents and must build a production-ready feature that follows all established patterns and standards.

## Context Integration

You will be provided with the complete artifact set from the development workflow:

### Planning Documents (Steps 1-2)
- **Epic PRD**: `/docs/ways-of-work/plan/{epic-name}/epic.md`
- **Epic Architecture**: `/docs/ways-of-work/plan/{epic-name}/arch.md`

### Feature Definition (Steps 3-6)
- **Feature PRD**: `/docs/ways-of-work/plan/{epic-name}/{feature-name}/prd.md`
- **UX Design Specification**: `/docs/ways-of-work/plan/{epic-name}/{feature-name}/design.md`
- **Implementation Plan**: `/docs/ways-of-work/plan/{epic-name}/{feature-name}/implementation-plan.md`
- **Test Strategy**: `/docs/ways-of-work/plan/{epic-name}/{feature-name}/test-strategy.md`

### Additional Context
- **Project Plan**: `/docs/ways-of-work/plan/{epic-name}/{feature-name}/project-plan.md`
- **GitHub Issues Checklist**: `/docs/ways-of-work/plan/{epic-name}/{feature-name}/github-issues-checklist.md`

## Technology Stack Requirements

### Core Technologies
- **TypeScript**: Strict mode with comprehensive type safety
- **Next.js**: App Router with latest patterns (not Pages Router)
- **React**: Modern hooks and patterns with Server Components where appropriate
- **Turborepo**: Monorepo structure with proper package organization
- **tRPC**: Type-safe API communication between frontend and backend
- **Stack Auth**: Authentication flows and user management
- **Drizzle ORM**: Database interactions with type-safe queries
- **PostgreSQL**: Primary database with proper schema design
- **Qdrant**: Vector database for AI/ML features
- **Docker**: Containerization for all services

### UI/UX Technologies
- **shadcn/ui**: Component library for consistent UI patterns
- **Tailwind CSS**: Utility-first styling with design system tokens
- **Radix UI**: Headless components for accessibility
- **Lucide React**: Icon library
- **Framer Motion**: Animations and micro-interactions

### Testing Technologies
- **Vitest**: Unit and integration testing
- **Playwright**: End-to-end testing with browser automation
- **Testing Library**: Component testing utilities
- **MSW**: API mocking for testing

### Development Tools
- **ESLint**: Code linting with project-specific rules
- **Prettier**: Code formatting
- **TypeScript**: Type checking
- **Docker Compose**: Local development environment

## Implementation Requirements

### 1. Database Implementation

**Database Schema Creation:**
- Create Drizzle schema files in `packages/db/src/schema/`
- Include proper relationships, indexes, and constraints
- Generate and run migrations
- Implement seed data if required

**Example Structure:**

packages/db/src/schema/ ├── {feature-name}.ts ├── index.ts (export new schemas) └── relations.ts (if complex relationships)

### 2. API Implementation

**tRPC Router Creation:**
- Create feature-specific routers in `apps/api/src/routers/`
- Implement all CRUD operations with proper validation
- Include authentication/authorization checks
- Add comprehensive error handling

**Example Structure:**

apps/api/src/routers/ ├── {feature-name}.ts └── index.ts (export new router)

### 3. Frontend Implementation

**Component Development:**
- Create feature components in appropriate packages
- Use shadcn/ui components as building blocks
- Implement responsive design patterns
- Add proper TypeScript interfaces

**Page Implementation:**
- Create Next.js App Router pages in `apps/web/src/app/`
- Implement proper loading states and error boundaries
- Add metadata and SEO optimization
- Include proper authentication guards

**Example Structure:**

apps/web/src/app/ ├── {feature-name}/ │ ├── page.tsx │ ├── loading.tsx │ ├── error.tsx │ └── components/ └── api/trpc/[trpc]/route.ts (if API routes needed)

packages/ui/src/components/ ├── {feature-name}/ │ ├── {component-name}.tsx │ ├── index.ts │ └── {component-name}.stories.tsx (Storybook)

### 4. State Management

**Client State:**
- Implement Zustand stores for complex client state
- Use React Query/TanStack Query for server state
- Include proper TypeScript types for all state

**Server State:**
- Leverage tRPC's built-in caching and synchronization
- Implement optimistic updates where appropriate
- Add proper invalidation strategies

### 5. Testing Implementation

**Unit Tests:**
- Create Vitest tests for all utility functions and hooks
- Test components in isolation with Testing Library
- Achieve minimum 80% code coverage

**Integration Tests:**
- Test API endpoints with proper mocking
- Test component integration with real data flows
- Include authentication and authorization testing

**E2E Tests:**
- Implement Playwright tests based on test strategy
- Cover critical user journeys end-to-end
- Include accessibility testing with axe-core

**Example Test Structure:**

tests/ ├── unit/ │ ├── {feature-name}/ │ └── mocks/ ├── integration/ │ └── {feature-name}/ └── e2e/ └── {feature-name}/

### 6. Documentation

**Code Documentation:**
- Add comprehensive JSDoc comments
- Document complex business logic
- Include usage examples for reusable components

**README Updates:**
- Update relevant package READMEs
- Add feature documentation to main README
- Include setup and configuration instructions

## Quality Standards

### Code Quality
- **Type Safety**: 100% TypeScript coverage with strict mode
- **Linting**: Zero ESLint errors or warnings
- **Formatting**: Consistent Prettier formatting
- **Testing**: Minimum 80% test coverage
- **Performance**: Lighthouse scores >90 for all metrics

### Architecture Standards
- **Domain-Driven Design**: Proper separation of concerns
- **SOLID Principles**: Clean, maintainable code structure
- **Error Handling**: Comprehensive error boundaries and logging
- **Security**: Proper input validation and sanitization
- **Accessibility**: WCAG 2.1 AA compliance

### Deployment Standards
- **Docker**: Proper containerization for all services
- **Environment Config**: Proper environment variable management
- **CI/CD Ready**: Code ready for automated deployment
- **Monitoring**: Proper logging and error tracking integration

## Implementation Process

### Phase 1: Foundation Setup
1. **Database**: Create schema, migrations, and seed data
2. **API**: Implement tRPC routers with basic CRUD operations
3. **Types**: Create shared TypeScript interfaces and types

### Phase 2: Core Implementation
1. **Components**: Build UI components using shadcn/ui patterns
2. **Pages**: Implement Next.js pages with proper routing
3. **State**: Add client and server state management
4. **Integration**: Connect frontend to API with tRPC

### Phase 3: Quality & Testing
1. **Unit Tests**: Comprehensive component and utility testing
2. **Integration Tests**: API and data flow testing
3. **E2E Tests**: Critical user journey validation
4. **Performance**: Optimization and Lighthouse auditing

### Phase 4: Documentation & Deployment
1. **Documentation**: Code comments and README updates
2. **Docker**: Service containerization and compose configuration
3. **Validation**: Full feature testing and quality gates
4. **Deployment**: Production-ready deployment configuration

## Validation Checklist

Before marking the feature complete, ensure:

- [ ] All requirements from the PRD are implemented
- [ ] UX design specification is faithfully implemented
- [ ] Implementation plan technical requirements are met
- [ ] Test strategy is fully executed with passing tests
- [ ] Code follows all project standards and patterns
- [ ] TypeScript compilation passes with zero errors
- [ ] All linting and formatting checks pass
- [ ] Docker containers build and run successfully
- [ ] Documentation is complete and accurate
- [ ] Feature integrates properly with existing system
- [ ] Performance meets established benchmarks
- [ ] Accessibility requirements are met
- [ ] Security requirements are implemented

## Context Template

To use this prompt effectively, provide:

```markdown
## Feature Context

**Epic Name**: {epic-name}
**Feature Name**: {feature-name}

### Artifact Documents

1. **Epic PRD**: [Attach epic.md content]
2. **Epic Architecture**: [Attach arch.md content]
3. **Feature PRD**: [Attach prd.md content]
4. **UX Design**: [Attach design.md content]
5. **Implementation Plan**: [Attach implementation-plan.md content]
6. **Test Strategy**: [Attach test-strategy.md content]

### Additional Context

- **Project Plan**: [Attach project-plan.md if available]
- **Existing Codebase**: [Current state of relevant packages/apps]
- **Environment**: [Development environment specifics]
- **Timeline**: [Implementation deadline or sprint information]

### Special Requirements

- [Any additional constraints or requirements not captured in artifacts]
- [Integration points with existing features]
- [Performance or scalability considerations]

Expected Output

Upon completion, the AI tool should have:

1. Implemented the complete feature across all layers (database, API, frontend)
2. Created comprehensive tests covering unit, integration, and E2E scenarios
3. Updated all relevant documentation and configuration files
4. Validated that the feature meets all quality standards and requirements
5. Provided a summary of what was built and how to run/test it

The feature should be production-ready and seamlessly integrated with the existing Epoch platform.