sylwiakubicz store .cursorrules file for HTML

Angular Development Guidelines

Key Principles
- Provide clear, precise Angular and TypeScript examples
- Apply immutability and pure functions where applicable
- Favor component composition for modularity
- Use meaningful variable names (e.g., isActive, hasPermission)
- Use kebab-case for file names (e.g., user-profile.component.ts)
- Prefer named exports for components, services, and utilities

Styling with Tailwind CSS
- Use Tailwind's utility-first approach
- Use custom responsive breakpoints:
    xs: 420px
    sm: 640px
    md: 768px
    lg: 1024px
    xl: 1280px
    2xl: 1536px

- Utilize Tailwind's state variants (hover:, focus:, active:, etc.)
- Follow mobile-first design principles
- Use arbitrary values only when absolutely necessary
- Use the defined custom colors instead of Tailwind defaults:
    - Background: `bg-bg-color`
    - Text colors: `text-font-main-color`, `text-font-additional-color`, `text-font-always-dark-color`
    - Grays: `text-gray-light`, `text-gray-normal`, `text-gray-dark`
    - Greens: `bg-green-light`, `bg-green-normal`, `bg-green-dark`, `bg-green-darker`, `hover:bg-green-hover`
    - Utility colors: `text-custom-orange`, `text-custom-blue`, `text-custom-red`, `text-pine-green`
- Use the custom font family:
    - `font-main-font` for Gill Sans
- Group Tailwind classes logically (layout → positioning → display → spacing → sizing → typography → visual)
- Use meaningful component class names
- Leverage Tailwind's configuration for custom values
- Utilize @screen directives for complex media queries
- Keep utility combinations DRY using component classes
- Use @apply directives sparingly, prefer inline Tailwind utilities

Theme Management
- Colors automatically adjust based on body.dark class
- Theme toggle persists in localStorage
- Respects system preferences if no theme is stored
- No need for dark: prefix in Tailwind classes
- CSS variables handle theme switching

TypeScript & Angular
- Define data structures with interfaces for type safety
- Avoid any type, utilize the type system fully
- Organize files: imports, definition, implementation
- Use template strings for multi-line literals
- Utilize optional chaining and nullish coalescing
- Use standalone components when applicable
- Use the inject function for injecting services directly within component, directive or service logic, enhancing clarity and reducing boilerplate
- Use NgRx for complex state management and Signals for local component state
- Follow NgRx best practices and patterns

State Management with NgRx
- Directory Structure:
    - src/app/state/
    ├── feature/
        └──feature.actions.ts
        └──feature.effects.ts
        └── feature.reducer.ts
        └── feature.selectors.ts
    └── app.state.ts

- State Organization:
    - Keep state normalized
    - Define clear state interfaces
    - Use feature state composition
    - Implement entity adapter for collections
- Action Guidelines:
    - Use descriptive action names: [Source] Event
    - Keep actions payload-minimal
    - Use action creators
    - Group related actions in one file
- Reducer Guidelines:
    - Keep reducers pure
    - Use switch pattern or createReducer
    - Implement proper state immutability
- Selector Guidelines:
    - Create reusable selectors
    - Use createSelector for composition
    - Implement memorization
- Effects Guidelines:
    - Handle side effects in Effects
    - Use proper error handling
    - Implement proper action streams
File Naming Conventions
- *.component.ts for Components
- *.service.ts for Services
- *.module.ts for Modules
- *.directive.ts for Directives
- *.pipe.ts for Pipes
- *.spec.ts for Tests
- All files use kebab-case

Code Style
- Use single quotes for string literals
- Indent with 4 spaces
- Ensure clean code with no trailing whitespace
- Use const for immutable variables
- Use template strings for string interpolation

Angular-Specific Guidelines
- Use async pipe for observables in templates
- Implement lazy loading for feature modules
- Ensure accessibility with semantic HTML and ARIA labels
- Utilize deferrable views for optimizing component rendering
- Use the NgOptimizedImage directive for efficient image loading
- Leverage Angular's signals system for:
    - Efficient state management
    - Reactive programming
    - Reducing unnecessary re-renders
- Implement responsive design using Tailwind's breakpoint system

Import Order
1. Angular core and common modules
2. RxJS modules
3. NgRx modules and imports
4. Other Angular modules
5. Application core imports
6. Shared module imports
7. Environment-specific imports
8. Relative path imports

Error Handling and Validation
- Use proper error handling in services and components
- Use custom error types or factories
- Implement Angular form validation or custom validators

Testing
- Follow the Arrange-Act-Assert pattern for tests

Performance Optimization
- Optimize ngFor with trackBy functions
- Use pure pipes for expensive computations
- Avoid direct DOM manipulation; use Angular's templating system
- Optimize rendering performance by deferring non-essential views
- Optimize build performance:
    - Use Tailwind's JIT mode for development
    - Use purge option to minimize CSS bundle size
- Use the NgOptimizedImage directive for efficient image loading

Security
- Prevent XSS with Angular's sanitization; avoid using innerHTML
- Sanitize dynamic content with built-in tools

Key Conventions
- Use Angular's DI system and the inject function for service injection
- Focus on reusability and modularity
- Follow Angular's style guide
- Optimize with Angular's best practices
- Focus on optimizing Web Vitals like LCP, INP, and CLS
- Follow Tailwind CSS naming conventions
- Use consistent class ordering
- Implement responsive design using Tailwind's mobile-first approach

Reference
- Angular's official documentation
- Tailwind CSS documentation (https://tailwindcss.com/docs)
- Angular + Tailwind CSS setup guides