angular-material_skill

Overview

This skill helps you implement Angular Material v3 components, theming, and CDK utilities following practical patterns. It focuses on importing only needed modules, consistent form and accessibility patterns, and theme configuration for light and dark modes. Use it to build buttons, forms, dialogs, tables, snackbars, cards, drag-and-drop lists, and virtual scrolling with recommended defaults.

How this skill works

It specifies standalone Material imports and component usage patterns, including form-field appearance, validators, and accessible icon buttons. It provides examples for dialogs, tables with pagination and sorting, snackbars, and CDK utilities like drag-and-drop and virtual scrolling. The theming section shows how to define palettes, create light/dark themes, and apply component-level styling and elevation.

When to use it

• Adding Angular Material components to a new or existing Angular app
• Implementing consistent form fields, validation, and accessibility patterns
• Creating dialogs, confirm flows, or snackbars for user feedback
• Building tables with sorting, pagination and client-side data sources
• Applying global theming (light/dark) and custom component elevation
• Using CDK features like drag-and-drop or virtual scrolling for large lists

Best practices

• Import only the Material modules you need to keep bundle size small
• Use mat-form-field appearance="outline" and provide mat-label and mat-error for accessibility
• Add aria-label to icon buttons and meaningful labels to actions
• Use MatTableDataSource with MatPaginator and MatSort for client-side tables
• Define palettes and themes in styles.scss and include component themes centrally
• Apply mat.elevation utility in component styles rather than inline styles

Example use cases

• Create a responsive form with outlined fields, icons, hints, and mat-error messages
• Open a ConfirmDialog using MatDialog and handle afterClosed() to confirm destructive actions
• Build a data table with mat-sort-header, mat-paginator, and MatTableDataSource wiring
• Show success/error notifications with MatSnackBar and custom panel classes
• Implement a drag-and-drop reorderable list using CdkDragDrop and moveItemInArray
• Render thousands of rows efficiently with cdk-virtual-scroll-viewport and itemSize