240 lines
4.5 KiB
Markdown
240 lines
4.5 KiB
Markdown
# 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
|