Angular Material

---
name: angular-material
description: Use when building UI with Angular Material or the Angular CDK — any mat-* component (button, form-field, input, select, autocomplete, table, paginator, sort, dialog, bottom-sheet, snack-bar, menu, tabs, stepper, expansion, sidenav, toolbar, list, card, chips, datepicker, timepicker, slider, checkbox, radio, slide-toggle, tooltip, badge, progress-bar/spinner, icon, tree, etc.), theming/Material 3 and color/typography tokens, test harnesses and accessibility, plus the Angular CDK (overlay, drag-drop, a11y, portal, scrolling, layout, menu, listbox, dialog, table, tree, clipboard, text-field). Triggers on "Angular Material", "mat-", "MatDialog", "CDK", "Material theming".
---

# Angular Material

A skill that teaches correct use of **Angular Material** and the **Angular CDK**, following the
official documentation (`angular/components`), with a focus on correct usage, examples, and
accessibility. Content is generated and synced per version tag — see the attribution header in
each file.

## How to use
1. Open `references/_index.md` — the full map, grouped into **Material**, **CDK**, and **Guides**.
2. Open the `references/<name>.md` for the relevant component or guide (CDK uses the `cdk-` prefix).
3. Follow the prose + examples; respect the accessibility sections.

## Coverage
All Material components, all CDK modules, and the global guides (theming, getting-started,
schematics, harnesses, etc.) for the generated tag. The living list is in `references/_index.md`.

## Updating
Generated by `tools/`. To sync with a new upstream release:
`npm run check-release` (warns) → `npm run discover -- --to <tag>` (re-discovers sources) →
`npm run sync -- <tag>` (regenerates what changed) → `node tools/gen-index.mjs`.