skills.rest
kingmacth
kingmacthCOMMUNITY
Explore all skills by this author →
GitHub

desktop

Implement Electron desktop features with IPC, preload scripts, and window management.

Updated Dec 12, 2024
Search Tags:#typescript#electron#desktop#window-management#ipc#preload-scripts#architecture-guide
One-click install
npx skills add https://github.com/kingmacth/lobe-chat --skill desktop-kingmacth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: desktop
Source: https://github.com/kingmacth/lobe-chat/tree/main/.agents/skills/desktop
Command: npx skills add https://github.com/kingmacth/lobe-chat --skill desktop-kingmacth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Electron desktop development requires coordinating main/renderer processes, IPC, and window management. This guide provides architecture patterns and concrete examples to implement desktop features reliably across Electron apps.

Core Features & Use Cases

  • Architecture for main/renderer separation with IPC, including example controllers and services
  • Preload script patterns to securely expose APIs to Renderer
  • Window management, menus, and multi-window coordination
  • Use Case: Build a multi-window Electron app with IPC-driven features and consistent UX

Quick Start

Use this guide to implement desktop features using Electron IPC, window management, and preload scripts.

Frequently Asked Questions about desktop

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

FAQPage Schema
How do I structure IPC communication between main and renderer processes in Electron?▼

Electron IPC communication should be structured using dedicated controllers and services to separate main and renderer process logic. This architecture pattern provides reliable, TypeScript-aligned code examples for handling inter-process messaging securely.

What is the best way to securely expose APIs to the renderer process using preload scripts?▼

Preload scripts securely expose APIs to the renderer process by acting as a controlled bridge. Using established preload script patterns ensures that only safe, explicitly defined methods are exposed, maintaining strict window management and process separation boundaries.

How do I manage multiple windows and menus in a TypeScript Electron application?▼

Multi-window coordination and menu configuration in a TypeScript Electron app require a structured window management architecture. Applying specific architectural patterns for window controllers ensures consistent UX and reliable multi-window synchronization.

Does this Electron architecture guide work for existing TypeScript desktop apps?▼

Yes, this architecture guide works for existing TypeScript desktop apps by prescribing a structured workflow with a frontmatter-driven entry point and a references directory. It aligns concrete code examples directly with standard TypeScript project conventions.

Why do I need a frontmatter-driven entry point for Electron desktop feature development?▼

A frontmatter-driven entry point is needed for Electron desktop feature development to prescribe a structured workflow. It organizes deep topics like IPC handlers and preload scripts into a references directory, streamlining reliable feature implementation.

Related Skills

Explore More Software Engineering Skills→
llama-farmllama-farm
835

electron-skills

Consolidate Electron architecture patterns for secure desktop app development.

Official
Advanced
oakossoakoss
14

tsdown

Bundle TypeScript and JavaScript libraries into ESM, CJS, IIFE, and UMD formats.

Official
Advanced
mauricioacpmauricioacp
1

vercel-composition-patterns

Apply React composition patterns to build maintainable UI components.

Community
Intermediate
wfvuewfvue
3

understanding-tauri-process-model

Explain Tauri multi-process architecture, IPC flows, and security boundaries.

Community
Advanced