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