AgentSkillsCN

angular-material-cdk-animations

Angular Material + CDK + @angular/animations 的使用模式，与无区段 + 信号优先的 UI 设计理念，以及 M3 令牌规范相契合。

SKILL.md
--- frontmatter
name: angular-material-cdk-animations
description: Angular Material + CDK + @angular/animations usage patterns aligned with zoneless + signals-first UI and M3 tokens.
tags: [angular, material, cdk, animations, a11y]
version: 1.0.0

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.

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