Desktop

This walks you through LobeHub's Electron architecture, which splits desktop work across main process controllers, preload scripts, and renderer services that reuse web code. You'll use it when wiring up IPC handlers, managing windows, or building desktop-specific features. The guide is formulaic but practical: it shows you exactly where files go, how to register controllers in the registry, and how to type your IPC calls in the shared package. The references folder promises deeper dives on menus and local tools, though those aren't included here. It's clearly documentation extracted from an active codebase rather than generic Electron advice, so you're learning their conventions, not just the framework.

skills.sh installs: 4.2K
GitHub stars: 84.6K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add lobehub/lobehub --skill desktop --agent claude-code

Installs into .claude/skills of the current project.

Files

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

Both processes log to <userData>/logs/{main,renderer}.jsonl in dev and packaged builds (apps/desktop/src/main/utils/structuredLog/); read them with pnpm --dir apps/desktop logs list|query|follow (filters: --level, --since, --operation op_…, --topic tpc_…) instead of tailing files.

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 };
  }
}