SKILL: Angular Material + CDK + Animations

Use when

• Adding or refactoring UI that uses @angular/material, @angular/cdk, or @angular/animations.
• Building overlays, drag-drop, virtual scroll, focus management, or motion/transition behaviors.

Workflow

1. Start from the simplest Material component that fits; only drop to CDK primitives when needed.
2. Keep inputs/outputs signal-first; avoid component-internal RxJS state.
3. If using CDK overlays/focus traps/observers, define ownership and dispose on destroy.
4. If adding motion:
   • CSS transitions for small state changes
   • @angular/animations only for coordinated/complex transitions
   • always respect prefers-reduced-motion
5. Validate a11y: labels, focus order, keyboard operation, and visible focus.