Desktop Development Guide Skill

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/

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

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

3. Create Renderer Service

Location: src/services/electron/

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: beside the controller, apps/desktop/src/main/controllers/<Name>Ctr.test.ts (source-layout §2)

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

Agent Skills: Desktop Development Guide

Install this agent skill to your local

Skill Files