# Feature Building: [Feature Name]

> This is a template for the Feature Building process. Replace placeholder text with actual content
> for your feature.

## 1. Design and Data Flow Analysis

### Design Analysis

#### UI Components

- Component 1: [Description, states, interactions]
- Component 2: [Description, states, interactions]
- ...

#### Interactions and Animations

- Interaction 1: [Description]
- Animation 1: [Description]
- ...

#### Responsive Behavior

- Mobile: [Description]
- Tablet: [Description]
- Desktop: [Description]

#### Accessibility Considerations

- [List accessibility requirements]

### Data Flow Analysis

#### Data Requirements

- Data Entity 1: [Properties, validation rules]
- Data Entity 2: [Properties, validation rules]
- ...

#### API Endpoints

- Endpoint 1: `[METHOD] /path` - [Purpose, request/response format]
- Endpoint 2: `[METHOD] /path` - [Purpose, request/response format]
- ...

#### State Management

- Global State: [What needs to be in global state]
- Local State: [What can be kept in component state]
- Derived State: [What can be computed from other state]

#### Data Transformations

- [Describe any transformations needed between API and UI]

#### Caching/Persistence

- [Describe caching or persistence requirements]

## 2. Structure Planning

### Routing

#### Routes

- `/route1`: [Purpose, parameters]
- `/route2`: [Purpose, parameters]
- ...

#### Layouts

- Route 1 Layout: [Description]
- Route 2 Layout: [Description]
- ...

#### Access Control

- [Describe any route guards or access control]

### Component Hierarchy

```
ParentComponent
├── ChildComponent1
│   ├── GrandchildComponent1
│   └── GrandchildComponent2
└── ChildComponent2
```

#### Component Interfaces

- Component 1 Props: [Props description]
- Component 2 Props: [Props description]
- ...

### File Structure

```
feature-name/
├── index.ts
├── types.ts
├── components/
│   ├── ComponentOne.tsx
│   └── ComponentTwo.tsx
├── hooks/
│   └── useFeatureData.ts
└── utils/
    └── featureUtils.ts
```

#### New Files to Create

- `feature-name/index.ts`: [Purpose]
- `feature-name/types.ts`: [Purpose]
- ...

## 3. File Skeletons

### `feature-name/index.ts`

````typescript
/**
 * @module FeatureName
 * @description [Brief description of the feature]
 *
 * This module exports the main components and hooks for the [Feature Name] feature.
 *
 * @example
 * ```tsx
 * import { FeatureComponent } from '@/features/feature-name';
 *
 * function MyComponent() {
 *   return <FeatureComponent />;
 * }
 * ```
 */

export * from './components/ComponentOne';
// Add additional exports
````

### `feature-name/components/ComponentOne.tsx`

````typescript
/**
 * @component ComponentOne
 * @description [Description of the component]
 *
 * Requirements:
 * - [Requirement 1]
 * - [Requirement 2]
 * - ...
 *
 * States:
 * - Loading: [Description]
 * - Error: [Description]
 * - Success: [Description]
 *
 * @example
 * ```tsx
 * <ComponentOne prop1="value" />
 * ```
 */

// Implementation details will go here
````

### [Add skeleton documentation for all planned files]

## 4. Implementation Guide

### Implementation Order

1. Create `types.ts` with all required interfaces
2. Implement API utilities and hooks
3. Implement base UI components
4. Implement container components
5. Connect components to data sources
6. Implement routing and navigation

### Critical Requirements

#### Performance

- [List performance requirements]

#### Accessibility

- [List accessibility requirements]

#### Compatibility

- [List browser/device compatibility requirements]

#### Error Handling

- [List error handling expectations]

### Testing Requirements

#### Unit Tests

- Component 1: [Test scenarios]
- Component 2: [Test scenarios]
- ...

#### Integration Tests

- [List integration test scenarios]

#### E2E Tests

- [List E2E test scenarios]

### What NOT to Do

- ❌ [Anti-pattern 1]
- ❌ [Anti-pattern 2]
- ...

### Review Checklist

- [ ] Code follows project style guide
- [ ] Components are properly documented
- [ ] All critical requirements are met
- [ ] Tests cover main functionality
- [ ] Accessibility guidelines are followed
- [ ] Performance is satisfactory
- [ ] Error handling is comprehensive

## Process Checklist

- [ ] Complete Design & Data Flow Analysis
- [ ] Create Structure Plan
- [ ] Create Skeleton Files with Documentation
- [ ] Develop Implementation Guide
- [ ] Review and Finalize Feature Building Documents
- [ ] Implement Feature Following Guide
- [ ] Review Implementation Against Requirements