Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Hướng dẫn phát triển ứng dụng Electron

Skill cung cấp cho Claude các mẫu chuẩn để xây ứng dụng desktop Electron với React/TypeScript: bảo mật, IPC, tray, PTY, WebRTC và đóng gói.

Lập trìnhTrung cấp★ 386⑂ 65Điểm AI 9/10Cập nhật lần cuối: 4 thg 9, 2026

Skill này làm được gì

  • Thiết lập nền bảo mật cho Electron 30+: contextIsolation, sandbox, tắt nodeIntegration, cùng Electron Fuses và kiểm tra toàn vẹn ASAR.
  • Mẫu IPC an toàn ba lớp: ipcMain.handle ở main, contextBridge.exposeInMainWorld ở preload, hook React ở renderer.
  • Snippet cho system tray, global shortcut, terminal node-pty, ghi âm MediaRecorder, gọi thoại/chia sẻ màn hình bằng PeerJS.
  • Cấu hình electron-builder.yml cho Windows/macOS/Linux, kèm notarize macOS và biến môi trường ký mã Windows.
  • Cảnh báo các lỗi thường gặp: stale closure trong React, chuyển từ BrowserView sang WebContentsView.

Phù hợp với ai

  • Lập trình viên frontend/fullstack dùng React + TypeScript + Vite để làm app desktop.
  • Người cần rà soát bảo mật và hoàn tất quy trình phát hành (ký số, notarize) cho app Electron.
  • Ai muốn nhúng terminal, ghi âm hoặc gọi video/voice vào ứng dụng desktop.

Ví dụ sử dụng

  1. "Tạo kênh IPC để renderer yêu cầu main lưu file ghi âm" → sinh code preload bridge có kiểu TypeScript rõ ràng.
  2. "Đóng gói app thành DMG và tránh cảnh báo Gatekeeper" → cấu hình electron-builder cùng các biến APPLE_ID, APPLE_TEAM_ID.
  3. "App báo BrowserView đã deprecated" → chuyển sang contentView.addChildView và setBounds.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/jamditis/claude-skills-journalism/HEAD/dev-toolkit/skills/electron-dev/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục dev-toolkit/skills/electron-dev từ repo GitHub jamditis/claude-skills-journalism vào ~/.claude/skills/electron-dev/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/jamditis/claude-skills-journalism.git && mkdir -p ~/.claude/skills && cp -r claude-skills-journalism/dev-toolkit/skills/electron-dev ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal và về thư mục home: cd ~
  2. Tải repo: git clone https://github.com/jamditis/claude-skills-journalism.git
  3. Tạo thư mục skills nếu chưa có: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r claude-skills-journalism/dev-toolkit/skills/electron-dev ~/.claude/skills/
  5. Kiểm tra: ls ~/.claude/skills/electron-dev phải thấy tệp SKILL.md.
  6. Khởi động lại Claude Code, rồi thử hỏi "hướng dẫn IPC trong Electron" để skill tự kích hoạt.
  7. (Tuỳ chọn) Nếu chỉ dùng cho một dự án, sao chép vào .claude/skills/ trong thư mục dự án đó.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT