49 lines
1.6 KiB
Plaintext
49 lines
1.6 KiB
Plaintext
---
|
|
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 |