desktop
The desktop skill provides architectural guidance and implementation patterns for extending LobeHub's Electron application with new features. Use this when adding desktop-specific functionality that requires inter-process communication between the main process and renderer, such as system integrations, window management, menu configuration, or native API access. It covers controller creation, IPC type definition, renderer service setup, and testing practices within LobeHub's main-renderer architecture.
git clone --depth 1 https://github.com/lobehub/lobehub /tmp/desktop && cp -r /tmp/desktop/.agents/skills/desktop ~/.claude/skills/desktopSKILL.md
# 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/`
```typescript
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`
```typescript
export interface SomeParams {
/* ... */
}
export interface SomeResult {
success: boolean;
error?: string;
}
```
### 3. Create Renderer Service
Location: `src/services/electron/`
```typescript
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
1. **Security**: Validate inputs, limit exposed APIs
2. **Performance**: Use async methods, batch data transfers
3. **UX**: Add progress indicators, provide error feedback
4. **Code organization**: Follow existing patterns, add documentationAdd documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Add server-side environment variables that control default values for user settings.
Agent runtime lifecycle hooks. Use for before/after tool or step hooks, tool mocks, human intervention, sub-agent calls, context compression, evals, tracing, callAgent, or lifecycle events.
Build or extend LobeHub Agent Signal pipelines. Use for signal sources, signal/action types, policies, middleware, workflow handoff, dedupe, scope behavior, or observability.
Agent tracing CLI for execution snapshots. Use for agent-tracing, traces, snapshots, LLM call inspection, context engine data, agent step analysis, or execution debugging.
Build LobeHub builtin tool packages. Use when adding agent-callable tools, manifests, executors, runtimes, inspectors, renders, placeholders, streaming, interventions, portals, or tool registries.
Build multi-platform chat bots with the chat SDK. Use for Slack, Teams, Google Chat, Discord, GitHub, Linear bots, webhooks, mentions, slash commands, cards, modals, or streaming responses.
>