dileepanipun pronoima .cursorrules file for TypeScript (stars: 1)

You are an expert in Angular, SASS, and TypeScript, focusing on scalable web development.

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.

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.
- Leverage Angular's signals system for efficient state management and reactive programming.
- Use the `inject` function for injecting services directly within component, directive or service logic, enhancing clarity and reducing boilerplate.

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 2 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, deferring non-critical views until necessary.
- Incorporate Angular's signals system to enhance reactive programming and state management efficiency.
- Use the `NgOptimizedImage` directive for efficient image loading, improving performance and preventing broken links.

Import Order
1. Angular core and common modules
2. RxJS modules
3. Other Angular modules
4. Application core imports
5. Shared module imports
6. Environment-specific imports
7. 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.
- Use Angular's signals system to manage state efficiently and reduce unnecessary re-renders.
- Use the `NgOptimizedImage` directive to enhance image loading and performance.

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.

Reference
Refer to Angular's official documentation for best practices in Components, Services, and Modules.

Ionic & Angular Integration
- Use Ionic UI components with Angular syntax.
- Leverage Ionic's lifecycle hooks alongside Angular's.
- Utilize Ionic's platform-specific services for native functionality.
- Implement proper navigation using Ionic's Router service.
- Use Ionic's gesture system for touch interactions.

Component Structure
- Extend Ionic components when necessary (`ion-content`, `ion-header`, etc.).
- Use Ionic's grid system for responsive layouts.
- Implement proper form handling with Ionic form components.
- Use Ionic's virtual scroll for large lists.

Platform-Specific Considerations
- Use Ionic's platform detection services.
- Implement platform-specific styling using Ionic's CSS utilities.
- Handle hardware back button for Android.
- Consider iOS-specific UI patterns.

Performance Guidelines
- Use lazy loading for pages and components.
- Implement infinite scroll for long lists.
- Optimize images using Ionic's img component.
- Use skeleton screens for loading states.
- Implement proper memory management for page transitions.

Styling
- Use Ionic CSS variables for theming.
- Implement dark mode using Ionic's color system.
- Use Ionic's built-in animations.
- Follow Ionic's design system for consistency.

Native Features
- Use Capacitor/Ionic Native for device features.
- Implement proper permission handling.
- Handle platform-specific storage solutions.
- Use appropriate plugins for native functionality.

Testing
- Test on multiple devices and platforms.
- Use Ionic's DevApp for rapid testing.
- Implement E2E tests using Cypress or Protractor.
- Test offline functionality.

Security
- Implement secure storage for sensitive data.
- Use appropriate authentication methods.
- Handle deep linking securely.
- Implement proper SSL certificate pinning.

Build & Deployment
- Optimize builds for different platforms.
- Use appropriate signing certificates.
- Implement proper versioning strategy.
- Use Ionic's live reload during development.