Angular Best Practices Material

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

作者 alfredopereza499a4786182097a500dd2fb6ddc2489caee3854MIT37 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫6 個月前更新

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.

已封存僅含說明Software Development
AI 產生的概覽

Angular Material 與 CDK 最佳實務規則，涵蓋選擇性匯入、M3 主題、CDK 工具與元件測試 harness。

功能
提供在專案中使用 Angular Material 與 Angular CDK 的指引規則。內容涵蓋：以獨立匯入選擇性載入元件以利 tree-shaking、使用 CSS 自訂屬性設定 M3 主題、優先採用 CDK 提供的覆蓋層、拖放、虛擬捲動與無障礙工具，以及使用元件測試 harness。這是純指示型的附加技能，需與核心 Angular 最佳實務技能一併安裝。
適用情境
適用於匯入或設定 @angular/material 元件、以設計權杖建立 M3 主題、套用 CDK 工具，或為 Material 元件撰寫測試的情境。不適用於 PrimeNG、Spartan UI 或其他元件庫。
執行需求
不隨附指令碼或套件，僅為指示內容。假定專案為使用 @angular/material 與 @angular/cdk 的 Angular 專案，並設計為與核心 angular-best-practices 技能一同安裝。

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:

來源與署名

來源：alfredoperez/angular-best-practices位於skills/angular-best-practices-material提交a499a47

授權條款： MIT

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 alfredoperez/angular-best-practices 的技能

Angular Best Practices Signalstore

alfredoperez

針對 Angular 的 NgRx SignalStore 最佳實務指南，涵蓋共享狀態、計算狀態、實體管理與 RxJS 整合。

已封存
Software Development376 個月前更新

Angular Best Practices Primeng

alfredoperez

Angular 的 PrimeNG 最佳實務：可搖樹最佳化的匯入、延遲載入表格，以及使用設計權杖的 Aura/Lara 主題。

已封存
Software Development376 個月前更新

Angular Best Practices Ngrx

alfredoperez

Angular 的 NgRx 狀態管理最佳實務，涵蓋 reducer、effect、selector 與實體轉接器。

已封存
Software Development376 個月前更新

Angular Best Practices

alfredoperez

提供 Angular 17+ 現代最佳實務指引，涵蓋訊號、範本、RxJS、效能、SSR、測試與無障礙。

已封存
Software Development376 個月前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新