electron_skill

Overview

This skill documents practical Electron patterns for building secure, cross-platform desktop applications. It focuses on project structure, secure IPC between main and renderer, native integrations, auto-updates, and developer ergonomics. Use it to standardize architecture, reduce security risks, and speed up common tasks when using Electron with frameworks like React or Vue.

How this skill works

The skill provides concrete patterns and code examples for organizing main, renderer, preload, and shared code. It defines a type-safe IPC contract, secure contextBridge exposure, and helper React hooks for invoking and listening to IPC channels. It also includes patterns for native menus, auto-updater integration, persistent storage, and safe main-process APIs.

When to use it

• Starting a new Electron project or refactoring an existing one
• Implementing secure main <-> renderer communication and typed IPC channels
• Integrating native OS features (menus, dialogs, notifications, tray)
• Setting up auto-updates, persistent storage, and native services
• Combining Electron with React, Vue, or other frontend frameworks
• Preventing common security anti-patterns like nodeIntegration or remote usage

Best practices

• Organize code into main, renderer, preload, and shared folders for clear boundaries
• Expose a minimal, type-safe API through contextBridge; never expose ipcRenderer or enable nodeIntegration
• Define all IPC channels and request/response types in shared types for compile-time safety
• Keep file system and native integrations in the main process; use electron-store for persistent settings
• Use autoUpdater with progress/events forwarded to the renderer and delay checks on startup
• Follow Electron security checklist: contextIsolation true, nodeIntegration false, sandbox where possible

Example use cases

• Type-safe file operations: renderer invokes 'file:read' and receives structured responses
• App version and updater flow: renderer requests version, listens for updater events, and triggers downloads
• Native dialogs and menus: menu actions send IPC events to renderer to open files or save
• Persistent settings: main uses electron-store and exposes 'store:get'/'store:set' handlers
• Renderer hooks: useIPC and useIPCListener provide simple data fetching and real-time events