electron-skills

LlamaFarm Desktop 向け Electron スキル

LlamaFarm Desktop アプリケーション向けの Electron 28 + Electron Vite パターンです。

概要

このスキルは、メイン／レンダラープロセスのアーキテクチャ、IPC 通信、セキュリティ、パフォーマンスに関する Electron 固有のパターンを、typescript-skills に追加します。

技術スタック

コンポーネント	技術	目的
フレームワーク	Electron 28	デスクトップアプリケーションのフレームワーク
ビルド	electron-vite 2	メイン／プリロード／レンダラー向けの Vite ベースのビルド
アップデート	electron-updater	GitHub リリース経由の自動アップデート
パッケージング	electron-builder	クロスプラットフォームのパッケージング（macOS/Win/Linux）

アーキテクチャ

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

基本原則

1. プロセスの分離 - メイン、プリロード、レンダラーは別々のコンテキストです
2. コンテキストの分離 - 常に contextBridge.exposeInMainWorld を使用します
3. レンダラーで Node を使用しない - 常に nodeIntegration: false にします
4. 型安全な IPC - チャネルの型とペイロードのスキーマを定義します
5. デフォルトでセキュア - プリロードで公開する API を最小限にします

関連ドキュメント

• electron.md - IPC パターン、メイン／レンダラー間の通信
• security.md - コンテキストの分離、プリロードのセキュリティ、CSP
• performance.md - ウィンドウ管理、メモリ、起動

共通の TypeScript パターン

このスキルは typescript-skills を継承します：

• patterns.md - 慣用的な TypeScript
• typing.md - 厳密な型付け、ジェネリクス
• security.md - 入力検証、XSS 対策

クイックリファレンス

IPC ハンドラーパターン（メインプロセス）

ipcMain.handle('cli:info', async () => {
  const isInstalled = await this.cliInstaller.isInstalled()
  return {
    isInstalled,
    path: isInstalled ? this.cliInstaller.getCLIPath() : null
  }
})

プリロードブリッジパターン

const api = {
  cli: {
    getInfo: () => ipcRenderer.invoke('cli:info')
  },
  platform: process.platform,
  version: process.versions.electron
}

contextBridge.exposeInMainWorld('llamafarm', api)

BrowserWindow の設定

new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, '../preload/index.js'),
    nodeIntegration: false,
    contextIsolation: true
  }
})

チェックリストの概要

カテゴリ	重大	高	中	低
IPC	2	3	2	1
セキュリティ	4	3	2	1
パフォーマンス	1	3	3	2