Claude Skills by janpereira-dev

Use this skill when Angular 22 build, serve, or test infrastructure needs to move away from deprecated builder paths.

Use this skill when Angular 22 changes affect component creation, selector rules, host directives, or default component behavior.

Splits Angular components into container and presentational responsibilities when it improves data flow, reuse, testability, and UI boundaries.

Audits and designs Angular shared UI/component libraries in Nx monorepos to keep reusable UI contracts free of feature, domain, data-access, store, router, and backend concerns.

Reviews, designs, and refactors Angular dependency injection for services, providers, injectors, InjectionToken, inject(), testing overrides, standalone apps, NgModules, SSR, lazy loading, and provider scopes.

Define Angular component-library APIs, compatibility, theming, composition, testing, documentation, and consumer stability.

Route Angular custom interactive components to native HTML, Angular Aria, or CDK accessibility primitives by version and pattern complexity.

Capture Angular architecture decisions as short ADRs with context, decision, consequences, and validation criteria before implementation.

Build a compact review packet for Angular PRs that highlights architecture, risk, validation, and rollback points for human or agent review.

Produce a concise upgrade report that records the current stack, hop taken, gates passed, blockers, and next safe step.

Translate Angular 22 upgrade work into cost, risk, quality, time-to-market, and operational impact. For Angular 22 projects and 21-to-22 upgrade planning.

Explain Angular 22 concepts to non-developers with accurate, non-infantilizing language. For Angular 22 projects and 21-to-22 upgrade planning.

Use careful analogies for Signals, Signal Forms, Router, SSR, and resources. For Angular 22 projects and 21-to-22 upgrade planning.

Explain why an Angular upgrade is not just changing a version number. For Angular 22 projects and 21-to-22 upgrade planning.

Design ControlValueAccessor implementations with clear boundaries, typed contracts, and minimal side effects.

Review Angular numeric inputs and min/max validation after Angular 12 when <input type="number"> behavior can affect form validity and submit flows.

Assess whether a forms area is ready to adopt Signal Forms or should stay on reactive forms for now.

Govern the move to typed forms with a bounded migration plan and explicit rollback point.

Migrate Angular reactive forms to typed forms in bounded slices after Angular 14+. Use when converting FormControl, FormGroup, FormArray, and FormBuilder usage incrementally.

Use untyped form controls as a temporary bridge while migrating to typed forms in Angular. Use when a large forms codebase cannot be converted safely in one pass.

Use this skill when an Angular 22 app is adopting Signal Forms or needs to align form code with stricter template and validation rules.

Reviews Angular form validation contracts for enterprise workflows, focusing on synchronous and async validators, cross-field rules, error presentation, and reusable validation policy.

Reviews Angular reactive forms with typed forms support in Angular 14+ projects, focusing on typed controls, validation architecture, and enterprise workflow safety.

Designs and reviews Angular reactive forms for enterprise features, focusing on typed form models, validation architecture, DTO mapping, state separation, and testable form workflows.

Classify the change as bugfix, refactor, upgrade, modernization, performance, testing, security, or architecture before touching code.

Require version and dependency evidence before recommending or applying an Angular change.

Prevent mixing version migrations with modernization work in the same change unless explicitly requested.

Classify the Angular project shape before any change: app, library, monorepo, SSR, hybrid, microfrontend, or legacy migration.

Define the minimum validation contract for a change, such as build, unit tests, lint, e2e, bundle, or SSR validation.

Migrate Angular i18n apps to @angular/localize and $localize usage. Use when legacy i18n extraction or runtime localization needs to be aligned with Angular 9+ tooling.

Gate Angular upgrades on Ivy-only readiness. Use when the project is moving to Angular 13+ and View Engine or ngcc compatibility must be explicitly resolved before the upgrade can proceed.

Audit Angular libraries for View Engine compatibility before Angular 13 and later upgrades. Use when ngcc or View Engine metadata could still affect the upgrade path.

Design accessible headless UI patterns that can later evolve toward Angular Aria or CDK primitives.

Apply Angular CDK accessibility primitives with explicit keyboard, focus, and announcement behavior.

Manage Angular Material themes, typography, and density with maintainable design-system boundaries.

Remove AngularJS legacy surface once the replacement is stable and migration checkpoints are complete.

Plan and validate the ngUpgrade hybrid bridge between AngularJS and Angular with bounded risk and rollback awareness.

Inventory AngularJS surface area, upgrade constraints, and legacy dependencies before any migration work.

Migrate AngularJS routing to Angular routing with bounded, testable steps.

Migrate AngularJS services to Angular services and injectables with a bounded compatibility plan.

Select the safest AngularJS-to-Angular migration strategy based on app shape, risk, and rollback constraints.

Migrate AngularJS template syntax to Angular template syntax with minimal behavioral drift.

Coordinates an incremental modernization from AngularJS 1.x to modern Angular by detecting legacy evidence, choosing a migration strategy, and routing to the smallest next migration skill.

Adopt Angular built-in control flow syntax in bounded post-upgrade modernization slices after Angular 17 is stable. Use when replacing *ngIf, *ngFor, and *ngSwitch with @if, @for, and @switch in a controlled feature slice, not during a version hop.

Adopt Angular built-in control flow syntax in bounded post-upgrade modernization slices after Angular 18 is stable. Use when replacing *ngIf, *ngFor, and *ngSwitch with @if, @for, and @switch in a controlled feature slice, not during a version hop.

Adopt Angular built-in control flow syntax in bounded post-upgrade modernization slices after Angular 19 is stable. Use when replacing *ngIf, *ngFor, and *ngSwitch with @if, @for, and @switch in a controlled feature slice, not during a version hop.

Adopt Angular built-in control flow syntax in bounded post-upgrade modernization slices after Angular 20 is stable. Use when replacing *ngIf, *ngFor, and *ngSwitch with @if, @for, and @switch in a controlled feature slice, not during a version hop.

Adopt Angular built-in control flow syntax in bounded post-upgrade modernization slices after Angular 21 is stable. Use when replacing *ngIf, *ngFor, and *ngSwitch with @if, @for, and @switch in a controlled feature slice, not during a version hop.

Adopt Angular deferrable views in bounded post-upgrade modernization slices after Angular 17 is stable. Use when improving render timing, route splitting, and loading behavior with @defer without mixing the change into a version hop.

Adopt Angular deferrable views in bounded post-upgrade modernization slices after Angular 18 is stable. Use when improving render timing, route splitting, and loading behavior with @defer without mixing the change into a version hop.