WaveGains Hypertrophy Training App

This skill guides development of WaveGains, a React TypeScript application for hypertrophy periodization training programs.

Technology Stack

Key Design Principles

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

Architecture Guidelines

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

Periodization Models

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

Code Style Requirements

- Primary: blue

- Secondary: green

- Support dark theme

File Organization

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

```

Component Development Pattern

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

Data Visualization

When working with charts and data visualization:

Example Component Structure

```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

};

```

Testing Considerations