# Code Fragment Extractor

> 仔细彻底阅读探索用户提供的代码目录/文件，分析拆解出对应的代码片段以供参考，颗粒度细到功能级别，只做片段提取不改变代码内容和页面布局结构，提取到./fragment-extractor目录下，按照指定模板格式生成代码片段模板文件，确保功能完整性和代码片段的实际性。

- Skill: `majiayu000/code-fragment-extractor` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/code-fragment-extractor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/code-fragment-extractor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/code-fragment-extractor

---


# Code Fragment Extractor

## 概述

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

## 工作流程

### 1. 代码分析与探索

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

### 2. 功能片段拆解

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

### 3. 代码片段提取

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

### 4. 模板文件生成

- 严格按照 `booking-{功能名称}-template.md` 格式生成
- 将代码片段保存到 ./fragment-extractor 目录下
- 确保文件命名规范和内容结构一致性

### 5. 片段库索引生成

- 在 ./fragment-extractor 目录下生成 `index.md` 文件
- 按照 `- [文件名].md: [介绍]` 格式创建片段库文件目录
- 为每个代码片段文件添加简短功能介绍

## 输出模板规范

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

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

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

## 代码片段

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

## 代码片段分类

### 组件级别片段

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

### 功能级别片段

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

### 配置级别片段

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

## 实施指南

### 文件命名规范

- 使用 `booking-{功能名称}-template.md` 格式
- 功能名称使用英文，简洁明了地描述片段功能
- 例如：`booking-form-validation-template.md`、`booking-user-interface-template.md`

### 代码片段提取原则

1. **功能完整性**：确保每个片段能够独立完成特定功能
2. **代码真实性**：只提取实际存在的代码，不添加虚构内容
3. **结构保持**：保持原始代码的缩进、格式和结构
4. **去国际化**：将 i18n 相关代码替换为普通文本内容

### 质量检查清单

- [ ] 代码片段是否功能完整
- [ ] 是否遵循模板格式规范
- [ ] 文件命名是否符合规范
- [ ] 是否已去除国际化依赖
- [ ] 代码是否真实有效
- [ ] 片段颗粒度是否适当

### 使用示例

当用户提供一个预订系统代码库时，执行以下步骤：

1. **探索代码结构**：

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