electron-pro

Electron Desktop Developer Purpose Provides cross-platform desktop application development expertise specializing in Electron, IPC architecture, and OS-level integration. Builds secure, performant desktop applications using web technologies with native capabilities for Windows, macOS, and Linux. When to Use Building cross-platform desktop apps (VS Code, Discord style) Migrating web apps to desktop with native capabilities (File system, Notifications) Implementing secure IPC (Main ↔ Renderer communication) Optimizing Electron memory usage and startup time Configuring auto-updaters (electron-updater) Signing and notarizing apps for app stores 2. Decision Framework Architecture Selection How to structure the app? │ ├─ Security First (Recommended) │ ├─ Context Isolation? → Yes (Standard since v12) │ ├─ Node Integration? → No (Never in Renderer) │ └─ Preload Scripts? → Yes (Bridge API) │ ├─ Data Persistence │ ├─ Simple Settings? → electron-store (JSON) │ ├─ Large Datasets? → SQLite (better-sqlite3 in Main process) │ └─ User Files? → Native File System API │ └─ UI Framework ├─ React/Vue/Svelte? → Yes (Standard SPA approach) ├─ Multiple Windows? → Window Manager Pattern └─ System Tray App? → Hidden Window Pattern IPC Communication Patterns Pattern Method Use Case One-Way (Renderer → Main) ipcRenderer.send logging, analytics, minimizing window Two-Way (Request/Response) ipcRenderer.invoke DB queries, file reads, heavy computations Main → Renderer webContents.send Menu actions, system events, push notifications Red Flags → Escalate to security-auditor: Enabling nodeIntegration: true in production Disabling contextIsolation Loading remote content (https://) without strict CSP Using remote module (Deprecated & insecure) Workflow 2: Performance Optimization (Startup) Goal: Reduce launch time to < 2s. Steps: V8 Snapshot Use electron-link or v8-compile-cache to pre-compile JS. Lazy Loading Modules Don't require() everything at top of main.ts. // Bad import { heavyLib } from 'heavy-lib'; // Good ipcMain.handle('do-work', () => { const heavyLib = require('heavy-lib'); heavyLib.process(); }); Bundle Main Process Use esbuild or webpack for Main process (not just Renderer) to tree-shake unused code and minify. 4. Patterns & Templates Pattern 1: Worker Threads (CPU Intensive Tasks) Use case: Image processing or parsing large files without freezing the UI. // main.ts import { Worker } from 'worker_threads'; ipcMain.handle('process-image', (event, data) => { return new Promise((resolve, reject) => { const worker = new Worker('./worker.js', { workerData: data }); worker.on('message', resolve); worker.on('error', reject); }); }); Pattern 2: Deep Linking (Protocol Handler) Use case: Opening app from browser (myapp://open?id=123). // main.ts if (process.defaultApp) { if (process.argv.length >= 2) { app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]); } } else { app.setAsDefaultProtocolClient('myapp'); } app.on('open-url', (event, url) => { event.preventDefault(); // Parse url 'myapp://...' and navigate renderer mainWindow.webContents.send('navigate', url); }); 6. Integration Patterns frontend-ui-ux-engineer: Handoff: UI Dev builds the React/Vue app → Electron Dev wraps it. Collaboration: Handling window controls (custom title bar), vibrancy/acrylic effects. Tools: CSS app-region: drag. devops-engineer: Handoff: Electron Dev provides build config → DevOps sets up CI pipeline. Collaboration: Code signing certificates (Apple Developer ID, Windows EV). Tools: Electron Builder, Notarization scripts. security-engineer: Handoff: Electron Dev implements feature → Security Dev audits IPC surface. Collaboration: Defining Content Security Policy (CSP) headers. Tools: Electronegativity (Scanner). Weekly Installs223Repository404kidwiz/claud…e-skillsGitHub Stars50First SeenJan 24, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled onopencode193gemini-cli176codex175github-copilot160claude-code159cursor159