SuperAPI AI 工具集

angular-best-practices-material

前端与建站

查看项目

更新于 10-15 14:19

技能介绍

用途

angular-best-practices-material 是一套针对 Angular Material 与 CDK 的最佳实践规则,作为核心技能 angular-best-practices 的补充插件使用,用于在涉及 Angular Material 组件、主题与测试的工作中提供规范指导。官方建议与核心技能配合使用,以获得更全面的 Angular 覆盖。

主要能力(规则)

该技能包含以下规则,每条规则标注了影响等级:

  • 选择性导入 Material 模块(影响:MEDIUM):通过独立导入(standalone imports)对未使用的组件进行 tree-shaking,避免引入冗余代码。
  • 使用 Angular Material 主题系统(影响:MEDIUM):采用 M3 主题 API 与 CSS 自定义属性(CSS custom properties)进行主题配置。
  • 优先使用 CDK 工具而非自定义实现(影响:MEDIUM):使用经过验证的覆盖层(overlays)、虚拟滚动(virtual scroll)和无障碍(a11y)原语。
  • 为 Material 组件使用测试工具(影响:HIGH):使用 Test Harnesses 编写稳定测试,使其在内部 DOM 变化时仍能保持有效。

使用方式

该技能在以下场景中激活:

  • 导入和配置 Material 组件时;
  • 使用设计令牌(design tokens)设置 M3 主题时;
  • 使用 CDK 工具处理覆盖层、拖放或虚拟滚动时;
  • 为 Material 组件编写测试时。

安装方式:从 skills.sh/alfredoperez/angular-best-practices 安装。核心技能为 angular-best-practices,本插件为 angular-best-practices-material。

适用场景

适用于使用 Angular Material 与 CDK 进行组件开发、主题定制和测试的前端项目,尤其适合需要控制打包体积、统一主题体系、复用成熟 CDK 能力以及提升测试稳定性的团队。

限制

资料未提供该技能的具体版本、依赖要求、兼容的 Angular 版本范围、安装命令细节、收费或授权信息,这些内容暂未提供。