Communitygithub.com

ai4s-research/開放科學

在不啟動 Tauri 應用程式或即時模型的情況下,以視覺化方式驗證 apps/desktop 前端變更。

開放科學 是什麼?

此技能提供一個輕量級的工作流程,用於隔離和驗證 `apps/desktop` 目錄中的前端元件變更,無需執行完整的應用程式或需要即時模型。它建立一個暫時的 Vite 開發伺服器來掛載特定元件,並透過瀏覽器控制技能利用 Chrome HTTP API 進行自動化視覺驗證(如截圖)。此過程避免了完整應用程式執行(需 OpenCode 工作階段)的開銷,顯著加速了純前端 UI 迭代。支援的平台包括 Cursor 和 Claude Code,其工作流程包含建立一個 HTML 和一個 TypeScript 檔案,執行 Vite 伺服器,使用瀏覽器控制技能與渲染頁面互動,最後清理產生的檔案和程序。

相容平台~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": [],否則會出現「值無法序列化」錯誤。
  4. 清理工作:closeTab、終止 Vite 程序、刪除兩個測試用檔案, 並確認 git status 是乾淨的。

相關技能