home / skills / pluginagentmarketplace / custom-plugin-angular / angular-material

angular-material skill

safe

This skill helps you build accessible Angular Material interfaces with theming and responsive layouts, delivering consistent UI with theme customization.

npx playbooks add skill pluginagentmarketplace/custom-plugin-angular --skill angular-material

Review the files below or copy the command above to add this skill to your agents.

Files (6)

SKILL.md

1.2 KB

---
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

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

FAQ

Do I need to use all Material components to benefit from the library?

No. You can adopt Material incrementally; import only the modules you need and integrate them into your existing component structure.

How do I apply a custom color palette across components?

Create a theme using the Angular Material theming API or CSS variables, define palettes and typography, and apply the generated theme classes globally or per component.