Aider Context Configuration: The Setup That Makes AI Actually Code Like You

# Project Context for AI Assistant

## Project Overview
- **Name**: TaskFlow Web App
- **Tech Stack**: React 18, TypeScript 5.0, Vite, TailwindCSS, React Query, Zustand
- **Architecture**: Component-based SPA with API integration
- **Target**: Modern browsers, mobile-responsive
- **Performance Goals**: <3s initial load, <100ms UI interactions

## Code Style Requirements
- **TypeScript**: Strict mode enabled, explicit return types for functions
- **Components**: Functional components with hooks, no class components
- **State**: Zustand for global state, useState for local component state
- **Styling**: TailwindCSS utility classes, no custom CSS unless necessary
- **Imports**: Absolute imports using @ alias, group and sort imports
- **Error Handling**: Use Error Boundary pattern, handle async errors explicitly

## Folder Structure
```
src/
├── components/
│   ├── ui/           # Reusable UI components
│   ├── forms/        # Form-specific components
│   └── layout/       # Layout components
├── pages/            # Route-level components
├── hooks/            # Custom React hooks
├── stores/           # Zustand stores
├── services/         # API and external service calls
├── types/            # TypeScript type definitions
└── utils/            # Utility functions
```

## Testing Requirements
- **Unit Tests**: Jest + React Testing Library for components
- **Coverage**: Minimum 80% coverage for utilities, 60% for components  
- **E2E**: Playwright for critical user flows
- **Test Files**: Adjacent to source files with .test.tsx extension

# Coding Patterns and Standards

## Component Pattern
Always follow this exact pattern for new components:

```typescript
import { FC } from 'react';
import { cn } from '@/utils/cn';

interface ComponentNameProps {
  className?: string;
  // Other props with JSDoc comments
}

/**
 * Brief description of what this component does
 */
export const ComponentName: FC = ({ 
  className,
  ...props 
}) => {
  return (
    

      {/* Component content */}
    
  );
};
```

## API Integration Pattern
Use this pattern for all API calls:

```typescript
import { useMutation, useQuery } from '@tanstack/react-query';
import { apiClient } from '@/services/api-client';

// Query hook
export const useUserData = (userId: string) => {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: () => apiClient.get(`/users/${userId}`),
    staleTime: 5 * 60 * 1000, // 5 minutes
  });
};

// Mutation hook
export const useUpdateUser = () => {
  return useMutation({
    mutationFn: (userData: UpdateUserData) => 
      apiClient.put('/users', userData),
    onError: (error) => {
      console.error('Update user failed:', error);
      // Handle error appropriately
    },
  });
};
```

## Error Handling Pattern
Always implement error boundaries and error states:

```typescript
// For async operations
const [error, setError] = useState(null);

try {
  const result = await someAsyncOperation();
  setError(null);
  return result;
} catch (err) {
  const message = err instanceof Error ? err.message : 'Unknown error';
  setError(message);
  console.error('Operation failed:', err);
}

// For component error states
if (error) {
  return (
    

      Error: {error}
    
  );
}
```

# Business Logic and Domain Context

## User Management
- Users can have roles: 'admin', 'manager', 'user'
- Authentication required for all routes except /login, /signup
- Admin users can modify any data, managers can modify their team's data
- All user actions must be logged for audit purposes

## Task Management
- Tasks have states: 'todo', 'in-progress', 'review', 'completed'
- Only task assignees and managers can change task status
- Completed tasks cannot be modified (except by admin)
- All task changes trigger notifications to relevant users

## Data Validation Rules
- User emails must be validated and unique
- Task titles: 3-100 characters, no special chars except - and _
- Due dates cannot be in the past
- Priority levels: 'low', 'medium', 'high', 'urgent'

## Performance Considerations
- Paginate lists when >50 items
- Lazy load images and non-critical components
- Debounce search inputs (300ms delay)
- Cache user preferences locally

## Security Requirements
- Sanitize all user inputs before display
- Use HTTPS for all API calls
- Store sensitive data in environment variables
- Implement proper CORS for API endpoints

# Development Environment Configuration

## Environment Variables Required
```
VITE_API_URL=http://localhost:3001/api
VITE_WEBSOCKET_URL=ws://localhost:3001
VITE_APP_VERSION=1.0.0
```

## API Integration Details
- Base URL: Configured via VITE_API_URL
- Authentication: JWT tokens in Authorization header
- Rate Limiting: 100 requests per minute per user
- WebSocket: Real-time updates for tasks and notifications

## Development Scripts
- `npm run dev`: Start development server (port 5173)
- `npm run build`: Production build with type checking
- `npm run test`: Run unit tests in watch mode
- `npm run test:e2e`: Run Playwright tests
- `npm run lint`: ESLint with TypeScript rules

## Code Quality Tools
- ESLint: @typescript-eslint/recommended config
- Prettier: 2-space indentation, single quotes, trailing commas
- Husky: Pre-commit hooks for linting and testing
- Commitizen: Conventional commit message format

# Files Aider should ignore for context
node_modules/
dist/
build/
.git/
coverage/
*.log
*.md
public/assets/
src/assets/images/

# Test files for production features
**/*.test.tsx
**/*.spec.ts
e2e/

# Configuration files that rarely change
vite.config.ts
tailwind.config.js
eslint.config.js
package-lock.json

# Aider Prompt Templates

## New Component Creation
Create a new React component following our component pattern:
- TypeScript with proper interface definition
- TailwindCSS for styling with cn utility
- Proper JSDoc comments
- Export as named export
- Include basic error handling if applicable

## API Integration Addition  
Add a new API integration following our patterns:
- Create React Query hooks (useQuery/useMutation)
- Proper TypeScript types for request/response
- Error handling with user-friendly messages
- Appropriate caching strategy
- Update relevant components to use the new API

## Form Component Creation
Create a form component with:
- React Hook Form integration
- Zod schema validation
- Proper error display
- Loading states during submission
- Success feedback
- Accessibility attributes

## Test Addition
Add comprehensive tests for the specified component:
- Unit tests for all props and states
- Integration tests for user interactions
- Mock API calls appropriately
- Test error scenarios
- Aim for >80% coverage

# Start focused session for specific feature
aider --model gpt-4-turbo src/components/forms/ src/hooks/useValidation.ts

# Add context files for complex features
aider --model gpt-4-turbo --read .aider.md --read src/types/user.ts src/pages/UserProfile.tsx

# Use different models for different tasks
aider --model claude-3-haiku     # For simple refactoring
aider --model gpt-4-turbo        # For complex feature development
aider --model claude-3-opus      # For architectural decisions

# Version control your context files
.aider.md
.aiderignore
.aider/
├── patterns/
│   ├── components.md
│   ├── api-integration.md
│   └── testing.md
├── prompts/
│   ├── common-tasks.md
│   └── project-specific.md
└── examples/
    ├── good-components/
    └── common-patterns/