@tungvivas/angular-vibe-kit 0.1.0

package/commands/new-feature.md

@@ -0,0 +1,69 @@
+Create a new feature module. Follow these steps in exact order.
+
+Angular idioms depend on the project version — read `.claude/angular-practices/`
+and follow it. **Precedence (see `.claude/rules/project-rules.md` → Precedence):** a valid
+project convention wins over the BP profile; the profile applies only where the project
+has no convention or is below standard (new code only); legacy modules are never refactored.
+
+## Step 1: Understand Context
+- Read `CLAUDE.md` → links to docs below
+- Read `.claude/rules/project-rules.md` → naming, structure, Coexistence rules, **Reference Examples**
+- Read `docs/ARCHITECTURE.md` → where this feature fits
+- Read `docs/API_CONTRACT.md` → which endpoints this feature calls
+- Read `docs/DESIGN_SYSTEM.md` → shared components to use
+- **Open the Reference Example files** listed in `project-rules.md` (best existing service / page / component / spec) and mirror their style — this is the strongest signal for matching the project's real conventions
+- Ask me if anything is unclear before writing code
+
+## Step 2: Create Feature Structure
+
+> **Use the project's actual layout and folder names from `project-rules.md`.**
+> The tree below is only the DEFAULT shape — if the project calls things differently
+> (e.g. `containers/` instead of `pages/`, `ui/` or `common/` instead of `shared/`,
+> an Nx `libs/` layout, or NgModule-based folders), follow the project, not this tree.
+
+```
+{features-dir}/{feature-name}/        # e.g. features/, modules/, or an Nx lib
+├── {feature}.routes.ts
+├── models/
+│   └── {feature}.model.ts           # Interfaces mirroring the backend response shape
+├── services/
+│   └── {feature}.service.ts         # All data-access calls
+├── pages/                           # Smart (container) components — project may call these containers/
+│   ├── {feature}-list/
+│   │   ├── {feature}-list.component.ts
+│   │   ├── {feature}-list.component.html
+│   │   └── {feature}-list.component.scss
+│   └── {feature}-detail/
+└── components/                      # Dumb (presentational) components
+    └── {feature}-form/
+```
+
+## Step 3: Implement in This Order
+1. **Model** — interfaces for entity, request/response, mirroring the backend's actual DTOs / response shape (per `project-rules.md` — envelope, raw DTO, or GraphQL type)
+2. **Service** — data-access methods returning `Observable<T>` typed with the project's response shape (HttpClient, or the project's client if it uses Apollo/another)
+3. **Routes** — lazy-loaded, guard-protected where needed
+4. **Page components (smart)** — data, loading/error/empty states
+5. **Presentational components (dumb)** — inputs/outputs only, no data access
+
+## Step 4: Write Tests (see /write-tests)
+- Service: mock HttpClient, test success + error + empty per method
+- Component: mock service, test render + interaction + loading + error states
+
+## Step 5: Rules (from .claude/rules/project-rules.md + .claude/angular-practices/)
+- Data access ONLY in services — never in components
+- `ChangeDetectionStrategy.OnPush` on every component
+- Tear down subscriptions per profile: `takeUntilDestroyed` (v16+) or `takeUntil(destroy$)` + `ngOnDestroy` (v12–15)
+- No `any` — interfaces/types for every model and response
+- Use the project's forms approach from `project-rules.md` (Reactive Forms by default; Formly / template-driven if that's what the project uses)
+- No hardcoded backend URL — use `environment`
+
+## Step 6: Update Documentation
+- `docs/API_CONTRACT.md` if you used/discovered endpoints
+- Create `CONTEXT.md` inside the feature folder (use /write-context)
+- `docs/PROJECT-STATUS.md` (use /update-status)
+
+## Step 7: Verify
+- Build passes: `ng build` / `npx tsc --noEmit`
+- All tests pass: `ng test` / `jest`
+- Lint passes: `ng lint`
+- Review with /review-pr before committing

package/commands/review-pr.md

