Communitygithub.com

ai4s-research/open-science

无需启动 Tauri 应用或实时模型,即可在视觉上验证 desktop 前端更改。

open-science 是什么?

该技能提供了一种高效的开发工作流,用于在 OpenCode 桌面应用(apps/desktop)中验证纯前端的 UI 更改。它避免了完整启动 Tauri 应用和模型会话的繁琐和耗时流程。用户可以通过创建临时的 Vite 页面来隔离和挂载特定的 React 组件,从而快速迭代和检查样式及布局。该技能支持使用浏览器控制技能(通过 Chrome HTTP API)进行自动化测试,包括创建窗口、等待元素、读取 DOM 和捕获屏幕截图。它适用于所有需要快速验证桌面端 UI 组件的开发场景,尤其是在关注前端表现而非后端逻辑时。通过提供详细的步骤指南和常见陷阱的解决方案,该技能显著缩短了反馈循环,提高了开发效率。

兼容平台~Claude Code~Codex CLI~Cursor✓OpenCode
npx skills add https://github.com/ai4s-research/open-science/tree/HEAD/apps/desktop/.claude/skills/verify

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

验证桌面前端更改

完整运行应用程序需要一个 OpenCode 会话 + 实时模型交互。对于纯前端 组件更改,可将组件挂载到临时的 Vite 页面中,步骤如下:

  1. 创建 apps/desktop/verify-<x>.html(纯 HTML,包含 <div id="root">、 <script type="module" src="/src/verify-<x>.tsx">)和 apps/desktop/src/verify-<x>.tsx(使用 ReactDOM.createRoot,导入 ./index.css 用于 Tailwind,通过 @/ 导入组件)。Vite 会自动 服务 apps/desktop/ 下的任何 .html 文件。
  2. 在后台运行 cd apps/desktop && npx vite --port 5199 --strictPort。 npx 包装器可能会重复启动并报告“端口已使用”错误,而第一个实例 实际上已成功运行——重试前请使用 lsof -iTCP:5199 检查。
  3. 使用浏览器控制技能(Chrome HTTP API,端口 9528)驱动测试: createWindow → waitForSelector → readDom → screenshotTab (截图将保存到 ~/Downloads/)。 注意事项:evalScript 会被扩展的 CSP 阻止——请改用 readDom/scrollTab;readDom 需要显式指定 "attributes": [],否则会报错“Value is unserializable”。
  4. 清理:closeTab、终止 vite 进程、删除两个临时文件, 确认 git status 显示工作区干净。

相关技能