angularlisted
Install: claude install-skill kouroshez/coding-os
REQUIRED BACKGROUND: You MUST also follow the core `frontend-fundamentals` skill (stack-agnostic UI patterns — three-state async, accessibility, SEO), `a11y`, and `clean-code`. This skill adds ONLY Angular-specific patterns on top.
# angular
## Layer contract (matches `structure.tree`)
| Layer | May import | Never |
|---|---|---|
| `*.component.ts` | feature service, child components, signals | `HttpClient`, shared mutable state, sibling services' internals |
| `*.service.ts` | `HttpClient`, other services, RxJS | `@Component` APIs, the DOM, components |
| `core/` (error handler, guards, interceptors) | services (for auth/config lookups) | feature components |
| `app.config.ts` / `app.routes.ts` | providers, route targets | business logic |
Components stay presentation-only — no `HttpClient`, no shared mutable state — so
they are testable in isolation and a data-source swap is a service-layer-only
change.
## Standalone & bootstrap
- Every component is `standalone: true` and declares its own `imports`. No
`@NgModule` anywhere in this stack.
- The app boots via `bootstrapApplication(AppComponent, appConfig)` in `main.ts`
(no logic). Application-wide providers live in `app.config.ts` — the DI root.
- Routes are a flat `Routes` array in `app.routes.ts`; lazy-load non-trivial
features with `loadComponent`.
## State & change detection
- Drive the view with `signal`/`computed`/`effect`; pair every component with
`ChangeDetectionStrategy.OnPush`.
- A service owns shar