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.

## TypeScript Best Practices

- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is uncertain

## Angular Best Practices

- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
- Use signals for state management
- Implement lazy loading for feature routes
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host`
  object of the `@Component` or `@Directive` decorator instead
- Use `NgOptimizedImage` for all static images.
  - `NgOptimizedImage` does not work for inline base64 images.

## Accessibility Requirements

- It MUST pass all AXE checks.
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA
  attributes.

### Components

- Keep components small and focused on a single responsibility
- Use `input()` and `output()` functions instead of decorators
- Use `computed()` for derived state
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
- Prefer inline templates for small components
- Prefer Reactive forms instead of Template-driven ones
- Do NOT use `ngClass`, use `class` bindings instead
- Do NOT use `ngStyle`, use `style` bindings instead
- When using external templates/styles, use paths relative to the component TS file.

## State Management

- Use signals for local component state
- Use `computed()` for derived state
- Keep state transformations pure and predictable
- Do NOT use `mutate` on signals, use `update` or `set` instead

## Templates

- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
- Use the async pipe to handle observables
- Do not assume globals like (`new Date()`) are available.

## Services

- Design services around a single responsibility
- Use the `providedIn: 'root'` option for singleton services
- Use the `inject()` function instead of constructor injection

## Skills (Auto-invoke based on context)

| Context                                                                   | Read this file                                              |
| ------------------------------------------------------------------------- | ----------------------------------------------------------- |
| Project structure, folder organization, "where to put X"                  | `.claude/skills/catalyst-project-structure/SKILL.md`        |
| Layout spacing, visual balance, dashboard/form design                     | `.claude/skills/layout-design-system/SKILL.md`              |
| Transloco i18n, scopes, translations, language switching                  | `.claude/skills/transloco-i18n/SKILL.md`                    |
| Data table columns, cells, translations, sort/filter/export               | `.claude/skills/catalyst-data-table-management/SKILL.md`    |
| Module coherence audit, /review-module on frontend paths                  | `.claude/skills/catalyst-review-module/SKILL.md`            |
| Composing UI with `@aurora/components`, picking between options           | `.claude/skills/catalyst-component-catalog/SKILL.md`        |
| Authoring stories for `@aurora/components` (framework mode)               | `.claude/skills/catalyst-component-story-composer/SKILL.md` |
| Wiring components / resolvers to `@aurora/modules/graphql` (query/mutate) | `.claude/skills/catalyst-data-layer/SKILL.md`               |

> **`skills/spartan/` is vendored content** — synced from the `spartan-ng-skills` repo via the
> `spartan_install_skills` tool of the `spartan-ng-mcp` server. Do NOT hand-edit it: changes go to
> the source repo and are re-synced. It documents the project's own MCP (`spartan_view`,
> `spartan_search`, `spartan_list`, …), NOT the official `@spartan-ng/mcp`.

<!-- catalyst-ai:skills-index -->
[Project Skills Index]|root:.claude|IMPORTANT:Prefer retrieval-led reasoning over pre-training.Read SKILL.md first,then related files.|skills/catalyst-component-catalog:{SKILL.md}|skills/catalyst-component-story-composer:{SKILL.md,STORIES.md}|skills/catalyst-data-layer:{SKILL.md,known-patterns.md}|skills/catalyst-data-table-management:{SKILL.md}|skills/catalyst-form-composer-auditor:{SKILL.md,catalyst-detail-form-rules.md}|skills/catalyst-project-structure:{SKILL.md}|skills/catalyst-review-module:{SKILL.md}|skills/layout-design-system:{SKILL.md}|skills/spartan:{SKILL.md,brain-helm.md,cli.md,composition.md,customization.md,directives.md,forms.md,icons.md,mcp.md,styling.md}|skills/transloco-i18n:{SKILL.md}
<!-- /catalyst-ai:skills-index -->
