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

# Frontend Standards

When working with frontend files, follow these standards:

## Documentation References
- **Frontend README**: @frontend/README.md
- **Clean Code Guide**: @frontend/CLEAN_CODE.md
- **Resilience Features**: @frontend/RESILIENCE.md

## Component Structure
Follow the structure defined in @frontend/README.md:
- **Common Components**: @frontend/src/components/common/
- **Dashboard Components**: @frontend/src/components/dashboard/
- **Custom Hooks**: @frontend/src/hooks/
- **API Services**: @frontend/src/services/
- **Utilities**: @frontend/src/utils/
- **Constants**: @frontend/src/constants/

## Clean Code Principles
Apply the principles detailed in @frontend/CLEAN_CODE.md:
- Single Responsibility Principle
- Component Composition
- Error Handling with Error Boundaries
- Performance Optimization

## Naming Conventions
- 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`)

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