Informations de source
- Dépôt
- nlp-JvUUN/AAAAZOgH
- Dernière activité de la source
- 6 août 2026 à 15:49
- Langue détectée de SKILL.md
- chinois
- Étoiles
- 1
- Forks
- 52
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Affichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- name
- code_analysis
- description
- 对用户提供的前端代码（HTML/CSS/JS）进行结构分析、问题诊断、优化建议与总结报告
- type
- workflow
- version
- 1
## 适用场景
- 用户提供了一段前端代码，需要分析其结构、质量和潜在问题
- 用户希望对代码进行优化，但不确定从哪里入手
- 用户需要一份可交付的代码评审报告
## 执行流程（按顺序执行，不可跳过）
### 步骤1：代码接收与预处理
- **识别代码类型**：
- 若输入包含 `<!DOCTYPE html>` 或 `<html>` 标签 → 标记为 HTML 文件
- 若输入以 `{` `}` 或 `.class` `#id` 为主 → 标记为 CSS 文件
- 若输入包含 `function` `const` `let` `=>` 或 DOM 操作 → 标记为 JS 文件
- 若同时包含 HTML + CSS + JS → 标记为混合文件，分别分析各段
- **代码格式化**：
- 若代码为单行压缩格式 → 先进行基础换行和缩进，便于分析
- 若代码已格式化 → 保持原样
- **缺失处理**：
- 若用户未提供代码 → 仅回复 "请提供需要分析的前端代码"
- 若代码片段过短（少于 5 行有效代码）→ 提示 "代码片段较短，分析可能不够全面"
### 步骤2：结构分析
对代码进行逐层拆解，输出以下信息：
| 分析维度 | 输出内容 |
|---------|---------|
| **文件结构** | 代码由哪些部分组成（HTML结构层 / CSS表现层 / JS行为层） |
| **DOM结构** | HTML标签层级深度、语义化标签使用率（如 `<header>` `<main>` `<section>` vs 纯 `<div>`） |
| **CSS组织** | 选择器类型分布（类选择器 / ID选择器 / 标签选择器 / 嵌套深度）、是否有重复样式 |
| **JS模块** | 函数数量、事件绑定方式（内联 / addEventListener）、是否有异步操作（fetch/Promise/async-await） |
| **性能预算** | CSS选择器复杂度评分、JS阻塞渲染风险、DOM节点总数估算、是否有强制同步布局（forced reflow） |
| **依赖分析** | 是否引入外部库（CDN链接 / import / require）、是否使用框架语法（如 React/Vue 特征） |
**输出约束**：
- 只描述**实际存在**的结构，不猜测用户意图
- 若某维度不存在（如纯 HTML 无 JS），标注 "本文件不包含 JS"
### 步骤3：问题诊断
按以下类别扫描代码，标记问题等级：
| 等级 | 标识 | 判定标准 |
|------|------|---------|
| 🔴 严重 | 可能导致功能失效或安全漏洞 | XSS风险（如 `innerHTML` 直接插入用户输入）、内存泄漏（未移除事件监听）、语法错误 |
| 🟡 警告 | 影响性能或可维护性 | 重复CSS选择器、深层嵌套（>4层）、全局变量污染、硬编码魔法数字、无防抖/节流的频繁事件、CSS选择器复杂度>3、JS长时间阻塞主线程 |
| 🟢 建议 | 代码风格或最佳实践 | 缺少注释、变量命名不清晰、未使用语义化标签、CSS未使用变量统一管理颜色/字号 |
**诊断规则**：
- 每个问题必须**附上行号或代码片段**作为证据
- 禁止编造不存在的问题
- 若代码质量较好、无严重问题 → 明确写 "未检测到严重问题"
- **性能预算专项**：对复杂代码（>200行或嵌套>4层），必须额外输出性能预算评估，包括：
- CSS选择器平均复杂度（标签选择器=1，类=2，ID=3，后代组合=+1/层，通配符*=5）
- JS阻塞风险（同步script标签位置、是否有DOM操作在循环中、是否有强制同步布局如读取offsetHeight后立即修改style）
- DOM规模评估（节点总数估算、嵌套深度最大值）
### 步骤4：优化建议
针对步骤3中发现的问题，按优先级给出可执行的改进方案：
**输出格式**：
```markdown
### 优化建议（按优先级排序）
1. **{问题简述}** [{等级}]
- 现状：{当前代码片段}
- 建议：{具体改进后的代码或方案}
- 收益：{为什么这样改更好，一句话}
2. ...
```
**约束**：
- 每个建议必须对应步骤3中的某个问题，不凭空新增
- 提供的改进代码必须是**可直接替换**的完整片段，不能是伪代码
- 若问题涉及架构层面（如建议拆分组件）→ 给出重构后的目录结构或伪代码示意
### 步骤5：生成总结报告
按以下模板输出最终报告：
```markdown
# 代码分析总结报告
## 一、代码概览
- 文件类型：{HTML/CSS/JS/混合}
- 代码行数：{约 X 行}
- 整体评价：{简洁/中等/复杂}，{结构清晰/需要整理}
## 二、结构分析
{步骤2的分析结果，分点列出}
## 三、问题清单
{步骤3的诊断结果，按等级分组}
## 四、优化建议
{步骤4的改进方案}
## 五、性能预算评估
{步骤2和步骤3中识别的性能指标汇总，包括选择器复杂度评分、阻塞风险等级、DOM规模等级}
## 六、快速修复代码（可选）
若用户要求直接输出修复后的完整代码 → 在此输出优化后的完整代码块
```
**输出约束**：
- 报告总长度控制在 **500-1500 字**（不含代码块）
- 代码块使用正确的语法高亮标记（```html / ```css / ```js）
- 若用户未要求输出修复代码 → 步骤5省略 "快速修复代码" 部分
## 边界规则
- **非前端代码**：若用户提供的是 Python/Java/其他语言代码 → 提示 "本 Skill 专注于前端代码（HTML/CSS/JS）分析，请提供前端相关代码"
- **代码过长**：若代码超过 500 行 → 采用**分层抽样分析**策略：
1. 先扫描整体结构（文件组成、依赖、框架类型）
2. 对HTML：分析DOM骨架（前50行）+ 事件绑定区域（搜索`addEventListener`/`onclick`所在上下文）
3. 对CSS：按选择器分组，抽样分析复杂度最高的3组和重复模式最多的3组
4. 对JS：分析入口区域（前50行）+ 异步操作区域（搜索`fetch`/`Promise`/`async`所在上下文）+ 闭包/循环区域（搜索`for`/`while`/`forEach`所在上下文）
5. 输出时明确标注："代码共X行，采用分层抽样分析以下关键区域..."，并列出分析到的具体行号范围
- **复杂代码准确性保障**：
- 分析前先做**代码分块**：按 `<script>` / `<style>` / 标签边界将代码切分为逻辑块
- 每块独立分析后做**交叉验证**：检查块间引用是否一致（如JS操作的class是否在CSS中存在）
- 对性能预算指标给出**置信度评级**（高/中/低），低置信度时明确说明 "该指标为估算值，建议结合DevTools验证"
- **框架代码**：若检测到 React/Vue/Angular 语法 → 在结构分析中标注框架类型，诊断时结合框架最佳实践
- **无问题场景**：若代码规范、结构良好 → 给出肯定评价，并补充 1-2 条进阶优化建议（如"可考虑添加单元测试"）
<!-- v1: 初始版本 -->
Voir sur GitHub