본문으로 건너뛰기
cccskills
무료GitHub에 공개

drive-desktop-app

Drive and verify an Electron or Tauri desktop app from the inside, including the main-process and Rust IPC calls a browser tool cannot see. Use when a desktop app needs testing, when a feature works in the browser but not in the packaged app, when an IPC or invoke call needs proving, when a desktop screenshot or visual diff is wanted, or when you need a headless run of a desktop UI in CI.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md5.1 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Drive a desktop app and prove what happened

A desktop app reaches its backend over IPC, not HTTP. Patching fetch/XHR cannot see that, so a browser-shaped tool is blind to every backend call the app makes: the network log reads empty, an action has no in-flight request to settle on, and asserting on the network is vacuously true. That is a false green by construction.

Reticle observes the renderer and the IPC boundary, so a desktop verdict means what a web one does. Not installed? RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init, then the install-and-verify skill.

Electron: two lines, none in your app code

// vite.config.ts — desktop:true lets connect() start in a packaged renderer (NODE_ENV=production).
// A default (production-mode) `vite build` ships no Reticle code; to drive a packaged
// renderer with no dev server, build it with `vite build --mode development`
export default defineConfig({
  base: './', // file:// needs relative asset paths
  plugins: [react(), reticle({ desktop: true })],
});
// electron/preload.cjs — FIRST line. This is what makes main-process IPC visible.
require('@reticlehq/electron/preload');

It must be in the preload and it must be first. contextBridge.exposeInMainWorld hands the renderer a deeply frozen object, so nothing in the page can instrument it afterwards. The preload is the last point where ipcRenderer.invoke is still writable, and the shim has to run before your preload captures its own reference.

A sandboxed preload cannot resolve node_modules, so the bare require fails. Either bundle the preload (electron-vite and Forge do by default) or set sandbox: false.

Tauri: the CSP step is required and its failure is silent

The frontend is the same as any web app. The part people miss is that Tauri's default CSP blocks the bridge WebSocket before it opens, so the app runs perfectly and simply never connects:

{
  "app": {
    "security": {
      "csp": "default-src 'self' ipc: http://ipc.localhost; connect-src 'self' ipc: http://ipc.localhost ws://localhost:4400 ws://127.0.0.1:4400"
    }
  }
}

Keep ipc: http://ipc.localhost: Tauri v2 needs it for invoke itself. Dev-only; drop the ws:// entries from your release config.

IPC observation needs nothing on the Rust side: an invoke('load_todos') already reaches Reticle as ipc://load_todos. The reticle-tauri crate is only for screenshots and headless, and it is versioned independently of the npm packages.

Also: use a hash router. A packaged renderer is served from file://, where history-based routing does not resolve.

Verify

Same loop as the web, with IPC in the predicates:

reticle_act_and_wait({ sessionId, ref, action: "click", until: { kind: "allOf", predicates: [
  { kind: "net",     urlContains: "ipc://todos:archive", status: 200 },
  { kind: "element", query: { testid: "..." } },
  { kind: "console", level: "error", absent: true },
]}})

IPC has no status code. 200/500 are synthetic, mapped from whether the command succeeded, precisely so the same predicates keep working. On Tauri you will see status: 500 next to statusText: "OK". That is not a bug: the transport answered fine and the 500 is the command's own verdict. ok is authoritative.

reticle_look { action: "state" } reads the live store exactly as on the web. reticle_screenshot and reticle_visual_diff work once the platform's capture step is wired. Electron needs nothing extra; Tauri needs the crate. Headless on Tauri is RETICLE_HEADLESS=1, and screenshots keep working because the capture renders the webview rather than the screen.

What a missing observer looks like

A missing Electron preload is declared, not silent: verdicts come back with coverage: partial naming the line you did not add, instead of reading clean over a blind spot. If you see that, add the preload line before trusting anything.

If IPC calls never appear while the app works fine: on Electron, the shim's require is not first. On Tauri, invoke from @tauri-apps/api/core is observed, but a hand-rolled postMessage protocol is not.

Honesty

unknown is not a pass on the desktop either. And do not weaken an IPC assertion to make a red verdict green: a desktop false green is the exact failure this wiring exists to remove.


Full desktop reference: curl https://docs.reticle.sh/desktop.md. Everything else: curl https://docs.reticle.sh/llms.txt.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Test-driven development for behaviour a unit test cannot reach, by writing the expectation against the running app before writing the code. Declare the consequence first, watch it fail, implement, watch it pass. Use when building a user-facing feature, when the user asks for TDD on UI or full-stack work, when a unit test cannot express the outcome that matters, or when you want a red-green loop that runs against the real app instead of mocks.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

reticlehq/reticle1.3천2026년 10월 21일 업데이트

Sweep a whole running web app for what is broken, without writing a script or knowing the codebase. Clicks every reachable control and reports dead buttons, console errors, failed requests, and places where the API and the screen disagree. Use on an unfamiliar codebase, before a release, after a big merge or dependency bump, when the user asks for a smoke test or a health check, or when someone says "just check everything still works".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

reticlehq/reticle1.3천2026년 10월 21일 업데이트

Find out why something in a running web app does not work, when the console is empty and the code looks correct. Reads the click, the request, the store and the console together and returns the file:line to open. Use when a button does nothing, a form will not submit, data will not load, a page renders blank or stale, a modal will not close, or the user says "it's broken" and the code review says it is fine.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

reticlehq/reticle1.3천2026년 10월 21일 업데이트

Check that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens. Catches hardcoded hex colors, off-palette backgrounds, invisible or unusable controls, and animations that never ran. Use after building or restyling a component, when a design review is wanted, when a UI looks slightly off but nobody can say why, or when a design system exists and nothing checks whether the code follows it.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

reticlehq/reticle1.3천2026년 10월 21일 업데이트

Find out why the tests pass but the app is broken. Catches false greens: a green suite over a feature that does not work, a mocked API standing in for a real one, an assertion that holds no matter what the app does, a click handler wired to nothing. Use when the suite is green and the user says it is broken, when a test never fails, when coverage looks fine but bugs still ship, or before trusting a passing run you did not watch.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

reticlehq/reticle1.3천2026년 10월 21일 업데이트

Pick up the bugs a human flagged by pointing at them in the running app, each arriving with the element, the note they typed, and the source file and line. Use when the user says they marked or flagged something, when starting a session on an app someone has been clicking through, when a designer or PM has left feedback in the UI, or when the user describes a problem as "that button there" without saying which file.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

reticlehq/reticle1.3천2026년 10월 21일 업데이트

reticlehq의 스킬 모두 보기

이 스킬의 문제 신고