How to install desktop
npx skills add https://github.com/lobehub/lobehub --skill desktopFull instructions (SKILL.md)
Source of truth, from lobehub/lobehub.
name: desktop description: Electron desktop development guide — IPC handlers, controllers, preload scripts, window/menu management. disable-model-invocation: true
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
Related skills
More from lobehub/lobehub and the wider catalog.
zustand
LobeHub Zustand store conventions. Use when editing src/store, store slices, public/internal actions, dispatch actions, flattenActions, optimistic updates, selectors, maps, or class action migration.
react
LobeHub React component conventions. Use when editing TSX UI, choosing base-ui vs @lobehub/ui vs antd, styling with antd-style, routing, desktop variants, layouts, or component state.
typescript
LobeHub TypeScript style and type-safety guide. Use when editing TS/TSX/MTS, fixing types, choosing interface vs type, avoiding any/object, import type, async flow, or ts-expect-error.
drizzle
LobeHub Drizzle ORM schema and query style. Use for pgTable schemas, indexes, joins, inferred types, db.select/db.query, schema fields, foreign keys, junction tables, or postgres query patterns.
i18n
LobeHub i18n with react-i18next. Use for user-facing strings, locale keys, namespaces, useTranslation, t(), interpolation, zh-CN/en-US previews, hardcoded UI copy, or pnpm i18n.
project-overview
LobeHub open-source monorepo architecture map. Use when locating code layers, understanding apps/packages/src layout, business stubs, project structure, or onboarding to the repository.