# Angular Material

> Angular Material UI components, theming, and accessible interface design Use when this capability is needed.

- Skill: `tomevault-io/angular-material` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/angular-material`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/angular-material/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/angular-material

---


# 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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/plastikaweb) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->