angular-material-cdk-animations
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.
More from 7spade/black-tortoise
material-design-3
Material Design 3 (Material You) design system knowledge for modern web and Angular applications. Use when implementing Material Design 3 theming, components, typography, color systems, dynamic color, accessibility patterns, or migrating from Material Design 2. Covers design tokens, theming APIs, and Material You principles.
68architecture-ddd
Domain-Driven Design patterns, layer boundaries (Presentation → Application → Domain ← Infrastructure), tactical patterns (entities, value objects, aggregates, repositories), and event-driven flow guidance. Use when designing new features, refactoring across layers, or enforcing DDD architectural boundaries.
13webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
12cohesion-coupling-review
Review a proposed change for high cohesion/low coupling; recommends the smallest boundary-safe refactor (ownership, minimal public surface, no reach-in imports). Use when reviewing code for coupling issues, cross-boundary imports, or excessive dependencies.
10angular-fire
Best practices and code patterns for @angular/fire version 20+, integrating Firestore and Auth with Signals and DDD architecture. Use when implementing Firebase integration, Firestore repositories, or AngularFire Auth in the infrastructure layer.
10shell-ui
Shell module patterns for src/app/shell, covering global UI state, layout composition, navigation, theming with Material Design 3 tokens, and zone-less signal-first presentation boundaries; use when changing app chrome or global UI concerns.
9