angular-material
ALWAYS use when working with Angular Material components, CDK, or Material Design in Angular applications.
Best use case
angular-material is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
ALWAYS use when working with Angular Material components, CDK, or Material Design in Angular applications.
Teams using angular-material should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/angular-material/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How angular-material Compares
| Feature / Agent | angular-material | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
ALWAYS use when working with Angular Material components, CDK, or Material Design in Angular applications.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# @angular/material & @angular/cdk
**Version:** 21.0.3 (Feb 2026)
**Tags:** Material Design, CDK, Components, UI Library
**References:** [Docs](https://material.angular.dev) — components, guides • [CDK Docs](https://material.angular.dev/cdk) • [GitHub Issues](https://github.com/angular/components/issues) • [Changelog](https://github.com/angular/components/blob/main/CHANGELOG.md)
## API Changes
This section documents recent version-specific API changes.
- NEW: Angular Aria — New low-level component library for accessible, headless components that can be styled custom [source](https://blog.angular.dev/announcing-angular-v21)
- NEW: CDK overlays now use browser's built-in popovers for improved accessibility [source](https://blog.angular.dev/announcing-angular-v21)
- NEW: Material Design system tokens — Use utility classes to apply Material tokens directly in templates [source](https://blog.angular.dev/announcing-angular-v21)
- NEW: CDK Drag & Drop improvements — Allow copying items between lists [source](https://blog.angular.dev/announcing-angular-v21)
- NEW: Angular v21 — Full support for new Angular features including zoneless change detection
## Best Practices
- Use standalone components — Import Material components directly without NgModule
```ts
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
@Component({
standalone: true,
imports: [MatButtonModule, MatCardModule],
// ...
})
export class ExampleComponent {}
```
- Use CDK for custom components — Use CDK (Component Dev Kit) for behavior primitives like drag-drop, overlays, menus without Material styling
- Use CDK Virtual Scroll for large lists — Improve performance with `cdkVirtualScrollViewport` instead of rendering all items
```html
<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
<div *cdkVirtualFor="let item of items">{{item.name}}</div>
</cdk-virtual-scroll-viewport>
```
- Use `trackBy` with `ngFor` — Prevent unnecessary DOM re-renders
- Customize themes with SCSS — Use Material's theming system for custom colors and typography
- Use `ChangeDetectionStrategy.OnPush` — Improve performance with default change detection strategy
- Follow accessibility guidelines — Use ARIA labels, keyboard navigation, and focus management provided by CDK componentsRelated Skills
angular-ui-patterns
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
angular-state-management
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
angular-migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or ...
angular-forms
Build signal-based forms in Angular v21+ using the new Signal Forms API. Use for form creation with automatic two-way binding, schema-based validation, field state management, and dynamic forms. Triggers on form implementation, adding validation, creating multi-step forms, or building forms with conditional fields. Signal Forms are experimental but recommended for new Angular projects.
angular-best-practices
Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
angular-app-setup
Creates an Angular 20 app directly in the current folder with strict defaults, deterministic non-interactive flags, and preflight safety checks. Use when the user asks to create, scaffold, or initialize Angular 20 in place and wants build/test verification.
agent-angular-architect
Expert Angular architect mastering Angular 15+ with enterprise patterns. Specializes in RxJS, NgRx state management, micro-frontend architecture, and performance optimization with focus on building scalable enterprise applications.
corrosion-materials-selector
Materials selection skill for corrosion resistance based on process conditions and industry standards
abaqus-material
Define material properties for FEA models. Use when user mentions steel, aluminum, Young's modulus, elastic, plastic, density, or asks about material properties.
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
aqwa-analysis
Integrate with AQWA hydrodynamic software for RAO computation, damping analysis, and coefficient extraction. Use for AQWA file processing, RAO calculation, hydrodynamic coefficient extraction, and pre/post processing workflows.
aptos-expert
Expert on Aptos blockchain, Move language, smart contracts, NFTs, DeFi, and Aptos development. Triggers on keywords aptos, move, blockchain, smart contract, nft, defi, web3, mainnet, testnet, devnet