Angular Toolkit MCP

🚀 Cursor Flows

本目录包含用于 Angular 组件重构和设计系统迁移任务的 AI 辅助工作流模板（流程）。这些流程旨在与 Cursor IDE 的规则系统协同工作，为复杂的重构操作提供结构化的分步指导。

🚀 快速开始

在使用任何流程之前，请确保你具备以下条件：

• 已连接 MCP（模型上下文协议）服务器的 Cursor IDE
• 用于重构工作的 Git 分支
• 工作区中可访问的 组件文件
• 具备正确 TypeScript 配置的 Angular 项目

使用流程的步骤如下：

1. 将所需流程的 .mdc 文件复制到你的 .cursor/rules/ 目录中。
2. 这些规则将自动在 Cursor 中可用。
3. 按照流程文档进行分步操作。

✨ 主要特性

什么是流程？

流程是规则文件（.mdc）的集合，用于引导 AI 完成多步骤的过程。每个流程包含：

• 规则文件（.mdc）：为 AI 提供的分步说明。
• 文档：辅助材料和最佳实践。
• 模板：可重复使用的模式和示例。

可用流程

1. 组件重构流程

• 位置：component-refactoring/
• 目的：根据现代最佳实践改进单个 Angular 组件。
• 文件：
  • 01-review-component.mdc - 分析组件并制定改进计划。
  • 02-refactor-component.mdc - 执行重构清单。
  • 03-validate-component.mdc - 通过契约比较验证改进效果。
  • angular-20.md - Angular 最佳实践参考。
• 用例：当你需要提升单个组件的代码质量、性能或可维护性时使用。

2. 设计系统重构流程

• 位置：ds-refactoring-flow/
• 目的：将组件从过时的设计系统模式迁移到现代替代方案。
• 注意：当前目录中此流程似乎为空，但 .cursor/rules/ 中存在以下规则文件：
  • 查找违规情况
  • 规划重构
  • 修复违规
  • 验证更改
  • 准备报告

流程过程概述

大多数流程遵循类似的模式：

1. 分析 - 审查当前状态并识别问题。
2. 规划 - 创建可操作的改进清单。
3. 执行 - 系统地实施更改。
4. 验证 - 验证改进效果和质量关卡。
5. 报告 - 记录更改和结果。

质量关卡

流程包含人工审查检查点，以确保：

• ✅ 分析准确性
• ✅ 重构计划批准
• ✅ 代码质量验证
• ✅ 最终验收

📚 详细文档

有关每个流程的详细信息，请参阅：

• 组件重构流程
• 架构与设计
• 契约文档