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