AIKraft/AI/Войти
AIKraft/Skills/Разработка на Electron

Разработка на Electron

Electron development guidelines for building cross-platform desktop applications with JavaScript/TypeScript

mindrally official Разработка

Что делает навык

Навык предоставляет экспертные рекомендации по разработке кроссплатформенных десктопных приложений на Electron с использованием JavaScript/TypeScript. Он охватывает принципы безопасности, архитектуру процессов, управление окнами и инструменты сборки.

Когда применять

  • Создание структуры проекта с разделением кода на main, renderer, preload и shared процессы.
  • Настройка безопасной изоляции контекста (contextIsolation) и использования preload-скриптов.
  • Реализация взаимодействия между процессами через IPC с валидацией каналов.
  • Настройка автоматического обновления приложения с помощью electron-updater.
  • Конфигурация сборки и дистрибуции пакетов через electron-builder.

Как работает

  1. Следовать рекомендуемой структуре проекта, размещая код основного процесса в src/main, рендерера в src/renderer, прелоада в src/preload и общих типов в src/shared.
  2. Настроить BrowserWindow с включенной изоляцией контекста (contextIsolation: true) и отключенным nodeIntegration, указав путь к preload-скрипту.
  3. В preload-скрипте использовать contextBridge.exposeInMainWorld для безопасной экспозиции API, ограничивая доступные каналы IPC списком validChannels.
  4. В основном процессе обрабатывать IPC-запросы через ipcMain.handle или ipcMain.on, выполняя системные операции (например, чтение файлов) и отправляя ответы.
  5. В процессе рендеринга обращаться к системным функциям через экспонированный API (window.electronAPI), а не через прямые вызовы модулей Node.js.
  6. Использовать electron-updater для проверки и установки обновлений, а electron-builder — для упаковки приложения.

Примеры запросов агенту

Как правильно настроить изоляцию контекста и preload-скрипт в Electron?
Приведи пример безопасной реализации IPC-взаимодействия между main и renderer процессами.
Как организовать структуру проекта для Electron-приложения на TypeScript?

Что понадобится

  • Node.js и npm/yarn
  • Пакеты electron, electron-builder, electron-updater
  • Среда разработки с поддержкой TypeScript

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «electron-development» из репозитория: # https://github.com/mindrally/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r electron-development/ ~/.claude/skills/electron-development/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.