mcpField
D
desktop

desktop

github.com/lobehubDevelopment83.6k4.2k installsUpdated today
Repository

About desktop

A development guide for contributors building LobeHub desktop features with Electron. It describes the main-renderer architecture and the steps for implementing features and tests.

Key features

  1. 01Explains Electron process architecture
  2. 02Outlines controller creation and registration
  3. 03Covers IPC type definitions
  4. 04Describes renderer services and store actions
  5. 05Points to focused desktop guides

Use cases

  1. 01Plan a new desktop feature
  2. 02Connect main-process functionality to the renderer
  3. 03Add controller tests

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/lobehub/lobehub --skill desktop

After installing, type/desktopin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
feature-implementation.md
local-tools.md
menu-config.md
window-management.md

Details

From the project README

Desktop Development Guide

Architecture Overview

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

  1. Main Process (apps/desktop/src/main): App lifecycle, system APIs, window management
  2. Renderer Process: Reuses web code from src/
  3. 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 };
  }
}

Register in apps/desktop/src/main/controllers/registry.ts.

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

Comments

Markdown supported