effect-angular

Imported from heddendorp/effect-angular (AGENTS.md). Install upstream with npx skills add heddendorp/effect-angular. Copyright stays with the author.

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.
• Do not write arrow functions in templates (they are not supported).

Services

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

Release and Change Tracking

• Use changesets for tracking user-facing changes.
• Add a changeset file for each user-facing PR under .changeset/.
• Use valid changeset frontmatter in each file (effect-platform-angular and/or effect-angular-query with patch|minor|major), then a Markdown summary body.
• Do not rely on conventional commits alone for release notes.
• Keep changeset summaries concise and focused on user impact.

Vendored Repositories

This project vendors external repositories under repos/.

• Use vendored repositories as read-only reference material when working with related libraries.
• Prefer examples and patterns from the vendored source code over generated guesses or web search results.
• Do not edit files under repos/ unless explicitly asked.
• Do not import from repos/; application code must continue importing from normal package dependencies.

When writing Effect code, read repos/effect/LLMS.md first, then inspect repos/effect/ for idiomatic usage, tests, module structure, and API design. Treat the vendored Effect source as the source of truth for Effect patterns.

When explicitly asked to refresh the vendored Effect v4 source, use:

git subtree pull --prefix=repos/effect https://github.com/Effect-TS/effect-smol.git main --squash