@bovinphang/frontend-craft 2.7.0 → 2.9.0

package/localized/zh-CN/skills/fec-refactoring-move-features/references/moving-refactorings.md

@@ -0,0 +1,453 @@
+# 搬移特性类重构
+
+这些卡片以用户提供的标准重构目录为知识基线，转换为面向前端 Agent 的操作指南。保留标准 ID/中英文名称，框架适配和示例为项目原创内容。
+
+## RF-MOVE-FUNCTION — 搬移函数（Move Function）
+
+### 意图
+把函数搬到拥有其主要数据或变化责任的模块。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-DIVERGENT-CHANGE`
+- `SMELL-SHOTGUN-SURGERY`
+- `SMELL-FEATURE-ENVY`
+- `SMELL-TEMPORARY-FIELD`
+- `SMELL-MESSAGE-CHAINS`
+- `SMELL-INSIDER-TRADING`
+- `SMELL-ALTERNATIVE-CLASSES-DIFFERENT-INTERFACES`
+- `SMELL-DATA-CLASS`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 把“Move Function”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-MOVE-FIELD — 搬移字段（Move Field）
+
+### 意图
+把数据搬到真正拥有该概念、并与其共同变化的对象或模块。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-SHOTGUN-SURGERY`
+- `SMELL-INSIDER-TRADING`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 把“Move Field”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-MOVE-STATEMENTS-INTO-FUNCTION — 搬移语句到函数（Move Statements into Function）
+
+### 意图
+把所有调用者都必须伴随执行的公共语句移入被调用函数，使公共操作完整。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- 不要求先存在某一种固定坏味道；以具体结构证据为准。
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 把“Move Statements into Function”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-MOVE-STATEMENTS-TO-CALLERS — 搬移语句到调用者（Move Statements to Callers）
+
+### 意图
+把只对部分调用者成立或因上下文而变化的语句移回调用端。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- 不要求先存在某一种固定坏味道；以具体结构证据为准。
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 把“Move Statements to Callers”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-REPLACE-INLINE-CODE-WITH-FUNCTION-CALL — 以函数调用取代内联代码（Replace Inline Code with Function Call）
+
+### 意图
+用已经存在且语义等价的函数调用替代重复的内联逻辑。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- 不要求先存在某一种固定坏味道；以具体结构证据为准。
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 把“Replace Inline Code with Function Call”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-SLIDE-STATEMENTS — 移动语句（Slide Statements）
+
+### 意图
+在不跨越可观察依赖的前提下移动语句，让相关代码相邻，为后续提炼或简化创造条件。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-DUPLICATED-CODE`
+- `SMELL-MUTABLE-DATA`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 把“Slide Statements”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-SPLIT-LOOP — 拆分循环（Split Loop）
+
+### 意图
+把同时承担多个独立任务的循环拆成多个聚焦循环。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-LONG-FUNCTION`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 把“Split Loop”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-REPLACE-LOOP-WITH-PIPELINE — 以管道取代循环（Replace Loop with Pipeline）
+
+### 意图
+当循环本质是集合过滤、映射或聚合时，用意图更清晰的管道表达。
+
+### 典型信号
+- 当前结构出现与本手法目标一致的重复、耦合、命名、职责、数据所有权或控制流问题，并有具体代码证据。
+
+### 不适用条件
+- 当前结构已经清晰，或该变换会制造更强耦合、隐藏依赖、破坏公共契约且没有兼容方案时，不使用。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-LOOPS`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 把“Replace Loop with Pipeline”应用到一个局部组件/Hook/Composable/Service 范围内，先记录行为契约，只迁移一个职责片段，并立即验证输出、事件与状态变化保持不变。
+
+## RF-REMOVE-DEAD-CODE — 移除死代码（Remove Dead Code）
+
+### 意图
+移除已经证明不存在运行时或受支持工具链用途的代码；实际发现和删除由现有 cleanup lane 执行。
+
+### 典型信号
+- 代码疑似无引用，但必须进一步检查 dynamic import、route、Storybook、i18n key、Tailwind 动态 class、runtime template 和外部消费者。
+
+### 不适用条件
+- 没有完成动态引用与外部消费者证明时，不执行删除。
+
+### 前置条件
+- 已明确当前可观察行为、受影响调用者和公共契约。
+- 目标位于声明的差异预算内，并且这个单一主要变换完成后能够立即验证。
+
+### 操作步骤
+1. 确认当前行为、调用者和边界，并锁定本步骤只处理这一项主要结构意图。
+2. 创建最小的新结构/位置/接口，让旧行为可以逐步迁移而不是一次性大改。
+3. 一次迁移一个调用点或职责片段，并保持兼容边界。
+4. 运行窄范围验证；若变红，先回滚本步骤，再缩小变换。
+
+### 行为保持检查点
+- 对比输入、输出、异常、副作用、执行顺序和公共契约。
+- 前端还要核对 UI 状态、事件、焦点、网络请求、生命周期/状态迁移，以及相关对象身份语义。
+
+### 相关坏味道
+- `SMELL-SPECULATIVE-GENERALITY`
+
+### 常见组合
+- 不建立固定流水线；下一步必须重新依据证据选择。
+
+### JavaScript 注意事项
+- 模块初始化顺序、循环依赖、闭包和动态 import 会让“搬文件”变成行为变化。
+
+### TypeScript 注意事项
+- 保持导出类型、路径别名、包边界以及 type-only/runtime import 区别。
+
+### React 注意事项
+- 检查 Hook 规则、Server/Client 边界、lazy/Suspense、路由和事件顺序。
+
+### Vue 注意事项
+- 检查 composable 生命周期、Pinia 所有权、async setup、route guard 和 auto-import。
+
+### Frontend-Craft 前端适配
+- 行为应跟随数据所有权和变化责任；死代码实际删除必须经过专门 cleanup lane 的动态引用证明。
+
+### 原创前端变换示例
+- 某组件看似未使用时，先检查 lazy import、路由、Storybook、i18n、动态样式和 runtime template；实际删除交给 `fec-refactor-clean`。

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

@@ -0,0 +1,52 @@
+---
+name: fec-refactoring-validation
+description: 用于证明前端重构保持了既有行为、选择合适的安全网、逐步验证结构修改，或依据证据给出 PASS、PARTIAL、NOT PROVEN 的行为保持结论。
+---
+
+# 技能：重构验证
+
+## 用途
+
+定义可观察行为契约，并为每个结构步骤选择足够且不过度的验证证据。
+
+## 流程
+
+1. 在重要编辑前记录相关行为契约。
+2. 将安全网分为 A、B、C 三个等级。
+3. 运行并记录修改前基线。
+4. 根据当前步骤的风险和边界选择验证方式。
+5. 每个结构步骤后立即运行最小有效检查。
+6. 新增失败出现时先回滚当前步骤，再扩大排查。
+7. 最后运行与影响面匹配的更广门禁。
+8. 只按证据给出 PASS、PARTIAL 或 NOT PROVEN。
+
+纯结构重构使用 **GREEN → REFACTOR → GREEN**。
+
+## 安全网等级
+
+| 等级 | 证据 | 执行建议 |
+| --- | --- | --- |
+| A — 强 | 既有测试直接覆盖相关行为 | 直接作为主要安全网 |
+| B — 部分 | 重要行为覆盖不完整 | 高风险步骤前补当前行为的特征测试 |
+| C — 无 | 没有有效自动化覆盖 | 不自动安装框架；CAUTION/DANGER 默认只规划，除非已授权补最小安全网 |
+
+## 前端行为契约清单
+
+按实际范围检查：函数输入输出、异常和错误映射；DOM、可见状态、焦点、键盘和无障碍语义；props、emits、slots、Hook/Composable 返回值和事件顺序；请求、载荷、取消、重试、缓存键和加载/错误状态；store、持久化、对象身份、memoization、响应式和生命周期；路由、URL、guard、包导出、序列化字段和后端 DTO。
+
+## 参考资料
+
+- 构建行为契约和证明等级见 [behavior-preservation.md](references/behavior-preservation.md)。
+- 按前端风险选择目标验证见 [refactoring-test-checklist.md](references/refactoring-test-checklist.md)。
+
+## 约束
+
+- 无关测试通过不能证明行为保持。
+- 只在修改后新增并通过的测试，证据弱于可比较的修改前基线。
+- 不因为重构改变了行为就改测试期望值。
+- 证据不足时不能用 PASS 掩盖缺口。
+- 未经明确授权不安装新的测试框架。
+
+## 预期输出
+
+输出行为契约、基线状态、安全网等级、逐步验证、最终门禁、覆盖缺口，以及 PASS、PARTIAL 或 NOT PROVEN 结论。

package/localized/zh-CN/skills/fec-refactoring-validation/references/behavior-preservation.md

@@ -0,0 +1,15 @@
+# 行为保持
+
+## 构建行为契约
+
+开始结构修改前，只记录受影响边界真正需要保持的观察结果：输入和归一化、返回值和顺序、异常/错误、副作用、UI 状态、焦点和事件、请求与状态迁移、持久化、React/Vue 身份语义、公开导出、路由和序列化字段。
+
+## 特征测试
+
+重要行为缺乏覆盖时，在风险较高的结构修改前补一个描述当前实际行为的窄范围测试。它首次运行可以直接通过，因为目标是锁定既有行为，不是增加新要求。
+
+## 结论等级
+
+- **PASS**：相关契约明确，修改前后基线可比较，要求的检查通过。
+- **PARTIAL**：检查通过，但仍有重要路径缺乏足够自动化或可重复证据。
+- **NOT PROVEN**：依赖无法安装、工具无法运行、基线不清或安全网不足，不能可信证明行为保持。

package/localized/zh-CN/skills/fec-refactoring-validation/references/refactoring-test-checklist.md

@@ -0,0 +1,25 @@
+# 重构验证检查表
+
+## 局部函数/模块
+
+检查目标单测、受影响模块类型、调用方契约以及公开导出是否保持。
+
+## React
+
+检查 Hook 顺序和依赖、闭包时效、受控/非受控状态所有权、memoization/引用相等、effect 清理和请求取消、事件顺序以及相关 Server/Client 与水合边界。
+
+## Vue
+
+检查 `ref`/`reactive` 身份和解包、computed 是否仍保持派生语义、watch source/flush/cleanup、props/emits/slots/expose 以及 Pinia 状态和持久化。
+
+## API 与数据
+
+检查请求形状、header、认证刷新、取消、重试和错误；字段改名是否越过 DTO/存储/URL/后端契约；排序和过滤是否保留顺序、重复项和边界值；值对象/引用对象转换是否保持必要身份。
+
+## 路由与运行时注册
+
+检查 route name/path/guard、dynamic import、lazy 注册、Storybook、i18n、CSS/Tailwind 动态 class、运行时模板和生成 metadata。
+
+## 最终阶梯
+
+按“目标测试 → 受影响集成 → lint/typecheck → 全量测试 → build → 实际受影响的 E2E/SSR/视觉/无障碍/性能门禁”逐步扩大验证。

package/localized/zh-CN/skills/fec-responsive-layout/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: fec-responsive-layout
+description: 用于设计、实现或审查响应式前端布局、移动优先断点、容器查询、流式网格、数据密集表格、触摸目标、安全区域、横竖屏变化、视口溢出或跨设备 UI 行为；中文触发词包括 响应式布局、移动端适配、断点、容器查询、横竖屏、触摸目标。
+---
+
+# 响应式布局
+
+适用于需要让页面、工具界面、表格、仪表盘或组件在多设备上稳定工作的前端任务。需要布局模式和检查清单时加载 [references/responsive-layout-patterns.md](references/responsive-layout-patterns.md)。
+
+## 用途
+
+用内容优先、移动优先和容器感知的方式设计响应式布局，避免只靠固定断点修补溢出。
+
+## 流程
+
+1. 明确信息优先级：小屏先保留核心任务、关键操作和反馈；次要信息折叠、延后或移入详情层。
+2. 选择布局策略：简单页面用 mobile-first 断点；嵌套组件、卡片网格和侧栏优先考虑 container query。
+3. 设计流式尺寸：用 `minmax()`、`clamp()`、`aspect-ratio`、`max-width`、`min-width: 0` 和稳定网格轨道控制伸缩。
+4. 处理数据密集界面：表格、列表、看板和编辑器需要明确横向滚动、列优先级、冻结列或移动端摘要视图。
+5. 保证触摸与键盘：触摸目标、焦点路径、hover 替代、虚拟键盘、安全区域和横竖屏切换都要复核。
+6. 关联性能与资源：移动端减少首屏大图、重型图表、同步动画和不必要列渲染。
+7. 验证断点之间：检查 375px、768px、1024px、1440px，以及断点中间值是否溢出、遮挡或跳变。
+
+## 约束
+
+- 不把桌面版缩小当作移动端设计。
+- 不让关键功能只依赖 hover 或宽屏侧栏。
+- 不用固定高度掩盖内容变化；需要固定格式时用稳定约束和可滚动区域。
+- 不用 viewport 字体缩放替代真实排版层级。
+- 不让移动端横向溢出成为默认解决方案；只有数据表、画布或编辑器等明确场景可以局部横滚。
+
+## 预期输出
+
+输出响应式信息优先级、断点或容器策略、关键组件布局模式、触摸/键盘要求、数据密集区域处理方案和验证结果。完成后页面在常见视口和输入方式下不溢出、不遮挡、可操作。

package/localized/zh-CN/skills/fec-responsive-layout/references/responsive-layout-patterns.md

@@ -0,0 +1,70 @@
+# 响应式布局模式
+
+## 策略选择
+
+| 场景 | 策略 |
+| ---- | ---- |
+| 页面级结构 | 移动优先断点 |
+| 会被放进未知父容器的复用组件 | 容器查询 |
+| 卡片网格 | `repeat(auto-fit, minmax())`，并设置合理最小宽度 |
+| 数据表格 | 列优先级、横向滚动或移动端摘要行 |
+| 编辑器 / 画布 / dashboard | 稳定外壳 + 可滚动工作区 |
+
+## CSS 模式
+
+```css
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+  gap: 1rem;
+}
+
+.panel {
+  min-width: 0;
+  container-type: inline-size;
+}
+
+@container (min-width: 42rem) {
+  .panel-body {
+    display: grid;
+    grid-template-columns: 16rem minmax(0, 1fr);
+  }
+}
+```
+
+当 grid/flex 子项包含长文本、表格、代码、图表或媒体时，给子项设置 `min-width: 0`。
+
+## 数据密集型界面
+
+- 编码前先确定移动端列优先级。
+- 主标识、状态和主要操作保持可见。
+- 低优先级元数据移入详情行、抽屉或可展开面板。
+- 小屏仍要保留排序、筛选、分页和选择能力。
+- 虚拟滚动只解决 DOM 数量问题，不能解决信息层级问题。
+- 表格可以局部横向滚动，但页面整体不应出现无意水平溢出。
+
+## 响应式媒体
+
+- 图片和视频要有稳定尺寸、`aspect-ratio` 或容器约束，避免加载后推挤布局。
+- 需要多尺寸资源时使用 `srcset`、`sizes` 或 `<picture>`，不要让移动端下载桌面大图。
+- 非首屏图片默认懒加载；首屏主体图按框架能力设置明确优先级。
+- 媒体裁切必须保留主体信息；不要为了填满卡片裁掉产品、人物、图表关键区域。
+
+## 触控与视口检查
+
+- 空间允许时，交互目标至少 44x44px。
+- 移动端输入框字号避免低于 16px。
+- 固定底部栏和操作条必须考虑 `env(safe-area-inset-bottom)`。
+- 对话框和抽屉需要适配虚拟键盘导致的视口变化。
+- 只在 hover 时出现的内容必须提供点击、焦点或常驻可见替代方案。
+- iOS/Android 横竖屏切换后，主操作、焦点位置和滚动容器仍应可达。
+- 需要局部滚动的区域应明确最大高度和滚动边界，避免页面和内部容器互相抢滚动。
+
+## 验证清单
+
+- 320-375px：页面级没有横向溢出。
+- 768px：布局切换后阅读顺序仍然合理。
+- 1024-1440px：内容宽度有约束，扫描路径清晰。
+- 长标签、翻译文本、数字以及 empty/error/loading 状态不会撑坏固定格式控件。
+- 横竖屏切换不会困住焦点或隐藏主操作。
+- 虚拟键盘弹出时，输入框、提交按钮和错误提示不被遮挡。