SKILLS
管理 / 登录
返回列表

project-analysis-and-skill-generator

12 浏览 3 下载 发布于 6/25/2026
下载 Skill
---
name: project-analysis-and-skill-generator
description: 深度分析当前项目代码结构、技术栈与开发规范，自动生成一系列符合项目特性的 Skill 文档，用于指导后续开发。
---

# 项目代码分析与技能生成器 (Project Analysis & Skill Generator)

作为一个资深的前端架构师智能体，你的任务是**深度分析当前项目的代码库**，理解其技术栈、架构模式、命名规范和最佳实践，并基于这些分析结果，在 `.trae/skills/` 目录下生成一系列**可执行的 Skill 文档**。

## 1. 核心任务目标
1.  **全面扫描**：扫描项目根目录及 `src` 目录，识别项目使用的核心技术（React/Vue/Angular, TypeScript, CSS预处理器, 构建工具等）。
2.  **规范提取**：从现有代码中提取命名规范（文件、变量、类、组件）、代码风格（ESLint/Prettier）、目录结构规范。
3.  **技能生成**：针对下述 16 个关键维度进行分析，如果项目中存在相关代码，则生成对应的 Skill Markdown 文件。
4.  **索引汇总**：生成一个汇总的 `SKILL.md`，作为所有生成的 Skill 的索引和使用指南。

## 2. 分析与生成维度 (Analysis Dimensions)

请针对以下每个维度进行代码分析。如果项目中包含相关实现，请生成独立的 Skill 文件（例如 `component-development.md`）。

**注意：** 如果项目中完全不存在某个维度的代码（例如没有使用 Vuex/Redux），则跳过该 Skill 的生成。

### 2.1 基础架构与规范
1.  **环境配置 (Environment Setup)**
    *   分析 `.env`, `vite.config.ts`, `webpack.config.js` 等。
    *   提取环境变量命名规范、代理配置、构建优化策略。
2.  **配置文件定义与使用 (Configuration Management)**
    *   分析项目自定义的配置文件或常量定义文件。
    *   提取配置项的读取方式和类型定义。
3.  **ESLint/Prettier 规范遵守 (Linting & Formatting)**
    *   分析 `.eslintrc`, `.prettierrc`。
    *   提取关键的 Lint 规则（如禁止 console, 强制单引号等）。
4.  **TypeScript 定义与使用 (TypeScript Usage)**
    *   分析 `tsconfig.json` 和 `src/**/*.d.ts`。
    *   提取类型定义习惯（Interface vs Type）、泛型使用、工具类型封装。
5.  **CSS/Less/SCSS 规范 (Styling Guidelines)**
    *   分析样式文件，确定预处理器（Less/Sass/Stylus/Tailwind）。
    *   提取 BEM 命名规范、CSS Modules 使用、全局变量定义。
6.  **代码优化规范 (Code Optimization)**
    *   分析代码中的性能优化模式（懒加载、Memoization、Virtual List）。
    *   提取代码分割（Code Splitting）策略。

### 2.2 核心功能开发
7.  **组件封装与使用 (Component Development)**
    *   分析 `src/components`。
    *   提取组件目录结构（扁平 vs 嵌套）、Props 定义、Slot 使用、事件发射规范。
8.  **指令封装与使用 (Directive Development)**
    *   (Vue/Angular) 分析自定义指令的实现和注册方式。
9.  **路由定义与文件命名 (Routing)**
    *   分析 `src/router` 或 `src/pages` (Next.js/Nuxt)。
    *   提取路由配置模式（动态路由、嵌套路由）、路由守卫（Guard）、路由懒加载写法。
10. **全局数据定义与使用 (State Management)**
    *   分析 `src/store` (Pinia/Vuex) 或 Redux/MobX/Zustand。
    *   提取 Store 的模块化结构、Action/Mutation/Reducer 的命名和调用规范。

### 2.3 业务逻辑与交互
11. **表单生成与校验 (Forms & Validation)**
    *   分析表单组件的使用。
    *   **关键点**：提取防重复提交策略（Loading 锁）、校验规则定义（Async Validator/Zod/Yup）。
12. **列表的增删改查 (CRUD Operations)**
    *   分析列表页面。
    *   **关键点**：提取搜索栏封装、分页处理、操作按钮防抖（Debounce）/节流（Throttle）处理。
13. **接口联调 (API Integration)**
    *   分析 `src/api` 或 `src/services`。
    *   提取 Axios/Fetch 封装、请求拦截器（Token 注入）、响应拦截器（错误处理）、接口定义规范。
14. **权限控制 (Permission Control)**
    *   分析权限管理逻辑（指令、高阶组件、路由守卫）。
    *   提取按钮级权限和页面级权限的实现方式。
