Verify
Verify apps/desktop frontend changes visually without launching the Tauri app or a live...
Install
npx skills add ai4s-research/open-science --skill verify -g -a claude-code -y- Repository
- ai4s-research/open-science2.1k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Lightabout 303 tokens
- Runs scripts
- No, instructions only
What it does
Verify apps/desktop frontend changes visually without launching the Tauri app or a live model
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">) andapps/desktop/src/verify-<x>.tsx(ReactDOM.createRoot, import./index.cssfor Tailwind, import the component via@/). Vite serves any .html underapps/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, checklsof -iTCP:5199before retrying.- Drive with the browser-control skill (Chrome HTTP API, port 9528):
createWindow→waitForSelector→readDom→screenshotTab(screenshots land in~/Downloads/). Gotchas:evalScriptis blocked by CSP on the extension, usereadDom/scrollTabinstead;readDomrequires an explicit"attributes": []or it errors with "Value is unserializable". - Clean up:
closeTab, kill the vite pid, delete both harness files, confirmgit statusis clean.
