Agent Skills
› NeverSight/learn-skills.dev
› angular-material-cdk-animations
angular-material-cdk-animations
GitHub指导使用Angular Material、CDK及动画库的最佳实践。强调信号优先、M3设计令牌、无障碍访问及区域无状态架构。涵盖组件选择、内存清理、简化动效及减少运动偏好支持,确保UI构建高效且符合现代Angular标准。
Trigger Scenarios
需要添加或重构使用 Angular Material、CDK 或动画的 UI 组件
实现覆盖层、拖拽、虚拟滚动、焦点管理或过渡行为
进行涉及上述库的代码审查或 PR 准备
Install
npx skills add NeverSight/learn-skills.dev --skill angular-material-cdk-animations -g -y
SKILL.md
Frontmatter
{
"name": "angular-material-cdk-animations",
"tags": [
"angular",
"material",
"cdk",
"animations",
"a11y"
],
"version": "1.0.0",
"description": "Angular Material + CDK + @angular\/animations usage patterns aligned with zoneless + signals-first UI and M3 tokens."
}
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
Version History
- e0220ca Current 2026-07-05 21:25


