70.5k
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill lobehub/lobe-chat --skill desktop- SKILL.md2.3 KB
Overview
This skill is a practical guide for building and extending the Electron-based desktop app. It focuses on implementing new desktop features, wiring IPC handlers, creating controllers and preload scripts, and managing windows and menus. Use it to integrate secure renderer-main communication and align new code with the project's architecture and conventions.
How this skill works
The guide inspects the main-renderer architecture and explains where to place controllers, preload scripts, IPC types, and renderer services. It shows the pattern for creating ControllerModule classes with @IpcMethod decorators, registering controllers, defining shared TypeScript IPC types, and consuming IPC from renderer services. It also points to reference docs for menus, windows, and local tools workflows.
When to use it
- Adding a new desktop feature that requires main-process APIs
- Exposing secure functionality from main to renderer via preload/IPC
- Implementing or testing IPC controllers and their TypeScript types
- Configuring application menus or custom window behavior
- Integrating local development tools or native OS interactions
Best practices
- Keep main-process surface minimal: expose only needed APIs via preload
- Validate and sanitize all IPC input parameters in controllers
- Prefer async methods and batch transfers to avoid UI jank
- Follow existing controller and service patterns for consistent code organization
- Add tests for main controllers under apps/desktop/src/main/controllers/__tests__
Example use cases
- Create a new controller to access native file dialogs and expose a doSomething IPC method
- Add a renderer service that calls ipc.myFeature.doSomething with typed params and result
- Implement window-management flows: create, persist, and restore window state from main
- Configure a native menu item that triggers a controller action via IPC
- Build local tools integration that runs in main and returns status updates to renderer
FAQ
Register it in apps/desktop/src/main/controllers/registry.ts so the main process loads it at startup.
How do I share types between main and renderer?
Define shared interfaces in packages/electron-client-ipc/src/types.ts and import them from both sides.
How should I expose main APIs to the renderer?
Use a preload script to securely expose a small, typed API surface and call controller IPC methods from the renderer via services.