electron-best-practices

Malicious tool definition detected

Tool: SKILL.md [1/2] Description: --- name: electron-best-practices description: "Guide AI agents through Electron app development with React including security patterns, type-safe IPC, React integration, packaging with code signing, and testing.

Tool: SKILL.md [2/2]

Malicious tool definition detected

Tool: assets/configs/electron-vite.config.ts.md Description: # electron-vite Configuration electron-vite provides a unified build configuration for all three Electron processes (main, preload, and renderer) using Vite under the hood.

Malicious tool definition detected

Tool: assets/configs/forge.config.js.md Description: # Electron Forge Configuration Electron Forge handles the entire packaging and distribution pipeline for Electron applications.

Malicious tool definition detected

Tool: assets/configs/playwright.config.ts.md Description: # Playwright E2E Configuration for Electron Playwright has first-class support for testing Electron applications through its `_electron` module.

Malicious tool definition detected

Tool: assets/configs/tsconfig.json.md Description: # TypeScript Configuration for Electron Electron applications span three distinct execution environments -- the main process (Node.js), the preload script (Node.js with restricted context), and the renderer process (browser).

Malicious tool definition detected

Tool: assets/examples/multi-window-example.md [1/2] Description: # Multi-Window State Synchronization Example Complete example of multi-window state synchronization using `electron-store` for persistence, `BrowserWindow` broadcasting for cross-window communication, and Zustand for renderer-side state management.

Tool: assets/examples/multi-window-example.md [2/2] Description: theme in one window: Zustand updates locally, the IPC call persists to `electron-store` and broadcasts to all other windows, each window's `onChange` listener fires `_hydrate`, and React re-renders.

Malicious tool definition detected

Tool: assets/examples/typed-ipc-example.md [1/2] Description: # Complete Typed IPC Example End-to-end example showing typed IPC from channel definitions through main process handlers, preload bridge, to renderer usage.

Tool: assets/examples/typed-ipc-example.md [2/2] Description: up.

Malicious tool definition detected

Tool: assets/templates/ipc-handler.ts.md Description: # IPC Handler Module Template This template provides a structured pattern for IPC handler modules in the main process.

Malicious tool definition detected

Tool: assets/templates/main-process.ts.md Description: # Main Process Entry Point Template This template provides a secure Electron main process entry point with sensible defaults.

Malicious tool definition detected

Tool: assets/templates/preload-script.ts.md Description: # Preload Script Template This template provides a type-safe preload script that bridges the main and renderer processes using Electron's `contextBridge`.

Malicious tool definition detected

Tool: assets/templates/react-root.tsx.md Description: # React Renderer Entry Point Template This template provides a React 18 renderer entry point for Electron applications.

Malicious tool definition detected

Tool: references/architecture/multi-window-state.md [1/2] Description: # Multi-Window State Synchronization Electron applications often need multiple windows that share state -- a main editor window with inspector panels, preference windows, or floating toolbars.

Tool: references/architecture/multi-window-state.md [2/2] Description: existing.focus(); return existing; } const win = new BrowserWindow({ width: config.width, height: config.height, parent: config.parent, webPreferences: { preload: join(__dirname, '../preload/index.js'), contextIsolation: true, sandbox: true, nodeIntegration: false, }, }); // Load the renderer with an optional route hash const baseUrl = process.env['ELECTRON_RENDERER_URL']; if (baseUrl) { const url = config.route ?

Malicious tool definition detected

Tool: references/architecture/process-separation.md [1/2] Description: # Process Separation: Main, Preload, and Renderer Responsibilities Electron applications run across three distinct process types, each with different capabilities and security constraints.

Tool: references/architecture/process-separation.md [2/2] Description: send paths via IPC to main | | Keyboard shortcuts | Both | `globalShortcut` in main, DOM events in renderer | ## Complete Flow: Saving a File This walkthrough traces a user action from UI click to disk write and back.

Malicious tool definition detected

Tool: references/architecture/project-structure.md [1/2] Description: # Project Structure: Directory Layout and electron-vite Configuration This reference covers the recommended directory organization for Electron applications built with electron-vite and React, including configuration patterns, build tooling setup, and the rationale behind each structural decision.

