electron-pro

name	electron-pro
description	Expert Electron desktop application development — main/renderer process architecture, IPC communication, native OS APIs (menus, tray, notifications, dialogs), auto-updates, code signing, packaging with electron-builder/forge, security hardening (contextIsolation, sandbox), and performance optimization. Use for building cross-platform desktop apps.
version	1.0.0
model	sonnet
invoked_by	both
user_invocable	true
tools	["Bash","Read","Write","Edit"]
best_practices	["Always enable contextIsolation and disable nodeIntegration in renderer","Use contextBridge to expose limited APIs to renderer","Never use remote module (deprecated and insecure)","Validate all IPC messages in main process","Use webContents.session for network interception"]
error_handling	graceful
streaming	not_applicable
verified	false
lastVerifiedAt	"2026-03-14T00:00:00.000Z"
source	builtin
trust_score	100
provenance_sha	80f0f303c91643b1

Electron Pro Skill

Overview

Full-stack Electron desktop app development — from architecture through distribution. Covers process model, security hardening, native OS integration, IPC patterns, packaging, and auto-update.

Process Architecture

┌─────────────────────────────────────┐
│           Main Process              │
│  (Node.js — full system access)     │
│  app, BrowserWindow, Menu, Tray     │
│  nativeImage, shell, ipcMain        │
└──────────────┬──────────────────────┘
               │ IPC (structured clone)
┌──────────────┴──────────────────────┐
│          Renderer Process           │
│  (Chromium — sandboxed by default)  │
│  Web UI: React/Vue/Svelte/vanilla   │
│  ipcRenderer (via contextBridge)    │
└─────────────────────────────────────┘
               │ contextBridge
┌──────────────┴──────────────────────┐
│            Preload Script           │
│  Bridge between main and renderer   │
│  Exposes safe APIs via contextBridge│
└─────────────────────────────────────┘

Security-First Setup (MANDATORY)

// main.js — Always use these security options
const win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true, // REQUIRED: isolates renderer from preload
    sandbox: true, // RECOMMENDED: OS-level sandbox
    nodeIntegration: false, // REQUIRED: never expose Node to renderer
    webSecurity: true, // REQUIRED: never disable
    allowRunningInsecureContent: false,
  },
});

// NEVER do this — security violation:
// nodeIntegration: true
// contextIsolation: false
// Use remote: require('@electron/remote') only if absolutely necessary

Preload + contextBridge

 { contextBridge, ipcRenderer } = ();

contextBridge.(, {
  
  :  ipcRenderer.(),
  :  {
     ( content !== )   ();
     ipcRenderer.(, content);
  },
  :  {
    
      = () => (data);
    ipcRenderer.(, listener);
      ipcRenderer.(, listener);
  },
  
  : process.,
});


..().( {
  .(, filePath);
});