Agent skill
angular-material
Angular Material UI components, theming, and accessible interface design
Install this agent skill to your Project
npx add-skill https://github.com/pluginagentmarketplace/custom-plugin-angular/tree/main/skills/angular-material
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
pluginagentmarketplace/custom-plugin-angular
angular-core-implementation
Generate Angular components, services, modules, and directives. Implement dependency injection, lifecycle hooks, data binding, and build production-ready Angular architectures.
pluginagentmarketplace/custom-plugin-angular
testing-deployment-implementation
Write unit tests for components and services, implement E2E tests with Cypress, set up test mocks, optimize production builds, configure CI/CD pipelines, and deploy to production platforms.
pluginagentmarketplace/custom-plugin-angular
state-implementation
Implement NgRx store with actions and reducers, build selectors, create effects for async operations, configure entity adapters, and integrate HTTP APIs with state management.
pluginagentmarketplace/custom-plugin-angular
routing-performance-implementation
Configure routing with lazy loading, implement route guards, set up preloading strategies, optimize change detection, analyze bundles, and implement performance optimizations.
pluginagentmarketplace/custom-plugin-angular
modern-angular
pluginagentmarketplace/custom-plugin-angular
http-client
Angular HttpClient for API communication, interceptors, and error handling
Didn't find tool you were looking for?