Claude Code code-explainer 技能：按关键组件讲解代码流程
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/code-explainer/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/code-explainer/`，把核对后的文件保存为 `.claude/skills/code-explainer/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/code-explainer`。
中文摘要
从给定片段说明主要函数、设计意图、调用顺序和需要注意的边界行为。
SKILL.md 中文导读
可复现示例
调用 /code-explainer，以下面虚构预览代码材料为例，写给刚接手的开发者。
file `PreviewPanel.ts` | function `visibleRoutes` removes rows with hidden=true
`showPreview` renders the remaining names and displays `No routes` when the result is empty
sample `Oak:visible`, `Lake:hidden`工作步骤
- 识别片段中的关键函数及关系。
- 从输入按顺序追踪到界面输出。
- 说明边界行为和可能的维护检查。
验收方法
说明 `visibleRoutes` 排除 `Lake:hidden` 后，`showPreview` 显示 `Oak:visible` 对应的名称。所有项目隐藏时，用 `No routes` 说明空态。
GitHub 原文 · 更新日期
适用环境
可以读取你提供的代码片段的 Claude Code 项目。示例使用虚构个人学习工程。
常见问题
怎么让代码讲解适合新加入的同事？
先列主要组件和职责，再按输入、流程与输出讲解，并补上重要边界。