@@ -0,0 +1,63 @@
+Review the code changes in this PR. Check every item — flag violations clearly.
+
+Read `.claude/angular-practices/` for version-correct idioms, and
+`.claude/rules/project-rules.md` for project-specific rules.
+
+**Precedence (see `project-rules.md` → Precedence):** a valid project convention wins over
+the BP profile; flag a BP deviation as a blocker only when it's an objective defect in NEW
+code. Do NOT flag legacy modules listed in the Coexistence Strategy — they are kept as-is.
+Do NOT flag a valid project choice (naming, structure, state lib, response shape) just
+because it differs from the profile.
+
+## Architecture
+- [ ] Smart / dumb separation: pages own data; presentational components only render + emit
+- [ ] HTTP calls ONLY in services — never in components
+- [ ] No business logic in templates
+- [ ] Feature routes are lazy-loaded
+
+## Type Safety
+- [ ] No `any` — interfaces/types for every model and API response
+- [ ] Responses typed with the project's response shape recorded in `project-rules.md` (e.g. an `ApiResponse<T>` envelope, a raw DTO, or a GraphQL type — whatever the backend actually returns)
+- [ ] No `@ts-ignore` / `@ts-expect-error`
+
+## Dependency Injection (follow `.claude/angular-practices/`)
+- [ ] DI matches the profile: `inject()` (v16+) or constructor injection (v12–15) — consistent across the project
+- [ ] Services `@Injectable({ providedIn: 'root' })`
+
+## Reactive / RxJS / Signals (follow `.claude/angular-practices/`)
+- [ ] Subscriptions torn down: `takeUntilDestroyed` (v16+) or `takeUntil(destroy$)` + `ngOnDestroy` (v12–15)
+- [ ] `async` pipe preferred over manual subscribe
+- [ ] No `toPromise()` — use `firstValueFrom()` if needed
+- [ ] Services return `Observable<T>` — do NOT subscribe internally
+- [ ] Signals used per profile: stable for state (v16+); derived state via `computed()`. `resource`/`httpResource` are experimental (v19+) — only if the team opted in
+
+## Error Handling
+- [ ] Loading / error / empty states handled in list/detail pages
+- [ ] HTTP errors surfaced to user (not swallowed)
+- [ ] Auth errors (e.g. 401) handled centrally by an interceptor — not per-feature
+
+## Security
+- [ ] Auth handled per the project's model in `project-rules.md` (token in memory / httpOnly cookie / session / OAuth) — and consistent with it. If tokens are used, they are NOT in localStorage
+- [ ] No hardcoded backend URL — uses `environment`
+- [ ] Routes needing auth are guarded
+- [ ] No unsanitized HTML (`innerHTML` / `bypassSecurityTrust*`) without a clear, reviewed reason
+
+## Performance
+- [ ] `ChangeDetectionStrategy.OnPush` on every component (or zoneless on v20+ if enabled)
+- [ ] List tracking present: `@for` with `track` (v17+) or `*ngFor` with `trackBy` (v12–16)
+
+## Code Quality
+- [ ] Component file < ~300 lines; method < ~50 lines
+- [ ] No dead code, no `console.log`
+- [ ] Naming follows `.claude/rules/project-rules.md`
+
+## Documentation
+- [ ] New feature: `CONTEXT.md` created inside feature folder
+- [ ] Logic changed: `CONTEXT.md` Refactor Log updated (append only)
+- [ ] Endpoint changed: `docs/API_CONTRACT.md` updated
+- [ ] `docs/PROJECT-STATUS.md` updated
+
+## Summary
+1. **Blockers** 🔴 — must fix before merge
+2. **Suggestions** 🟡 — improve but not blocking
+3. **Good parts** 🟢 — what was done well

package/commands/start.md

@@ -0,0 +1,21 @@
+Start of a new coding session. Read context before doing anything.
+
+## Read These (always)
+- Read `CLAUDE.md` → project overview and links to docs
+- Read `docs/PROJECT-STATUS.md` → current progress, warnings, next tasks
+
+## Read These (only when needed)
+- `.claude/rules/project-rules.md` → ONLY if this is your first session OR you're about to write code
+- `docs/ARCHITECTURE.md` → ONLY if task involves cross-module work or a new feature
+- `docs/API_CONTRACT.md` → ONLY if task involves calling backend endpoints
+- `docs/DESIGN_SYSTEM.md` → ONLY if task involves UI/components
+- A feature's `CONTEXT.md` → ONLY if you're modifying that feature
+
+## After Reading, Tell Me
+1. What was last completed
+2. What is in progress (if any)
+3. Any active warnings
+4. Suggested next task
+
+## Then Wait
+Do NOT start coding. Wait for me to confirm or change the task.

