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 Development32K6周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K6周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K6周前更新