skills.rest
phrazzld
phrazzldCOMMUNITY
Explore all skills by this author →
GitHub

electron

Standardize Electron IPC contracts and BrowserWindow lifecycle across main, preload, and renderer processes.

13|3|Updated Mar 2, 2026
Search Tags:#architecture#security#patterns#electron#preload#ipc#BrowserWindow
One-click install
npx skills add https://github.com/phrazzld/spellbook --skill electron-phrazzld
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: electron
Source: https://github.com/phrazzld/spellbook/tree/main/skills/electron
Command: npx skills add https://github.com/phrazzld/spellbook --skill electron-phrazzld

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes and secures Electron IPC and window lifecycle across main, preload, and renderer components, reducing architectural drift and bugs.

Core Features & Use Cases

  • Typed IPC contract with a shared interface for renderer↔main communication.
  • Three-layer IPC pattern (shared types, IPC handlers, and preload bridge) to enforce validation and clean separation.
  • Guidance on BrowserWindow lifecycle, security hardening, and packaging patterns for cross-platform apps.

Quick Start

Configure your Electron app to adopt the typed IPC contract, preload bridge, and main/renderer separation for stable, secure UI.

Frequently Asked Questions about electron

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I secure Electron IPC between the main process and renderer UI?▼

To secure Electron IPC, implement a preload bridge with contextIsolation and enforce boundary validation using a typed IPC contract. This separates renderer logic from main process privileges, reducing architectural drift and security vulnerabilities.

What is the best way to structure a cross-platform Electron app architecture?▼

The best way to structure an Electron app architecture is using a three-layer IPC pattern with shared types, IPC handlers, and a preload bridge. This standardizes window lifecycle and enforces clean separation across Windows, macOS, and Linux.

How do I manage BrowserWindow lifecycle consistently in Electron?▼

Manage BrowserWindow lifecycle consistently by applying standardized architectural patterns for window creation and destruction. This ensures robust desktop application behavior and prevents memory leaks during cross-platform UI interactions.

Does this approach support typed IPC contracts for Electron main and preload processes?▼

Yes, this approach supports a typed IPC contract using a shared interface for renderer and main communication. It enforces validation across the preload bridge, ensuring type safety and clean separation between processes.

Why does my Electron app suffer from architectural drift between the preload and renderer?▼

Architectural drift occurs when Electron apps lack a standardized three-layer IPC pattern and typed contracts. Without boundary validation and consistent preload bridge separation, IPC communication becomes insecure and prone to bugs.

Related Skills

Explore More Software Engineering Skills→
aaronmaturenaaronmaturen

typescript

Configure strict TypeScript and ESM-ready tsconfig.json for Node.js 20+ applications.

Community
Advanced
bkywksjbkywksj
309

tauri-packaging

Automate cross-platform packaging of Tauri apps for desktop and mobile.

Community
Advanced
AskTinNguyenAskTinNguyen

electron-cdp-testing

Connect to a live Electron renderer via CDP to verify preload bridge and capture UI evidence.

Community
Advanced
rajavijayachrajavijayach
11

electrobun

Develop cross-platform desktop applications using TypeScript, Bun, and native OS webviews.

Community
Advanced