package/commands/update-status.md

@@ -0,0 +1,19 @@
+Update `docs/PROJECT-STATUS.md` based on what we did this session.
+
+Rules:
+1. Read the current `docs/PROJECT-STATUS.md` first
+2. Move completed items from "In Progress" → "Completed" (with date)
+3. Add any new work done this session to "Completed"
+4. Update "In Progress" with anything still unfinished (note which component/file)
+5. Add discovered issues to "Deferred Issues" with priority [P1/P2/P3]
+6. Add gotchas to "Warnings"
+7. Update "Next Tasks" — reorder by current priority
+8. Update the header: date, session number (increment by 1)
+9. Keep the file under 80 lines — archive old "Completed" items if too long
+
+After updating, commit code and docs together:
+```
+git add CLAUDE.md docs/ .claude/rules/ src/
+git commit -m "feat: {what was built} + tests + docs"
+```
+Docs and code in the same commit — docs that lag behind code go stale.

package/commands/write-context.md

@@ -0,0 +1,71 @@
+Write a `CONTEXT.md` file for the current feature module.
+
+This file is a **snapshot** — it captures WHY this module was built this way,
+at the time it was built. It helps future developers (and AI) understand decisions
+without guessing from code.
+
+## Where to Create
+Place the file inside the feature folder, using the project's actual layout from
+`project-rules.md` (the `features/` path below is only the default example):
+```
+{features-dir}/{feature-name}/CONTEXT.md    # e.g. features/, modules/, or an Nx lib
+```
+
+## Template — Fill Every Section
+
+```markdown
+# {Feature Name} — Implementation Context
+> Written: {YYYY-MM-DD} | Author: {who built it}
+
+## Business Context
+Why does this module exist? What user/business problem does it solve?
+(2-3 sentences max)
+
+## Components
+- `{Feature}ListPage` — smart component: fetches data, pagination, handles loading/error/empty
+- `{Feature}DetailPage` — smart component: create/edit form (per the project's forms approach), submit
+- `{Feature}FormComponent` — dumb component: receives form/inputs, emits events
+- `{Feature}CardComponent` — dumb component: renders one item
+
+## Service
+`{Feature}Service` — all HTTP calls to `{base endpoint}`
+
+## State Management
+Which approach and WHY (Signals / NgRx / BehaviorSubject / plain service).
+Note what is local component state vs shared state.
+
+## API Endpoints Used
+- GET    {path}?page=&size=   → paginated list
+- GET    {path}/:id           → single
+- POST   {path}               → create
+- PUT    {path}/:id           → update
+- DELETE {path}/:id           → delete
+
+## Technical Decisions
+- **{Decision}**: {reason}
+- **{Decision}**: {reason}
+
+## Considered and Rejected
+- **{Option}**: rejected because {reason}
+
+## Dependencies
+- Depends on: {other modules/services this uses}
+- Depended by: {modules that use this}
+
+## Known Limitations
+- ⚠️ {limitation — explain why it's acceptable for now}
+
+## Refactor Log
+(Add entries here when significant changes are made. Do NOT edit sections above.)
+
+### {YYYY-MM-DD} | {author}
+- {what changed and why}
+```
+
+## Rules
+1. Write in clear language
+2. Be specific — "chose Signals because state is local to this page", not just "chose Signals"
+3. Keep each section concise (2-5 bullet points max)
+4. "Known Limitations" is critical — prevents future devs from "fixing" intentional trade-offs
+5. NEVER edit old content — only ADD new entries in the Refactor Log
+6. Write it NOW while context is fresh — tomorrow you'll forget half the reasons

package/commands/write-tests.md

