# Diff Previewer

> 多文件差异预览器 - 在应用AI变更前展示丰富的diff预览，支持部分接受和变更地图

- Skill: `chainlesschain/diff-previewer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add chainlesschain/diff-previewer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chainlesschain/diff-previewer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: chainlesschain (https://skillmd.com/u/chainlesschain)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chainlesschain/diff-previewer

---


# 差异预览器技能

## 描述

多文件差异预览器，在应用AI变更前提供丰富的diff预览。支持查看git暂存/未暂存差异、比较任意两个文件、生成变更统计和变更地图。提供token估算帮助优化AI上下文窗口使用。

## 使用方法

```
/diff-previewer <mode> [arguments]
```

## 模式

| 模式         | 说明                                     |
| ------------ | ---------------------------------------- |
| `--staged`   | 显示git暂存区的差异（git diff --cached） |
| `--unstaged` | 显示工作区未暂存的差异（git diff）       |
| `--compare`  | 比较两个指定文件的差异                   |
| `--stats`    | 显示变更统计，包含目录级别的分解         |
| `--summary`  | 紧凑的token高效摘要，适合注入AI上下文    |

## 输出格式

### 结构化差异

```json
{
  "files": [
    {
      "path": "src/main/index.js",
      "status": "M",
      "additions": 15,
      "deletions": 3,
      "hunks": [
        {
          "oldStart": 10,
          "oldCount": 5,
          "newStart": 10,
          "newCount": 17,
          "lines": ["..."]
        }
      ]
    }
  ],
  "totalAdditions": 15,
  "totalDeletions": 3,
  "tokenEstimate": 450
}
```

### 变更地图

```
src/main/
  index.js        ████░░░░░░ +15 -3
  database.js     ██████████ +42 -10
src/renderer/
  App.vue         ██░░░░░░░░ +5  -1
```

## 示例

查看暂存的变更：

```
/diff-previewer --staged
```

查看未暂存的变更：

```
/diff-previewer --unstaged
```

比较两个文件：

```
/diff-previewer --compare src/old.js src/new.js
```

变更统计概览：

```
/diff-previewer --stats
```

AI上下文摘要：

```
/diff-previewer --summary
```