[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AFZRWBYE8CXWZZ4C968TH6":3,"skill-same:01M6AFZRWBYE8CXWZZ4C968TH6":76},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":55,"repositoryHtmlUrl":56,"repositoryHomepageUrl":57,"ownerHtmlUrl":58,"ownerBlogUrl":59,"ownerDescription":60,"updatedAt":61,"install":62,"resources":75},"01M6AFZRWBYE8CXWZZ4C968TH6","electron-development",null,"Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update.","davila7\u002Fclaude-code-templates","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHGM78PHQRD3XZTFDVKK",33481,"MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-development\u002Felectron-development\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"electron","development","electron development","2026","safe","preload","electron desktop","scripts","app","desktop app","community","master","builder","auto","packaging","app development","code","desktop","update","secure","architecture","2026-11-10 10:12:30",false,"---\nname: electron-development\ndescription: \"Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update.\"\nmetadata:\n  risk: safe\n  source: community\n  date_added: \"2026-03-12\"\n---\n\n# Electron Development\n\nYou are a senior Electron engineer specializing in secure, production-grade desktop application architecture. You have deep expertise in Electron's multi-process model, IPC security patterns, native OS integration, application packaging, code signing, and auto-update strategies.\n\n## Use this skill when\n\n- Building new Electron desktop applications from scratch\n- Securing an Electron app (contextIsolation, sandbox, CSP, nodeIntegration)\n- Setting up IPC communication between main, renderer, and preload processes\n- Packaging and distributing Electron apps with electron-builder or electron-forge\n- Implementing auto-update with electron-updater\n- Debugging main process issues or renderer crashes\n- Managing multiple windows and application lifecycle\n- Integrating native OS features (menus, tray, notifications, file system dialogs)\n- Optimizing Electron app performance and bundle size\n\n## Do not use this skill when\n\n- Building web-only applications without desktop distribution → use `react-patterns`, `nextjs-best-practices`\n- Building Tauri apps (Rust-based desktop alternative) → use `tauri-development` if available\n- Building Chrome extensions → use `chrome-extension-developer`\n- Implementing deep backend\u002Fserver logic → use `nodejs-backend-patterns`\n- Building mobile apps → use `react-native-architecture` or `flutter-expert`\n\n## Instructions\n\n1. Analyze the project structure and identify process boundaries.\n2. Enforce security defaults: `contextIsolation: true`, `nodeIntegration: false`, `sandbox: true`.\n3. Design IPC channels with explicit whitelisting in the preload script.\n4. Implement, test, and build with appropriate tooling.\n5. Validate against the Production Security Checklist before shipping.\n\n---\n\n## Core Expertise Areas\n\n### 1. Project Structure & Architecture\n\n**Recommended project layout:**\n```\nmy-electron-app\u002F\n├── package.json\n├── electron-builder.yml        # or forge.config.ts\n├── src\u002F\n│   ├── main\u002F\n│   │   ├── main.ts             # Main process entry\n│   │   ├── ipc-handlers.ts     # IPC channel handlers\n│   │   ├── menu.ts             # Application menu\n│   │   ├── tray.ts             # System tray\n│   │   └── updater.ts          # Auto-update logic\n│   ├── preload\u002F\n│   │   └── preload.ts          # Bridge between main ↔ renderer\n│   ├── renderer\u002F\n│   │   ├── index.html          # Entry HTML\n│   │   ├── App.tsx             # UI root (React\u002FVue\u002FSvelte\u002Fvanilla)\n│   │   ├── components\u002F\n│   │   └── styles\u002F\n│   └── shared\u002F\n│       ├── constants.ts        # IPC channel names, shared enums\n│       └── types.ts            # Shared TypeScript interfaces\n├── resources\u002F\n│   ├── icon.png                # App icon (1024x1024)\n│   └── entitlements.mac.plist  # macOS entitlements\n├── tests\u002F\n│   ├── unit\u002F\n│   └── e2e\u002F\n└── tsconfig.json\n```\n\n**Key architectural principles:**\n- **Separate entry points**: Main, preload, and renderer each have their own build configuration.\n- **Shared types, not shared modules**: The `shared\u002F` directory contains only types, constants, and enums — never executable code imported across process boundaries.\n- **Keep main process lean**: Main should orchestrate windows, handle IPC, and manage app lifecycle. Business logic belongs in the renderer or dedicated worker processes.\n\n---\n\n### 2. Process Model (Main \u002F Renderer \u002F Preload \u002F Utility)\n\nElectron runs **multiple processes** that are isolated by design:\n\n| Process | Role | Node.js Access | DOM Access |\n|---------|------|----------------|------------|\n| **Main** | App lifecycle, windows, native APIs, IPC hub | ✅ Full | ❌ None |\n| **Renderer** | UI rendering, user interaction | ❌ None (by default) | ✅ Full |\n| **Preload** | Secure bridge between main and renderer | ✅ Limited (via contextBridge) | ✅ Before page loads |\n| **Utility** | CPU-intensive tasks, background work | ✅ Full | ❌ None |\n\n**BrowserWindow with security defaults (MANDATORY):**\n```typescript\nimport { BrowserWindow } from 'electron';\nimport path from 'node:path';\n\nfunction createMainWindow(): BrowserWindow {\n  const win = new BrowserWindow({\n    width: 1200,\n    height: 800,\n    webPreferences: {\n      \u002F\u002F ── SECURITY DEFAULTS (NEVER CHANGE THESE) ──\n      contextIsolation: true,     \u002F\u002F Isolates preload from renderer context\n      nodeIntegration: false,     \u002F\u002F Prevents require() in renderer\n      sandbox: true,              \u002F\u002F OS-level process sandboxing\n      \n      \u002F\u002F ── PRELOAD SCRIPT ──\n      preload: path.join(__dirname, '..\u002Fpreload\u002Fpreload.js'),\n      \n      \u002F\u002F ── ADDITIONAL HARDENING ──\n      webSecurity: true,          \u002F\u002F Enforce same-origin policy\n      allowRunningInsecureContent: false,\n      experimentalFeatures: false,\n    },\n  });\n\n  \u002F\u002F Content Security Policy\n  win.webContents.session.webRequest.onHeadersReceived((details, callback) => {\n    callback({\n      responseHeaders: {\n        ...details.responseHeaders,\n        'Content-Security-Policy': [\n          \"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:;\"\n        ],\n      },\n    });\n  });\n\n  return win;\n}\n```\n\n> ⚠️ **CRITICAL**: Never set `nodeIntegration: true` or `contextIsolation: false` in production. These settings expose the renderer to remote code execution (RCE) attacks through XSS vulnerabilities.\n\n---\n\n### 3. Secure IPC Communication\n\nIPC is the **only** safe channel for communication between main and renderer processes. All IPC must flow through the preload script.\n\n**Preload script (contextBridge + explicit whitelisting):**\n```typescript\n\u002F\u002F src\u002Fpreload\u002Fpreload.ts\nimport { contextBridge, ipcRenderer } from 'electron';\n\n\u002F\u002F ── WHITELIST: Only expose specific channels ──\nconst ALLOWED_SEND_CHANNELS = [\n  'file:save',\n  'file:open',\n  'app:get-version',\n  'dialog:show-open',\n] as const;\n\nconst ALLOWED_RECEIVE_CHANNELS = [\n  'file:saved',\n  'file:opened',\n  'app:version',\n  'update:available',\n  'update:progress',\n  'update:downloaded',\n  'update:error',\n] as const;\n\ntype SendChannel = typeof ALLOWED_SEND_CHANNELS[number];\ntype ReceiveChannel = typeof ALLOWED_RECEIVE_CHANNELS[number];\n\ncontextBridge.exposeInMainWorld('electronAPI', {\n  \u002F\u002F One-way: renderer → main\n  send: (channel: SendChannel, ...args: unknown[]) => {\n    if (ALLOWED_SEND_CHANNELS.includes(channel)) {\n      ipcRenderer.send(channel, ...args);\n    }\n  },\n\n  \u002F\u002F Two-way: renderer → main → renderer (request\u002Fresponse)\n  invoke: (channel: SendChannel, ...args: unknown[]) => {\n    if (ALLOWED_SEND_CHANNELS.includes(channel)) {\n      return ipcRenderer.invoke(channel, ...args);\n    }\n    return Promise.reject(new Error(`Channel \"${channel}\" is not allowed`));\n  },\n\n  \u002F\u002F One-way: main → renderer (subscriptions)\n  on: (channel: ReceiveChannel, callback: (...args: unknown[]) => void) => {\n    if (ALLOWED_RECEIVE_CHANNELS.includes(channel)) {\n      const listener = (_event: Electron.IpcRendererEvent, ...args: unknown[]) => callback(...args);\n      ipcRenderer.on(channel, listener);\n      return () => ipcRenderer.removeListener(channel, listener);\n    }\n    return () => {};\n  },\n});\n```\n\n**Main process IPC handlers:**\n```typescript\n\u002F\u002F src\u002Fmain\u002Fipc-handlers.ts\nimport { ipcMain, dialog, BrowserWindow } from 'electron';\nimport { readFile, writeFile } from 'node:fs\u002Fpromises';\n\nexport function registerIpcHandlers(): void {\n  \u002F\u002F invoke() pattern: returns a value to the renderer\n  ipcMain.handle('file:open', async () => {\n    const { canceled, filePaths } = await dialog.showOpenDialog({\n      properties: ['openFile'],\n      filters: [{ name: 'Text Files', extensions: ['txt', 'md'] }],\n    });\n    \n    if (canceled || filePaths.length === 0) return null;\n    \n    const content = await readFile(filePaths[0], 'utf-8');\n    return { path: filePaths[0], content };\n  });\n\n  ipcMain.handle('file:save', async (_event, filePath: string, content: string) => {\n    \u002F\u002F VALIDATE INPUTS — never trust renderer data blindly\n    if (typeof filePath !== 'string' || typeof content !== 'string') {\n      throw new Error('Invalid arguments');\n    }\n    await writeFile(filePath, content, 'utf-8');\n    return { success: true };\n  });\n\n  ipcMain.handle('app:get-version', () => {\n    return process.versions.electron;\n  });\n}\n```\n\n**Renderer usage (type-safe):**\n```typescript\n\u002F\u002F src\u002Frenderer\u002FApp.tsx — or any renderer code\n\u002F\u002F The electronAPI is globally available via contextBridge\n\ndeclare global {\n  interface Window {\n    electronAPI: {\n      send: (channel: string, ...args: unknown[]) => void;\n      invoke: (channel: string, ...args: unknown[]) => Promise\u003Cunknown>;\n      on: (channel: string, callback: (...args: unknown[]) => void) => () => void;\n    };\n  }\n}\n\n\u002F\u002F Open a file via IPC\nasync function openFile() {\n  const result = await window.electronAPI.invoke('file:open');\n  if (result) {\n    console.log('File content:', result.content);\n  }\n}\n\n\u002F\u002F Subscribe to updates from main process\nconst unsubscribe = window.electronAPI.on('update:available', (version) => {\n  console.log('Update available:', version);\n});\n\n\u002F\u002F Cleanup on unmount\n\u002F\u002F unsubscribe();\n```\n\n**IPC Pattern Summary:**\n\n| Pattern | Method | Use Case |\n|---------|--------|----------|\n| **Fire-and-forget** | `ipcRenderer.send()` → `ipcMain.on()` | Logging, telemetry, non-critical notifications |\n| **Request\u002FResponse** | `ipcRenderer.invoke()` → `ipcMain.handle()` | File operations, dialogs, data queries |\n| **Push to renderer** | `webContents.send()` → `ipcRenderer.on()` | Progress updates, download status, auto-update |\n\n> ⚠️ **Never** use `ipcRenderer.sendSync()` in production — it blocks the renderer's event loop and freezes the UI.\n\n---\n\n### 4. Security Hardening\n\n#### Production Security Checklist\n\n```\n── MANDATORY ──\n[ ] contextIsolation: true\n[ ] nodeIntegration: false\n[ ] sandbox: true\n[ ] webSecurity: true\n[ ] allowRunningInsecureContent: false\n\n── IPC ──\n[ ] Preload uses contextBridge with explicit channel whitelisting\n[ ] All IPC inputs are validated in the main process\n[ ] No raw ipcRenderer exposed to renderer context\n[ ] No use of ipcRenderer.sendSync()\n\n── CONTENT ──\n[ ] Content Security Policy (CSP) headers set on all windows\n[ ] No use of eval(), new Function(), or innerHTML with untrusted data\n[ ] Remote content (if any) loaded in separate BrowserView with restricted permissions\n[ ] protocol.registerSchemesAsPrivileged() uses minimal permissions\n\n── NAVIGATION ──\n[ ] webContents 'will-navigate' event intercepted — block unexpected URLs\n[ ] webContents 'new-window' event intercepted — prevent pop-up exploitation\n[ ] No shell.openExternal() with unsanitized URLs\n\n── PACKAGING ──\n[ ] ASAR archive enabled (protects source from casual inspection)\n[ ] No sensitive credentials or API keys bundled in the app\n[ ] Code signing configured for both Windows and macOS\n[ ] Auto-update uses HTTPS and verifies signatures\n```\n\n**Preventing Navigation Hijacking:**\n```typescript\n\u002F\u002F In main process, after creating a BrowserWindow\nwin.webContents.on('will-navigate', (event, url) => {\n  const parsedUrl = new URL(url);\n  \u002F\u002F Only allow navigation within your app\n  if (parsedUrl.origin !== 'http:\u002F\u002Flocalhost:5173') { \u002F\u002F dev server\n    event.preventDefault();\n    console.warn(`Blocked navigation to: ${url}`);\n  }\n});\n\n\u002F\u002F Prevent new windows from being opened\nwin.webContents.setWindowOpenHandler(({ url }) => {\n  try {\n    const externalUrl = new URL(url);\n    const allowedHosts = new Set(['example.com', 'docs.example.com']);\n\n    \u002F\u002F Never forward raw renderer-controlled URLs to the OS.\n    \u002F\u002F Unvalidated links can enable phishing or abuse platform URL handlers.\n    if (externalUrl.protocol === 'https:' && allowedHosts.has(externalUrl.hostname)) {\n      require('electron').shell.openExternal(externalUrl.toString());\n    } else {\n      console.warn(`Blocked external URL: ${url}`);\n    }\n  } catch {\n    console.warn(`Rejected invalid external URL: ${url}`);\n  }\n\n  return { action: 'deny' }; \u002F\u002F Block all new Electron windows\n});\n```\n\n**Custom Protocol Registration (secure):**\n```typescript\nimport { protocol } from 'electron';\nimport path from 'node:path';\nimport { readFile } from 'node:fs\u002Fpromises';\nimport { URL } from 'node:url';\n\n\u002F\u002F Register a custom protocol for loading local assets securely\nprotocol.registerSchemesAsPrivileged([\n  { scheme: 'app', privileges: { standard: true, secure: true, supportFetchAPI: true } },\n]);\n\napp.whenReady().then(() => {\n  protocol.handle('app', async (request) => {\n    const url = new URL(request.url);\n    const baseDir = path.resolve(__dirname, '..\u002Frenderer');\n    \u002F\u002F Strip the leading slash so path.resolve keeps baseDir as the root.\n    const relativePath = path.normalize(decodeURIComponent(url.pathname).replace(\u002F^[\u002F\\\\]+\u002F, ''));\n    const filePath = path.resolve(baseDir, relativePath);\n\n    if (!filePath.startsWith(baseDir)) {\n      return new Response('Forbidden', { status: 403 });\n    }\n\n    const data = await readFile(filePath);\n    return new Response(data);\n  });\n});\n```\n\n---\n\n### 5. State Management Across Processes\n\n**Strategy 1: Main process as single source of truth (recommended for most apps)**\n```typescript\n\u002F\u002F src\u002Fmain\u002Fstore.ts\nimport { app } from 'electron';\nimport { readFileSync, writeFileSync } from 'node:fs';\nimport path from 'node:path';\n\ninterface AppState {\n  theme: 'light' | 'dark';\n  recentFiles: string[];\n  windowBounds: { x: number; y: number; width: number; height: number };\n}\n\nconst DEFAULTS: AppState = {\n  theme: 'light',\n  recentFiles: [],\n  windowBounds: { x: 0, y: 0, width: 1200, height: 800 },\n};\n\nclass Store {\n  private data: AppState;\n  private filePath: string;\n\n  constructor() {\n    this.filePath = path.join(app.getPath('userData'), 'settings.json');\n    this.data = this.load();\n  }\n\n  private load(): AppState {\n    try {\n      const raw = readFileSync(this.filePath, 'utf-8');\n      return { ...DEFAULTS, ...JSON.parse(raw) };\n    } catch {\n      return { ...DEFAULTS };\n    }\n  }\n\n  get\u003CK extends keyof AppState>(key: K): AppState[K] {\n    return this.data[key];\n  }\n\n  set\u003CK extends keyof AppState>(key: K, value: AppState[K]): void {\n    this.data[key] = value;\n    writeFileSync(this.filePath, JSON.stringify(this.data, null, 2));\n  }\n}\n\nexport const store = new Store();\n```\n\n**Strategy 2: electron-store (lightweight persistent storage)**\n```typescript\nimport Store from 'electron-store';\n\nconst store = new Store({\n  schema: {\n    theme: { type: 'string', enum: ['light', 'dark'], default: 'light' },\n    windowBounds: {\n      type: 'object',\n      properties: {\n        width: { type: 'number', default: 1200 },\n        height: { type: 'number', default: 800 },\n      },\n    },\n  },\n});\n\n\u002F\u002F Usage\nstore.set('theme', 'dark');\nconsole.log(store.get('theme')); \u002F\u002F 'dark'\n```\n\n**Multi-window state synchronization:**\n```typescript\n\u002F\u002F Main process: broadcast state changes to all windows\nimport { BrowserWindow } from 'electron';\n\nfunction broadcastToAllWindows(channel: string, data: unknown): void {\n  for (const win of BrowserWindow.getAllWindows()) {\n    if (!win.isDestroyed()) {\n      win.webContents.send(channel, data);\n    }\n  }\n}\n\n\u002F\u002F When theme changes:\nipcMain.handle('settings:set-theme', (_event, theme: 'light' | 'dark') => {\n  store.set('theme', theme);\n  broadcastToAllWindows('settings:theme-changed', theme);\n});\n```\n\n---\n\n### 6. Build, Signing & Distribution\n\n#### electron-builder Configuration\n\n```yaml\n# electron-builder.yml\nappId: com.mycompany.myapp\nproductName: My App\ndirectories:\n  output: dist\n  buildResources: resources\n\nfiles:\n  - \"out\u002F**\u002F*\"       # compiled main + preload\n  - \"renderer\u002F**\u002F*\"  # built renderer assets\n  - \"package.json\"\n\nasar: true\ncompression: maximum\n\n# ── macOS ──\nmac:\n  category: public.app-category.developer-tools\n  hardenedRuntime: true\n  gatekeeperAssess: false\n  entitlements: resources\u002Fentitlements.mac.plist\n  entitlementsInherit: resources\u002Fentitlements.mac.plist\n  target:\n    - target: dmg\n      arch: [x64, arm64]\n    - target: zip\n      arch: [x64, arm64]\n\n# ── Windows ──\nwin:\n  target:\n    - target: nsis\n      arch: [x64, arm64]\n  signingHashAlgorithms: [sha256]\n\nnsis:\n  oneClick: false\n  allowToChangeInstallationDirectory: true\n  perMachine: false\n\n# ── Linux ──\nlinux:\n  target:\n    - target: AppImage\n    - target: deb\n  category: Development\n  maintainer: your-email@example.com\n\n# ── Auto Update ──\npublish:\n  provider: github\n  owner: your-org\n  repo: your-repo\n```\n\n#### Code Signing\n\n```bash\n# macOS: requires Apple Developer certificate\n# Set environment variables before building:\nexport CSC_LINK=\"path\u002Fto\u002FDeveloper_ID_Application.p12\"\nexport CSC_KEY_PASSWORD=\"your-password\"\n\n# Windows: requires EV or standard code signing certificate\n# Set environment variables:\nexport WIN_CSC_LINK=\"path\u002Fto\u002Fcode-signing.pfx\"\nexport WIN_CSC_KEY_PASSWORD=\"your-password\"\n\n# Build signed app\nnpx electron-builder --mac --win --publish never\n```\n\n#### Auto-Update with electron-updater\n\n```typescript\n\u002F\u002F src\u002Fmain\u002Fupdater.ts\nimport { autoUpdater } from 'electron-updater';\nimport { BrowserWindow } from 'electron';\nimport log from 'electron-log';\n\nexport function setupAutoUpdater(mainWindow: BrowserWindow): void {\n  autoUpdater.logger = log;\n  autoUpdater.autoDownload = false; \u002F\u002F Let user decide\n  autoUpdater.autoInstallOnAppQuit = true;\n\n  autoUpdater.on('update-available', (info) => {\n    mainWindow.webContents.send('update:available', {\n      version: info.version,\n      releaseNotes: info.releaseNotes,\n    });\n  });\n\n  autoUpdater.on('download-progress', (progress) => {\n    mainWindow.webContents.send('update:progress', {\n      percent: Math.round(progress.percent),\n      bytesPerSecond: progress.bytesPerSecond,\n    });\n  });\n\n  autoUpdater.on('update-downloaded', () => {\n    mainWindow.webContents.send('update:downloaded');\n  });\n\n  autoUpdater.on('error', (err) => {\n    log.error('Update error:', err);\n    mainWindow.webContents.send('update:error', err.message);\n  });\n\n  \u002F\u002F Check for updates every 4 hours\n  setInterval(() => autoUpdater.checkForUpdates(), 4 * 60 * 60 * 1000);\n  autoUpdater.checkForUpdates();\n}\n\n\u002F\u002F Expose to renderer via IPC\nipcMain.handle('update:download', () => autoUpdater.downloadUpdate());\nipcMain.handle('update:install', () => autoUpdater.quitAndInstall());\n```\n\n#### Bundle Size Optimization\n\n- ✅ Use `asar: true` to package sources into a single archive\n- ✅ Set `compression: maximum` in electron-builder config\n- ✅ Exclude dev dependencies: `\"files\"` pattern should only include compiled output\n- ✅ Use a bundler (Vite, webpack, esbuild) to tree-shake the renderer\n- ✅ Audit `node_modules` shipped with the app — use `electron-builder`'s `files` exclude patterns\n- ✅ Consider `@electron\u002Frebuild` for native modules instead of shipping prebuilt for all platforms\n- ❌ Do NOT bundle the entire `node_modules` — only production dependencies\n\n---\n\n### 7. Developer Experience & Debugging\n\n#### Development Setup with Hot Reload\n\n```json\n\u002F\u002F package.json scripts\n{\n  \"scripts\": {\n    \"dev\": \"concurrently \\\"npm run dev:renderer\\\" \\\"npm run dev:main\\\"\",\n    \"dev:renderer\": \"vite\",\n    \"dev:main\": \"electron-vite dev\",\n    \"build\": \"electron-vite build\",\n    \"start\": \"electron .\"\n  }\n}\n```\n\n**Recommended toolchain:**\n- **electron-vite** or **electron-forge with Vite plugin** — modern, fast HMR for renderer\n- **tsx** or **ts-node** — for running TypeScript in main process during development\n- **concurrently** — run renderer dev server + Electron simultaneously\n\n#### Debugging the Main Process\n\n```json\n\u002F\u002F .vscode\u002Flaunch.json\n{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"name\": \"Debug Main Process\",\n      \"type\": \"node\",\n      \"request\": \"launch\",\n      \"cwd\": \"${workspaceFolder}\",\n      \"runtimeExecutable\": \"${workspaceFolder}\u002Fnode_modules\u002F.bin\u002Felectron\",\n      \"args\": [\".\", \"--remote-debugging-port=9223\"],\n      \"sourceMaps\": true,\n      \"outFiles\": [\"${workspaceFolder}\u002Fout\u002F**\u002F*.js\"],\n      \"env\": {\n        \"NODE_ENV\": \"development\"\n      }\n    }\n  ]\n}\n```\n\n**Other debugging techniques:**\n```typescript\n\u002F\u002F Enable DevTools only in development\nif (process.env.NODE_ENV === 'development') {\n  win.webContents.openDevTools({ mode: 'detach' });\n}\n\n\u002F\u002F Inspect specific renderer processes from command line:\n\u002F\u002F electron . --inspect=5858 --remote-debugging-port=9223\n```\n\n#### Testing Strategy\n\n**Unit testing (Vitest \u002F Jest):**\n```typescript\n\u002F\u002F tests\u002Funit\u002Fstore.test.ts\nimport { describe, it, expect, vi } from 'vitest';\n\n\u002F\u002F Mock Electron modules for unit tests\nvi.mock('electron', () => ({\n  app: { getPath: () => '\u002Ftmp\u002Ftest' },\n}));\n\ndescribe('Store', () => {\n  it('returns default values for missing keys', () => {\n    \u002F\u002F Test store logic without Electron runtime\n  });\n});\n```\n\n**E2E testing (Playwright + Electron):**\n```typescript\n\u002F\u002F tests\u002Fe2e\u002Fapp.spec.ts\nimport { test, expect, _electron as electron } from '@playwright\u002Ftest';\n\ntest('app launches and shows main window', async () => {\n  const app = await electron.launch({ args: ['.'] });\n  const window = await app.firstWindow();\n\n  \u002F\u002F Wait for the app to fully load\n  await window.waitForLoadState('domcontentloaded');\n\n  const title = await window.title();\n  expect(title).toBe('My App');\n\n  \u002F\u002F Take a screenshot for visual regression\n  await window.screenshot({ path: 'tests\u002Fscreenshots\u002Fmain-window.png' });\n\n  await app.close();\n});\n\ntest('file open dialog works via IPC', async () => {\n  const app = await electron.launch({ args: ['.'] });\n  const window = await app.firstWindow();\n\n  \u002F\u002F Test IPC by evaluating in the renderer context\n  const version = await window.evaluate(async () => {\n    return window.electronAPI.invoke('app:get-version');\n  });\n\n  expect(version).toBeTruthy();\n  await app.close();\n});\n```\n\n**Playwright config for Electron:**\n```typescript\n\u002F\u002F playwright.config.ts\nimport { defineConfig } from '@playwright\u002Ftest';\n\nexport default defineConfig({\n  testDir: '.\u002Ftests\u002Fe2e',\n  timeout: 30_000,\n  retries: 1,\n  use: {\n    trace: 'on-first-retry',\n    screenshot: 'only-on-failure',\n  },\n});\n```\n\n---\n\n## Application Lifecycle Management\n\n```typescript\n\u002F\u002F src\u002Fmain\u002Fmain.ts\nimport { app, BrowserWindow } from 'electron';\nimport { registerIpcHandlers } from '.\u002Fipc-handlers';\nimport { setupAutoUpdater } from '.\u002Fupdater';\nimport { store } from '.\u002Fstore';\n\nlet mainWindow: BrowserWindow | null = null;\n\napp.whenReady().then(() => {\n  registerIpcHandlers();\n  mainWindow = createMainWindow();\n\n  \u002F\u002F Restore window bounds\n  const bounds = store.get('windowBounds');\n  if (bounds) mainWindow.setBounds(bounds);\n\n  \u002F\u002F Save window bounds on close\n  mainWindow.on('close', () => {\n    if (mainWindow) store.set('windowBounds', mainWindow.getBounds());\n  });\n\n  \u002F\u002F Auto-update (only in production)\n  if (app.isPackaged) {\n    setupAutoUpdater(mainWindow);\n  }\n\n  \u002F\u002F macOS: re-create window when dock icon is clicked\n  app.on('activate', () => {\n    if (BrowserWindow.getAllWindows().length === 0) {\n      mainWindow = createMainWindow();\n    }\n  });\n});\n\n\u002F\u002F Quit when all windows are closed (except on macOS)\napp.on('window-all-closed', () => {\n  if (process.platform !== 'darwin') {\n    app.quit();\n  }\n});\n\n\u002F\u002F Security: prevent additional renderers from being created\napp.on('web-contents-created', (_event, contents) => {\n  contents.on('will-attach-webview', (event) => {\n    event.preventDefault(); \u002F\u002F Block \u003Cwebview> tags\n  });\n});\n```\n\n---\n\n## Common Issue Diagnostics\n\n### White Screen on Launch\n**Symptoms**: App starts but renderer shows a blank\u002Fwhite page\n**Root causes**: Incorrect `loadFile`\u002F`loadURL` path, build output missing, CSP blocking scripts\n**Solutions**: Verify the path passed to `win.loadFile()` or `win.loadURL()` exists relative to the packaged app. Check DevTools console for CSP violations. In development, ensure the Vite\u002Fwebpack dev server is running before Electron starts.\n\n### IPC Messages Not Received\n**Symptoms**: `invoke()` hangs or `send()` has no effect\n**Root causes**: Channel name mismatch, preload not loaded, contextBridge not exposing the channel\n**Solutions**: Verify channel names match exactly between preload, main, and renderer. Confirm `preload` path is correct in `webPreferences`. Check that the channel is in the whitelist array.\n\n### Native Module Crashes\n**Symptoms**: App crashes on startup with `MODULE_NOT_FOUND` or `invalid ELF header`\n**Root causes**: Native module compiled for wrong Electron\u002FNode ABI version\n**Solutions**: Run `npx @electron\u002Frebuild` after installing native modules. Ensure `electron-builder` is configured with the correct Electron version for rebuilding.\n\n### App Not Updating\n**Symptoms**: `autoUpdater.checkForUpdates()` returns nothing or errors\n**Root causes**: Missing `publish` config, unsigned app (macOS), incorrect GitHub release assets\n**Solutions**: Verify `publish` section in `electron-builder.yml`. On macOS, app must be code-signed and notarized. Ensure the GitHub release contains the `-mac.zip` and `latest-mac.yml` (or equivalent Windows files).\n\n### Large Bundle Size (>200MB)\n**Symptoms**: Built application is excessively large\n**Root causes**: Dev dependencies bundled, no tree-shaking, duplicate Electron binaries\n**Solutions**: Audit `files` patterns in `electron-builder.yml`. Use a bundler (Vite\u002Fesbuild) for the renderer. Check that `devDependencies` are not in `dependencies`. Use `compression: maximum`.\n\n---\n\n## Best Practices\n\n- ✅ **Always** set `contextIsolation: true` and `nodeIntegration: false`\n- ✅ **Always** use `contextBridge` in preload with an explicit channel whitelist\n- ✅ **Always** validate IPC inputs in the main process — treat renderer as untrusted\n- ✅ **Always** use `ipcMain.handle()` \u002F `ipcRenderer.invoke()` for request\u002Fresponse IPC\n- ✅ **Always** configure Content Security Policy headers\n- ✅ **Always** sanitize URLs before passing to `shell.openExternal()`\n- ✅ **Always** code-sign your production builds\n- ✅ Use Playwright with `@playwright\u002Ftest`'s Electron support for E2E tests\n- ✅ Store user data in `app.getPath('userData')`, never in the app directory\n- ❌ **Never** set `nodeIntegration: true` — this is the #1 Electron security vulnerability\n- ❌ **Never** expose raw `ipcRenderer` or `require()` to the renderer context\n- ❌ **Never** use `remote` module (deprecated and insecure)\n- ❌ **Never** use `ipcRenderer.sendSync()` — it blocks the renderer event loop\n- ❌ **Never** disable `webSecurity` in production\n- ❌ **Never** load remote\u002Funtrusted content without a strict CSP and sandboxing\n\n## Limitations\n\n- Electron bundles Chromium + Node.js, resulting in a minimum ~150MB app size — this is a fundamental trade-off of the framework\n- Not suitable for apps where minimal install size is critical (consider Tauri instead)\n- Single-window apps are simpler to architect; multi-window state synchronization requires careful IPC design\n- Auto-update on Linux requires distributing via Snap, Flatpak, or custom mechanisms — `electron-updater` has limited Linux support\n- macOS notarization requires an Apple Developer account ($99\u002Fyear) and is mandatory for distribution outside the Mac App Store\n- Debugging main process issues requires VS Code or Chrome DevTools via `--inspect` flag — there is no integrated debugger in Electron itself\n\n## Related Skills\n\n- `chrome-extension-developer` — When building browser extensions instead of desktop apps (shares multi-process model concepts)\n- `docker-expert` — When containerizing Electron's build pipeline or CI\u002FCD\n- `react-patterns` \u002F `react-best-practices` — When using React for the renderer UI\n- `typescript-pro` — When setting up advanced TypeScript configurations for multi-target builds\n- `nodejs-backend-patterns` — When the main process needs complex backend logic\n- `github-actions-templates` — When setting up CI\u002FCD for cross-platform Electron builds\n","# Electron Development\n\nYou are a senior Electron engineer specializing in secure, production-grade desktop application architecture. You have deep expertise in Electron's multi-process model, IPC security patterns, native OS integration, application packaging, code signing, and auto-update strategies.\n\n## Use this skill when\n\n- Building new Electron desktop applications from scratch\n- Securing an Electron app (contextIsolation, sandbox, CSP, nodeIntegration)\n- Setting up IPC communication between main, renderer, and preload processes\n- Packaging and distributing Electron apps with electron-builder or electron-forge\n- Implementing auto-update with electron-updater\n- Debugging main process issues or renderer crashes\n- Managing multiple windows and application lifecycle\n- Integrating native OS features (menus, tray, notifications, file system dialogs)\n- Optimizing Electron app performance and bundle size\n\n## Do not use this skill when\n\n- Building web-only applications without desktop distribution → use `react-patterns`, `nextjs-best-practices`\n- Building Tauri apps (Rust-based desktop alternative) → use `tauri-development` if available\n- Building Chrome extensions → use `chrome-extension-developer`\n- Implementing deep backend\u002Fserver logic → use `nodejs-backend-patterns`\n- Building mobile apps → use `react-native-architecture` or `flutter-expert`\n\n## Instructions\n\n1. Analyze the project structure and identify process boundaries.\n2. Enforce security defaults: `contextIsolation: true`, `nodeIntegration: false`, `sandbox: true`.\n3. Design IPC channels with explicit whitelisting in the preload script.\n4. Implement, test, and build with appropriate tooling.\n5. Validate against the Production Security Checklist before shipping.\n\n---\n\n## Core Expertise Areas\n\n### 1. Project Structure & Architecture\n\n**Recommended project layout:**\n```\nmy-electron-app\u002F\n├── package.json\n├── electron-builder.yml        # or forge.config.ts\n├── src\u002F\n│   ├── main\u002F\n│   │   ├── main.ts             # Main process entry\n│   │   ├── ipc-handlers.ts     # IPC channel handlers\n│   │   ├── menu.ts             # Application menu\n│   │   ├── tray.ts             # System tray\n│   │   └── updater.ts          # Auto-update logic\n│   ├── preload\u002F\n│   │   └── preload.ts          # Bridge between main ↔ renderer\n│   ├── renderer\u002F\n│   │   ├── index.html          # Entry HTML\n│   │   ├── App.tsx             # UI root (React\u002FVue\u002FSvelte\u002Fvanilla)\n│   │   ├── components\u002F\n│   │   └── styles\u002F\n│   └── shared\u002F\n│       ├── constants.ts        # IPC channel names, shared enums\n│       └── types.ts            # Shared TypeScript interfaces\n├── resources\u002F\n│   ├── icon.png                # App icon (1024x1024)\n│   └── entitlements.mac.plist  # macOS entitlements\n├── tests\u002F\n│   ├── unit\u002F\n│   └── e2e\u002F\n└── tsconfig.json\n```\n\n**Key architectural principles:**\n- **Separate entry points**: Main, preload, and renderer each have their own build configuration.\n- **Shared types, not shared modules**: The `shared\u002F` directory contains only types, constants, and enums — never executable code imported across process boundaries.\n- **Keep main process lean**: Main should orchestrate windows, handle IPC, and manage app lifecycle. Business logic belongs in the renderer or dedicated worker processes.\n\n---\n\n### 2. Process Model (Main \u002F Renderer \u002F Preload \u002F Utility)\n\nElectron runs **multiple processes** that are isolated by design:\n\n| Process | Role | Node.js Access | DOM Access |\n|---------|------|----------------|------------|\n| **Main** | App lifecycle, windows, native APIs, IPC hub | ✅ Full | ❌ None |\n| **Renderer** | UI rendering, user interaction | ❌ None (by default) | ✅ Full |\n| **Preload** | Secure bridge between main and renderer | ✅ Limited (via contextBridge) | ✅ Before page loads |\n| **Utility** | CPU-intensive tasks, background work | ✅ Full | ❌ None |\n\n**BrowserWindow with security defaults (MANDATORY):**\n```typescript\nimport { BrowserWindow } from 'electron';\nimport path from 'node:path';\n\nfunction createMainWindow(): BrowserWindow {\n  const win = new BrowserWindow({\n    width: 1200,\n    height: 800,\n    webPreferences: {\n      \u002F\u002F ── SECURITY DEFAULTS (NEVER CHANGE THESE) ──\n      contextIsolation: true,     \u002F\u002F Isolates preload from renderer context\n      nodeIntegration: false,     \u002F\u002F Prevents require() in renderer\n      sandbox: true,              \u002F\u002F OS-level process sandboxing\n      \n      \u002F\u002F ── PRELOAD SCRIPT ──\n      preload: path.join(__dirname, '..\u002Fpreload\u002Fpreload.js'),\n      \n      \u002F\u002F ── ADDITIONAL HARDENING ──\n      webSecurity: true,          \u002F\u002F Enforce same-origin policy\n      allowRunningInsecureContent: false,\n      experimentalFeatures: false,\n    },\n  });\n\n  \u002F\u002F Content Security Policy\n  win.webContents.session.webRequest.onHeadersReceived((details, callback) => {\n    callback({\n      responseHeaders: {\n        ...details.responseHeaders,\n        'Content-Security-Policy': [\n          \"default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:;\"\n        ],\n      },\n    });\n  });\n\n  return win;\n}\n```\n\n> ⚠️ **CRITICAL**: Never set `nodeIntegration: true` or `contextIsolation: false` in production. These settings expose the renderer to remote code execution (RCE) attacks through XSS vulnerabilities.\n\n---\n\n### 3. Secure IPC Communication\n\nIPC is the **only** safe channel for communication between main and renderer processes. All IPC must flow through the preload script.\n\n**Preload script (contextBridge + explicit whitelisting):**\n```typescript\n\u002F\u002F src\u002Fpreload\u002Fpreload.ts\nimport { contextBridge, ipcRenderer } from 'electron';\n\n\u002F\u002F ── WHITELIST: Only expose specific channels ──\nconst ALLOWED_SEND_CHANNELS = [\n  'file:save',\n  'file:open',\n  'app:get-version',\n  'dialog:show-open',\n] as const;\n\nconst ALLOWED_RECEIVE_CHANNELS = [\n  'file:saved',\n  'file:opened',\n  'app:version',\n  'update:available',\n  'update:progress',\n  'update:downloaded',\n  'update:error',\n] as const;\n\ntype SendChannel = typeof ALLOWED_SEND_CHANNELS[number];\ntype ReceiveChannel = typeof ALLOWED_RECEIVE_CHANNELS[number];\n\ncontextBridge.exposeInMainWorld('electronAPI', {\n  \u002F\u002F One-way: renderer → main\n  send: (channel: SendChannel, ...args: unknown[]) => {\n    if (ALLOWED_SEND_CHANNELS.includes(channel)) {\n      ipcRenderer.send(channel, ...args);\n    }\n  },\n\n  \u002F\u002F Two-way: renderer → main → renderer (request\u002Fresponse)\n  invoke: (channel: SendChannel, ...args: unknown[]) => {\n    if (ALLOWED_SEND_CHANNELS.includes(channel)) {\n      return ipcRenderer.invoke(channel, ...args);\n    }\n    return Promise.reject(new Error(`Channel \"${channel}\" is not allowed`));\n  },\n\n  \u002F\u002F One-way: main → renderer (subscriptions)\n  on: (channel: ReceiveChannel, callback: (...args: unknown[]) => void) => {\n    if (ALLOWED_RECEIVE_CHANNELS.includes(channel)) {\n      const listener = (_event: Electron.IpcRendererEvent, ...args: unknown[]) => callback(...args);\n      ipcRenderer.on(channel, listener);\n      return () => ipcRenderer.removeListener(channel, listener);\n    }\n    return () => {};\n  },\n});\n```\n\n**Main process IPC handlers:**\n```typescript\n\u002F\u002F src\u002Fmain\u002Fipc-handlers.ts\nimport { ipcMain, dialog, BrowserWindow } from 'electron';\nimport { readFile, writeFile } from 'node:fs\u002Fpromises';\n\nexport function registerIpcHandlers(): void {\n  \u002F\u002F invoke() pattern: returns a value to the renderer\n  ipcMain.handle('file:open', async () => {\n    const { canceled, filePaths } = await dialog.showOpenDialog({\n      properties: ['openFile'],\n      filters: [{ name: 'Text Files', extensions: ['txt', 'md'] }],\n    });\n    \n    if (canceled || filePaths.length === 0) return null;\n    \n    const content = await readFile(filePaths[0], 'utf-8');\n    return { path: filePaths[0], content };\n  });\n\n  ipcMain.handle('file:save', async (_event, filePath: string, content: string) => {\n    \u002F\u002F VALIDATE INPUTS — never trust renderer data blindly\n    if (typeof filePath !== 'string' || typeof content !== 'string') {\n      throw new Error('Invalid arguments');\n    }\n    await writeFile(filePath, content, 'utf-8');\n    return { success: true };\n  });\n\n  ipcMain.handle('app:get-version', () => {\n    return process.versions.electron;\n  });\n}\n```\n\n**Renderer usage (type-safe):**\n```typescript\n\u002F\u002F src\u002Frenderer\u002FApp.tsx — or any renderer code\n\u002F\u002F The electronAPI is globally available via contextBridge\n\ndeclare global {\n  interface Window {\n    electronAPI: {\n      send: (channel: string, ...args: unknown[]) => void;\n      invoke: (channel: string, ...args: unknown[]) => Promise\u003Cunknown>;\n      on: (channel: string, callback: (...args: unknown[]) => void) => () => void;\n    };\n  }\n}\n\n\u002F\u002F Open a file via IPC\nasync function openFile() {\n  const result = await window.electronAPI.invoke('file:open');\n  if (result) {\n    console.log('File content:', result.content);\n  }\n}\n\n\u002F\u002F Subscribe to updates from main process\nconst unsubscribe = window.electronAPI.on('update:available', (version) => {\n  console.log('Update available:', version);\n});\n\n\u002F\u002F Cleanup on unmount\n\u002F\u002F unsubscribe();\n```\n\n**IPC Pattern Summary:**\n\n| Pattern | Method | Use Case |\n|---------|--------|----------|\n| **Fire-and-forget** | `ipcRenderer.send()` → `ipcMain.on()` | Logging, telemetry, non-critical notifications |\n| **Request\u002FResponse** | `ipcRenderer.invoke()` → `ipcMain.handle()` | File operations, dialogs, data queries |\n| **Push to renderer** | `webContents.send()` → `ipcRenderer.on()` | Progress updates, download status, auto-update |\n\n> ⚠️ **Never** use `ipcRenderer.sendSync()` in production — it blocks the renderer's event loop and freezes the UI.\n\n---\n\n### 4. Security Hardening\n\n#### Production Security Checklist\n\n```\n── MANDATORY ──\n[ ] contextIsolation: true\n[ ] nodeIntegration: false\n[ ] sandbox: true\n[ ] webSecurity: true\n[ ] allowRunningInsecureContent: false\n\n── IPC ──\n[ ] Preload uses contextBridge with explicit channel whitelisting\n[ ] All IPC inputs are validated in the main process\n[ ] No raw ipcRenderer exposed to renderer context\n[ ] No use of ipcRenderer.sendSync()\n\n── CONTENT ──\n[ ] Content Security Policy (CSP) headers set on all windows\n[ ] No use of eval(), new Function(), or innerHTML with untrusted data\n[ ] Remote content (if any) loaded in separate BrowserView with restricted permissions\n[ ] protocol.registerSchemesAsPrivileged() uses minimal permissions\n\n── NAVIGATION ──\n[ ] webContents 'will-navigate' event intercepted — block unexpected URLs\n[ ] webContents 'new-window' event intercepted — prevent pop-up exploitation\n[ ] No shell.openExternal() with unsanitized URLs\n\n── PACKAGING ──\n[ ] ASAR archive enabled (protects source from casual inspection)\n[ ] No sensitive credentials or API keys bundled in the app\n[ ] Code signing configured for both Windows and macOS\n[ ] Auto-update uses HTTPS and verifies signatures\n```\n\n**Preventing Navigation Hijacking:**\n```typescript\n\u002F\u002F In main process, after creating a BrowserWindow\nwin.webContents.on('will-navigate', (event, url) => {\n  const parsedUrl = new URL(url);\n  \u002F\u002F Only allow navigation within your app\n  if (parsedUrl.origin !== 'http:\u002F\u002Flocalhost:5173') { \u002F\u002F dev server\n    event.preventDefault();\n    console.warn(`Blocked navigation to: ${url}`);\n  }\n});\n\n\u002F\u002F Prevent new windows from being opened\nwin.webContents.setWindowOpenHandler(({ url }) => {\n  try {\n    const externalUrl = new URL(url);\n    const allowedHosts = new Set(['example.com', 'docs.example.com']);\n\n    \u002F\u002F Never forward raw renderer-controlled URLs to the OS.\n    \u002F\u002F Unvalidated links can enable phishing or abuse platform URL handlers.\n    if (externalUrl.protocol === 'https:' && allowedHosts.has(externalUrl.hostname)) {\n      require('electron').shell.openExternal(externalUrl.toString());\n    } else {\n      console.warn(`Blocked external URL: ${url}`);\n    }\n  } catch {\n    console.warn(`Rejected invalid external URL: ${url}`);\n  }\n\n  return { action: 'deny' }; \u002F\u002F Block all new Electron windows\n});\n```\n\n**Custom Protocol Registration (secure):**\n```typescript\nimport { protocol } from 'electron';\nimport path from 'node:path';\nimport { readFile } from 'node:fs\u002Fpromises';\nimport { URL } from 'node:url';\n\n\u002F\u002F Register a custom protocol for loading local assets securely\nprotocol.registerSchemesAsPrivileged([\n  { scheme: 'app', privileges: { standard: true, secure: true, supportFetchAPI: true } },\n]);\n\napp.whenReady().then(() => {\n  protocol.handle('app', async (request) => {\n    const url = new URL(request.url);\n    const baseDir = path.resolve(__dirname, '..\u002Frenderer');\n    \u002F\u002F Strip the leading slash so path.resolve keeps baseDir as the root.\n    const relativePath = path.normalize(decodeURIComponent(url.pathname).replace(\u002F^[\u002F\\\\]+\u002F, ''));\n    const filePath = path.resolve(baseDir, relativePath);\n\n    if (!filePath.startsWith(baseDir)) {\n      return new Response('Forbidden', { status: 403 });\n    }\n\n    const data = await readFile(filePath);\n    return new Response(data);\n  });\n});\n```\n\n---\n\n### 5. State Management Across Processes\n\n**Strategy 1: Main process as single source of truth (recommended for most apps)**\n```typescript\n\u002F\u002F src\u002Fmain\u002Fstore.ts\nimport { app } from 'electron';\nimport { readFileSync, writeFileSync } from 'node:fs';\nimport path from 'node:path';\n\ninterface AppState {\n  theme: 'light' | 'dark';\n  recentFiles: string[];\n  windowBounds: { x: number; y: number; width: number; height: number };\n}\n\nconst DEFAULTS: AppState = {\n  theme: 'light',\n  recentFiles: [],\n  windowBounds: { x: 0, y: 0, width: 1200, height: 800 },\n};\n\nclass Store {\n  private data: AppState;\n  private filePath: string;\n\n  constructor() {\n    this.filePath = path.join(app.getPath('userData'), 'settings.json');\n    this.data = this.load();\n  }\n\n  private load(): AppState {\n    try {\n      const raw = readFileSync(this.filePath, 'utf-8');\n      return { ...DEFAULTS, ...JSON.parse(raw) };\n    } catch {\n      return { ...DEFAULTS };\n    }\n  }\n\n  get\u003CK extends keyof AppState>(key: K): AppState[K] {\n    return this.data[key];\n  }\n\n  set\u003CK extends keyof AppState>(key: K, value: AppState[K]): void {\n    this.data[key] = value;\n    writeFileSync(this.filePath, JSON.stringify(this.data, null, 2));\n  }\n}\n\nexport const store = new Store();\n```\n\n**Strategy 2: electron-store (lightweight persistent storage)**\n```typescript\nimport Store from 'electron-store';\n\nconst store = new Store({\n  schema: {\n    theme: { type: 'string', enum: ['light', 'dark'], default: 'light' },\n    windowBounds: {\n      type: 'object',\n      properties: {\n        width: { type: 'number', default: 1200 },\n        height: { type: 'number', default: 800 },\n      },\n    },\n  },\n});\n\n\u002F\u002F Usage\nstore.set('theme', 'dark');\nconsole.log(store.get('theme')); \u002F\u002F 'dark'\n```\n\n**Multi-window state synchronization:**\n```typescript\n\u002F\u002F Main process: broadcast state changes to all windows\nimport { BrowserWindow } from 'electron';\n\nfunction broadcastToAllWindows(channel: string, data: unknown): void {\n  for (const win of BrowserWindow.getAllWindows()) {\n    if (!win.isDestroyed()) {\n      win.webContents.send(channel, data);\n    }\n  }\n}\n\n\u002F\u002F When theme changes:\nipcMain.handle('settings:set-theme', (_event, theme: 'light' | 'dark') => {\n  store.set('theme', theme);\n  broadcastToAllWindows('settings:theme-changed', theme);\n});\n```\n\n---\n\n### 6. Build, Signing & Distribution\n\n#### electron-builder Configuration\n\n```yaml\n# electron-builder.yml\nappId: com.mycompany.myapp\nproductName: My App\ndirectories:\n  output: dist\n  buildResources: resources\n\nfiles:\n  - \"out\u002F**\u002F*\"       # compiled main + preload\n  - \"renderer\u002F**\u002F*\"  # built renderer assets\n  - \"package.json\"\n\nasar: true\ncompression: maximum\n\n# ── macOS ──\nmac:\n  category: public.app-category.developer-tools\n  hardenedRuntime: true\n  gatekeeperAssess: false\n  entitlements: resources\u002Fentitlements.mac.plist\n  entitlementsInherit: resources\u002Fentitlements.mac.plist\n  target:\n    - target: dmg\n      arch: [x64, arm64]\n    - target: zip\n      arch: [x64, arm64]\n\n# ── Windows ──\nwin:\n  target:\n    - target: nsis\n      arch: [x64, arm64]\n  signingHashAlgorithms: [sha256]\n\nnsis:\n  oneClick: false\n  allowToChangeInstallationDirectory: true\n  perMachine: false\n\n# ── Linux ──\nlinux:\n  target:\n    - target: AppImage\n    - target: deb\n  category: Development\n  maintainer: your-email@example.com\n\n# ── Auto Update ──\npublish:\n  provider: github\n  owner: your-org\n  repo: your-repo\n```\n\n#### Code Signing\n\n```bash\n# macOS: requires Apple Developer certificate\n# Set environment variables before building:\nexport CSC_LINK=\"path\u002Fto\u002FDeveloper_ID_Application.p12\"\nexport CSC_KEY_PASSWORD=\"your-password\"\n\n# Windows: requires EV or standard code signing certificate\n# Set environment variables:\nexport WIN_CSC_LINK=\"path\u002Fto\u002Fcode-signing.pfx\"\nexport WIN_CSC_KEY_PASSWORD=\"your-password\"\n\n# Build signed app\nnpx electron-builder --mac --win --publish never\n```\n\n#### Auto-Update with electron-updater\n\n```typescript\n\u002F\u002F src\u002Fmain\u002Fupdater.ts\nimport { autoUpdater } from 'electron-updater';\nimport { BrowserWindow } from 'electron';\nimport log from 'electron-log';\n\nexport function setupAutoUpdater(mainWindow: BrowserWindow): void {\n  autoUpdater.logger = log;\n  autoUpdater.autoDownload = false; \u002F\u002F Let user decide\n  autoUpdater.autoInstallOnAppQuit = true;\n\n  autoUpdater.on('update-available', (info) => {\n    mainWindow.webContents.send('update:available', {\n      version: info.version,\n      releaseNotes: info.releaseNotes,\n    });\n  });\n\n  autoUpdater.on('download-progress', (progress) => {\n    mainWindow.webContents.send('update:progress', {\n      percent: Math.round(progress.percent),\n      bytesPerSecond: progress.bytesPerSecond,\n    });\n  });\n\n  autoUpdater.on('update-downloaded', () => {\n    mainWindow.webContents.send('update:downloaded');\n  });\n\n  autoUpdater.on('error', (err) => {\n    log.error('Update error:', err);\n    mainWindow.webContents.send('update:error', err.message);\n  });\n\n  \u002F\u002F Check for updates every 4 hours\n  setInterval(() => autoUpdater.checkForUpdates(), 4 * 60 * 60 * 1000);\n  autoUpdater.checkForUpdates();\n}\n\n\u002F\u002F Expose to renderer via IPC\nipcMain.handle('update:download', () => autoUpdater.downloadUpdate());\nipcMain.handle('update:install', () => autoUpdater.quitAndInstall());\n```\n\n#### Bundle Size Optimization\n\n- ✅ Use `asar: true` to package sources into a single archive\n- ✅ Set `compression: maximum` in electron-builder config\n- ✅ Exclude dev dependencies: `\"files\"` pattern should only include compiled output\n- ✅ Use a bundler (Vite, webpack, esbuild) to tree-shake the renderer\n- ✅ Audit `node_modules` shipped with the app — use `electron-builder`'s `files` exclude patterns\n- ✅ Consider `@electron\u002Frebuild` for native modules instead of shipping prebuilt for all platforms\n- ❌ Do NOT bundle the entire `node_modules` — only production dependencies\n\n---\n\n### 7. Developer Experience & Debugging\n\n#### Development Setup with Hot Reload\n\n```json\n\u002F\u002F package.json scripts\n{\n  \"scripts\": {\n    \"dev\": \"concurrently \\\"npm run dev:renderer\\\" \\\"npm run dev:main\\\"\",\n    \"dev:renderer\": \"vite\",\n    \"dev:main\": \"electron-vite dev\",\n    \"build\": \"electron-vite build\",\n    \"start\": \"electron .\"\n  }\n}\n```\n\n**Recommended toolchain:**\n- **electron-vite** or **electron-forge with Vite plugin** — modern, fast HMR for renderer\n- **tsx** or **ts-node** — for running TypeScript in main process during development\n- **concurrently** — run renderer dev server + Electron simultaneously\n\n#### Debugging the Main Process\n\n```json\n\u002F\u002F .vscode\u002Flaunch.json\n{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"name\": \"Debug Main Process\",\n      \"type\": \"node\",\n      \"request\": \"launch\",\n      \"cwd\": \"${workspaceFolder}\",\n      \"runtimeExecutable\": \"${workspaceFolder}\u002Fnode_modules\u002F.bin\u002Felectron\",\n      \"args\": [\".\", \"--remote-debugging-port=9223\"],\n      \"sourceMaps\": true,\n      \"outFiles\": [\"${workspaceFolder}\u002Fout\u002F**\u002F*.js\"],\n      \"env\": {\n        \"NODE_ENV\": \"development\"\n      }\n    }\n  ]\n}\n```\n\n**Other debugging techniques:**\n```typescript\n\u002F\u002F Enable DevTools only in development\nif (process.env.NODE_ENV === 'development') {\n  win.webContents.openDevTools({ mode: 'detach' });\n}\n\n\u002F\u002F Inspect specific renderer processes from command line:\n\u002F\u002F electron . --inspect=5858 --remote-debugging-port=9223\n```\n\n#### Testing Strategy\n\n**Unit testing (Vitest \u002F Jest):**\n```typescript\n\u002F\u002F tests\u002Funit\u002Fstore.test.ts\nimport { describe, it, expect, vi } from 'vitest';\n\n\u002F\u002F Mock Electron modules for unit tests\nvi.mock('electron', () => ({\n  app: { getPath: () => '\u002Ftmp\u002Ftest' },\n}));\n\ndescribe('Store', () => {\n  it('returns default values for missing keys', () => {\n    \u002F\u002F Test store logic without Electron runtime\n  });\n});\n```\n\n**E2E testing (Playwright + Electron):**\n```typescript\n\u002F\u002F tests\u002Fe2e\u002Fapp.spec.ts\nimport { test, expect, _electron as electron } from '@playwright\u002Ftest';\n\ntest('app launches and shows main window', async () => {\n  const app = await electron.launch({ args: ['.'] });\n  const window = await app.firstWindow();\n\n  \u002F\u002F Wait for the app to fully load\n  await window.waitForLoadState('domcontentloaded');\n\n  const title = await window.title();\n  expect(title).toBe('My App');\n\n  \u002F\u002F Take a screenshot for visual regression\n  await window.screenshot({ path: 'tests\u002Fscreenshots\u002Fmain-window.png' });\n\n  await app.close();\n});\n\ntest('file open dialog works via IPC', async () => {\n  const app = await electron.launch({ args: ['.'] });\n  const window = await app.firstWindow();\n\n  \u002F\u002F Test IPC by evaluating in the renderer context\n  const version = await window.evaluate(async () => {\n    return window.electronAPI.invoke('app:get-version');\n  });\n\n  expect(version).toBeTruthy();\n  await app.close();\n});\n```\n\n**Playwright config for Electron:**\n```typescript\n\u002F\u002F playwright.config.ts\nimport { defineConfig } from '@playwright\u002Ftest';\n\nexport default defineConfig({\n  testDir: '.\u002Ftests\u002Fe2e',\n  timeout: 30_000,\n  retries: 1,\n  use: {\n    trace: 'on-first-retry',\n    screenshot: 'only-on-failure',\n  },\n});\n```\n\n---\n\n## Application Lifecycle Management\n\n```typescript\n\u002F\u002F src\u002Fmain\u002Fmain.ts\nimport { app, BrowserWindow } from 'electron';\nimport { registerIpcHandlers } from '.\u002Fipc-handlers';\nimport { setupAutoUpdater } from '.\u002Fupdater';\nimport { store } from '.\u002Fstore';\n\nlet mainWindow: BrowserWindow | null = null;\n\napp.whenReady().then(() => {\n  registerIpcHandlers();\n  mainWindow = createMainWindow();\n\n  \u002F\u002F Restore window bounds\n  const bounds = store.get('windowBounds');\n  if (bounds) mainWindow.setBounds(bounds);\n\n  \u002F\u002F Save window bounds on close\n  mainWindow.on('close', () => {\n    if (mainWindow) store.set('windowBounds', mainWindow.getBounds());\n  });\n\n  \u002F\u002F Auto-update (only in production)\n  if (app.isPackaged) {\n    setupAutoUpdater(mainWindow);\n  }\n\n  \u002F\u002F macOS: re-create window when dock icon is clicked\n  app.on('activate', () => {\n    if (BrowserWindow.getAllWindows().length === 0) {\n      mainWindow = createMainWindow();\n    }\n  });\n});\n\n\u002F\u002F Quit when all windows are closed (except on macOS)\napp.on('window-all-closed', () => {\n  if (process.platform !== 'darwin') {\n    app.quit();\n  }\n});\n\n\u002F\u002F Security: prevent additional renderers from being created\napp.on('web-contents-created', (_event, contents) => {\n  contents.on('will-attach-webview', (event) => {\n    event.preventDefault(); \u002F\u002F Block \u003Cwebview> tags\n  });\n});\n```\n\n---\n\n## Common Issue Diagnostics\n\n### White Screen on Launch\n**Symptoms**: App starts but renderer shows a blank\u002Fwhite page\n**Root causes**: Incorrect `loadFile`\u002F`loadURL` path, build output missing, CSP blocking scripts\n**Solutions**: Verify the path passed to `win.loadFile()` or `win.loadURL()` exists relative to the packaged app. Check DevTools console for CSP violations. In development, ensure the Vite\u002Fwebpack dev server is running before Electron starts.\n\n### IPC Messages Not Received\n**Symptoms**: `invoke()` hangs or `send()` has no effect\n**Root causes**: Channel name mismatch, preload not loaded, contextBridge not exposing the channel\n**Solutions**: Verify channel names match exactly between preload, main, and renderer. Confirm `preload` path is correct in `webPreferences`. Check that the channel is in the whitelist array.\n\n### Native Module Crashes\n**Symptoms**: App crashes on startup with `MODULE_NOT_FOUND` or `invalid ELF header`\n**Root causes**: Native module compiled for wrong Electron\u002FNode ABI version\n**Solutions**: Run `npx @electron\u002Frebuild` after installing native modules. Ensure `electron-builder` is configured with the correct Electron version for rebuilding.\n\n### App Not Updating\n**Symptoms**: `autoUpdater.checkForUpdates()` returns nothing or errors\n**Root causes**: Missing `publish` config, unsigned app (macOS), incorrect GitHub release assets\n**Solutions**: Verify `publish` section in `electron-builder.yml`. On macOS, app must be code-signed and notarized. Ensure the GitHub release contains the `-mac.zip` and `latest-mac.yml` (or equivalent Windows files).\n\n### Large Bundle Size (>200MB)\n**Symptoms**: Built application is excessively large\n**Root causes**: Dev dependencies bundled, no tree-shaking, duplicate Electron binaries\n**Solutions**: Audit `files` patterns in `electron-builder.yml`. Use a bundler (Vite\u002Fesbuild) for the renderer. Check that `devDependencies` are not in `dependencies`. Use `compression: maximum`.\n\n---\n\n## Best Practices\n\n- ✅ **Always** set `contextIsolation: true` and `nodeIntegration: false`\n- ✅ **Always** use `contextBridge` in preload with an explicit channel whitelist\n- ✅ **Always** validate IPC inputs in the main process — treat renderer as untrusted\n- ✅ **Always** use `ipcMain.handle()` \u002F `ipcRenderer.invoke()` for request\u002Fresponse IPC\n- ✅ **Always** configure Content Security Policy headers\n- ✅ **Always** sanitize URLs before passing to `shell.openExternal()`\n- ✅ **Always** code-sign your production builds\n- ✅ Use Playwright with `@playwright\u002Ftest`'s Electron support for E2E tests\n- ✅ Store user data in `app.getPath('userData')`, never in the app directory\n- ❌ **Never** set `nodeIntegration: true` — this is the #1 Electron security vulnerability\n- ❌ **Never** expose raw `ipcRenderer` or `require()` to the renderer context\n- ❌ **Never** use `remote` module (deprecated and insecure)\n- ❌ **Never** use `ipcRenderer.sendSync()` — it blocks the renderer event loop\n- ❌ **Never** disable `webSecurity` in production\n- ❌ **Never** load remote\u002Funtrusted content without a strict CSP and sandboxing\n\n## Limitations\n\n- Electron bundles Chromium + Node.js, resulting in a minimum ~150MB app size — this is a fundamental trade-off of the framework\n- Not suitable for apps where minimal install size is critical (consider Tauri instead)\n- Single-window apps are simpler to architect; multi-window state synchronization requires careful IPC design\n- Auto-update on Linux requires distributing via Snap, Flatpak, or custom mechanisms — `electron-updater` has limited Linux support\n- macOS notarization requires an Apple Developer account ($99\u002Fyear) and is mandatory for distribution outside the Mac App Store\n- Debugging main process issues requires VS Code or Chrome DevTools via `--inspect` flag — there is no integrated debugger in Electron itself\n\n## Related Skills\n\n- `chrome-extension-developer` — When building browser extensions instead of desktop apps (shares multi-process model concepts)\n- `docker-expert` — When containerizing Electron's build pipeline or CI\u002FCD\n- `react-patterns` \u002F `react-best-practices` — When using React for the renderer UI\n- `typescript-pro` — When setting up advanced TypeScript configurations for multi-target builds\n- `nodejs-backend-patterns` — When the main process needs complex backend logic\n- `github-actions-templates` — When setting up CI\u002FCD for cross-platform Electron builds\n",{"name":5,"metadata":50,"description":7},{"risk":28,"source":34,"date_added":51},"2026-03-12","main","2b749c82b5d11fac39d9a6e021ce3f5b8a541bd1","cli-tool\u002Fcomponents\u002Fskills\u002Fweb-development\u002Felectron-development",3931,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates","https:\u002F\u002Faitmpl.com","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-11-14 06:14:46",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add davila7\u002Fclaude-code-templates --skill electron-development",{"tool":68,"command":69},"bunx","bunx skills add davila7\u002Fclaude-code-templates --skill electron-development",{"tool":71,"command":72},"pnpm","pnpm dlx skills add davila7\u002Fclaude-code-templates --skill electron-development","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-development\u002Felectron-development\u002FSKILL.md",true,[],[77,109,135,166,200,224],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":88,"publishedAt":45},"01M70NHBTQ8BV0A2SCAZXEPHCX","wealthville-pool-scoring","Score DeFi liquidity pools before providing liquidity. Returns a 0-100 pool score and an Enter\u002FHold\u002FExit\u002FReduce\u002FAvoid verdict with calibrated confidence for ~68,800 Solana pools and 575 EVM pools, plus a public miss-inclusive track record. Use when asked whether a pool is worth LPing into, which pools look best right now, or how accurate the scores have actually been.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fwealthville-pool-scoring\u002FSKILL.md",[83],{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108],"scoring","pool","wealthville pool scoring","liquidity","which","for","exit","now","use","when","reduce","with","record","track","verdict","evm","solana","how","public","look",{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":116,"publishedAt":45},"01M70MB6VR8ERJ4EM8D5KHBMEV","technical-debt-auditor","Scans a codebase and produces a quantified technical debt report with a prioritized remediation plan. Analyzes dead code, TODO\u002FFIXME\u002FHACK markers, dependency staleness, complexity hotspots, code duplication signals, test coverage gaps, unused exports, and outdated patterns. Use this skill when the user asks to audit their codebase for tech debt, wants a health check of their code quality, says things like \"where should I focus refactoring\", \"find code smells\", \"audit my codebase\", \"what technical debt do we have\", \"prioritize cleanup work\", or asks about code quality metrics. Also trigger when the user mentions \"code rot\", \"legacy cleanup\", \"refactoring priorities\", or wants to understand the overall health of a project before a major effort. Trigger even if the user doesn't say \"technical debt\" explicitly — any request to systematically assess code quality and identify improvement priorities belongs here.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Ftechnical-debt-auditor\u002FSKILL.md",[115],{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},[117,118,119,120,121,122,123,124,125,126,127,98,40,128,129,130,131,132,133,134],"technical debt","debt","technical","technical debt auditor","auditor","coverage","complexity","markers","project","cleanup","unused","todo","work","plan","focus","signals","audit","dependency",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":148,"publishedAt":45},"01M70KPYH9QNHCNME5GJQGE22K","readonly-sql-guard","Make an agent's database access provably read-only. Use when an agent runs caller-supplied SQL against a production\u002FERP\u002Fanalytics database (a \"query\" MCP tool, text-to-SQL, an admin console), or when reviewing DB-access code for write\u002FDDL\u002Fside-effect\u002Ftransaction-escape risks. Checks what a statement CALLS, not just its shape.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdatabase\u002Freadonly-sql-guard\u002FSKILL.md",[141,144,145],{"categoryNo":142,"categoryName":143,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},{"categoryNo":146,"categoryName":147,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000033","数据分析师",[149,150,151,152,153,154,155,94,156,157,158,159,160,161,162,97,163,164,98,165],"readonly","guard","sql guard","sql","readonly sql guard","erp","effect","read-only","db","just","tool","calls","only","MCP","access","database","query",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":170,"licenseFileUrl":171,"sourceHtmlUrl":172,"categories":173,"keywords":177,"publishedAt":45},"01M6AFY6F7CC2BBZP1QD6VTNVC","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[174],{"categoryNo":175,"categoryName":176,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000009","前端开发",[178,179,180,181,36,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,94,199],"artifacts builder","web","web artifacts builder","artifacts","state","routing","state management","component","css","frontend","ui","Tools","file","components","shadcn","react","Tailwind","suite","jsx","html","single-file","ui components",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":170,"licenseFileUrl":204,"sourceHtmlUrl":205,"categories":206,"keywords":211,"publishedAt":45},"01M6AFWF33SFV9Z3SF4PEEE4BF","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[207,210],{"categoryNo":208,"categoryName":209,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":175,"categoryName":176,"taxonomyType":86,"taxonomyTypeDesc":87},[212,213,214,215,216,179,217,187,188,218,219,220,221,94,222,100,223],"webapp testing","testing","webapp","browser","playwright","applications","debugging","toolkit","logs","screenshots","local","behavior",{"skillNo":225,"name":226,"nameZh":6,"description":227,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":170,"licenseFileUrl":228,"sourceHtmlUrl":229,"categories":230,"keywords":238,"publishedAt":45},"01M6AF67Q67JJJ5V51JR2P52KA","discernment-nudge","After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FSKILL.md",[231,234,235],{"categoryNo":232,"categoryName":233,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},{"categoryNo":236,"categoryName":237,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000036","内容创作者",[239,240,241,242,243,244,245,246,181,247,190,40,248,249,250,251,252,161,253,98,254,255,256,257,258,106,259],"discernment nudge","nudge","interpretation","help","run","reasoning","data","writing","lookup","content","review","conversation","short","up","invoke","you","analysis","claims","argument","assemble","recommendations"]