Tool: references/architecture/project-structure.md [2/2] Description: electron.vite.config.ts import { defineConfig, externalizeDepsPlugin } from 'electron-vite'; import react from '@vitejs/plugin-react'; import { resolve } from 'path'; export default defineConfig({ main: { plugins: [externalizeDepsPlugin()], resolve: { alias: { '@shared': resolve('src/shared'), }, }, }, preload: { plugins: [externalizeDepsPlugin()], resolve: { alias: { '@shared': resolve('src/shared'), }, }, }, renderer: { plug

Malicious tool definition detected

Tool: references/integration/react-patterns.md Description: # React 18 Integration Patterns for Electron React 18 runs in Electron's Chromium-based renderer with full access to concurrent features, Suspense, and `createRoot`. The desktop context adds concerns web apps rarely face: IPC listener lifecycle, long-running processes, multi-window awareness, and error reporting to the main process.

Malicious tool definition detected

Tool: references/integration/state-management.md [1/2] Description: # State Management in Electron + React Applications Electron state management differs fundamentally from web apps.

Tool: references/integration/state-management.md [2/2] Description: in Zustand.

Malicious tool definition detected

Tool: references/ipc/electron-trpc.md [1/2] Description: # Using electron-trpc for Type-Safe IPC ## Overview electron-trpc brings the tRPC framework to Electron, replacing manual IPC channel management with a fully typed RPC layer.

Tool: references/ipc/electron-trpc.md [2/2]

Malicious tool definition detected

Tool: references/ipc/error-serialization.md [1/2] Description: # Error Handling Across the IPC Boundary ## Overview Electron's IPC layer serializes data using the Structured Clone Algorithm.

Tool: references/ipc/error-serialization.md [2/2] Description: shared constant 3.

Malicious tool definition detected

Tool: references/ipc/typed-ipc.md [1/2] Description: # Manual Typed IPC with Mapped Types ## Overview Electron's IPC system uses string channel names and untyped arguments by default.

Tool: references/ipc/typed-ipc.md [2/2] Description: boolean]; return: { deleted: boolean }; }; }; ``` **Step 2** -- Register the handler: ```typescript // main/handlers/document-handlers.ts handleIpc('delete-document', async (documentId, permanent) => { // documentId: string, permanent: boolean -- inferred from map const deleted = await documentService.delete(documentId, { permanent }); return { deleted }; }); ``` **Step 3** -- Expose in preload: ```typescript // preload/index.ts (add to electr

Malicious tool definition detected

Tool: references/packaging/auto-updates.md Description: # Auto-Update Implementation ## Overview Shipping an Electron app without auto-update is shipping a dead product.

Malicious tool definition detected

Tool: references/packaging/bundle-optimization.md Description: # Bundle Size Optimization and Performance ## Overview An unoptimized Electron app easily ships at 120-150 MB or more.

Malicious tool definition detected

Tool: references/packaging/ci-cd-patterns.md Description: # CI/CD Patterns for Electron Apps ## Overview Building Electron apps in CI requires a platform matrix (you cannot cross-compile macOS apps on Linux), careful handling of signing credentials, and platform-specific workarounds.

Malicious tool definition detected

Tool: references/packaging/code-signing.md Description: # Code Signing and Notarization ## Overview Code signing is not optional for production Electron apps.

Malicious tool definition detected

Tool: references/security/context-isolation.md [1/2] Description: # Context Isolation and the Security Sandbox Context isolation is the single most important security boundary in an Electron application.

Tool: references/security/context-isolation.md [2/2] Description: FAILS in sandbox mode: import fs from 'fs'; const data = fs.readFileSync('/etc/passwd'); // Error: fs is not available // Instead, request it through IPC: const data = await ipcRenderer.invoke('read-file', '/path/to/allowed/file'); // The main process handler validates the path before reading.

Malicious tool definition detected

Tool: references/security/csp-and-permissions.md [1/2] Description: # Content Security Policy and Permission Management Content Security Policy (CSP) and permission handling form the second layer of defense in an Electron application.

Tool: references/security/csp-and-permissions.md [2/2] Description: (!ALLOWED_HOSTS.has(parsed.hostname)) return false; shell.openExternal(url); return true; } catch { return false; } } ``` ## Webview Tag Restrictions If your app uses `<webview>` tags (generally discouraged in favor of `BrowserView` or controlled `BrowserWindow`), restrict their capabilities: ```typescript // main.ts - Restrict webview tags app.on('web-contents-created', (_event, contents) => { contents.on('will-attach-webview',

