---
name: angular-material
description: Angular Material UI components, theming, and accessible interface design
sasmp_version: "1.3.0"
bonded_agent: 02-angular-core
bond_type: PRIMARY_BOND
---

# Angular Material Skill

## Overview
Build beautiful, accessible Angular applications using Angular Material component library with custom theming and responsive layouts.

## Topics Covered

### Component Library
- Form controls (inputs, selects, checkboxes)
- Navigation (toolbar, sidenav, menus)
- Layout (cards, lists, grids)
- Data tables and pagination
- Dialogs and snackbars

### Theming
- Custom theme creation
- Color palettes and typography
- Dark mode implementation
- Component customization
- CSS variables integration

### CDK (Component Dev Kit)
- Overlay system
- Drag and drop
- Virtual scrolling
- Accessibility utilities
- Custom component creation

### Best Practices
- Responsive design patterns
- Accessibility compliance (a11y)
- Performance optimization
- Lazy loading Material modules

## Prerequisites
- Angular Core fundamentals
- CSS/SCSS basics
- Component architecture

## Learning Outcomes
- Build consistent Material UI interfaces
- Create custom themes and branding
- Implement accessible components
- Use CDK for advanced features