Code Fragment Extractor

概述

该技能用于深度分析和拆解用户提供的代码目录或文件，提取功能级别的代码片段，并按照标准化模板格式保存到 ./template 目录中，为后续代码复用和参考提供结构化的片段库。

工作流程

1. 代码分析与探索

• 使用 Explore 工具或 Glob/Read 工具深入探索用户提供的代码目录
• 识别文件结构、组件关系和功能模块
• 分析代码的架构模式和设计思路

2. 功能片段拆解

• 按照功能粒度拆分代码，确保每个片段具有完整性和独立性
• 识别核心功能模块、工具函数、组件逻辑、样式定义等
• 保持原始代码内容和页面布局结构不变

3. 代码片段提取

• 提取具有代表性的代码片段
• 确保片段的实用性和可复用性
• 剔除国际化部分，改用普通文案替代

4. 模板文件生成

• 严格按照

  booking-{功能名称}-template.md

  格式生成
• 将代码片段保存到 ./fragment-extractor 目录下
• 确保文件命名规范和内容结构一致性

5. 片段库索引生成

• 在 ./fragment-extractor 目录下生成

  index.md

  文件
• 按照

  - [文件名].md: [介绍]

  格式创建片段库文件目录
• 为每个代码片段文件添加简短功能介绍

输出模板规范

每个代码片段模板文件必须遵循以下结构：

# booking 流程[功能名称]代码实现片段

## 功能描述
[简要描述该代码片段的功能和用途]

## 代码片段

```tsx
// 代码实现
[提取的代码片段内容]

代码片段分类

组件级别片段

• React 组件实现
• 组件 props 接口定义
• 组件样式和布局
• 组件事件处理

功能级别片段

• 数据处理函数
• 工具函数库
• 状态管理逻辑
• API 调用封装

配置级别片段

• 路由配置
• 环境配置
• 构建配置

实施指南

文件命名规范

• 使用

  booking-{功能名称}-template.md

  格式
• 功能名称使用英文，简洁明了地描述片段功能
• 例如：

  booking-form-validation-template.md

  、

  booking-user-interface-template.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.md

   • booking-user-interface-template.md

   • booking-validation-utils-template.md

4. 确保格式一致：每个文件都严格遵循标准模板结构