ai4s-research/open-science

Verify apps/desktop frontend changes visually without launching the Tauri app or a live model

What is open-science?

open-science is a OpenCode agent skill that verify apps/desktop frontend changes visually without launching the Tauri app or a live model.

Works with~Claude Code~Codex CLI~Cursor✓OpenCode

npx skills add https://github.com/ai4s-research/open-science/tree/HEAD/apps/desktop/.claude/skills/verify

Documentation

Verifying desktop frontend changes

Full-app runs need an OpenCode session + live model turn. For pure frontend component changes, mount the component in a throwaway vite page instead:

Create apps/desktop/verify-<x>.html (plain html, <div id="root">, <script type="module" src="/src/verify-<x>.tsx">) and apps/desktop/src/verify-<x>.tsx (ReactDOM.createRoot, import ./index.css for Tailwind, import the component via @/). Vite serves any .html under apps/desktop/ automatically.
cd apps/desktop && npx vite --port 5199 --strictPort (background). The npx wrapper may double-spawn and report "port in use" failure while the first instance is fine — check lsof -iTCP:5199 before retrying.
Drive with the browser-control skill (Chrome HTTP API, port 9528): createWindow → waitForSelector → readDom → screenshotTab (screenshots land in ~/Downloads/). Gotchas: evalScript is blocked by CSP on the extension — use readDom/scrollTab instead; readDom requires an explicit "attributes": [] or it errors with "Value is unserializable".
Clean up: closeTab, kill the vite pid, delete both harness files, confirm git status is clean.