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. 報告 - 記錄更改和結果。

質量關卡

流程包含人工審查檢查點，以確保：

• ✅ 分析準確性
• ✅ 重構計劃批准
• ✅ 代碼質量驗證
• ✅ 最終驗收

📚 詳細文檔

有關每個流程的詳細信息，請參閱：

• 組件重構流程
• 架構與設計
• 契約文檔