Imported from janpereira-dev/ngAutoPilot (plugins/ngautopilot-angular/skills/angular--components--angular-v22-component-contracts/SKILL.md). Install upstream with npx skills add janpereira-dev/ngAutoPilot --skill angular--components--angular-v22-component-contracts. Copyright stays with the author.

Angular v22 Component Contracts

Purpose

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

When to Use

Use this skill when:

• Dynamic components use APIs that changed or were removed in v22.
• Multiple selectors or host directives may now collide.
• Component change detection behavior needs to stay explicit.

When Not to Use

Do not use this skill when:

• The issue is only template syntax.
• The task is only about routing or SSR.
• A more specific dynamic-component skill is the better match.

Required Inputs

• dynamic component code
• selectors
• host directives
• change detection expectations

Procedure

1. Replace removed component creation APIs with the supported v22 path.
2. Normalize selectors so the compiler no longer sees collisions.
3. Review host-directive exposure and any default change-detection assumptions.
4. Validate dynamic component behavior with targeted tests.

Do

• Keep component creation explicit.
• Prefer one clear selector per component contract.
• Validate lifecycle behavior after the migration.

Do Not

• Do not keep removed factory APIs in the codebase.
• Do not ignore compile-time selector errors.
• Do not rely on an implicit change-detection default without confirming it.

Review Checklist

• Removed component APIs are gone.
• Selectors are unambiguous.
• Component tests still pass.

Expected Output

When this skill is used, the agent should:

1. A component-contract summary.
2. The removed API replacement.
3. Remaining component risks.