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