angular-material-ai-rules

一个Angular开发者正在使用Cursor编辑器开发一个使用Angular Material 20的新项目，需要配置AI规则以确保生成的代码符合Material Design规范。

请为我的Angular项目配置Cursor规则，使其在生成Angular Material组件时遵循最新的Material 20规范，包括使用正确的导入路径、组件选择器、主题系统以及表单控件的最佳实践。

以下是配置Cursor以遵循Angular Material 20规范的步骤： 1. 在项目根目录创建 `.cursor/rules/angular-material.mdc` 文件。 2. 添加以下规则内容： ```markdown --- description: Angular Material 20 Coding Guidelines globs: *.ts, *.html, *.scss --- # Angular Material 20 编码规则 ## 导入路径 - 使用 `@angular/material` 和 `@angular/cdk` 的二级入口点，例如： - `import { MatButtonModule } from '@angular/material/button';` - 避免使用已弃用的 `@angular/material/core` 等。 ## 组件选择器 - 使用 `mat-` 前缀，例如 `<mat-card>`, `<mat-toolbar>`。 - 避免使用已弃用的选择器。 ## 主题系统 - 使用新的基于CSS变量的主题系统： - 在 `styles.scss` 中引入 `@use '@angular/material' as mat;` - 使用 `mat.define-theme()` 定义主题。 ## 表单控件 - 使用 `MatFormFieldModule` 和 `MatInputModule` 等模块。 - 表单字段应包含 `<mat-label>` 和适当的错误提示。 ## 示例 ```typescript import { Component } from '@angular/core'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; @Component({ selector: 'app-example', standalone: true, imports: [MatCardModule, MatButtonModule], template: ` <ma