mcpField
E
explain-code

explain-code

github.com/helderberto开发2060 次安装1 周前更新
代码仓库

关于 explain-code

explain-code 是一种以对话方式讲解代码的技能，固定使用生活类比、ASCII 图、逐步说明和常见陷阱。适合需要结构化理解代码及其执行流程的读者。

主要功能

  1. 01从日常类比开始
  2. 02用 ASCII 图展示结构
  3. 03逐步讲解代码执行
  4. 04指出常见陷阱
  5. 05支持多种图示形式

适用场景

  1. 01说明函数的控制流程
  2. 02厘清模块之间的调用关系
  3. 03展示数据结构的层次

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/helderberto/agent-skills --skill explain-code

安装后在 Claude Code 中输入/explain-code确认已加载。

详细介绍

解释代码时，始终包括：

  1. 先打个比方：将代码比作日常生活中的事物
  2. 绘制图示：使用 ASCII 艺术展示流程、结构或关系
  3. 逐步讲解代码：说明代码的执行步骤
  4. 指出一个易踩的坑：说明常见错误或误解是什么

讲解时保持对话式风格。对于复杂概念，可以使用多个比喻。

图示类型

流程／控制流：

Input -> [Validate] -> [Process] -> [Save] -> Output
                          |
                       [Error] -> Return 400

调用栈／时序：

Client          API           DB
  |--request-->  |             |
  |              |--query----> |
  |              |<--result--- |
  |<-response--  |             |

树／层级结构：

App
+-- Header
|   +-- Nav
+-- Main
|   +-- Sidebar
|   +-- Content
+-- Footer

状态机：

[Idle] --submit--> [Loading] --success--> [Done]
                       |
                    error|
                   [Failed] --retry--> [Loading]

数据结构：

User {
  id: string
  profile: Profile --> { name, avatar, bio }
  posts: Post[]    --> [{ id, title, body }]
}

之前／之后：

Before:               After:
fn()                  fn()
  doA()                 doA()
  doB()                 doB()
  doC()     ->          helpers()
  doD()                   doC()
  doE()                   doD()
                          doE()

错误处理

  • 代码引用了外部文件／模块——解释前先阅读这些文件
  • 图示过于复杂——将其拆分成多个聚焦的图示，每个图示涵盖一个概念

评论

支持 Markdown