Angular Spec Auditor
Independently audit an Angular component spec file against the project's migration guidelines.
Usage: /audit-ng-spec-skill $ARGUMENTS
$ARGUMENTS = path to the spec file (relative from repo root), e.g. src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.spec.ts
If $ARGUMENTS is omitted, ask the user for the spec path before proceeding.
You did NOT write this spec. Treat it with completely fresh eyes.
Step 1 — Read context
- Read
AGENTS.md. - Read
.claude/commands/migrate-ng19-standalone-components.md— pay special attention to the Rules table and Spec Conventions section. - Read the spec at
{SPEC_PATH}. - Derive the component path from the spec path (same directory,
.component.tsinstead of.component.spec.ts), read it. - Derive the template path (
.component.html), read it if it exists.
Step 2 — Audit
For each item, mark PASS or FAIL with a one-line reason and the exact line(s) involved.
Rules
- [ ] No
any/as any/eslint-disable no-explicit-any - [ ] No
: voidreturn type annotations anywhere in the spec - [ ] No trivial smoke tests (
it("should create", ...)or similar) - [ ] No
NO_ERRORS_SCHEMA - [ ] DOM query preference order: harness →
querySelector/querySelectorAll(plain HTML / custom elements) →By.directive— neverBy.css.By.css('[input="value"]')matches on DOM attributes that Angular never writes for@Inputbindings → silent false positives. For custom components with@Inputchecks usedebugElement.queryAll(de => de.name === "tag-name")+.componentInstance.prop. - [ ] No
querySelectorAll/querySelectorfor Material components (use harnesses; plain HTML elements are OK) - [ ] Variable naming: no single-letter or abbreviated names (
el,f,res,btn). Use full descriptive names (element,fixtureRef,result,button). - [ ] SPDX header: new file →
2026 INFO.nlonly; existing file →INFO.nladded only if completely absent from the existing line
Spec structure
- [ ]
describe(ClassName.name, ...)— class name reference, not a string literal - [ ]
declarations: [Component]used (component isstandalone: false), ORimports: [Component]if already standalone - [ ] Services should use
TestBed.inject()+jest.spyOn()— avoiduseValue: mockObject.- Reason: type safety.
useValueaccepts any object — typos, missing methods, wrong return types all silently pass.jest.spyOnis checked against the real service type, so the compiler catches mismatches. - Strongly preferred pattern:
providers: [provideHttpClient(), provideRouter([]), MyService], // ... myService = TestBed.inject(MyService); jest.spyOn(myService, "someMethod").mockReturnValue(of(result)); useValueis acceptable when genuinely difficult to avoid (e.g. a service with a deeply complex DI tree that cannot be satisfied without significant setup). Flag it with a comment explaining why.- Always acceptable exceptions: Angular built-in injection tokens (
MAT_DIALOG_DATA,LOCALE_ID,APP_BASE_HREF, etc.) where no real class exists to inject. TranslateService→ useTranslateModule.forRoot()inimports, thenTestBed.inject(TranslateService)+jest.spyOn.- Services using
ZacHttpClient→ addprovideHttpClient()to providers. - Services using
Router→ addprovideRouter([])to providers.
- Reason: type safety.
- [ ]
provideHttpClient()present if any service in the tree usesZacHttpClient - [ ]
provideRouter([])present if any service in the tree usesRouter - [ ] Factory helpers use
fromPartial<T>(obj)— never bare{ ... } as unknown as Ton an object literal (non-literal re-casts likemockVar as unknown as Tare OK)
Coverage
- [ ] Every test asserts meaningful behaviour
- [ ] ≥90% of template behaviours covered (buttons, conditionals, outputs, form states)
- [ ] Protected/private members accessed via bracket notation:
component["member"]
Step 3 — Fix
For each FAIL: edit the spec file with the correct fix. Do NOT touch any component source files.
After all fixes are applied, re-read the spec to confirm no violations remain.
Step 4 — Report
AUDIT: PASS (if nothing needed fixing)
AUDIT: PASS (N issues fixed) (if fixes were applied)
Issues fixed:
- Line X: <description of fix>
- ...
If a violation cannot be auto-fixed (e.g. missing test coverage that requires understanding domain logic), list it as a manual action required item and do not mark the audit PASS until the user addresses it.
TDD Red-Green-Refactor
Testing
Skill that guides Claude through the complete TDD cycle.
Web Accessibility Audit
Testing
Performs a comprehensive web accessibility audit following WCAG standards.
UAT Test Case Generator
Testing
Generates structured and comprehensive user acceptance test cases.