القائمة
Expert in building cross-platform desktop applications using web technologies (HTML/CSS/JS) with the Electron framework.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Writing and maintaining lat.md documentation files — structured markdown that describes a project's architecture, design decisions, and test specs. Use when creating, editing, or reviewing files in the lat.md/ directory.
TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling.
Expert in building self-improving AI agents with tool use, multi-platform messaging, and a closed learning loop. Proficient in LLM orchestration, tool integration, session management, and agent autonomy.
| name | electron-pro |
| description | Expert in building cross-platform desktop applications using web technologies (HTML/CSS/JS) with the Electron framework. |
Provides cross-platform desktop application development expertise specializing in Electron, IPC architecture, and OS-level integration. Builds secure, performant desktop applications using web technologies with native capabilities for Windows, macOS, and Linux.
How to structure the app?
│
├─ **Security First (Recommended)**
│ ├─ Context Isolation? → **Yes** (Standard since v12)
│ ├─ Node Integration? → **No** (Never in Renderer)
│ └─ Preload Scripts? → **Yes** (Bridge API)
│
├─ **Data Persistence**
│ ├─ Simple Settings? → **electron-store** (JSON)
│ ├─ Large Datasets? → **SQLite** (`better-sqlite3` in Main process)
│ └─ User Files? → **Native File System API**
│
└─ **UI Framework**
├─ React/Vue/Svelte? → **Yes** (Standard SPA approach)
├─ Multiple Windows? → **Window Manager Pattern**
└─ System Tray App? → **Hidden Window Pattern**
| Pattern | Method | Use Case |
|---|---|---|
| One-Way (Renderer → Main) | ipcRenderer.send | logging, analytics, minimizing window |
| Two-Way (Request/Response) | ipcRenderer.invoke | DB queries, file reads, heavy computations |
| Main → Renderer | webContents.send | Menu actions, system events, push notifications |
Red Flags → Escalate to security-auditor:
nodeIntegration: true in productioncontextIsolationhttps://) without strict CSPremote module (Deprecated & insecure)Goal: Reduce launch time to < 2s.
Steps:
V8 Snapshot
electron-link or v8-compile-cache to pre-compile JS.Lazy Loading Modules
require() everything at top of main.ts.// Bad
import { heavyLib } from "heavy-lib";
// Good
ipcMain.handle("do-work", () => {
const heavyLib = require("heavy-lib");
heavyLib.process();
});
Bundle Main Process
esbuild or webpack for Main process (not just Renderer) to tree-shake unused code and minify.Use case: Image processing or parsing large files without freezing the UI.
// main.ts
import { Worker } from "worker_threads";
ipcMain.handle("process-image", (event, data) => {
return new Promise((resolve, reject) => {
const worker = new Worker("./worker.js", { workerData: data });
worker.on("message", resolve);
worker.on("error", reject);
});
});
Use case: Opening app from browser (myapp://open?id=123).
// main.ts
if (process.defaultApp) {
if (process.argv.length >= 2) {
app.setAsDefaultProtocolClient("myapp", process.execPath, [
path.resolve(process.argv[1]),
]);
}
} else {
app.setAsDefaultProtocolClient("myapp");
}
app.on("open-url", (event, url) => {
event.preventDefault();
// Parse url 'myapp://...' and navigate renderer
mainWindow.webContents.send("navigate", url);
});
app-region: drag.