---
name: repeated-feedback-to-skill
description: "高频反馈转化为 AI 技能的闭环演进流程。规范如何从 CR 意见、线上事故和 AI 纠偏中提炼与更新规则库。"
globs: ["base/**/*.md", "frontend/**/*.md", "backend/**/*.md", "devops/**/*.md", "meta/**/*.md", "README.md"]
alwaysApply: false
updated: 2026-05-22
---

# 反馈转化为 AI 技能的闭环演进流程

> [!IMPORTANT]
> 优秀的工程团队不应当在同一个坑里跌倒两次。AI 技能库的本质是一个不断吸取开发摩擦、持续自主演进的代码化资产系统。任何工程师都必须掌握本规范声明的反馈转化闭环流程。

## 1. 适用场景

当您在以下三类场景中发现重复性痛点时，必须无条件启动“反馈转化规则程序”：
1. **高频 CR 痛点（“三遍法则”）**：同一个 Code Review 纠正意见，在团队不同 PR 中累计出现过 **3 次** 及以上。
2. **线上事故复盘（“一遍熔断”）**：发生过 **1 次** 及以上线上故障/事故（如配置未生效、权限泄漏），复盘原因与代码规范有关。
3. **AI 反复纠偏（“两遍纠正”）**：工程师在对话开发时，发现自己连续 **2 次** 及以上手动打字纠正 AI 助手的生成错误。

## 2. 操作规则

一键转换与反馈闭环的具体流转步骤如下：

```mermaid
graph TD
    A[发现开发摩擦: CR 3次/事故 1次/AI 纠偏 2次] --> B[提取痛点: 抽取 Bad 真实错误代码]
    B --> C[设计规避指令: 在技能库 base/ 或分类下追加禁止事项]
    C --> D[编写 Good 代码模板: 给出修复后的高品质示例]
    D --> E[提交技能 PR 评审: 团队 2 名成员走分支 CR 评审并合入]
    E --> F[一键同步: 团队运行 sync-trae-skills 同步, AI 永久掌握规范]
```

1. **提取痛点 (Extract Pain Points)**：
   - 将线上事故的错误代码或 CR 纠正前的代码段进行整理脱敏，提炼为 1:1 对比中的 `❌ 错误示例 (Bad Example)`。
2. **编写规避指令 (Write Interception Rules)**：
   - 根据痛点，在对应技能文件中追加非兜底、清晰具体的“操作规则”与“禁止事项”拦截条款。
3. **更新并发布 (Publish and Sync)**：
   - 提交技能库 Git 变更 PR，合入后，通过 CI 或全员一键运行 `sync-trae-skills`。
   - 下一次 AI 生成时，自动由于 `.trae/rules` 存在此更新规则而自动拦截规避该错。

## 3. 禁止事项

- 严禁对发现的结构性代码缺陷仅进行 PR 单点修复，而拒绝将其同步沉淀为 AI 规则。

## 4. 验证方式

- 运行受影响项目的测试用例，确认新增规则中的 Good 示例可通过验证。
- 在本地使用 AI 调试，故意引导其编写可能触发该缺陷的代码，观察 AI 助手是否能引用或遵循新增规则并给出正确方案。

## 5. 经典转换范例

### ❌ 转化前的 CR 痛点反馈记录

```text
CR 历史评论（3次重复出现）：
“李四，这个前端接口请求没有配合使用 AbortController。当页面频繁切换或快速双击时，会发生因接口异步返回顺序不一致导致的前端渲染脏数据覆盖（Race Condition 竞态问题），请立即修复！”
```

###  沉淀为前端专属技能库规则 (`frontend/api-fetching.md`)

````markdown
---
name: frontend-race-conditions
description: "前端异步请求竞态防御规则。强制引入 AbortController 拦截多页面频繁切换导致的数据渲染错乱问题。"
globs: ["src/services/**/*.ts", "src/hooks/useFetch*.ts"]
alwaysApply: false
updated: 2026-05-22
---

# 前端异步请求竞态防御规则

## 1. 适用场景

当页面切换、搜索输入、选项卡切换或组件卸载会触发异步请求取消与重发时生效。

## 2. 操作规则
- 凡是包含页面频繁切换、选项卡双击、搜索栏输入即搜（Debounce/Throttle）的异步请求 Hook 或服务，必须强制引入原生 `AbortController` 并在下一次请求发起或组件卸载时调用 `controller.abort()` 强行熔断上一次进行中的 HTTP 连接。

## 3. 禁止事项

- 禁止忽略组件卸载后的请求返回结果并继续调用 `setState`。
- 禁止多个同类请求并发写入同一块 UI 状态而没有取消、序列号或最后请求胜出机制。

## 4. 验证方式

- 运行相关 Hook 或组件测试，模拟快速切换参数并断言旧请求不会覆盖新数据。
- 在浏览器 Network 面板中确认组件卸载或下一次请求发起时旧请求被取消。

## 5. 代码对比示例

### 错误示例

```typescript
useEffect(() => {
  fetch(`/api/search?q=${query}`).then(async response => {
    setItems(await response.json());
  });
}, [query]);
```

### 正确方向

```typescript
useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/search?q=${query}`, { signal: controller.signal })
    .then(async response => {
      setItems(await response.json());
    })
    .catch(error => {
      if (error.name !== "AbortError") throw error;
    });

  return () => controller.abort();
}, [query]);
```
````