Malicious tool definition detected

Tool: references/security/security-checklist.md [1/2] Description: # Security Audit Checklist for Electron Applications This checklist covers every security-relevant configuration and pattern in an Electron application.

Tool: references/security/security-checklist.md [2/2] Description: over downloads autoUpdater.allowDowngrade = false; autoUpdater.setFeedURL({ provider: 'github', owner: 'your-org', repo: 'your-app', // For private repos: // token: process.env.GH_TOKEN, }); autoUpdater.on('update-available', (info) => { // Notify user, let them choose to download mainWindow.webContents.send('update-available', { version: info.version, releaseNotes: info.releaseNotes, }); }); // Never expose update control to the

Malicious tool definition detected

Tool: references/testing/playwright-e2e.md Description: # Playwright E2E Testing for Electron Apps End-to-end testing verifies that your Electron application works correctly from the user's perspective.

Malicious tool definition detected

Tool: references/testing/test-structure.md Description: # Multi-Project Test Configuration and Mocking Patterns Electron's split architecture requires a test setup that mirrors its runtime structure.

Malicious tool definition detected

Tool: references/testing/unit-testing.md Description: # Unit Testing Main and Renderer Processes Electron applications run code in fundamentally different environments -- the main process operates in Node.js while the renderer runs in a browser context.

Malicious tool definition detected

Tool: references/tooling/electron-forge.md [1/2] Description: # Electron Forge: Packaging, Distribution, and Maker Configuration ## Overview Electron Forge is the official, first-party packaging and distribution tool for Electron applications.

Tool: references/tooling/electron-forge.md [2/2]

Malicious tool definition detected

Tool: references/tooling/electron-vite.md [1/2] Description: # electron-vite: Configuration and Development Workflow ## Overview electron-vite is a build tool that provides a unified Vite configuration for all three Electron processes: main, preload, and renderer.

Tool: references/tooling/electron-vite.md [2/2]

Malicious tool definition detected

Tool: references/tooling/tauri-comparison.md [1/2] Description: # Electron vs Tauri: Decision Matrix ## Overview Tauri is the primary alternative to Electron for building cross-platform desktop applications with web technologies. With Tauri 2.0 (released October 2024), the framework reached a significant milestone: mobile support (iOS and Android), a stabilized plugin system, and a refined security model.

Tool: references/tooling/tauri-comparison.md [2/2] Description: main process (Node.js) is separated from renderer processes (Chromium) through IPC, with preload scripts acting as a controlled bridge via `contextBridge`. Tauri uses a capability-based permission system.

Malicious tool definition detected

Tool: scripts/analyze-security.ts [1/2] Description: #!/usr/bin/env -S deno run --allow-read /** * Electron Security Scanner * * Static analysis for Electron security misconfigurations.

Tool: scripts/analyze-security.ts [2/2]

Malicious tool definition detected

Tool: scripts/generate-ipc-types.ts [1/2] Description: #!/usr/bin/env -S deno run --allow-read --allow-write /** * IPC Type Generator * * Parses Electron IPC handler files and generates TypeScript * channel type definitions for type-safe IPC communication.

Tool: scripts/generate-ipc-types.ts [2/2] Description: channels = discoverChannels(file, content); allChannels.push(...channels); } // Deduplicate channels by name (keep first occurrence) const seen = new Set<string>(); const uniqueChannels = allChannels.filter((c) => { if (seen.has(c.name)) { return false; } seen.add(c.name); return true; }); // Sort channels alphabetically uniqueChannels.sort((a, b) => a.name.localeCompare(b.name)); const handleChannels = uniqueChannels .filter((c) => c.type =

Malicious tool definition detected

Tool: scripts/scaffold-electron-app.ts [1/2] Description: #!/usr/bin/env -S deno run --allow-read --allow-write /** * Electron App Scaffolder * * Generates an electron-vite project structure with best-practice defaults.

Tool: scripts/scaffold-electron-app.ts [2/2] Description: expect } from '@playwright/test'; import { _electron as electron } from '@playwright/test'; test('app launches and shows window', async () => { const electronApp = await electron.launch({ args: ['.'], }); const window = await electronApp.firstWindow(); const title = await window.title(); expect(title).toBe('${appName}'); await electronApp.close(); }); `; } // === File Generation === function generateFiles(options: ScaffoldOptions): Genera