# Angular Material

> Angular Material UI components, theming, and accessible interface design

- Skill: `lord1egypt/angular-material-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lord1egypt/angular-material-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lord1egypt/angular-material-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Lord1Egypt (https://skillmd.com/u/lord1egypt)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/lord1egypt/angular-material-2

---


# 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