Desktop

by lobehub6a3eba96b010No license83K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

Electron desktop development guide — IPC handlers, controllers, preload scripts, window/menu management.

AI-generated overview

Guides Electron desktop development in LobeHub: IPC handlers, controllers, preload scripts, and window or menu management.

What it does: This skill provides an architecture overview and step-by-step instructions for adding desktop features to an Electron application, covering controllers, IPC type definitions, renderer services, store actions, and tests. It points to reference documents on feature implementation, local tools, menu configuration, and window management. It produces guidance and code patterns rather than generated files.
When to use it: Use it when implementing or extending Electron desktop functionality such as new IPC methods, controllers, preload exposure, menus, or windows. It is intended for developers working inside the LobeHub desktop codebase.
Requirements: No scripts are shipped; it is instructions only. It assumes an Electron project with the described directory layout and TypeScript tooling.

Desktop Development Guide

Architecture Overview

LobeHub desktop is built on Electron with main-renderer architecture:

Main Process (apps/desktop/src/main): App lifecycle, system APIs, window management
Renderer Process: Reuses web code from src/
Preload Scripts (apps/desktop/src/preload): Securely expose main process to renderer

Adding New Desktop Features

1. Create Controller

Location: apps/desktop/src/main/controllers/

typescript

import { ControllerModule, IpcMethod } from '@/controllers';
export default class NewFeatureCtr extends ControllerModule {  static override readonly groupName = 'newFeature';
  @IpcMethod()  async doSomething(params: SomeParams): Promise<SomeResult> {    // Implementation    return { success: true };  }}

import { ControllerModule, IpcMethod } from '@/controllers';
export default class NewFeatureCtr extends ControllerModule {  static override readonly groupName = 'newFeature';
  @IpcMethod()  async doSomething(params: SomeParams): Promise<SomeResult> {    // Implementation    return { success: true };  }}

2. Define IPC Types

Location: packages/electron-client-ipc/src/types/<domain>.ts, re-exported from types/index.ts

typescript

export interface SomeParams {  /* ... */}export interface SomeResult {  success: boolean;  error?: string;}

export interface SomeParams {  /* ... */}export interface SomeResult {  success: boolean;  error?: string;}

3. Create Renderer Service

Location: src/services/electron/

typescript

import { ensureElectronIpc } from '@/utils/electron/ipc';
const ipc = ensureElectronIpc();
export const newFeatureService = async (params: SomeParams) => {  return ipc.newFeature.doSomething(params);};

import { ensureElectronIpc } from '@/utils/electron/ipc';
const ipc = ensureElectronIpc();
export const newFeatureService = async (params: SomeParams) => {  return ipc.newFeature.doSomething(params);};

4. Implement Store Action

Location: src/store/

5. Add Tests

Location: apps/desktop/src/main/controllers/__tests__/

Detailed Guides

See references/ for specific topics:

Feature implementation: references/feature-implementation.md
Local tools workflow: references/local-tools.md
Menu configuration: references/menu-config.md
Window management: references/window-management.md

Source and attribution

Source:lobehub/lobehubin.agents/skills/desktopat commit6a3eba9

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Desktop

Desktop Development Guide

Architecture Overview

Adding New Desktop Features

1. Create Controller

2. Define IPC Types

3. Create Renderer Service

4. Implement Store Action

5. Add Tests

Detailed Guides

Source and attribution

More from lobehub/lobehub

Store Data Structures

Typescript

React

Project Overview

Pr

Linear

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices