---
description: Frontend component standards and React best practices
globs: ["frontend/**/*.js", "frontend/**/*.jsx", "frontend/**/*.ts", "frontend/**/*.tsx"]
alwaysApply: false
---

# Frontend Standards

## Component Design

### React Components
- Single responsibility per component
- Props validation with PropTypes
- Error boundary protection
- Reusable and composable design
- Maximum 50 lines per component file

### Component Structure
```
src/
├── components/
│   ├── common/           # Reusable UI components
│   ├── dashboard/        # Dashboard-specific components
│   └── [main components] # Main application components
├── hooks/               # Custom React hooks
├── services/            # API and external services
├── utils/               # Utility functions
└── constants/           # Configuration constants
```

## Naming Conventions

### JavaScript/TypeScript
- Classes: PascalCase (e.g., `DashboardComponent`)
- Functions: camelCase (e.g., `fetchServiceSpec`)
- Variables: camelCase (e.g., `serviceStatus`)
- Constants: UPPER_SNAKE_CASE (e.g., `API_CONFIG`)

### File Organization
- Component files: PascalCase (e.g., `Dashboard.js`)
- Hook files: camelCase with 'use' prefix (e.g., `useServiceStatus.js`)
- Utility files: camelCase (e.g., `errorHandling.js`)
- Constant files: camelCase (e.g., `index.js`)

## Clean Code Principles

### Single Responsibility Principle (SRP)
- Each component has one clear purpose
- `SystemStatsCards` only handles system statistics display
- `ServiceStatusList` only manages service status display
- `StatusIcon` only renders status icons

### Don't Repeat Yourself (DRY)
- Centralized status icon logic in `StatusIcon` component
- Reusable loading component in `LoadingSpinner`
- Centralized error handling in `utils/errorHandling.js`
- All constants extracted to `constants/index.js`

### Component Composition
- Large components broken into smaller, focused components
- Clear prop interfaces with PropTypes validation
- Easy to test and maintain

## Error Handling

### Error Boundaries
- `ErrorBoundary` component for graceful error recovery
- Development-friendly error details
- User-friendly error messages

### Offline Mode
- Service status monitoring
- Fallback data when services unavailable
- Automatic retry mechanisms
- Clear status indicators

## Performance

### Component Optimization
- Smaller components = better React optimization
- Reduced re-renders through focused components
- Memoization opportunities for pure components

### Code Splitting Ready
- Modular structure supports code splitting
- Easy to lazy load dashboard components
- Clear separation enables tree shaking

## Testing

### Testable Components
- Pure functions in utils
- Isolated component logic
- Clear prop interfaces
- Mockable dependencies

### Test Structure
```javascript
describe('SystemStatsCards', () => {
  it('renders CPU usage correctly', () => {
    // Test focused component
  });
});
```