🚀 完整的 Claude Code Skills + Chrome DevTools MCP + Research Assistant 集成方案
这是一个专门用于研究和测试 Claude Code Skills 以及 MCP (Model Context Protocol) 集成的项目。包含完整的安装脚本、配置指南和标准技能包实现。
CNB 开发环境: 本项目已配置 CNB (云原生构建) 自定义开发环境,基于 Ubuntu 22.04 + Python 3.11 + Node.js 22。详见 CNB_SETUP_GUIDE.md 和 CNB_CODEBUDDY_PROMPTS.md
echo 'zh_CN.UTF-8 UTF-8' | tee -a /etc/locale.gen > /dev/null && \
locale-gen zh_CN.UTF-8 && \
echo 'LANG=zh_CN.UTF-8
LANGUAGE=zh_CN:zh
LC_ALL=zh_CN.UTF-8' | tee /workspace/chinese.sh
使用完整的安装脚本,自动配置所有组件:
# 在终端中运行安装脚本
bash /workspace/install-claude-code.sh
安装内容:
注意: 安装脚本完成后,还需要在 Claude Code 中按步骤激活技能包
位置: ~/.config/claude/mcp.json
端口: http://localhost:9222
文档: chrome-devtools-install.md
使用示例:
"打开 https://example.com 并检查页面标题"
"监控网络请求,找出所有 API 调用"
"分析页面的加载性能"
位置: /workspace/research-assistant/skills/research-assistant/
文档: research-assistant/skills/research-assistant/README.md
结构:
skills/research-assistant/ ├── SKILL.md # 核心技能定义 (必需) ├── README.md # 使用指南 ├── references/ # 参考文档 (1个) │ └── commands.md ├── examples/ # 示例 (1个) │ └── basic-research.sh └── scripts/ # 工具 (1个) └── validate-setup.sh
验证:
cd /workspace/research-assistant
bash skills/research-assistant/scripts/validate-setup.sh
文档: skill-development-install.md 用途: 创建符合规范的标准技能包
配置文件: .cnb.yml, .ide/Dockerfile
文档: CNB_SETUP_GUIDE.md
提示词模板: CNB_CODEBUDDY_PROMPTS.md
环境规格:
快速开始:
# 验证环境
bash /workspace/verify-cnb-env.sh
# 查看配置
cat /workspace/.cnb.yml
cat /workspace/.ide/Dockerfile
使用提示词模板: 参考 CNB_CODEBUDDY_PROMPTS.md 为不同类型的项目配置 CNB 环境。
# 在终端中运行,自动安装所有组件
bash /workspace/install-claude-code.sh
安装内容:
在 Claude Code 中输入以下提示词(复制完整内容):
请参考 ./.claude/skills/chrome-devtools/README.md 文档,帮我安装和配置 Chrome DevTools MCP 技能包到项目级目录。 具体要求: 1. 创建项目级技能包目录 - 创建目录: ./.claude/skills/chrome-devtools/ - 确保目录结构符合规范 2. 下载并配置 Chrome DevTools MCP - 安装 Chromium 浏览器 (需要 143.0.7499.192+) - 安装 chrome-devtools-mcp (需要 0.12.1+) - 检查 Node.js 版本 (需要 v22.14.0+) 3. 配置 MCP 服务到 ~/.config/claude/mcp.json - 创建配置目录 ~/.config/claude - 写入正确的 JSON 配置 - 验证 JSON 格式正确 4. 启动 Chrome 调试服务(端口 9222) - 使用优化的启动参数(参考 ./.claude/skills/chrome-devtools/README.md) - 确保包含 --disable-dev-shm-usage(容器环境必需) - 后台运行 Chrome 进程 5. 验证安装是否成功 - 运行验证脚本: bash ./.claude/skills/chrome-devtools/scripts/validate-setup.sh - 检查 Chrome 进程是否运行 - 测试端口 http://localhost:9222/json/version 是否可访问 如果遇到问题,请参考 ./.claude/skills/chrome-devtools/references/troubleshooting.md
在 Claude Code 中输入以下提示词(复制完整内容):
请参考 ./skill-development-install.md 文档,帮我安装 Skill Development 技能包到项目级目录。 具体要求: 1. 创建项目级技能包目录 - 创建目录: ./.claude/skills/skill-development/ - 确保目录结构符合规范 2. 下载官方 Skill Development 技能包 - 从官方仓库下载 SKILL.md - 保存到: ./.claude/skills/skill-development/SKILL.md - 验证文件下载成功 3. 验证技能包安装成功 - 检查文件是否存在 - 验证 SKILL.md 格式正确 - 确认包含完整的技能定义 4. 了解如何使用它创建标准技能包 - 学习 SKILL.md 文件的格式要求 - 了解 frontmatter、触发短语、命令式写作风格 - 掌握 references/、examples/、scripts/ 目录的使用 5. 创建第一个技能包作为练习 - 在 ./.claude/skills/ 下创建新技能包 - 使用模板创建简单技能包 - 运行验证脚本检查合规性
在 Claude Code 中输入以下提示词(复制完整内容):
请识别并激活本地的 Research Assistant 标准技能包。 具体要求: 1. 识别技能包位置 - 主路径: ./research-assistant/skills/research-assistant/ - 项目级路径: ./.claude/skills/research-assistant/ - 确认这是符合官方规范的标准技能包 2. 创建项目级技能包目录并复制文件 - 创建目录: ./.claude/skills/research-assistant/ - 复制所有文件到项目级目录 - 保持完整的目录结构 3. 验证技能包结构是否符合规范 - 检查必需文件: SKILL.md, README.md - 检查目录: references/, examples/, scripts/ - 验证 SKILL.md 的 frontmatter 格式 4. 运行验证脚本确认技能包可用 - 执行: bash ./.claude/skills/research-assistant/scripts/validate-setup.sh - 修复任何发现的问题 5. 了解如何使用该技能包进行研究 - 学习基本命令: research, discover, deep-research - 了解参数: -m (模式), -d (深度), -f (格式) - 掌握在线/离线模式的区别
在 Claude Code 中输入以下提示词(复制完整内容):
请使用 Research Assistant 技能包研究以下主题: 主题:[你想研究的技能或技术,例如 "React Hooks"、"Chrome DevTools Protocol"、"Odoo ERP"] 具体要求: 1. 研究模式 - 在线模式 (-m online): 获取最新信息,需要网络连接 - 离线模式 (-m offline): 使用本地知识库,无需网络 2. 研究深度 - 深度 1-2: 快速概览,适合初步了解 - 深度 3-4: 详细分析,适合深入学习 - 深度 5+: 全面研究,适合专业需求 3. 输出格式 - Markdown (-f markdown): 适合文档和报告 - JSON (-f json): 适合程序处理 - 文本 (-f text): 简单文本格式 4. 输出位置 - 默认: 当前目录 - 指定: -o ./research-output 完整示例: node src/main.js research "React Hooks" -m online -d 4 -f markdown -o ./research-output 其他常用命令: - 技能发现: node src/skills-main.js discover "odoo" --limit 10 - 环境检查: node src/main.js check-env - 快速测试: node src/skills-main.js quick-test
更多使用示例:
// 技术研究
"Research Chrome DevTools Protocol with depth 4 in online mode"
// 技能发现
"Use skills-main.js to discover odoo skills with limit 10"
// 性能分析
"Analyze React performance with online research depth 3"
// 批量研究
"Research multiple topics: React, Vue, Angular with depth 2"
在 Claude Code 中输入:
请使用 Research Assistant 研究 React Hooks,要求: - 模式:在线(获取最新信息) - 深度:4(详细分析) - 格式:Markdown - 输出:./research-output/react-hooks.md
对应的命令:
cd /workspace/research-assistant
node src/main.js research "React Hooks" -m online -d 4 -f markdown -o ./research-output
在 Claude Code 中输入:
请使用 Research Assistant 的技能发现功能,查找所有与 Odoo 相关的技能包,限制显示前 10 个。
对应的命令:
cd /workspace/research-assistant
node src/skills-main.js discover "odoo" --limit 10
在 Claude Code 中输入:
请深度研究 Chrome DevTools Protocol,包括: 1. 基础概念和架构 2. 性能分析能力 3. 自动化测试场景 4. 最佳实践 使用在线模式,深度 4,输出为 Markdown。
对应的命令:
cd /workspace/research-assistant
node src/main.js research "Chrome DevTools Protocol" -m online -d 4 -f markdown
在 Claude Code 中输入:
请使用离线模式快速查询关于 "obsidian knowledge base" 的信息,深度 2。
对应的命令:
cd /workspace/research-assistant
node src/main.js research "obsidian knowledge base" -m offline -d 2
如果需要手动安装或了解详细步骤,请查看对应的文档:
# 基础研究
node src/main.js research "topic" -m offline -d 2
node src/main.js research "topic" -m online -d 4 -f markdown
# 技能发现
node src/skills-main.js discover "keyword" --limit 10
node src/skills-main.js deep-research "skill-name" --max 5
# 环境检查
node src/main.js check-env
node src/skills-main.js quick-test
# 运行示例
node src/main.js example
bash skills/research-assistant/examples/basic-research.sh
# 启动服务
bash /workspace/start-chrome-debug.sh
# 检查状态
curl http://localhost:9222/json/version
# 停止服务
pkill -f "chrome.*remote-debugging-port=9222"
# 查看配置
cat ~/.config/claude/mcp.json
# 验证权限
cat ~/.claude/settings.local.json
workspace/ ├── README.md # 本文件(项目总览) ├── CNB_SETUP_GUIDE.md # CNB 配置指南 ⭐ ├── CNB_CODEBUDDY_PROMPTS.md # CNB CodeBuddy 提示词模板 ⭐ ├── CNB_QUICK_REFERENCE.md # CNB 快速参考 ⭐ ├── .cnb.yml # CNB 启动流水线配置 ⭐ ├── .ide/ # CNB 自定义镜像 ⭐ │ └── Dockerfile # 自定义 Dockerfile ├── install-claude-code.sh # 一键安装脚本 ├── verify-cnb-env.sh # CNB 环境验证脚本 ⭐ ├── chrome-devtools-install.md # Chrome DevTools 指南 ├── skill-development-install.md # Skill Development 指南 ├── PROMPT_TEMPLATES.md # 提示词模板库 │ ├── .claude/ # Claude 配置 │ ├── settings.local.json # MCP 权限配置 │ └── skills/ # 项目级技能包目录 ⭐ │ ├── skill-development/ # Skill Development 技能包 │ │ └── SKILL.md # 官方技能定义 │ ├── research-assistant/ # Research Assistant 技能包 │ │ ├── SKILL.md # 技能定义 │ │ ├── README.md # 使用指南 │ │ ├── references/ # 参考文档 │ │ ├── examples/ # 示例 │ │ └── scripts/ # 工具 │ ├── quick-research/ # Quick Research 技能包 │ │ ├── SKILL.md # 技能定义 │ │ ├── README.md # 使用指南 │ │ ├── references/ # 参考文档 │ │ ├── examples/ # 示例 │ │ ├── scripts/ # 工具 │ │ └── src/ # 源代码 │ └── chrome-devtools/ # Chrome DevTools 技能包 │ ├── SKILL.md # 技能定义 │ ├── README.md # 使用指南 │ ├── references/ # 参考文档 │ ├── examples/ # 示例 │ └── scripts/ # 工具 │ ├── research-assistant/ # 核心应用(源代码) │ ├── src/ # 源代码 (11个核心文件) │ ├── knowledge-base/ # 知识库 │ ├── config.json # 配置文件 │ └── package.json # 依赖配置 │ ├── beremiz_debug_tools/ # Beremiz 调试工具 │ ├── beremiz_deploy.sh # 一键部署脚本 │ ├── verify_setup.py # 验证工具 │ └── README.md │ └── my-skills/ # 技能包开发目录(可选) └── quick-research/ # 练习技能包 ├── SKILL.md ├── README.md ├── references/ ├── examples/ ├── scripts/ └── src/
说明:
.claude/skills/: 项目级技能包目录,Claude Code 自动识别my-skills/: 技能包开发和测试目录research-assistant/: 核心应用源代码"Research React 18 new features with depth 4"
"Analyze Chrome DevTools Protocol performance"
"Investigate web accessibility best practices"
"Install skill-development skill package"
"Create a new skill following standard structure"
"Validate my skill package compliance"
"Open https://example.com and analyze performance"
"Monitor network requests on https://api.example.com"
"Check accessibility of https://example.com"
# 检查权限
sudo bash /workspace/install-claude-code.sh
# 或手动安装关键组件
sudo apt update && sudo apt install -y chromium
npm install -g chrome-devtools-mcp
# 1. 检查 Chrome 是否运行
pgrep -f "chrome.*remote-debugging-port=9222"
# 2. 如果未运行,启动服务
bash /workspace/start-chrome-debug.sh
# 3. 验证端口可访问
curl http://localhost:9222/json/version
# 4. 检查 MCP 配置
cat ~/.config/claude/mcp.json
# 1. 验证技能包结构
cd /workspace/research-assistant
bash skills/research-assistant/scripts/validate-setup.sh
# 2. 检查环境
node src/main.js check-env
# 3. 修复权限
chmod +x src/main.js
chmod +x skills/research-assistant/scripts/*.sh
chmod +x skills/research-assistant/examples/*.sh
# 1. 检查 MCP 配置
cat ~/.config/claude/mcp.json
# 2. 验证权限配置
cat ~/.claude/settings.local.json
# 3. 重新加载 Claude Code
# 使用 /reload 命令或重启 Claude Code
# 4. 测试技能是否可用
# 在 Claude Code 中输入: "Research test"
# 检查网络连接
curl -I https://api.github.com
# 如果网络受限,使用离线模式
cd /workspace/research-assistant
node src/main.js research "topic" -m offline -d 2
# 检查知识库内容
cat knowledge-base/default.json | head -20
| 问题 | 解决方案 |
|---|---|
| udev/upower 冲突 | 使用 chromium 包,修改 postinst 脚本 |
| Chromium 包名 | 使用 chromium 而非 chromium-browser |
| 无 X server | 使用 --headless=new 参数 |
| 下载速度慢 | 配置清华镜像源 |
| MCP 配置路径 | 正确配置 ~/.config/claude/mcp.json |
| Chrome 调试端口 | 确保 9222 端口可访问 |
| 技能包结构 | 符合官方标准规范 |
# 1. 安装 Skill Development 技能
"Install skill-development skill package to ./.claude/skills/"
# 2. 创建项目级技能包目录
mkdir -p ./.claude/skills/your-skill/{references,examples,scripts,src}
# 3. 使用 Skill Development 创建技能包
"Create a skill package for [your purpose] in ./.claude/skills/"
# 4. 验证合规性
bash ./.claude/skills/your-skill/scripts/validate-setup.sh
./.claude/skills/ - 自动被 Claude Code 识别(推荐)./my-skills/ - 用于开发和测试~/.claude/skills/ - 用户级技能包(不推荐用于项目)bash /workspace/install-claude-code.sh当你在提示词中提供了明确的执行方式(如使用缓存、特定脚本)时,Claude Code 必须严格遵守,不得自行假设或尝试其他方法。
错误示例(不遵循指令):
部署Beremiz调试环境 # 模糊指令,导致自行尝试build
正确示例(严格遵循):
部署Beremiz调试环境,要求: 1. wxPython使用beremiz_cache中的缓存,严禁从源码build 2. 兼容性问题必须使用fix_library_links.py解决 3. 遇到任何问题时,首先检查缓存和指定脚本,不得尝试其他安装方式
使用以下模板格式,让 Claude Code 更好地理解你的需求:
请参考 [文档路径] 完成 [具体任务] 执行原则(必须严格遵守): 1. 严格按指定方式操作,不得自行尝试其他方法 2. 使用指定的缓存/脚本/工具,不得build或使用替代方案 3. 遇到问题时,首先检查缓存和指定脚本 具体要求: 1. [步骤1] - [详细说明,明确指定使用什么 2. [步骤2] - [详细说明,明确指定使用什么 3. [步骤3] - [详细说明,明确指定使用什么 注意事项: - [重要提示1] - [重要提示2] - [遇到问题时的解决方案:首先检查XX,然后使用XX脚本]
部署Beremiz调试环境,严格遵守以下原则: ⚠️ 执行原则(必须严格遵守,不得违背): 1. wxPython必须使用beremiz_cache中的缓存wheel文件,严禁从源码build 2. 兼容性问题必须使用fix_library_links.py脚本解决,不得尝试其他方法 3. 遇到任何问题时,首先检查缓存文件和运行指定脚本,不得自行尝试其他安装方式 4. 所有依赖从缓存或指定脚本获取,不得使用apt/pip直接下载编译 具体步骤: 1. 检查beremiz_cache目录内容 - 确认wxPython-4.2.1-cp311-cp311-linux_x86_64.whl存在 - 确认beremiz.tar.gz存在 - 确认fix_library_links.py在beremiz_debug_tools目录 2. 安装wxPython(仅使用缓存) - 执行: pip install /workspace/beremiz_cache/wxPython-4.2.1-cp311-cp311-linux_x86_64.whl - 禁止尝试: pip install wxPython(会触发build) 3. 提取Beremiz(仅使用缓存) - 执行: tar -xzf /workspace/beremiz_cache/beremiz.tar.gz - 禁止尝试: git clone或下载其他版本 4. 修复兼容性(仅使用指定脚本) - 执行: python3 /workspace/beremiz_debug_tools/fix_library_links.py - 禁止尝试: 手动配置ldconfig或修改软链接 5. 验证安装 - 测试: python3 -c "import wx; print(wx.__version__)" - 测试: cd /workspace/beremiz && python3 Beremiz.py --help 注意事项: - 如果缓存文件缺失,立即停止并报告,不得尝试其他方式 - 如果fix_library_links.py执行失败,查看脚本输出的错误信息,不得自行修复 - 如果遇到import错误,首先检查是否正确使用了缓存和脚本 - 整个过程严禁任何build操作(make、pip install无wheel的包、源码编译等)
请参考 /workspace/chrome-devtools-install.md 文档,帮我安装和配置 Chrome DevTools MCP 技能包。 具体要求: 1. 检查所有依赖版本是否符合要求 2. 使用文档中推荐的一键安装脚本 3. 启动服务并验证端口可访问 4. 如果遇到 apt 错误,忽略 udev/upower 警告 验证标准: - chromium --version 显示正确版本 - curl http://localhost:9222/json/version 返回正确 JSON
请识别并激活本地的标准技能包。 具体要求: 1. 验证技能包结构完整性 2. 检查 SKILL.md 的 frontmatter 格式 3. 运行验证脚本修复问题 4. 确认技能包在 Claude Code 中可用 需要检查的文件: - SKILL.md (必需) - README.md (推荐) - references/ 目录 - examples/ 目录
请使用 Research Assistant 研究 [主题]。 具体要求: - 模式: 在线/离线 - 深度: 1-5 (推荐 4) - 格式: Markdown - 输出: 指定目录 研究重点: 1. 基础概念和核心原理 2. 实际应用场景 3. 最佳实践和常见问题 4. 进阶技巧和高级功能
❌ 错误示例(不遵循明确指令):
部署Beremiz调试环境 结果: - AI尝试从PyPI下载wxPython - 遇到版本冲突时尝试build源码 - 浪费大量时间编译 - 可能导致环境混乱
✅ 正确示例(严格遵循明确指令):
部署Beremiz调试环境,要求: 1. wxPython使用beremiz_cache中的缓存 2. 兼容性问题使用fix_library_links.py 3. 禁止任何build操作 结果: - 直接安装缓存wheel文件(秒级完成) - 运行fix_library_links.py快速修复依赖 - 避免不必要的编译等待 - 环境干净可靠
关键差异:
请帮我完成完整的技能包安装流程: 第一阶段:安装 Chrome DevTools 参考 /workspace/chrome-devtools-install.md,完成: 1. 安装 Chromium 和 Chrome DevTools MCP 2. 配置 ~/.config/claude/mcp.json 3. 启动调试服务并验证 第二阶段:激活 Research Assistant 参考 /workspace/README.md 步骤 4,完成: 1. 验证技能包结构 2. 运行验证脚本 3. 测试基本功能 第三阶段:开始研究 使用 Research Assistant 研究 "Chrome DevTools Protocol": - 模式:在线 - 深度:4 - 格式:Markdown - 输出:./research-output
请帮我诊断 Chrome DevTools MCP 的问题: 当前症状:[描述问题] 诊断步骤: 1. 运行 ~/diagnose-chrome-mcp.sh 检查所有组件 2. 检查 /tmp/chrome-debug.log 中的错误信息 3. 验证端口 9222 是否被占用 4. 检查 ~/.config/claude/mcp.json 配置 如果发现以下问题,请按文档中的方案修复: - apt 安装错误 - 端口冲突 - 权限问题 - 配置文件错误
# 完整安装(推荐)
bash /workspace/install-claude-code.sh
# Chrome DevTools 专用
bash /workspace/install-chrome-mcp.sh
# 诊断问题
~/diagnose-chrome-mcp.sh
# 启动服务
~/start-chrome-debug.sh
# 基础研究
node src/main.js research "topic" -m offline -d 2
# 在线详细研究
node src/main.js research "topic" -m online -d 4 -f markdown
# 技能发现
node src/skills-main.js discover "keyword" --limit 10
# 环境检查
node src/main.js check-env
# 快速测试
node src/skills-main.js quick-test
部署Beremiz调试环境,要求: 1. wxPython使用beremiz_cache缓存,严禁build 2. 兼容性使用fix_library_links.py,不得手动修复 3. 遇到问题先检查缓存,不得尝试其他方式
请参考 /workspace/chrome-devtools-install.md 安装 Chrome DevTools MCP 要求:检查版本、配置 MCP、启动服务、验证端口
请参考 /workspace/skill-development-install.md 安装 Skill Development 要求:安装技能包、验证功能、学习创建技能包
请识别并激活 /workspace/research-assistant/skills/research-assistant/ 要求:验证结构、运行验证脚本、了解使用方法
请使用 Research Assistant 研究 [主题],在线模式,深度 4,Markdown 格式
# MCP 配置
~/.config/claude/mcp.json
# Claude 权限配置
~/.claude/settings.local.json
# Chrome 日志
/tmp/chrome-debug.log
# 诊断报告
~/diagnose-chrome-mcp.sh
最后更新: 2026-01-12 状态: ✅ 生产就绪 版本: 2.1.0 许可证: MIT
当你在提示词中提供了明确的执行方式时(如"使用缓存"、"使用某脚本"),Claude Code 必须严格遵守,不得自行假设或尝试其他方法。
错误案例(Beremiz部署):
正确做法:
下次部署Beremiz或类似任务时,使用以下模板:
部署[项目名]环境,严格遵守以下原则: ⚠️ 执行原则(必须严格遵守,不得违背): 1. [关键组件1]必须使用[指定缓存/位置],严禁从源码build 2. [问题类型]必须使用[指定脚本],不得尝试其他方法 3. 遇到任何问题时,首先检查[缓存/脚本],不得自行尝试其他方式 具体步骤: 1. 检查缓存/脚本存在 2. 按指定方式安装 3. 运行指定脚本修复 4. 验证结果 注意事项: - 如果[缓存/脚本]缺失,立即停止并报告 - 整个过程严禁任何build操作
记住:你的明确指令是优先级最高的,AI不得"聪明地"尝试其他方法。