Cperuffo3 Efis Checklist Editor Electron

Electron Skill

This project uses Electron 39 with a frameless window, oRPC over MessagePort for type-safe IPC (not ipcMain.handle), and electron-vite for unified builds. The main process lives in src/main.ts, IPC domains in src/ipc/<domain>/, and the renderer is a React 19 app.

Process Architecture

Main (src/main.ts)  ←── MessagePort (oRPC) ──→  Preload (src/preload.ts)  ←── contextBridge ──→  Renderer

Adding a New IPC Domain

Every domain follows: schema → handler → barrel → router → action.

// 1. src/ipc/checklist/schemas.ts
import z from "zod";
export const readFileInputSchema = z.object({ path: z.string() });

// 2. src/ipc/checklist/handlers.ts
import { os } from "@orpc/server";
import { readFileInputSchema } from "./schemas";
export const readChecklistFile = os
  .input(readFileInputSchema)
  .handler(async ({ input }) => {
    /* Node.js file I/O here */
  });

// 3. src/ipc/checklist/index.ts
export const checklist = { readChecklistFile };

// 4. src/ipc/router.ts — add to router object
import { checklist } from "./checklist";
export const router = { theme, window, app, shell, updater, checklist };

// 5. src/actions/checklist.ts — renderer wrapper
import { ipc } from "@/ipc/manager";
export async function readChecklistFile(path: string) {
  return ipc.client.checklist.readChecklistFile({ path });
}

Key Concepts

Accessing BrowserWindow in Handlers

Use the ipcContext.mainWindowContext middleware:

import { os } from "@orpc/server";
import { ipcContext } from "@/ipc/context";

export const myHandler = os
  .use(ipcContext.mainWindowContext)
  .handler(({ context }) => {
    const { window } = context; // BrowserWindow instance
    window.minimize();
  });

See Also

• patterns — IPC patterns, security, window management
• workflows — Adding domains, packaging, dev workflow

Related Skills

• See the orpc skill for oRPC handler/client patterns
• See the zod skill for input schema validation
• See the vite skill for build configuration
• See the react skill for renderer-side components
• See the typescript skill for type conventions

Documentation Resources

Fetch latest Electron documentation with Context7.

How to use Context7:

1. Use mcp__context7__resolve-library-id to search for "electron"
2. Prefer website documentation (/websites/electronjs) over source code
3. Query with mcp__context7__query-docs using the resolved library ID

Library ID: /websites/electronjs

Recommended Queries:

• "BrowserWindow options and security"
• "context isolation and preload scripts"
• "auto updater configuration"
• "ipcMain and MessagePort"

Converted and distributed by TomeVault — claim your Tome and manage your conversions.