Electron Skills for LlamaFarm Desktop
Electron 28 + Electron Vite patterns for the LlamaFarm Desktop application.
Overview
This skill extends typescript-skills with Electron-specific patterns for main/renderer process architecture, IPC communication, security, and performance.
Tech Stack Component Technology Purpose Framework Electron 28 Desktop application framework Build electron-vite 2 Vite-based build for main/preload/renderer Updates electron-updater Auto-update via GitHub releases Packaging electron-builder Cross-platform packaging (macOS/Win/Linux) Architecture electron-app/ src/ main/ # Main process (Node.js context) index.ts # App entry, lifecycle, IPC handlers backend/ # CLI installer, model downloader window-manager.ts menu-manager.ts logger.ts preload/ # Preload scripts (bridge context) index.ts # contextBridge API exposure renderer/ # Renderer process (browser context) index.html # Main window splash.html # Splash screen
Core Principles Process isolation - Main, preload, and renderer are separate contexts Context isolation - Always use contextBridge.exposeInMainWorld No Node in renderer - nodeIntegration: false always Type-safe IPC - Define channel types and payload schemas Secure by default - Minimize exposed APIs in preload Related Documents electron.md - IPC patterns, main/renderer communication security.md - Context isolation, preload security, CSP performance.md - Window management, memory, startup Shared TypeScript Patterns
This skill inherits from typescript-skills:
patterns.md - Idiomatic TypeScript typing.md - Strict typing, generics security.md - Input validation, XSS prevention Quick Reference IPC Handler Pattern (Main Process) ipcMain.handle('cli:info', async () => { const isInstalled = await this.cliInstaller.isInstalled() return { isInstalled, path: isInstalled ? this.cliInstaller.getCLIPath() : null } })
Preload Bridge Pattern const api = { cli: { getInfo: () => ipcRenderer.invoke('cli:info') }, platform: process.platform, version: process.versions.electron }
contextBridge.exposeInMainWorld('llamafarm', api)
BrowserWindow Configuration new BrowserWindow({ webPreferences: { preload: path.join(__dirname, '../preload/index.js'), nodeIntegration: false, contextIsolation: true } })
Checklist Summary Category Critical High Medium Low IPC 2 3 2 1 Security 4 3 2 1 Performance 1 3 3 2