desktop

Guide Electron desktop development with IPC patterns, window management, and menu configuration.

Updated Feb 1, 2026

Search Tags:#architecture #service #electron #controller #desktop #ipc

Ready to run

npx skills add https://github.com/Chenm4/VoiceChatAssistant --skill desktop-chenm4

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: desktop
Source: https://github.com/Chenm4/VoiceChatAssistant/tree/main/lobehub-main/.agents/skills/desktop
Command: npx skills add https://github.com/Chenm4/VoiceChatAssistant --skill desktop-chenm4

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide for Electron desktop development, covering IPC patterns, window management, preload security, and menu configuration to accelerate building robust desktop features.

Core Features & Use Cases

Architectural overview for Electron apps (Main Process, Renderer, Preload)
IPC-driven workflows: controllers, services, and store actions
Window and menu configuration with best practices for security, UX, and performance

Quick Start

Create a new feature by adding a dedicated Controller under apps/desktop/src/main/controllers/, define IPC types in packages/electron-client-ipc/src/types.ts, implement a corresponding Service in src/services/electron/, add a Store Action to invoke the service, and include unit tests under apps/desktop/src/main/controllers/tests to verify behavior.

Frequently Asked Questions about desktop

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

FAQPage Schema

How do I structure an Electron desktop app with main, renderer, and preload processes?▼

Electron desktop app architecture separates concerns into the main process for window lifecycle, the renderer for UI, and preload scripts for secure context bridge isolation. This pattern ensures secure IPC communication and robust desktop application structure.

What is the best way to implement IPC communication between Electron main and renderer?▼

The best way to implement IPC communication in Electron is by using a controller-service pattern. Define IPC types, create a controller to handle main process requests, implement corresponding services for business logic, and invoke store actions to manage state orchestration.

How do I configure window lifecycle and menu integration in an Electron application?▼

Window lifecycle and menu integration in Electron are configured within the main process. You manage window creation, visibility, and destruction events while attaching native menus, following best practices for cross-platform desktop UX and performance optimization.

How do I secure preload scripts in Electron to prevent renderer process vulnerabilities?▼

To secure preload scripts in Electron, expose only necessary APIs via contextBridge with strict parameter validation. Avoid exposing Node.js modules directly to the renderer process to prevent remote code execution and maintain desktop application security.

How do I add a new feature using the Electron controller, service, and store architecture?▼

To add a feature, create a controller under src/main/controllers, define IPC types in the shared types file, implement a corresponding service in src/services/electron, add a store action to invoke it, and write unit tests under the controller's test directory to verify behavior.