electron
使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的核心框架。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：electron。 它的用途是：使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的核心框架。 完整的 Skill 内容见：https://321skill.com/skills/electron/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
当你需要将一个现有的 Vue 或 React 管理后台项目打包成独立的桌面应用时，可以对 AI 说：“帮我在 Electron 项目中集成这个 Vue 应用的构建产物，并添加一个系统托盘菜单。” 它会指导你配置主进程和渲染进程，调用 Electron API 来加载本地网页文件并创建原生菜单。或者，当你需要实现一个文件管理器功能时，对 AI 说：“在 Electron 里怎么用 Node.js 的 fs 模块读取用户选择的文件夹？” 它会提供使用 dialog 模块和 IPC 通信的代码示例。
介绍
Electron 解决了使用 Web 技术栈（JavaScript、HTML、CSS）开发原生桌面应用的难题。它通过将 Chromium 渲染引擎和 Node.js 运行时环境相结合，使开发者能够像构建网页一样开发桌面应用，并可以调用操作系统的原生 API。
使用 Electron 开发时，开发者主要编写前端代码，应用逻辑运行在渲染进程中，而需要访问系统资源的操作（如文件系统、菜单栏）则通过主进程处理。项目创建后，可通过 npm 安装 Electron 依赖，然后使用其 API 构建应用界面和功能，最后打包成适用于 Windows、macOS 和 Linux 的可执行文件。
它非常适合熟悉 Web 技术栈（如前端工程师、全栈开发者）并希望将其技能扩展到桌面应用领域的开发者。许多知名应用如 Visual Studio Code、Slack、Discord 和 Figma 桌面版都基于 Electron 构建，证明了其在生产环境中的可靠性和强大能力。
与纯粹的 Web 应用框架（如 React、Vue）相比，Electron 提供了访问操作系统原生功能的能力；与传统的原生开发工具（如 Qt、.NET）相比，它极大地降低了桌面应用开发的门槛，让 Web 开发者能够快速上手。其核心优势在于用一套代码实现跨平台部署，并拥有庞大的 Web 开发生态系统支持。
核心特点
Electron 的核心区别在于其技术栈：它将成熟的 Chromium 浏览器引擎与完整的 Node.js 运行时深度集成，使得开发者能够在一个环境中同时使用 Web 技术构建界面和 Node.js 生态处理系统级任务，这是其他跨平台框架（如基于特定语言绑定的方案）难以比拟的。
注意事项
由于内嵌了完整的 Chromium 和 Node.js，Electron 应用通常体积较大、内存占用较高，不适合对资源占用极其敏感或追求极致原生性能的轻量级工具开发。
常见问题
Electron 应用体积为什么比较大？
因为每个 Electron 应用都打包了一个精简版的 Chromium 浏览器和 Node.js 运行时，以确保应用在不同操作系统上拥有一致的运行环境。
Electron 适合开发什么类型的应用？
非常适合开发需要复杂 UI 交互、频繁更新且对原生性能要求不是极致的桌面应用，如编辑器、聊天工具、协作软件、管理后台等。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/electron/raw/index.md 读取 electron 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/electron/raw/index.md（查看排版版本）