Claude Skills by janpereira-dev

Use this skill when Angular 22 code needs signal-driven state, computed derivations, or signal-form integration.

Separates signal(), computed(), linkedSignal(), effect(), resource(), and template responsibilities to avoid mixing source state, derivation, writable dependent state, reactive contexts, and external side effects.

Reviews the boundary between Angular Signals and RxJS, focusing on toSignal, toObservable, cancellation, async orchestration, and version-safe interop patterns.

Reviews Angular Signals state patterns for Angular 16+ projects, focusing on signal, computed, and effect usage, local state boundaries, and RxJS coexistence.

Designs Angular local state patterns with Signals, focusing on signal, computed, effect usage, state boundaries, derived values, and when not to replace RxJS.

Detect hydration blockers, DOM mismatches, and server/client divergence before enabling hydration changes.

Migrate Angular SSR code from renderModuleFactory to renderModule. Use when server rendering still depends on the older factory-based API.

Keep browser-only APIs out of SSR execution paths and provide safe server-side guards or abstractions.

Audit Angular applications for SSR readiness, browser API usage, hydration blockers, and server/client split risks.

Use this skill when the app renders on the server and Angular 22 hydration or server-engine changes need review.

Chooses between Angular Signals and RxJS based on Angular version, state lifetime, synchronicity, cancellation needs, and feature boundaries.

Expose style-only component state as CSS custom properties from Angular host bindings so CSS can render layout without imperative DOM mutation.

Govern Angular extended diagnostics and decide which warnings need remediation, suppression, or a deliberate bridge.

Verify strictTemplates and template type checking before applying Angular template-sensitive changes.

Use this skill when Angular 22 template changes, diagnostics, or syntax rules need to be reviewed or fixed.

Configures and governs Angular Extended Diagnostics with a progressive severity policy so template correctness issues are surfaced without turning upgrades into brittle compile blockers.

Fixes Angular Extended Diagnostics reported by the compiler by making the smallest safe template or type correction without changing policy or suppressing diagnostics.

Guides progressive adoption of Angular strictTemplates so teams can enable template type checking without turning legacy codebases into upgrade-blocking refactor projects.

Groups Angular NG81xx and NG8021 template diagnostics by problem type so agents can triage diagnostics by cause instead of by code number.

Reviews Angular component testing patterns for Angular 17+ projects, focusing on modern template syntax awareness, stable component contracts, and contract-focused tests.

Designs and reviews Angular component testing patterns for enterprise apps, focusing on template interaction, inputs and outputs, host testing, harnesses, and boundary-focused assertions.

Route Angular testing work to Vitest, Jest, or Karma based on the current project and migration goals.

Replace TestBed.get with TestBed.inject in Angular tests. Use when older tests still rely on TestBed.get and need a small, controlled modernization step.

Use this skill when Angular 22 changes affect test reliability, async expectations, or compile-time behavior in the suite.

Validate Angular user journeys with evidence across behavior, keyboard access, automated accessibility signals, and stable visual checks when repository capabilities allow.

Write or review Angular tests in existing Jest projects, with narrow typed mocks, deterministic async behavior, and assertions that catch regressions.

Executes exactly one Angular major-version hop, applies the bounded dependency and code changes required for that hop, and stops before the next version.

Coordinates Angular 2+ major-version upgrades by detecting the source version, selecting the next allowed hop, and delegating execution to a bounded hop skill.

Builds a major-by-major Angular upgrade route from the detected source major to the target major and selects the next hop only.

Validates each Angular major hop with repository-specific build, test, and lint checks before allowing the next upgrade step.

Detects the installed Angular major and related compatibility evidence from the repository so upgrade planning can choose the correct next hop.

Convert AngularJS controllers into Angular components during modernization. Use when controller-heavy views must become component-based before or during a hybrid migration.

Decide whether AngularJS can be removed after migration work is complete. Use when hybrid dependencies, downgrade bridges, or AngularJS routes may still remain.

Convert AngularJS directives into Angular components or directives as appropriate. Use when legacy directive behavior blocks migration or makes the DOM contract unstable.

Manage downgradeComponent, downgradeInjectable, UpgradeComponent, and related ngUpgrade bridge APIs during AngularJS and Angular coexistence.

Replace AngularJS filters with Angular pipes or component logic during migration. Use when template filters hide presentation rules that should become explicit Angular behavior.

Bootstrap AngularJS and Angular together with ngUpgrade when the app must run in hybrid mode during migration. Use when UpgradeModule, downgraded Angular components, or upgraded AngularJS services are part of the transition plan.

Move routing from AngularJS to a hybrid Angular and AngularJS setup when both frameworks must coexist during migration. Use when route ownership is split and navigation needs explicit bridge handling.

Move AngularJS services to Angular injectable services during migration. Use when stateful or shared business logic should leave the AngularJS dependency graph.

Migrate AngularJS template syntax such as ng-repeat, ng-if, ng-click, ng-class, and ng-model to Angular-compatible templates during a staged migration.

Inventory AngularJS applications before migration to Angular. Use when the repo still contains controllers, scopes, directives, filters, services, routes, templates, or ngUpgrade artifacts that must be mapped before a hybrid or full Angular migration.

Assesses, documents, and controls Internet Explorer 11 support risk during Angular upgrades, especially across the Angular 11->12 and Angular 12->13 boundaries.

Validate Angular 20 moduleResolution bundler compatibility after an Angular 20 upgrade when tsconfig inheritance, secondary entry points, custom builders, or monorepo tooling may break under bundler resolution.

Review OnPush components with host bindings after Angular 18 when host-bound state or external callbacks may not refresh as expected. Use when a bounded slice relies on ChangeDetectionStrategy.OnPush, host bindings, markForCheck, detectChanges, or manual refresh logic.

Review Angular minor and patch changelog entries for the current major version before continuing to the next major upgrade. Use when the project has just upgraded to an Angular major version, is about to leave that major version, or needs a patch/minor baseline decision before the next major hop. Especially important for Angular 16 before Angular 17 because changelog entries can affect ngcc removal, View Engine libraries, SSR, hydration, Router, Forms, TransferState, Service Worker, Signals, ...

Review Angular component creation with projectable nodes after Angular 19 when dynamic components depend on projected content, ng-content fallbacks, or component factory removal behavior. Use when createComponent or ViewContainerRef.createComponent is used with content projection.

Review dynamic component creation and ngDoCheck behavior after Angular 17 when dynamically instantiated components participate in change detection or side effects. Use when plugin systems, dashboards, dialogs, or CMS-driven components depend on dynamic component lifecycle behavior.

Review Angular custom elements that use signal inputs after an Angular 21 upgrade when property access semantics or signal-based inputs affect element consumers. Use when createCustomElement, customElements.define, or signal input wrappers exist.

Remove Angular debug-attribute dependencies after an Angular 20 upgrade when tests, e2e, or tools rely on ng-reflect-* attributes. Use when selectors or assertions depend on framework debug DOM and need to be migrated to stable contracts.

Cleans up Angular 15 deprecations in touched code after the upgrade is stable.