angular-material

How to use

Copy the installation command and review the source package before installing it in your own agent environment.
Check the source document for required tools, credentials and supported hosts.
Describe your input and desired deliverable; review the output against the source material.

npx skills add https://github.com/angular-sanctuary/angular-agent-skills --skill angular-material

Before you start

Installation does not include a model subscription, API allowance or permission to access your files.
Repository stars and installation counts describe activity, not an independent quality or security test.

Original skill document

Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.

The skill is based on Angular Material v21.x (v21.2.0-next.2), generated at 2026-01-31.

Angular Material is the official UI component library for Angular, implementing Material Design 3 (M3). It provides a comprehensive set of pre-built, accessible components along with the Component Dev Kit (CDK) for building custom components.

When to Apply

Use this skill when:

Using Angular Material components (buttons, forms, dialogs, tables, etc.)
Theming with Material Design 3 (M3) color palettes, typography, density
Working with mat-form-field, inputs, select, autocomplete, or datepicker
Implementing data tables with sorting, pagination, and filtering
Creating dialogs, bottom sheets, snackbars, or tooltips
Building navigation with sidenav, menus, tabs, or steppers
Using CDK primitives (overlay, portal, drag-drop, virtual scrolling)
Implementing accessible components with CDK a11y utilities
Creating custom form field controls that integrate with mat-form-field
Using component test harnesses for reliable testing
Scaffolding components with Angular Material schematics

Do NOT use this skill when:

Using a different UI library (PrimeNG, ngx-bootstrap, etc.)
Building completely custom UI without Material Design
Working with Angular Aria headless primitives (use the angular-aria skill instead)

Core References

Topic	Description	Reference
Theming	M3 theming system with color palettes, typography, density, and CSS variables	core-theming
Schematics	Angular CLI schematics for scaffolding components and generating themes	core-schematics
Component Harnesses	Test harnesses for reliable, maintainable component testing	core-harnesses

Components

Buttons & Indicators

Topic	Description	Reference
Buttons	Text, filled, FAB, icon buttons, and button toggles	component-buttons
Badge	Small status descriptors attached to elements	component-badge
Icon	Vector icon display with font and SVG support	component-icon
Progress	Progress bar and spinner indicators	component-progress

Form Controls

Topic	Description	Reference
Form Field	Form field wrapper with labels, hints, errors	component-form-field
Input	Native input and textarea with mat-form-field	component-input
Select	Dropdown select with single and multiple selection	component-select
Autocomplete	Text input with dropdown suggestions	component-autocomplete
Chips	Chips for selection, filtering, and tag input	component-chips
Form Controls	Checkbox, radio, slide toggle, slider	component-form-controls
Datepicker	Date and date range pickers	component-datepicker
Timepicker	Time selection with dropdown options	component-timepicker

Layout

Topic	Description	Reference
Card	Content containers for text, images, actions	component-card
Divider	Line separator for visual content separation	component-divider
Expansion	Expandable panels and accordion	component-expansion
Grid List	Two-dimensional grid layout for tiles	component-grid-list
List	Lists for items, navigation, actions, selection	component-list
Tree	Hierarchical data display with flat/nested trees	component-tree

Navigation

Topic	Description	Reference
Navigation	Sidenav, menu, toolbar, and tabs	component-navigation
Stepper	Wizard-like workflows with steps	component-stepper

Tables

Topic	Description	Reference
Table	Material Design data table with features	component-table
Sort	Sortable column headers	component-sort
Paginator	Pagination controls for paged data	component-paginator

Popups & Modals

Topic	Description	Reference
Dialog	Modal dialogs with data sharing	component-dialog
Bottom Sheet	Modal panels from the bottom	component-bottom-sheet
Snackbar	Brief notification messages	component-snackbar
Tooltip	Text labels on hover/focus	component-tooltip

CDK (Component Development Kit)

Overlays & Positioning

Topic	Description	Reference
Overlay	Floating panels with positioning strategies	cdk-overlay
Portal	Dynamic content rendering	cdk-portal
Dialog	Unstyled modal dialog foundation	cdk-dialog

Accessibility

Topic	Description	Reference
Accessibility	Focus management, keyboard navigation, live announcer	cdk-a11y

Data & Collections

Topic	Description	Reference
Table	Foundational data table with DataSource pattern	cdk-table
Tree	Foundation for hierarchical tree display	cdk-tree
Collections	SelectionModel for managing selection state	cdk-collections
Virtual Scrolling	Performant rendering of large lists	cdk-scrolling

Layout & Responsiveness

Topic	Description	Reference
Layout	BreakpointObserver and MediaMatcher	cdk-layout
Bidi	Bidirectionality (LTR/RTL) handling	cdk-bidi

Interaction

Topic	Description	Reference
Drag and Drop	Reordering lists and transferring items	cdk-drag-drop
Clipboard	Copy text to system clipboard	cdk-clipboard
Listbox	Accessible custom listbox controls	cdk-listbox
Menu	Accessible custom menus and menu bars	cdk-menu

Component Foundations

Topic	Description	Reference
Accordion	Foundation for expandable panel groups	cdk-accordion
Stepper	Foundation for wizard-like workflows	cdk-stepper

Utilities

Topic	Description	Reference
Text Field	Auto-resize textarea and autofill detection	cdk-text-field
Platform	Browser and platform detection	cdk-platform
Observers	Content mutation observation	cdk-observers
Coercion	Input type coercion utilities	cdk-coercion
Keycodes	Keyboard key code constants	cdk-keycodes

Advanced

Topic	Description	Reference
Custom Form Field Control	Creating custom mat-form-field controls	advanced-custom-form-field
Theme Customization	CSS variables and utility classes in custom components	advanced-theme-customization