Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
代码导读技能：帮助快速理解不熟悉的项目或模块，建立心智模型. An agent skill from 312362115/claude.
Install Code Walkthrough
$ npx skills add 312362115/claude --skill code-walkthrough -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install 312362115/claude code-walkthrough --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/code-walkthrough .claude/skills/code-walkthrough && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "code-walkthrough" agent skill from https://github.com/312362115/claude/tree/main/skills/code-walkthrough into .claude/skills/code-walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-walkthrough", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/312362115/claude/tree/main/skills/code-walkthroughType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add 312362115/claude --skill code-walkthrough -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install 312362115/claude code-walkthrough --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/code-walkthrough .agents/skills/code-walkthrough && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "code-walkthrough" agent skill from https://github.com/312362115/claude/tree/main/skills/code-walkthrough into .agents/skills/code-walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-walkthrough", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add 312362115/claude --skill code-walkthrough -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install 312362115/claude code-walkthrough --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/code-walkthrough .cursor/skills/code-walkthrough && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "code-walkthrough" agent skill from https://github.com/312362115/claude/tree/main/skills/code-walkthrough into .cursor/skills/code-walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-walkthrough", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/312362115/claude.git --path skills/code-walkthrough--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add 312362115/claude --skill code-walkthrough -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install 312362115/claude code-walkthrough --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/code-walkthrough .gemini/skills/code-walkthrough && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "code-walkthrough" agent skill from https://github.com/312362115/claude/tree/main/skills/code-walkthrough into .gemini/skills/code-walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-walkthrough", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install 312362115/claude code-walkthroughInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add 312362115/claude --skill code-walkthrough -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/code-walkthrough .github/skills/code-walkthrough && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "code-walkthrough" agent skill from https://github.com/312362115/claude/tree/main/skills/code-walkthrough into .github/skills/code-walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-walkthrough", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add 312362115/claude --skill code-walkthrough -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install 312362115/claude code-walkthrough --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/312362115/claude.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/code-walkthrough .opencode/skills/code-walkthrough && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "code-walkthrough" agent skill from https://github.com/312362115/claude/tree/main/skills/code-walkthrough into .opencode/skills/code-walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-walkthrough", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
code-walkthrough- GitHub stars
- 107
- Token cost
- ~1k tokens
- SKILL.md length
- 95 words
- Files
- 1
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- MIT
At a glance
代码导读技能：帮助快速理解不熟悉的项目或模块，建立心智模型. An agent skill from 312362115/claude.
- Development work in your project
- SKILL.md covers 第一步：确定导读范围和深度, 第二步：全局扫描, 第三步：分层梳理 and 第四步：输出导读文档, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Code Walkthrough is an agent skill from 312362115/claude. 代码导读技能：帮助快速理解不熟悉的项目或模块，建立心智模型。 从全局架构到核心流程再到关键设计决策，分层递进地梳理代码。 不是简单地读文件列目录，而是提炼出"这段代码在做什么、为什么这么做、和其他部分怎么连接"。 触发词：帮我梳理一下、这块代码怎么运作的、导读、接手项目、看看这个模块、代码走读、walkthrough。 触发场景：接手新项目、进入不熟悉的模块、重构前理解现状、Code Review 需要理解上下文。 即使用户没有说"导读"，只要意图是"理解一段不熟悉的代码"，都应触发此技能。
Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development. The licence is MIT.
When your agent uses it
- Development work in your project
Example prompts
- “这段代码在做什么、为什么这么做、和其他部分怎么连接”
- “，只要意图是”
- “/code-walkthrough”
What it can do on your machine
Read from SKILL.md and the folder at commit 2d4fa49. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Code Walkthrough loads about 1k tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 95 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NoteMentions a .env fileSKILL.md:142
- 环境变量从 `.env` 加载，必填项在 `src/config.ts` 中校验
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from 312362115/claude at commit 2d4fa49, republished under its MIT licence (© 312362115). 95 words, ~1,012 tokens.
Download SKILL.mdSave it as
.claude/skills/code-walkthrough/SKILL.md (or your agent's skills folder).- name
- code-walkthrough
- description
- 代码导读技能：帮助快速理解不熟悉的项目或模块，建立心智模型。 从全局架构到核心流程再到关键设计决策，分层递进地梳理代码。 不是简单地读文件列目录，而是提炼出"这段代码在做什么、为什么这么做、和其他部分怎么连接"。 触发词：帮我梳理一下、这块代码怎么运作的、导读、接手项目、看看这个模块、代码走读、walkthrough。 触发场景：接手新项目、进入不熟悉的模块、重构前理解现状、Code Review 需要理解上下文。 即使用户没有说"导读"，只要意图是"理解一段不熟悉的代码"，都应触发此技能。
- version
- 1.0.0
- last_updated
- 2026-04-08
- repository
- https://github.com/312362115/claude
代码导读（Code Walkthrough）
读代码和读书一样——先看目录了解结构，再看核心章节理解逻辑，最后看细节。 不是逐行翻译代码，而是帮读者建立"这个系统怎么运转"的心智模型。
第一步：确定导读范围和深度
导读请求
│
├─ 整个项目？
│ └─ 全局导读：项目架构 → 模块职责 → 核心流程 → 关键决策
│
├─ 某个模块/目录？
│ └─ 模块导读：模块职责 → 内部结构 → 核心逻辑 → 对外接口
│
└─ 某个具体功能/流程？
└─ 流程导读：入口 → 数据流 → 关键分支 → 输出用 AskUserQuestion 确认：
- 导读目标：看什么？整个项目、某个模块、还是某个功能？
- 导读目的：为什么要看？接手维护、准备改动、还是纯了解？
- 已有认知：对这块代码已经了解多少？（避免输出用户已知的信息）
第二步：全局扫描
不管导读什么范围，先花 2-3 个工具调用建立全局感知：
2.1 项目全局（如果是项目/模块导读）
1. 读项目根目录结构（ls / Glob）
2. 读配置文件（package.json / pyproject.toml / tsconfig.json）
3. 读 README / CLAUDE.md / docs/（如果有）
4. 检查 git log 最近 20 条提交（了解活跃区域）提取关键信息：
- 技术栈：语言、框架、主要依赖
- 项目类型：前端应用 / 后端服务 / 全栈 / CLI 工具 / 库
- 目录组织：按功能分还是按类型分？有没有约定
2.2 目标区域
定位到导读目标后，了解：
- 入口文件：这个模块/功能从哪里开始？
- 文件清单：涉及哪些文件？各自大概多少行？
- 依赖关系：依赖了什么外部模块？被谁依赖？
第三步：分层梳理
按照 架构 → 流程 → 细节 的顺序递进，每一层解决不同的问题。
Layer 1：架构层 — "系统由什么组成"
回答：这个系统/模块的整体结构是什么？各部分各司什么职？
输出格式：
## 架构概览
### 模块组成
- `src/api/` — API 路由层，接收请求、参数校验、调用 service
- `src/services/` — 业务逻辑层，核心计算和编排
- `src/models/` — 数据模型，定义实体和数据库交互
- `src/utils/` — 工具函数，无业务语义
### 依赖关系
api → services → models
↓
utils
### 数据流向
请求 → 路由 → 中间件（认证/校验）→ service → model → 数据库
↓
响应 ← 路由 ← ─────────────────────── service ← modelLayer 2：流程层 — "核心功能怎么运转"
回答：一个请求/操作从头到尾经过了哪些步骤？
选择 1-3 个最核心的流程做详细走读：
## 核心流程
### 流程 1：用户登录
1. `POST /api/login` → `src/api/auth.ts:handleLogin()`
- 参数校验：email + password
2. → `src/services/auth.ts:login()`
- 查询用户：`UserModel.findByEmail(email)`
- 验证密码：`bcrypt.compare(password, user.hash)`
- 生成 token：`jwt.sign({ userId: user.id }, secret, { expiresIn: '7d' })`
3. → 返回：`{ token, user: { id, name, email } }`
关键点：
- token 过期时间 7 天，写死在代码里（可能需要改为配置）
- 密码验证用 bcrypt，安全
- 没有登录失败次数限制Layer 3：细节层 — "关键设计决策和隐含知识"
回答：为什么这么写？有什么不明显的约定或陷阱？
## 关键设计决策
### 决策 1：为什么用 Redis 做 session 而不是 JWT 无状态？
- 见 `docs/specs/2026-03-23-auth-session-design.md`（如果有文档）
- 或从代码推断：支持主动注销（删 Redis key 即失效）
### 决策 2：为什么 UserModel 同时用了 ORM 和 raw SQL？
- ORM 用于常规 CRUD
- raw SQL 用于复杂聚合查询（`src/models/user.ts:237` 的注释说明了原因）
## 隐含约定
- 所有 API 响应统一包装为 `{ code, data, message }` 格式（见 `src/middleware/response.ts`）
- 错误处理走全局 error handler（`src/middleware/error.ts`），不需要每个路由单独 catch
- 环境变量从 `.env` 加载，必填项在 `src/config.ts` 中校验
## 注意事项 / 潜在风险
- `src/services/order.ts:89` — 库存扣减没有并发保护
- `src/utils/cache.ts` — 缓存 key 没有 namespace，多服务共用可能冲突第四步：输出导读文档
输出格式
根据导读深度选择输出方式：
| 深度 | 输出 |
|---|---|
| 快速了解（聊天中回答） | 直接在对话中输出，不存文件 |
| 完整导读（需要沉淀） | 写入 docs/guides/<模块名>-walkthrough.md |
完整导读文档结构
# 代码导读：<模块/项目名>
> 一句话概括这个模块/项目做什么
## 技术栈
- 语言/框架/主要依赖
## 架构概览
（Layer 1 的输出）
## 核心流程
（Layer 2 的输出，1-3 个关键流程）
## 关键设计决策
（Layer 3 的输出）
## 隐含约定
（不写在代码注释里但需要知道的规则）
## 注意事项
（潜在风险、技术债、容易踩的坑）
## 相关文档
- 指向 docs/ 下的相关 spec、plan、decision导读准则
- 不逐行翻译：读者是开发者，能读代码。导读要提炼的是"代码没直接告诉你的东西"——架构意图、设计理由、隐含约定
- 先宏观后微观：先给全景地图，再放大关键区域。不要一上来就钻进某个函数
- 关注连接：模块之间怎么交互？数据怎么流转？比单个模块内部逻辑更重要
- 标注位置：提到具体逻辑时标注
文件:行号，方便读者跳转查看 - 诚实说不知道：如果某个设计决策从代码看不出原因，说"从代码推断可能是因为 X，但不确定"，不要编理由
- 按读者水平调整：用户说"我是 Go 高手但不懂 React"，就用 Go 的类比解释 React 的概念
与其他 skill 的关系
接手新项目 → code-walkthrough（建立心智模型）
↓
准备改动 → refactoring（影响分析可以复用导读的架构理解）
↓
改动前评估 → dependency-map（导读关注"是什么"，依赖分析关注"改了影响谁"）code-walkthrough vs dependency-map 的区别：
- code-walkthrough：理解代码，回答"这是什么、怎么运转、为什么这么写"
- dependency-map：评估影响，回答"改这里会动到哪里"
- 通常先 walkthrough 理解，再 dependency-map 评估影响
© 312362115, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/code-walkthrough of 312362115/claude.
Open the folder on GitHubat commit 2d4fa49
Compare with similar skills
Code Walkthrough next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Code Walkthrough this skill312362115/claude | 107 | — | ~1k | Automated safety check: Notes | MIT | |
| Vercel Composition Patternssupabase/supabase | 111k | 59 repos | ~726 | Automated safety check: Pass | MIT | |
| Finishing a Development Branchobra/superpowers | 296k | 5 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Typescript Advanced Typesrolling-scopes/rsschool-app | 10k | 25 repos | ~4.2k | Automated safety check: Pass | MPL-2.0 | |
| PR Babysitteropeninterpreter/openinterpreter | 69k | 3 repos | ~4.2k | Automated safety check: Pass | Apache-2.0 | |
| Code Review ChecklistshareAI-lab/learn-claude-code | 78k | 5 repos | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
- Official
Finishing a Development Branch
obra/superpowers
Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.
Typescript Advanced Types
rolling-scopes/rsschool-app
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.
PR Babysitter
openinterpreter/openinterpreter
Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.
Code Review Checklist
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
Greploop
onyx-dot-app/onyx
Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.
More from 312362115/claude
All 20 skills in this repoDiagram
312362115/claude
专业图表生成技能：根据需求自动选择合适的图表类型，生成符合设计规范的 PNG 图表. An agent skill from 312362115/claude.
Deep Research
312362115/claude
深度调研技能：对任意命题进行系统性调研并输出专业研究报告. An agent skill from 312362115/claude.
Preview Md
312362115/claude
MD 文件浏览器预览：GitHub 风格渲染 + 左侧自动目录. An agent skill from 312362115/claude.
Writing
312362115/claude
通用写作技能：以"内容→组件→组合"的方式产出技术文档、产品文档、汇报材料. An agent skill from 312362115/claude.
DB Review
312362115/claude
数据库代码审查 + Migration 安全检查. An agent skill from 312362115/claude.
Dependency Map
312362115/claude
依赖关系分析技能：回答"改这里会影响哪里". An agent skill from 312362115/claude.
Related
Categories
Questions about Code Walkthrough
What does Code Walkthrough do?
代码导读技能：帮助快速理解不熟悉的项目或模块，建立心智模型. An agent skill from 312362115/claude. Code Walkthrough is an agent skill from 312362115/claude.
When should I use Code Walkthrough?
Code Walkthrough fits situations like: development work in your project.
How do I install Code Walkthrough in Claude Code?
Run `npx skills add 312362115/claude --skill code-walkthrough -a claude-code`. Or copy the skill folder (skills/code-walkthrough in 312362115/claude) into .claude/skills/code-walkthrough in your project. Claude Code loads it when a task matches its description.
How do I install Code Walkthrough in Codex?
Run `npx skills add 312362115/claude --skill code-walkthrough -a codex`. Or copy the skill folder (skills/code-walkthrough in 312362115/claude) into .agents/skills/code-walkthrough in your project. Codex loads it when a task matches its description.
Can I use Code Walkthrough in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add 312362115/claude --skill code-walkthrough -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/code-walkthrough, .gemini/skills/code-walkthrough, .github/skills/code-walkthrough and .opencode/skills/code-walkthrough in your project.
What does Code Walkthrough need to run?
SKILL.md names no scripts, command-line tools or credentials: Code Walkthrough is instructions for the agent only.
Does Code Walkthrough access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Code Walkthrough safe to install?
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Code Walkthrough use?
Code Walkthrough is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Code Walkthrough use?
About 1k tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Code Walkthrough?
Skills that share tags, products or a category with Code Walkthrough: Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 296k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars) and PR Babysitter (openinterpreter/openinterpreter, 69k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Code Walkthrough?
312362115 (a GitHub user) maintains it in 312362115/claude, which has 107 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on May 14, 2026.
Source: 312362115/claude on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.