@bovinphang/frontend-craft 2.7.0 → 2.9.0

package/localized/zh-CN/skills/fec-refactoring-functions/references/function-refactorings.md

@@ -0,0 +1,567 @@
+# 函数类重构
+
+这些卡片以用户提供的标准重构目录为知识基线，转换为面向前端 Agent 的操作指南。保留标准 ID/中英文名称，框架适配和示例为项目原创内容。
+
+## RF-EXTRACT-FUNCTION — 提炼函数（Extract Function）
+
+### 意图
+把具有独立意图的代码片段提炼成命名清晰的函数，让调用端以“做什么”而不是“怎么做”表达逻辑。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-DUPLICATED-CODE`
+- `SMELL-LONG-FUNCTION`
+- `SMELL-MUTABLE-DATA`
+- `SMELL-DIVERGENT-CHANGE`
+- `SMELL-FEATURE-ENVY`
+- `SMELL-MESSAGE-CHAINS`
+- `SMELL-DATA-CLASS`
+- `SMELL-COMMENTS`
+
+### 常见组合
+- 搬移函数（Move Function）：仅当下一手法自身前置条件也成立时组合。
+- 以查询取代临时变量（Replace Temp with Query）：仅当下一手法自身前置条件也成立时组合。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Extract Function”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-INLINE-FUNCTION — 内联函数（Inline Function）
+
+### 意图
+移除已经没有解释价值的函数边界，减少无意义间接层，并为后续重新组织代码腾出空间。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-SHOTGUN-SURGERY`
+- `SMELL-LAZY-ELEMENT`
+- `SMELL-SPECULATIVE-GENERALITY`
+- `SMELL-MIDDLE-MAN`
+
+### 常见组合
+- `RF-EXTRACT-FUNCTION`：仅当下一手法自身前置条件也成立时组合。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Inline Function”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-EXTRACT-VARIABLE — 提炼变量（Extract Variable）
+
+### 意图
+为复杂表达式中的重要概念命名，降低阅读者的即时推理负担。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- 不要求先存在某一种固定坏味道；以具体结构证据为准。
+
+### 常见组合
+- `RF-INLINE-VARIABLE`：仅当下一手法自身前置条件也成立时组合。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Extract Variable”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-INLINE-VARIABLE — 内联变量（Inline Variable）
+
+### 意图
+移除不提供解释价值的临时变量，直接使用更清晰且语义稳定的表达式。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- 不要求先存在某一种固定坏味道；以具体结构证据为准。
+
+### 常见组合
+- `RF-EXTRACT-VARIABLE`：仅当下一手法自身前置条件也成立时组合。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Inline Variable”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-CHANGE-FUNCTION-DECLARATION — 改变函数声明（Change Function Declaration）
+
+### 意图
+调整函数名称或参数契约，使调用方式准确表达函数责任。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-MYSTERIOUS-NAME`
+- `SMELL-SPECULATIVE-GENERALITY`
+- `SMELL-ALTERNATIVE-CLASSES-DIFFERENT-INTERFACES`
+- `SMELL-COMMENTS`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Change Function Declaration”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-ENCAPSULATE-VARIABLE — 封装变量（Encapsulate Variable）
+
+### 意图
+让变量的读取和修改经过明确边界，从而控制访问并为后续改变表示或所有权建立安全缝隙。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-GLOBAL-DATA`
+- `SMELL-MUTABLE-DATA`
+
+### 常见组合
+- `RF-RENAME-VARIABLE`：仅当下一手法自身前置条件也成立时组合。
+- 搬移函数（Move Function）：仅当下一手法自身前置条件也成立时组合。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Encapsulate Variable”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-RENAME-VARIABLE — 变量改名（Rename Variable）
+
+### 意图
+使用准确的领域名称表达变量的角色和含义。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-MYSTERIOUS-NAME`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Rename Variable”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-INTRODUCE-PARAMETER-OBJECT — 引入参数对象（Introduce Parameter Object）
+
+### 意图
+把总是共同出现并形成一个概念的参数组织成命名对象契约。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-LONG-FUNCTION`
+- `SMELL-LONG-PARAMETER-LIST`
+- `SMELL-DATA-CLUMPS`
+- `SMELL-PRIMITIVE-OBSESSION`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Introduce Parameter Object”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-COMBINE-FUNCTIONS-INTO-CLASS — 函数组合成类（Combine Functions into Class）
+
+### 意图
+把围绕同一数据上下文工作的函数放进一个内聚所有者；前端可采用 class、module、service、hook/composable 或 closure。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-LONG-PARAMETER-LIST`
+- `SMELL-MUTABLE-DATA`
+- `SMELL-SHOTGUN-SURGERY`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 多个报价计算函数都接收同一 quote，可收敛为 pricing module 或 `useQuotePricing()`；并不因为手法名含“Class”就强制 class。
+
+## RF-COMBINE-FUNCTIONS-INTO-TRANSFORM — 函数组合成变换（Combine Functions into Transform）
+
+### 意图
+把针对同一输入的相关派生计算组合成一个纯变换，统一产生增强后的结果。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-MUTABLE-DATA`
+- `SMELL-SHOTGUN-SURGERY`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 把“Combine Functions into Transform”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-SPLIT-PHASE — 拆分阶段（Split Phase）
+
+### 意图
+把顺序流程中的不同关注点拆成具有明确输入/输出的阶段。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-DIVERGENT-CHANGE`
+- `SMELL-SHOTGUN-SURGERY`
+- `SMELL-DATA-CLASS`
+
+### 常见组合
+- `RF-EXTRACT-FUNCTION`：仅当下一手法自身前置条件也成立时组合。
+- 搬移函数（Move Function）：仅当下一手法自身前置条件也成立时组合。
+
+### JavaScript 注意事项
+- 保留求值顺序、闭包、`this`、默认参数、rest/spread 与副作用时序。
+
+### TypeScript 注意事项
+- 参数对象要有明确类型；保持类型推导和公共签名，不用断言掩盖问题。
+
+### React 注意事项
+- 提炼函数不能违反 Hook 规则或制造 stale closure；保持事件/effect 顺序。
+
+### Vue 注意事项
+- 保持 `ref`/`reactive` 解包、computed 依赖和 composable 生命周期作用域。
+
+### Frontend-Craft 前端适配
+- 可使用 helper、handler、module、hook/composable 或 service，不为了“函数组合成类”而强制 class。
+
+### 原创前端变换示例
+- 将一个同时执行 parse、normalize、validate、submit 的提交函数拆成阶段，每一阶段都有明确输入/输出，并保持原有错误顺序。

package/localized/zh-CN/skills/fec-refactoring-inheritance/SKILL.md

@@ -0,0 +1,25 @@
+---
+name: fec-refactoring-inheritance
+description: 保持行为的前端重构主要涉及继承关系类重构，已经选定或正在评估对应手法，需要查询该 family 的操作步骤、风险与 JavaScript/TypeScript/React/Vue 适配时。
+---
+
+# 继承关系类重构
+
+## 概览
+只有在证据和前置条件支持时才使用对应手法。一次只执行一个主要结构变换，并在完成后立即验证。
+
+## 执行流程
+1. 在[继承关系类重构详细卡片](references/inheritance-refactorings.md)确认手法和前置条件。
+2. 记录受影响行为与差异预算。
+3. 只执行该手法最小可行的一步。
+4. 在组合下一手法之前验证当前步骤。
+5. 公共契约、生命周期、状态身份或实际范围超出预期时停止并重新评估。
+
+## 快速索引
+详细 Reference 包含本 family 的 11 个标准手法，每项均包括意图、信号、不适用条件、操作步骤、行为保持检查、相关坏味道、组合关系、JS/TS/React/Vue 注意事项、前端适配和原创示例。
+
+## 常见错误
+- 只根据手法名称套用，不核对前置条件。
+- 一个 diff 同时混入多个结构目标。
+- 把经典 class 形式机械套进现代 React/Vue。
+- 相关行为没有覆盖时，仅凭“测试通过”就声称行为已得到证明。