15. **文件上传 (File Upload)**
    *   分析文件上传组件或服务。
    *   提取上传流程（预签名、分片上传）、格式/大小校验逻辑。
16. **工具函数定义与使用 (Utils & Helpers)**
    *   分析 `src/utils` 或 `src/helpers`。
    *   提取常用工具函数（日期格式化、深拷贝、正则校验）的分类和命名。

### 2.4 动态发现与扩展 (Dynamic Discovery & Custom Logic)
除了上述标准维度外，智能体必须主动识别项目中特有的自定义逻辑和模块：

17. **自定义目录分析 (Custom Directory Analysis)**
    *   扫描 `src` 下所有未被上述维度覆盖的一级目录（例如 `src/hooks`, `src/constants`, `src/layouts`, `src/plugins`, `src/middleware`, `src/directives`, `src/filters` 等）。
    *   **生成规则**：对于每个包含重要逻辑（文件数量 > 3 或被频繁引用）的目录，生成独立的 Skill 文件，命名为 `[directory-name]-guide.md`（例如 `hooks-guide.md`）。
    *   **内容要求**：分析该目录的设计意图、文件组织方式、核心模式和使用场景。

18. **复杂/业务组件识别 (Complex Business Components)**
    *   深度扫描 `src/components` 或 `src/views` 下的子目录。
    *   如果发现具有高度复用性但包含特定业务逻辑的组件簇（不同于基础 UI 组件），生成 `business-components.md`。
    *   **关注点**：业务逻辑封装、数据获取方式、与 Store 的交互。

19. **特殊设计模式识别 (Special Design Patterns)**
    *   分析代码中是否存在特定的设计模式实现（如发布订阅 `EventBus`、依赖注入 `DI`、单例模式管理器、Web Worker 管理器、WebSocket 封装等）。
    *   如果存在，生成 `special-patterns.md` 或具体的 `[pattern-name].md`。

## 3. 生成的 Skill 文件规范 (Output Standard)

每个生成的 `.md` 文件（如 `component-development.md`）必须遵循以下结构：

```markdown
---
name: [技能名称，如 Component Development]
description: [简短描述，如 Vue3 组件开发规范与最佳实践]
---

# [技能名称] 开发指南

## 1. 核心规范 (Core Standards)
- **文件命名**: (例如 PascalCase)
- **目录结构**: (例如每个组件独立文件夹，包含 index.ts 和 style.scss)
- **技术选型**: (例如使用 setup script)

## 2. 代码模板 (Code Templates)
*(提供符合项目当前规范的代码片段，必须包含详细注释)*

\`\`\`typescript
// 示例代码
\`\`\`

## 3. 关键注意事项 (Critical Notes)
- (例如：必须定义 Props 类型)
- (例如：样式必须使用 scoped)

## 4. 执行步骤 (Step-by-Step Guide)
1. 创建文件...
2. 定义 Props...
```

## 4. 索引文件生成规范 (Index File Standard)

所有子 Skill 生成完毕后，必须在 `.trae/skills/` 下生成 `SKILL.md` 索引文件：

```markdown
# 项目开发技能索引 (Project Skills Index)

本文件汇总了当前项目的所有开发技能规范。请在开发过程中参考相应的 Skill 文档。

## 技能列表

### 基础架构
- [环境配置](./environment-setup.md): 环境变量与构建配置说明
- ...

### 核心开发
- [组件开发](./component-development.md): 组件封装规范
- [API 联调](./api-integration.md): 接口调用与拦截器规范
- ...

## 使用指南
在 Trae 的对话框中，你可以直接通过 Skill 名称调用这些能力，例如：
- "帮我创建一个新组件" -> 将触发 `component-development` skill
- "对这个列表页添加搜索功能" -> 将参考 `crud-operations` skill
```

## 5. 执行流程 (Execution Workflow)

作为智能体，请按以下步骤执行本 Skill：

1.  **初始化**：读取 `package.json`，确定主框架（React/Vue/Angular）和语言（TS/JS）。
2.  **遍历分析**：遍历上述 19 个维度（含动态发现），检查项目中是否存在相关代码。
3.  **生成子 Skill**：
    *   对于每个存在的维度，分析其实现模式。
    *   在 `.trae/skills/` 下生成对应的 `.md` 文件（如果目录不存在则创建）。
    *   对于**动态发现**的目录，确保命名具有描述性。
    *   **重要**：生成的代码模板必须直接取自或基于项目中的现有代码，确保高度一致性。
4.  **生成索引**：生成 `SKILL.md` 汇总所有已生成的 Skill。
5.  **完成**：输出生成报告，列出已生成的 Skill 文件列表。

---
**注意**：此 Skill 本身不修改项目业务代码，只生成文档。生成过程应确保不覆盖用户手动编写的且未在本次生成范围内的其他 Skill 文件（除非同名覆盖）。