@@ -0,0 +1,110 @@
+Write tests for the specified feature module. Read the source code first, then generate tests.
+
+Use the test runner the project already uses (Jest or Karma/Jasmine — check
+`package.json` / `angular.json`). Read `.claude/angular-practices/` for the
+version's testing idioms.
+
+## Step 1: Read Before Writing
+- Read the feature's source: model, service, page components, presentational components
+- Read the module's `CONTEXT.md` (if it exists) to understand trade-offs and edge cases
+- Read `docs/API_CONTRACT.md` for expected request/response shapes
+- Identify all code paths: happy path, error cases, empty states, validation
+
+## Step 2: Unit Tests — `{feature}.service.spec.ts`
+
+Use `HttpClientTestingModule` + `HttpTestingController` (works on every version, v12+).
+On v15+ you may instead use the functional `provideHttpClient()` + `provideHttpClientTesting()`.
+Follow whichever style the project already uses (see `.claude/angular-practices/`).
+
+```typescript
+describe('{Feature}Service', () => {
+  let service: {Feature}Service;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [{Feature}Service],
+    });
+    service = TestBed.inject({Feature}Service);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+});
+```
+
+### Required Coverage Per Method
+**getAll:**
+- ✅ Success — returns list; assert request URL + method `GET`
+- ✅ Empty — returns empty array, not null
+- ✅ Server error — propagates error (500)
+
+**getById:**
+- ✅ Found — returns correct response; assert URL contains the id
+- ✅ Not found — 404 error propagated
+
+**create:**
+- ✅ Success — assert `POST` + request body matches payload
+- ✅ Validation error — 400
+- ✅ Conflict — 409
+
+**update:**
+- ✅ Success — assert `PUT`/`PATCH` + body
+- ✅ Not found — 404
+
+**delete:**
+- ✅ Success — assert `DELETE` + URL
+- ✅ Not found — 404
+
+### Unit Test Rules
+- Use `httpMock.expectOne(url)` to assert and flush each request
+- Test ONE behavior per test
+- Naming: `methodName_scenario_expectedResult`
+- Describe behavior in the test title, not the implementation
+- `httpMock.verify()` in `afterEach` — no unexpected requests
+- Never hit a real backend
+
+## Step 3: Component Tests — `{feature}-list.component.spec.ts`
+
+Mock the service with `jasmine.createSpyObj` (Karma) or `jest.fn()` (Jest).
+
+```typescript
+describe('{Feature}ListComponent', () => {
+  let fixture: ComponentFixture<{Feature}ListComponent>;
+  let serviceSpy: jasmine.SpyObj<{Feature}Service>;
+
+  beforeEach(() => {
+    serviceSpy = jasmine.createSpyObj('{Feature}Service', ['getAll', 'delete']);
+    TestBed.configureTestingModule({
+      imports: [{Feature}ListComponent],
+      providers: [{ provide: {Feature}Service, useValue: serviceSpy }],
+    });
+  });
+});
+```
+
+### Required Coverage
+- ✅ Render — list shows correct data after load
+- ✅ Loading — spinner visible while the request is pending
+- ✅ Error — error message visible when the service errors
+- ✅ Empty — empty-state message when no data
+- ✅ Interaction — clicking delete calls `service.delete` with the right id
+- ✅ Signals (v16+) — assert signal values update as expected
+
+### Component Test Rules
+- Mock the service — never the real HttpClient
+- Drive change detection with `fixture.detectChanges()`
+- Query the DOM via `fixture.nativeElement` / `DebugElement`
+- Each test is independent — no shared mutable state
+
+## Step 4: E2E (only for critical flows)
+For login and the main CRUD flow, add a Playwright spec under the project's e2e folder.
+Skip E2E for trivial pages — manual testing covers those.
+
+## Step 5: Verify
+- All tests pass: `ng test` / `jest`
+- No test depends on execution order
+- No unit test hits a real backend
+- Test names clearly describe WHAT is tested and the EXPECTED result
+- Coverage: every public service method has at least happy path + error case

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@tungvivas/angular-vibe-kit",
+  "version": "0.1.0",
+  "description": "Bootstrap a Vibe Coding workflow (CLAUDE.md, project docs, slash-commands) into any Angular project. Detects your Angular version and installs version-matched best-practice rules.",
+  "keywords": [
+    "angular",
+    "claude",
+    "claude-code",
+    "ai",
+    "scaffold",
+    "vibe-coding",
+    "slash-commands"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "angular-vibe-kit": "bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "commands/",
+    "practices/",
+    "templates/",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "test": "node bin/cli.js --help",
+    "prepublishOnly": "node -c bin/cli.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vuanhtung10/angular-vibe-kit.git"
+  },
+  "homepage": "https://github.com/vuanhtung10/angular-vibe-kit#readme",
+  "bugs": "https://github.com/vuanhtung10/angular-vibe-kit/issues"
+}

