Angular Best Practices Material

alfredoperez/angular-best-practices/skills/angular-best-practices-material

by alfredopereza499a4786182097a500dd2fb6ddc2489caee3854MIT37 starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 6 months ago

Angular Material and CDK best practices. Covers selective imports, M3 theming, CDK utilities, and component test harnesses. Activates when working with @angular/material and @angular/cdk. Do not use for PrimeNG, Spartan UI, or other component libraries. Install alongside angular-best-practices for full coverage.

ArchivedInstructions onlySoftware Development
AI-generated overview

Angular Material and CDK best-practice rules for imports, M3 theming, CDK utilities and component test harnesses.

What it does
Provides guidance rules for using Angular Material and the Angular CDK in projects. It covers selective standalone imports for tree-shaking, M3 theming with CSS custom properties, preferring CDK utilities for overlays, drag-and-drop, virtual scrolling and accessibility, and using component test harnesses. It is an instructions-only add-on meant to be installed alongside a core Angular best-practices skill.
When to use it
Use it when importing or configuring @angular/material components, setting up M3 theming with design tokens, applying CDK utilities, or writing tests for Material components. It is not intended for PrimeNG, Spartan UI or other component libraries.
Requirements
No scripts or packages are shipped; it is instructions only. It assumes an Angular project using @angular/material and @angular/cdk, and is designed to be installed alongside the core angular-best-practices skill.

Angular Material Best Practices

Angular Material and CDK rules for component usage, theming, and testing. Use with the core angular-best-practices skill for comprehensive Angular coverage.

Links

When to Apply

  • Importing and configuring Material components
  • Setting up M3 theming with design tokens
  • Using CDK utilities for overlays, drag-and-drop, or virtual scrolling
  • Writing tests for Material components

Rules

RuleImpactDescription
Import Material Modules SelectivelyMEDIUMTree-shake unused components with standalone imports
Use Angular Material Theming SystemMEDIUMM3 theme API with CSS custom properties
Use CDK Utilities Over Custom ImplementationsMEDIUMBattle-tested overlays, virtual scroll, and a11y primitives
Use Test Harnesses for Material ComponentsHIGHStable tests that survive internal DOM changes

Install

Install from skills.sh/alfredoperez/angular-best-practices:

Source and attribution

Source:alfredoperez/angular-best-practicesinskills/angular-best-practices-materialat commita499a47

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from alfredoperez/angular-best-practices

Angular Best Practices Signalstore

alfredoperez

NgRx SignalStore best practices for Angular. Covers shared state, computed state, entity management, and RxJS integration with rxMethod. Activates when working with @ngrx/signals and @ngrx/signals/entities. Do not use for NgRx Store or class-based state services. Install alongside angular-best-practices for full coverage.

Archived
Awaiting classification37updated 6 months ago

Angular Best Practices Primeng

alfredoperez

PrimeNG best practices for Angular: tree-shakeable imports, lazy-loaded tables, and Aura/Lara theming with design tokens.

Archived
Software Development37updated 6 months ago

Angular Best Practices Ngrx

alfredoperez

NgRx state management best practices for Angular, covering reducers, effects, selectors and entity adapters.

Archived
Software Development37updated 6 months ago

Angular Best Practices

alfredoperez

Modern Angular best practices for building performant, maintainable Angular 17+ applications. Covers Signals, RxJS, components, templates, styles, performance, SSR, testing, forms, routing, accessibility, and architecture — with code examples and impact ratings for every rule. Use this skill whenever the user is working on Angular code of any kind: components, services, templates, stylesheets, routes, tests, or configuration. This applies to editing .component.ts, .service.ts, .html templates, .scss/.css styles, .spec.ts tests, .routes.ts files, store files, and any general .ts file in an Angular project. Look for angular.json, nx.json, or @angular/core imports as project indicators. Do not use for AngularJS (1.x), React, Vue, or non-Angular TypeScript projects.

Archived
Awaiting classification37updated 6 months ago

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Featured

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

Featured

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Featured

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago