Code Fragment Extractor
概述
该技能用于深度分析和拆解用户提供的代码目录或文件，提取功能级别的代码片段，并按照标准化模板格式保存到./template 目录中，为后续代码复用和参考提供结构化的片段库。
工作流程
1. 代码分析与探索
- 使用 Explore 工具或 Glob/Read 工具深入探索用户提供的代码目录
- 识别文件结构、组件关系和功能模块
- 分析代码的架构模式和设计思路
2. 功能片段拆解
- 按照功能粒度拆分代码，确保每个片段具有完整性和独立性
- 识别核心功能模块、工具函数、组件逻辑、样式定义等
- 保持原始代码内容和页面布局结构不变
3. 代码片段提取
- 提取具有代表性的代码片段
- 确保片段的实用性和可复用性
- 剔除国际化部分，改用普通文案替代
4. 模板文件生成
- 严格按照
{模块名称}-{功能名称}-template.Ai.md格式生成 - 将代码片段保存到./fragment-extractor 目录下
- 确保文件命名规范和内容结构一致性
5. 片段库索引生成
- 在./fragment-extractor 目录下生成
index.Ai.md文件 - 按照
- [文件名].Ai.md: [介绍]格式创建片段库文件目录 - 为每个代码片段文件添加简短功能介绍
输出模板规范
每个代码片段模板文件必须遵循以下结构：
# `[模块名称] 流程[功能名称]代码实现片段
## 功能描述
[简要描述该代码片段的功能和用途]
## 代码片段
// 代码实现 [提取的代码片段内容]
## 代码片段分类
### 组件级别片段
- React 组件实现
- 组件 props 接口定义
- 组件样式和布局
- 组件事件处理
### 功能级别片段
- 数据处理函数
- 工具函数库
- 状态管理逻辑
- API 调用封装
### 配置级别片段
- 路由配置
- 环境配置
- 构建配置
## 实施指南
### 文件命名规范
- 使用 `{模块名称}-{功能名称}-template.Ai.md` 格式
- 功能名称使用英文，简洁明了地描述片段功能
- 例如：`booking-form-validation-template.Ai.md`、`booking-user-interface-template.Ai.md`
### 代码片段提取原则
1. **功能完整性**：确保每个片段能够独立完成特定功能
2. **代码真实性**：只提取实际存在的代码，不添加虚构内容
3. **结构保持**：保持原始代码的缩进、格式和结构
4. **去国际化**：将 i18n 相关代码替换为普通文本内容
### 质量检查清单
- 代码片段是否功能完整
- 是否遵循模板格式规范
- 文件命名是否符合规范
- 是否已去除国际化依赖
- 代码是否真实有效
- 片段颗粒度是否适当
### 使用示例
当用户提供一个预订系统代码库时，执行以下步骤：
1. **探索代码结构**： `/src /components - BookingForm.tsx - UserInterface.tsx - PaymentProcessor.tsx /utils - validation.ts - formatters.ts /hooks - useBooking.ts - useAuth.ts`
2. **提取组件片段**：
- 从 `BookingForm.tsx` 提取表单组件逻辑
- 从 `UserInterface.tsx` 提取用户界面组件
- 从 `validation.ts` 提取表单验证函数
3. **生成模板文件**：
- `booking-form-component-template.Ai.md`
- `booking-user-interface-template.Ai.md`
- `booking-validation-utils-template.Ai.md`
4. **确保格式一致**：每个文件都严格遵循标准模板结构