package/practices/v12-13.md

@@ -0,0 +1,193 @@
+# Angular Best Practices — v12 / v13 (NgModule + NgRx Era)
+
+> Framework-level patterns only. This file describes HOW to write idiomatic
+> Angular 12/13 — syntax, DI, components, RxJS. It does NOT dictate folder
+> structure, state-management choice, or naming — those are project decisions
+> recorded in `.claude/rules/project-rules.md` (inferred from the codebase).
+>
+> When the project already follows a correct pattern, follow the project.
+> When it is below standard, apply this standard to NEW code only.
+
+---
+
+## Module System
+- **NgModule is the only option.** Standalone components do NOT exist in v12/13.
+- Every feature has a `*.module.ts` + `*-routing.module.ts`.
+- Feature modules are lazy-loaded via `loadChildren`.
+- `CoreModule` (imported once in AppModule) owns singleton services, interceptors, guards.
+- `SharedModule` owns reusable components, pipes, directives — exported for feature modules.
+
+```typescript
+@NgModule({
+  declarations: [UserListComponent, UserCardComponent],
+  imports: [CommonModule, UserRoutingModule, ReactiveFormsModule, SharedModule],
+  providers: [],
+})
+export class UserModule {}
+```
+
+## Component Pattern
+- `changeDetection: ChangeDetectionStrategy.OnPush` on every component.
+- **Smart (container) vs Dumb (presentational)** separation — mandatory.
+  - Smart: fetches data, owns state, dispatches NgRx actions or calls services.
+  - Dumb: receives data via `@Input()`, emits via `@Output()`, zero HTTP/store calls.
+- Inputs/outputs with `@Input()` / `@Output()`.
+
+```typescript
+@Component({
+  selector: 'app-user-list',
+  templateUrl: './user-list.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserListComponent implements OnInit, OnDestroy {
+  users: User[] = [];
+  isLoading = false;
+  error: string | null = null;
+  private destroy$ = new Subject<void>();
+
+  constructor(private userService: UserService) {}
+
+  ngOnInit(): void { this.loadUsers(); }
+  ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete(); }
+}
+```
+
+## Template Syntax — Structural Directives
+- Use `*ngIf`, `*ngFor` (with `trackBy`), `[ngSwitch]`.
+- Built-in `@if/@for` does NOT exist (v17+ only).
+- Always use `trackBy` with `*ngFor`.
+
+```html
+<app-spinner *ngIf="isLoading"></app-spinner>
+<p *ngIf="error" class="error">{{ error }}</p>
+<app-user-card
+  *ngFor="let user of users; trackBy: trackById"
+  [user]="user"
+  (delete)="onDelete($event)">
+</app-user-card>
+<p *ngIf="!isLoading && users.length === 0">No data.</p>
+```
+
+## Services & Dependency Injection
+- **Constructor injection only.** `inject()` function does NOT exist in v12.
+- `@Injectable({ providedIn: 'root' })` for singleton services.
+- HttpClient lives ONLY in services — never call HTTP from a component.
+- Services return `Observable<T>` and NEVER subscribe internally.
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class UserService {
+  private baseUrl = `${environment.apiUrl}/users`;
+  constructor(private http: HttpClient) {}
+
+  getAll(params?: UserFilterParams): Observable<ApiResponse<User[]>> {
+    return this.http.get<ApiResponse<User[]>>(this.baseUrl, { params: { ...params } });
+  }
+  getById(id: number): Observable<ApiResponse<User>> {
+    return this.http.get<ApiResponse<User>>(`${this.baseUrl}/${id}`);
+  }
+  create(payload: CreateUserRequest): Observable<ApiResponse<User>> {
+    return this.http.post<ApiResponse<User>>(this.baseUrl, payload);
+  }
+  update(id: number, payload: UpdateUserRequest): Observable<ApiResponse<User>> {
+    return this.http.put<ApiResponse<User>>(`${this.baseUrl}/${id}`, payload);
+  }
+  delete(id: number): Observable<ApiResponse<void>> {
+    return this.http.delete<ApiResponse<void>>(`${this.baseUrl}/${id}`);
+  }
+}
+```
+
+## HTTP
+- `HttpClientModule` imported in `CoreModule` / `AppModule`.
+- Class-based interceptors registered via `HTTP_INTERCEPTORS` multi-provider in `CoreModule`.
+- Auth interceptor attaches `Authorization: Bearer <token>`.
+- Error interceptor handles 401 (refresh/redirect) and maps errors to user messages.
+- Avoid `toPromise()` (deprecated) — use `firstValueFrom()` / `lastValueFrom()`.
+
+```typescript
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+  constructor(private auth: AuthService) {}
+  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    const token = this.auth.accessToken;
+    return token
+      ? next.handle(req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }))
+      : next.handle(req);
+  }
+}
+```
+
+## State Management — NgRx (common in v12 projects)
+- If the project uses NgRx: Actions → Reducer → Effects → Selectors pattern.
+- Smart components dispatch actions and select from store — NEVER call service directly when NgRx manages that slice.
+- Effects own all side effects (HTTP calls, navigation).
+- Selectors are the ONLY way to read from the store in components.
+
+```typescript
+// Smart component with NgRx
+export class UserListComponent implements OnInit, OnDestroy {
+  users$ = this.store.select(selectUsers);
+  isLoading$ = this.store.select(selectUsersLoading);
+  private destroy$ = new Subject<void>();
+
+  constructor(private store: Store) {}
+  ngOnInit(): void { this.store.dispatch(UserActions.loadUsers()); }
+  ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete(); }
+  onDelete(id: number): void { this.store.dispatch(UserActions.deleteUser({ id })); }
+}
+```
+
+- If the project does NOT use NgRx: `BehaviorSubject` in a service for shared state, local state in component fields.
+
+## Routing
+- Lazy-load feature modules with `loadChildren: () => import('...').then(m => m.UserModule)`.
+- Class-based guards implementing `CanActivate`, `CanLoad`.
+
+## Reactive / RxJS (v6.x)
+- No Signals (v16+ only). State is component fields or `BehaviorSubject`.
+- Tear down ALL subscriptions with `takeUntil(this.destroy$)` + `ngOnDestroy`.
+- Prefer the `async` pipe in templates over manual `subscribe` where possible.
+
+```typescript
+private loadUsers(): void {
+  this.isLoading = true;
+  this.userService.getAll()
+    .pipe(takeUntil(this.destroy$))
+    .subscribe({
+      next: (res) => { this.users = res.data; this.isLoading = false; },
+      error: () => { this.error = 'Could not load users'; this.isLoading = false; },
+    });
+}
+```
+
+## Forms
+- Reactive Forms (`FormBuilder`) for all forms with validation — never Template-driven for complex forms.
+- Show validation messages when a control is `touched` and `invalid`.
+- Disable submit button while request is pending.
+
+## TypeScript
+- No `any` — use proper `interface` / `type`.
+- Mirror backend DTOs in `*.model.ts`.
+- `readonly` for arrays/objects that must not be mutated.
+
+## Testing
+- Unit (service): `HttpClientTestingModule` + `HttpTestingController`.
+- Component: `TestBed.configureTestingModule` + mocked service (`jasmine.createSpyObj`).
+- E2E: Protractor (default in v12, EOL) or Cypress/Playwright if the project migrated.
+- Runner: Karma + Jasmine (default in v12).
+
+## Security
+- Tokens in memory (service field) or httpOnly cookie — NOT localStorage.
+- No hardcoded backend URL — use `environment.apiUrl`.
+- Guard routes with `CanActivate`; use `CanLoad` to prevent lazy module download.
+
+---
+
+## Key Differences vs v14-15
+- No standalone components — NgModule only.
+- No `inject()` function — constructor injection only.
+- No `takeUntilDestroyed` — use the `Subject + takeUntil + ngOnDestroy` pattern.
+- No required `@Input()` decorator — use `!` assertion or explicit check.
+- RxJS 6.x (pipeable operators, `of`, `from`, etc. — same as later versions).
+- NgRx v12 — `createAction`, `createReducer`, `createEffect` patterns are standard.