ShopTRAINING/.codelf/attention.md

Development Guidelines

Framework and Language

Analyze the framework and language choices for this project, focusing on best practices and standardization.

Framework Considerations:

• Version Compatibility: Ensure all dependencies are compatible with the chosen framework version
• Feature Usage: Leverage framework-specific features rather than reinventing solutions
• Performance Patterns: Follow recommended patterns for optimal performance
• Upgrade Strategy: Plan for future framework updates with minimal disruption
• Importance Notes for Framework:
  • {important notes}

Language Best Practices:

• Type Safety: Use strong typing where available to prevent runtime errors
• Modern Features: Utilize modern language features while maintaining compatibility
• Consistency: Apply consistent coding patterns throughout the codebase
• Documentation: Document language-specific implementations and workarounds

Code Abstraction and Reusability

During development, prioritize code abstraction and reusability to ensure modular and component-based functionality. Try to search for existing solutions before reinventing the wheel. List below the directory structure of common components, utility functions, and API encapsulations in the current project.

Modular Design Principles:

• Single Responsibility: Each module is responsible for only one functionality
• High Cohesion, Low Coupling: Related functions are centralized, reducing dependencies between modules
• Stable Interfaces: Expose stable interfaces externally while internal implementations can vary

Reusable Component Library: e.g.

root
- pkg 
    - utils
		- time // include time related functions: getNow, getToday, getYesterday, etc.
    - views

Coding Standards and Tools

Code Formatting Tools:

• ESLint (version) // JavaScript/TypeScript code checking
• Prettier (version) // Code formatting
• StyleLint (version) // CSS/SCSS code checking

Naming and Structure Conventions:

• Semantic Naming: Variable/function names should clearly express their purpose
• Consistent Naming Style: Frontend uses camelCase, CSS uses kebab-case
• Directory Structure follows functional responsibility division

Frontend-Backend Collaboration Standards

API Design and Documentation:

• RESTful design principles
  • Use HTTP methods (GET, POST, PUT, DELETE) to represent operations ...
• Timely interface documentation updates
  • Document API endpoints, parameters, and responses ...
• Unified error handling specifications ...

Data Flow:

• Clear frontend state management
  • Use a state management library (e.g., Redux, Pinia) for consistent state handling ...
• Data validation on both frontend and backend
  • Validate data types and constraints ...
• Standardized asynchronous operation handling
  • Use consistent API call patterns ...

Performance and Security

Performance Optimization Focus:

• Resource loading optimization
  • Use code splitting and lazy loading ...
• Rendering performance optimization
  • Use virtualization and pagination for large lists ...
• Appropriate use of caching
  • Implement caching strategies for API responses ...

Security Measures:

• Input validation and filtering
  • Validate user inputs and sanitize data ...
• Protection of sensitive information
  • Use secure authentication and authorization mechanisms ...
• Access control mechanisms
  • Implement role-based access control ...