前端代码仓库切片分析
MCP 服务配置
复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用
{
"mcpServers": {
"frontend-code-skimmers": {
"args": [
"-y",
"@jokeran/frontend-code-skimmer@latest"
],
"autoApprove": [
"skimmer_index_project",
"skimmer_get_component_outline",
"skimmer_find_symbol",
"skimmer_get_code_slice",
"skimmer_trace_assignments",
"skimmer_trace_property_changes",
"skimmer_find_by_behavior",
"skimmer_trace_api_calls",
"skimmer_get_call_graph",
"skimmer_trace_key_flow",
"skimmer_visualize_dataflow",
"skimmer_get_blast_radius",
"skimmer_get_project_overview",
"skimmer_trace_data_lifecycle"
],
"command": "npx",
"disabled": false
}
}
}服务介绍
不读全文，只看骨架；不搜字符，搜语义关联。
AI 代码助手的智能代码索引引擎，面向 Vue 2 / Vue 3 / React / 纯 TS/JS 工具模块 的结构化检索与影响分析场景。
当前版本的能力重点：
支持 Vue 2、Vue 3、React 组件/模块索引
precision_mode="precise" 支持 JS / JSX / TS / TSX 的跨文件 import/export 精确绑定
对 纯 TS/JS 工具类模块 提供基础符号提取（class / method / function / constant）
skimmer_index_health 可显示真实失败文件与错误信息，便于排障
7000 行大文件：skimmer_get_component_outline 将其压缩为 60 行骨架，节省 95% Token
函数名拼写错误：搜 changeCash 能找到 changeCashValue，自动提示 "cash 可能是 cache 的拼写错误"
不知道函数名：skimmer_find_by_behavior 按行为搜索，搜 storage 直接列出所有操作 localStorage 的函数
同名函数串台：skimmer_find_symbol / skimmer_find_by_behavior / skimmer_get_call_graph 支持 file_path 过滤
修改前评估影响：skimmer_get_blast_radius 告诉你改一个函数会影响哪些地方
变量数据流追踪：skimmer_trace_data_lifecycle 一次调用聚合声明、属性修改、参数传递、Storage 落点 4 个维度
索引过期行号偏移：skimmer_get_component_outline 和 skimmer_get_code_slice 会自动检测索引是否过期并给出警告
纯 TS/JS 工具类模块也能审：支持提取 class、method、top-level function、const，适合 parser / indexer / cache / CLI / MCP 工具模块
跨文件 import 关系误判少：precise 模式会识别本地 shadowing，import 名在局部作用域被参数/变量遮蔽时不会误标为精确边
索引坏了怎么查：skimmer_index_health 可直接看到失败文件数量、最近失败文件和错误摘要
