D

desktop

by @lobehubv
4.8(54)

Provides a desktop application development guide based on Electron's main-renderer architecture, covering application lifecycle, system APIs, and window management, to facilitate desktop app development.

Desktop ApplicationsElectron.jsCross-Platform DevelopmentBackend ServicesLobeHubGitHub
Installation
npx skills add lobehub/lobehub --skill desktop
compare_arrows

Before / After Comparison

1
Before

When independently developing Electron desktop applications, developers often have to explore complex details such as application lifecycle, system API calls, and window management on their own. This can lead to compatibility issues and performance bottlenecks, resulting in lower development efficiency.

After

The Desktop Application Development Guide provides comprehensive guidance based on the Electron main-renderer architecture. It systematically covers application lifecycle, system APIs, and window management, helping developers quickly build stable and efficient desktop applications.

description SKILL.md

desktop

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

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

2. Define IPC Types

Location: packages/electron-client-ipc/src/types.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: 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

Best Practices

  • Security: Validate inputs, limit exposed APIs

  • Performance: Use async methods, batch data transfers

  • UX: Add progress indicators, provide error feedback

  • Code organization: Follow existing patterns, add documentation

Weekly Installs345Repositorylobehub/lobehubGitHub Stars73.9KFirst SeenJan 27, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled oncodex305opencode302gemini-cli301github-copilot283cursor255claude-code250

forumUser Reviews (0)

Write a Review

Effect
Usability
Docs
Compatibility

No reviews yet

Statistics

Installs2.0K
Rating4.8 / 5.0
Version
Updated2026年3月17日
Comparisons1

User Rating

4.8(54)
5
0%
4
0%
3
0%
2
0%
1
0%

Rate this Skill

0.0

Compatible Platforms

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

Timeline

Created2026年3月17日
Last Updated2026年3月17日