React TypeScript application for evidence-based hypertrophy periodization training programs with multiple periodization models, responsive design, and data visualization.
This skill guides development of WaveGains, a React TypeScript application for hypertrophy periodization training programs.
When developing features for this application, always follow these principles:
1. **Evidence-based**: All periodization models must be based on scientific literature
2. **User-focused**: Interface should be intuitive for different experience levels (beginner, intermediate, advanced)
3. **Responsive**: Use mobile-first design approach
4. **Accessibility**: Follow WCAG guidelines
5. **Performance**: Optimize for fast loading and smooth interactions
1. **Components**: Use functional components with hooks exclusively
2. **TypeScript**: Implement proper TypeScript types for all data structures
3. **State Management**: Keep it simple with useState/useEffect (no localStorage requirement)
4. **Reusability**: Create reusable components with proper prop interfaces
5. **Custom Hooks**: Extract complex logic into custom hooks
Implement these four core periodization models:
1. **Linear Traditional**: Gradual progression (volume ↓, intensity ↑)
2. **Undulating (DUP)**: Weekly or daily variation
3. **Block Periodization**: Accumulation → Transmutation → Realization phases
4. **Conjugate Method**: Simultaneous training of different qualities
- Primary: blue
- Secondary: green
- Support dark theme
Structure your code according to this organization:
```
/src/
/components/ - React components
/hooks/ - Custom hooks
/utils/ - Utility functions
/types/ - TypeScript type definitions
/data/ - Constants and static data
```
When creating new components:
1. Define TypeScript interfaces for props
2. Use arrow function syntax
3. Implement error boundaries where appropriate
4. Add loading and empty states
5. Ensure mobile responsiveness
6. Test accessibility with keyboard navigation
7. Use Lucide React for icons
8. Apply Tailwind CSS classes for styling
When working with charts and data visualization:
```typescript
interface ComponentProps {
// Define props with proper types
}
export const Component: React.FC<ComponentProps> = ({ prop1, prop2 }) => {
// State and hooks
// Event handlers
// Render logic with semantic HTML
// Tailwind CSS styling
};
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/wavegains-hypertrophy-training-app/raw