article-icons
Illustrate an article (Markdown, HTML, etc.) with animated-style icons from itshover.com/icons. Fetches icons as clean inline SVG and places them at section…
Review and understand freshly AI-generated code. Scans the current repo's uncommitted/branch changes and builds a Claude-style light-themed two-column webpage — left is the project folder tree of changed files, right is the selected file's syntax-highlighted diff
$ npx -y skills add smallnest/goal-workflow --skill understand --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/understandContext preview
The summary Claude sees to decide when to auto-load this skill.
Review and understand freshly AI-generated code. Scans the current repo's uncommitted/branch changes and builds a Claude-style light-themed two-column webpage — left is the project folder tree of changed files, right is the selected file's syntax-highlighted diff
name: understand description: Review and understand freshly AI-generated code. Scans the current repo's uncommitted/branch changes and builds a Claude-style light-themed two-column webpage — left is the project folder tree of changed files, right is the selected file's syntax-highlighted diff (additions/deletions clearly distinguished from unchanged code) with a side rail showing, per code segment, the related unit requirement (相关单位需求) and a plain-language code explanation (代码解释). Invoke for "/understand", "code review 这次改动", "解释一下新生成的代码", "看看这次变更". metadata: author: smallnest version: 1.0.0
把「本次(AI)新生成的代码变更」变成一个可交互的审阅网页:左侧按真实项目布局列出变更文件树,右侧显示所选文件的 diff(高亮、增删与未变更代码明显区分),并在右侧边栏逐段给出**相关单位需求**与**代码解释**;解释下方可按需提供「伪代码」「调用树」两个展开式文本视图(参考 show-me skill 的呈现方式)。
**始终用中文产出解释与需求。**
skill 目录下三件套(都在 `~/.claude/skills/understand/`):
在**用户当前工作目录(仓库内)**执行以下步骤。全程把 `SKILL_DIR` 当作本 skill 目录的绝对路径(即本文件所在目录)。
python3 "$SKILL_DIR/understand.py" scan
先把改动读懂,再落注释。建议:
然后**编辑 `.understand/annotations.json`**(scan 已生成骨架,保留其 `files[].path` 顺序,逐个填充)。结构:
{
"title": "本次变更的一句话主题",
"summary": "整体在做什么、为什么(2~4 句,可用 **加粗** 与 `代码`)",
"files": [
{
"path": "src/main/java/.../PwaTierInvitationService.java",
"summary": "这个文件这次改了什么、为何改(1~3 句)",
"annotations": [
{
"side": "new",
"start": 52,
"end": 53,
"requirement": "expires_at 为 timestamptz,需正确编码",
"explanation": "Vert.x PG 客户端不支持 `java.time.Instant`,改绑 `OffsetDateTime`(`atOffset(UTC)`),否则运行期报 coercion 错误。",
"pseudocode": "on(save)\n if content is unchanged\n return cached result\n write new content\n return fresh result",
"callTree": "submitForm\n createSession\n persistPrompt\n launchAgent\n navigateToSession",
"inferred": false
}
]
}
]
}注释字段:
注释密度:聚焦**关键/易错/体现需求**的段落(新增的核心逻辑、边界处理、并发/事务、类型坑、SQL 口径等),不必逐行;每个重要文件给 1~5 条即可。可参考项目记忆里的常见坑(如 Vert.x `Future.await()`、PG `= ANY` 数值数组、`timestamptz` 编码)来判断哪些点值得解释。
python3 "$SKILL_DIR/understand.py" render open .understand/report.html # macOS;Linux 用 xdg-open
`render` 会把 `data.json` + `annotations.json` 合并注入模板,产出 `.understand/report.html`(单文件,纯前端,Prism 走 CDN)。用浏览器打开即可:左树选文件 → 右侧看 diff → 边栏卡片点「定位 →」跳到对应代码行(会高亮闪一下);若注释写了 `pseudocode`/`callTree`,卡片解释下方会出现「伪代码」「调用树」按钮,点击展开/收起(同卡片内两个视图互斥)。左侧文件树栏可**拖动分隔条调整宽度**(宽度记忆在 localStorage,双击分隔条恢复默认)。
最后**用中文向用户简述**:改了几个文件、核心变更是什么、有哪些值得注意的点,并给出 `report.html` 路径。
An AI-driven development workflow — from PRD to shipped code, all within Claude Code.
Illustrate an article (Markdown, HTML, etc.) with animated-style icons from itshover.com/icons. Fetches icons as clean inline SVG and places them at section…
Reverse-engineer a SPEC document from an existing project. Analyzes code, config, tests, and structure to produce a comprehensive specification. Triggers on:…
Use when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a…
Graph engineering for parallel task execution: convert a task, PRD, SPEC, or issue set into a dependency graph (DAG), layer it into supersteps, then implement…
对指定文档进行去 AI 味的改写。自动选择最合适的人性化策略(humanizer-zh / humanize-chinese / technical-writing), 迭代改写直到效果达标或迭代 42 次为止。适用于中文文本的去 AI 化处理,包括通用文章、技术文档、学术论文等。 Use when user…
为任意项目生成 UML 图、架构图和流程图。分析代码库后让用户选择要生成的图表类型,使用 architecture-diagram skill 渲染为 HTML+SVG,保存到 docs/ 目录。适用于任何软件项目的文档可视化。