skills.rest
duwenji
duwenjiCOMMUNITY
Explore all skills by this author →
GitHub

desktop

Wire Electron main-process IPC controllers with renderer services and app state.

1|Updated May 9, 2026
Search Tags:#typescript#electron#window management#ipc#preload scripts#menu configuration#desktop architecture
One-click install
npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill desktop-duwenji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: desktop
Source: https://github.com/duwenji/generative-ai-oss-tutorials/tree/main/sandbox/lobe-chat/.agents/skills/desktop
Command: npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill desktop-duwenji

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you implement and extend an Electron-based desktop application by providing a clear blueprint for wiring IPC handlers, renderer services, controllers, menus, and window management without breaking the app’s security model.

Core Features & Use Cases

  • Electron main/renderer architecture guidance: Defines how controllers (IPC handlers) connect to renderer services and where preload scripts expose safe APIs.
  • IPC-driven feature implementation: Shows how to add new desktop features by creating controllers, defining IPC types, implementing service calls, and updating store actions.
  • Desktop UX and maintainability practices: Covers menu configuration, window creation/state persistence, multi-window coordination, and best practices for security, performance, error handling, and UX feedback.
  • Use Case: Add a new desktop capability (e.g., notification display or local file operations) by implementing an IPC handler in the main process, calling it from renderer code, and integrating the result into application state.

Quick Start

In your Electron desktop codebase, create a new controller under apps/desktop/src/main/controllers/, define the IPC parameter/result types in packages/electron-client-ipc/src/types.ts, and then call the controller from a renderer service to connect it to a store action.

Frequently Asked Questions about desktop

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

FAQPage Schema
How do I wire IPC handlers in an Electron main/renderer architecture?▼

Secure IPC wiring requires creating main-process controllers, defining parameter and result types, and exposing them safely through preload scripts to renderer services.

What is the best way to add a new desktop feature using Electron IPC?▼

The best way to add an Electron desktop feature is defining IPC types, implementing a main-process controller, calling it from a renderer service, and updating store actions to integrate the result into application state.

How does a preload script expose safe APIs in Electron?▼

Preload scripts expose safe APIs in Electron by acting as a secure bridge between the main process and renderer, allowing specific controller functions and IPC handlers to be accessed without breaking the application's security model.

Can I manage multiple windows and menus in an Electron desktop client?▼

Yes, you can manage multiple windows and menus in an Electron desktop client by applying window creation, state persistence, and multi-window coordination practices alongside menu configuration for deterministic local tool workflows.

Does Electron IPC support local filesystem operations and notifications?▼

Electron IPC supports local filesystem operations and notifications by implementing dedicated IPC handlers in the main process that execute deterministic local tool workflows and pass results back to the renderer.

Why do my Electron preload scripts break the security model?▼

Electron preload scripts break the security model when they expose excessive Node.js APIs directly to the renderer. Following reference-driven best practices limits exposure to explicitly defined, safe IPC endpoints.

Related Skills

Explore More Software Engineering Skills→
Gentleman-ProgrammingGentleman-Programming
618

electron

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

Official
Intermediate
lobehublobehub
81.4k

desktop

Guide Electron desktop app architecture with main, renderer, and preload processes.

Official
Advanced
randalmurphalrandalmurphal

frontend-patterns

Provide structured frontend patterns for React, Vue, and TypeScript projects.

Community
Intermediate
jameinghjameingh
2

tauri2-react-rust

Build cross-platform desktop apps with Tauri 2, Rust, and React.

Community
Advanced