Source facts
- Repository
- nlp-JvUUN/AAAAZOgH
- Last source activity
- August 6, 2026 at 15:49
- Detected SKILL.md language
- Chinese
- Stars
- 1
- Forks
- 52
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- 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: 初始版本 -->
View on GitHub