electron

Creates secure, typed IPC layers for Electron apps with contextBridge.

618|89|Updated Jan 16, 2026
One-click install
npx skills add https://github.com/Gentleman-Programming/Gentleman-Skills --skill electron-gentleman-programming
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: electron
Source: https://github.com/Gentleman-Programming/Gentleman-Skills/tree/main/community/electron
Command: npx skills add https://github.com/Gentleman-Programming/Gentleman-Skills --skill electron-gentleman-programming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Electron apps often struggle with insecure IPC, boilerplate wiring between main, renderer, and preload, and maintaining a safe, scalable architecture for cross-platform desktop apps.

Core Features & Use Cases

  • Secure IPC communication between the main and renderer processes using a contextBridge-based exposed API (send/invoke on the renderer side).
  • Type-safe IPC channels with a shared types.ts that defines request/response contracts for each channel.
  • Clear project structure guidance (main/, preload/, renderer/, references/, assets/ as needed) to keep Electron apps maintainable.
  • Use cases: building cross-platform desktop apps that exchange user data securely, perform file operations, and coordinate native features across platforms.

Quick Start

  1. Initialize your project with npm and install electron (and optionally electron-vite for a smoother DX).
  2. Create preload.ts to expose a secure API via contextBridge, and implement IPC handlers in the main process.
  3. In the renderer, access window.electron and use invoke/send to communicate with the main process.

Frequently Asked Questions about electron

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

FAQPage Schema
How do I set up secure IPC communication between Electron main and renderer processes?

Secure IPC in Electron uses a contextBridge-exposed API in the preload process to mediate communication. Define type-safe channels in a shared types.ts file, implement IPC handlers in the main process, and access window.electron from the renderer to invoke or send messages, preventing direct renderer access to Node APIs.

What's the best way to structure an Electron app with main, renderer, and preload processes?

Organize your Electron project into dedicated directories: main/ for the main process and IPC handlers, preload/ for the contextBridge setup, renderer/ for UI code, and assets/ for static files. This separation keeps your app maintainable, testable, and aligns with security best practices for cross-platform desktop development.

Can I use TypeScript to enforce type safety across Electron IPC channels?

Yes. Define request and response contracts in a shared types.ts file, then use those types in your main process handlers and renderer invocations. This approach catches IPC mismatches at compile time and ensures consistent API contracts between processes.

Why is a preload script necessary in Electron apps?

A preload script runs in a sandbox before the renderer loads, allowing you to safely expose specific APIs via contextBridge without granting the renderer direct access to Node.js or native modules. This isolates security-sensitive operations and prevents malicious scripts in the renderer from compromising the application.

How do I handle file operations and native features securely across Windows, macOS, and Linux in Electron?

Implement file operations and platform-specific features in the main process, then expose them through typed IPC channels via the preload contextBridge. The renderer requests these operations by invoking channels, ensuring all native access is controlled and consistent across platforms.

What boilerplate do I avoid by using typed IPC patterns in Electron?

Typed IPC patterns eliminate repetitive wiring of send/listen pairs, manual type casting between processes, and inconsistent channel naming. A shared types.ts and consistent preload structure reduce setup overhead and make scaling your app's API surface predictable.