electron-development by mindrally/skills
npx skills add https://github.com/mindrally/skills --skill electron-development您是一位构建跨平台桌面应用程序的 Electron 开发专家。
src/
├── main/ # 主进程代码
│ ├── index.ts # 入口点
│ ├── ipc/ # IPC 处理器
│ └── utils/ # 工具函数
├── renderer/ # 渲染进程代码
│ ├── components/ # UI 组件
│ ├── pages/ # 应用程序页面
│ └── styles/ # 样式表
├── preload/ # 预加载脚本
│ └── index.ts # 向渲染进程暴露 API
└── shared/ # 共享类型和工具函数
// main.js
const win = new BrowserWindow({
webPreferences: {
contextIsolation: true,
nodeIntegration: false,
preload: path.join(__dirname, 'preload.js')
}
});
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
sendMessage: (channel, data) => {
const validChannels = ['toMain'];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
onMessage: (channel, callback) => {
const validChannels = ['fromMain'];
if (validChannels.includes(channel)) {
ipcRenderer.on(channel, (event, ...args) => callback(...args));
}
}
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
const { ipcMain } = require('electron');
ipcMain.handle('read-file', async (event, filePath) => {
const content = await fs.promises.readFile(filePath, 'utf-8');
return content;
});
ipcMain.on('save-file', (event, { path, content }) => {
fs.writeFileSync(path, content);
event.reply('file-saved', { success: true });
});
// 使用从预加载脚本暴露的 API
const content = await window.electronAPI.readFile('/path/to/file');
const { BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 1200,
height: 800,
minWidth: 800,
minHeight: 600,
webPreferences: {
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
});
// 处理窗口事件
win.on('closed', () => {
// 清理工作
});
// 加载内容
if (process.env.NODE_ENV === 'development') {
win.loadURL('http://localhost:3000');
win.webContents.openDevTools();
} else {
win.loadFile('dist/index.html');
}
}
const { autoUpdater } = require('electron-updater');
autoUpdater.on('update-available', () => {
// 通知用户
});
autoUpdater.on('update-downloaded', () => {
autoUpdater.quitAndInstall();
});
app.whenReady().then(() => {
autoUpdater.checkForUpdatesAndNotify();
});
每周安装量
106
代码仓库
GitHub 星标数
42
首次出现
2026年1月25日
安全审计
安装于
opencode89
gemini-cli88
codex85
cursor82
github-copilot80
claude-code76
You are an expert in Electron development for building cross-platform desktop applications.
src/
├── main/ # Main process code
│ ├── index.ts # Entry point
│ ├── ipc/ # IPC handlers
│ └── utils/ # Utilities
├── renderer/ # Renderer process code
│ ├── components/ # UI components
│ ├── pages/ # Application pages
│ └── styles/ # Stylesheets
├── preload/ # Preload scripts
│ └── index.ts # Expose APIs to renderer
└── shared/ # Shared types and utilities
// main.js
const win = new BrowserWindow({
webPreferences: {
contextIsolation: true,
nodeIntegration: false,
preload: path.join(__dirname, 'preload.js')
}
});
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
sendMessage: (channel, data) => {
const validChannels = ['toMain'];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
onMessage: (channel, callback) => {
const validChannels = ['fromMain'];
if (validChannels.includes(channel)) {
ipcRenderer.on(channel, (event, ...args) => callback(...args));
}
}
});
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
const { ipcMain } = require('electron');
ipcMain.handle('read-file', async (event, filePath) => {
const content = await fs.promises.readFile(filePath, 'utf-8');
return content;
});
ipcMain.on('save-file', (event, { path, content }) => {
fs.writeFileSync(path, content);
event.reply('file-saved', { success: true });
});
// Using exposed API from preload
const content = await window.electronAPI.readFile('/path/to/file');
const { BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 1200,
height: 800,
minWidth: 800,
minHeight: 600,
webPreferences: {
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
});
// Handle window events
win.on('closed', () => {
// Cleanup
});
// Load content
if (process.env.NODE_ENV === 'development') {
win.loadURL('http://localhost:3000');
win.webContents.openDevTools();
} else {
win.loadFile('dist/index.html');
}
}
const { autoUpdater } = require('electron-updater');
autoUpdater.on('update-available', () => {
// Notify user
});
autoUpdater.on('update-downloaded', () => {
autoUpdater.quitAndInstall();
});
app.whenReady().then(() => {
autoUpdater.checkForUpdatesAndNotify();
});
Weekly Installs
106
Repository
GitHub Stars
42
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode89
gemini-cli88
codex85
cursor82
github-copilot80
claude-code76
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
4,500 周安装
Python uv包管理工具使用指南:替代pip和poetry的现代依赖管理方案
224 周安装
Android ViewModel 状态管理指南:使用 StateFlow 与 SharedFlow 实现 UI 状态与事件处理
224 周安装
Shape Up产品管理方法:告别估算陷阱,实现高效交付的产品开发框架
103 周安装
TLDR Stats - Claude AI 令牌使用监控与成本节省分析仪表盘工具
225 周安装
Agentica SDK 中文指南:Python AI 智能体开发框架,支持多智能体编排与工具集成
225 周安装
Continuous Claude系统概览:AI助手工作原理、记忆层与钩子机制详解
228 周安装