angular-material-cdk-animations

Implement Angular Material, CDK, and animations in zoneless signals-first UIs.

4|Updated Jun 25, 2025
One-click install
npx skills add https://github.com/neogenz/pulpe --skill angular-material-cdk-animations
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-material-cdk-animations
Source: https://github.com/neogenz/pulpe/tree/main/.agents/skills/angular-material-cdk-animations
Command: npx skills add https://github.com/neogenz/pulpe --skill angular-material-cdk-animations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides proven usage patterns for Angular Material, CDK, and @angular/animations that support zoneless UIs and a signals-first development style. It helps teams implement accessible, maintainable, and scalable UI components with consistent design tokens and interactions.

Core Features & Use Cases

  • Pattern-driven UI: guidance on composing Material components with CDK primitives and zoneless state management.
  • Overlays, Drag-Drop, Focus: best practices for creating overlays, drag-and-drop interactions, virtual scrolling, and reliable focus management.
  • Motion & Accessibility: guidance on motion sequencing, reduced-motion compatibility, and M3 token-based styling.
  • Use Case: when refactoring a complex component to use a Material-based dialog with proper focus trapping and keyboard navigation.

Quick Start

Use the angular-material-cdk-animations skill to scaffold a minimal Angular module that integrates Material components with a CDK-driven overlay, ensuring accessible focus order and reduced-motion support.

Frequently Asked Questions about angular-material-cdk-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement Angular CDK overlays in a zoneless, signals-first application?▼

Angular Material and CDK support zoneless, signals-first UI designs by providing pattern-driven guidance for composing components. They integrate with signals-based state management to help build accessible, maintainable interfaces without relying on zone change detection.

What's the best way to manage focus trapping in an Angular Material dialog?▼

To add reduced-motion support to Angular animations, apply the provided motion choreography patterns that respect user preferences. This involves sequencing animations while checking for reduced-motion compatibility to ensure accessible UI interactions.

Does Angular CDK drag-and-drop work with Material 3 design tokens?▼

Yes, Angular CDK drag-and-drop works with Material 3 design tokens by applying M3 token-based styling to the dragged elements. This approach maintains visual consistency while handling zoneless state updates during drag interactions.

How do I scaffold an Angular module with CDK-driven overlays and accessible focus order?▼

To scaffold an Angular module with CDK-driven overlays, follow the quick start pattern to integrate Material components with CDK overlays. This ensures accessible focus ordering, proper cleanup, and reduced-motion support from the start.

Why do my Angular CDK overlays cause memory leaks in a zoneless UI?▼

Angular CDK overlays cause memory leaks in zoneless UIs when proper cleanup is skipped. Following established overlay patterns ensures components are correctly disposed when closed, preventing leaks in signals-first architectures.