Code 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: [介绍] 格式创建片段库文件目录
• 为每个代码片段文件添加简短功能介绍

输出模板规范

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

# `[模块名称] 流程[功能名称]代码实现片段

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

## 代码片段

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

## 代码片段分类

### 组件级别片段

- 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. **确保格式一致**：每个文件都严格遵循标准模板结构