All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Frontend Development/angular-material

angular-material

Original：🇺🇸 English

Translated

1 scriptsChecked / no sensitive code detected

Angular Material UI components, theming, and accessible interface design

1installs

Sourcepluginagentmarketplace/custom-plugin-angular

Added on2026-02-04

NPX Install

npx skill4agent add pluginagentmarketplace/custom-plugin-angular angular-material

Tags

Translated version includes tags in frontmatter

angular-material ui-components theming accessibility cdk-development

SKILL.md Content

View Translation Comparison →

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

Download

Download TranslatedIncludes original Skill.md

(5.9 KB)Download Original(5.0 KB)

Related Skills

polish

Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues that separate good from great.

arrange

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy to create intentional compositions.

gsap-frameworks

Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is specified. For React use gsap-react.

modern-javascript-patterns

Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.