← ClaudeAtlas

angularlisted

Use when creating or modifying TypeScript/HTML/CSS files under src/frontend/ in an Angular SPA — standalone components, injectable services, signals, RxJS streams, routes, guards, interceptors, and their tests. Triggers on any .ts/.html change under src/frontend/. Covers standalone bootstrap, signal-driven change detection, service-owned state and side effects, the global ErrorHandler, and component testing with TestBed. Stack-agnostic UI patterns live in the core frontend-fundamentals skill.
kouroshez/coding-os · ★ 6 · Web & Frontend · score 77
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