angular-material-cdk-animations
Angular Material + CDK + @angular/animations usage patterns aligned with zoneless + signals-first UI and M3 tokens.
SKILL.md
Full skill instructions
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
- Start from the simplest Material component that fits; only drop to CDK primitives when needed.
- Keep inputs/outputs signal-first; avoid component-internal RxJS state.
- If using CDK overlays/focus traps/observers, define ownership and dispose on destroy.
- If adding motion:
- CSS transitions for small state changes
@angular/animationsonly for coordinated/complex transitions- always respect
prefers-reduced-motion
- Validate a11y: labels, focus order, keyboard operation, and visible focus.
Checklist (PR-ready)
- Uses M3 tokens (no raw hex/px).
- Overlays/listeners/observers cleaned up.
- Reduced-motion path exists.
- No “cute” drag/animation that adds complexity without user value.
References
.github/instructions/62-angular-core-ui-copilot-instructions.md.github/instructions/71-angular-material-cdk-animations-copilot-instructions.md.github/skills/material-design-3/SKILL.md.github/skills/angular-ecosystem/SKILL.md