|
| 1 | +--- |
| 2 | +applyTo: "frontend/**" |
| 3 | +--- |
| 4 | + |
| 5 | +You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices. |
| 6 | + |
| 7 | +## TypeScript Best Practices |
| 8 | + |
| 9 | +- Use strict type checking |
| 10 | +- Prefer type inference when the type is obvious |
| 11 | +- Avoid the `any` type; use `unknown` when type is uncertain |
| 12 | + |
| 13 | +## Angular Best Practices |
| 14 | + |
| 15 | +- Always use standalone components over NgModules |
| 16 | +- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+. |
| 17 | +- Use signals for state management |
| 18 | +- Implement lazy loading for feature routes |
| 19 | +- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead |
| 20 | +- Use `NgOptimizedImage` for all static images. |
| 21 | + - `NgOptimizedImage` does not work for inline base64 images. |
| 22 | + |
| 23 | +## Accessibility Requirements |
| 24 | + |
| 25 | +- It MUST pass all AXE checks. |
| 26 | +- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes. |
| 27 | + |
| 28 | +### Components |
| 29 | + |
| 30 | +- Keep components small and focused on a single responsibility |
| 31 | +- Use `input()` and `output()` functions instead of decorators |
| 32 | +- Use `computed()` for derived state |
| 33 | +- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator |
| 34 | +- Prefer inline templates for small components |
| 35 | +- Prefer Reactive forms instead of Template-driven ones |
| 36 | +- Do NOT use `ngClass`, use `class` bindings instead |
| 37 | +- Do NOT use `ngStyle`, use `style` bindings instead |
| 38 | +- When using external templates/styles, use paths relative to the component TS file. |
| 39 | + |
| 40 | +## State Management |
| 41 | + |
| 42 | +- Use signals for local component state |
| 43 | +- Use `computed()` for derived state |
| 44 | +- Keep state transformations pure and predictable |
| 45 | +- Do NOT use `mutate` on signals, use `update` or `set` instead |
| 46 | + |
| 47 | +## Templates |
| 48 | + |
| 49 | +- Keep templates simple and avoid complex logic |
| 50 | +- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch` |
| 51 | +- Use the async pipe to handle observables |
| 52 | +- Do not assume globals like (`new Date()`) are available. |
| 53 | +- Do not write arrow functions in templates (they are not supported). |
| 54 | + |
| 55 | +## Services |
| 56 | + |
| 57 | +- Design services around a single responsibility |
| 58 | +- Use the `providedIn: 'root'` option for singleton services |
| 59 | +- Use the `inject()` function instead of constructor injection |
0 commit comments