electron-skills（Electron skills 前端）

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

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

1. Process isolation - Main, preload, and renderer are separate contexts
2. Context isolation - Always use contextBridge.exposeInMainWorld
3. No Node in renderer - nodeIntegration: false always
4. Type-safe IPC - Define channel types and payload schemas
5. 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