angular-material_skill

Overview

This skill teaches how to build consistent, accessible Angular applications using the Angular Material component library, theming system, and CDK utilities. It covers core UI components, responsive layout patterns, custom theme creation (including dark mode), and accessibility best practices. The goal is to enable production-ready Material UIs with good performance and predictable theming.

How this skill works

The skill inspects typical UI needs and maps them to Angular Material components and CDK features: form controls, navigation, layout, data tables, dialogs, overlays, drag-and-drop and virtual scrolling. It shows how to create and apply custom themes, manage palettes and typography, and integrate CSS variables for runtime theming. Practical examples demonstrate component customization, lazy-loading Material modules, and accessibility utilities to meet a11y standards.

When to use it

• When building a new Angular app that needs a consistent, production-ready UI component set
• When you need to implement theming or dark mode across an application
• When accessibility (a11y) and keyboard navigation are required
• When advanced UI features are needed: overlays, drag-and-drop, virtual scroll
• When optimizing performance with lazy-loaded Material modules and CDK utilities

Best practices

• Import only the Material modules you use and lazy-load feature modules to reduce bundle size
• Define a single source theme with SCSS maps or CSS variables and derive component palettes from it
• Prefer CDK primitives for custom behavior to keep accessibility intact
• Use responsive layout patterns (flexbox, grid) and test at multiple breakpoints
• Run automated accessibility checks and include keyboard focus styles

Example use cases

• Create a dashboard with toolbar, sidenav, data table, pagination, and responsive cards
• Implement a branded theme and a toggleable dark mode that persists user preference
• Build an accessible form with inputs, selects, checkboxes, validation messages and helper text
• Use CDK overlay and dialogs for confirmation flows and context menus
• Add drag-and-drop ordering and virtual scrolling for large lists to improve performance