Desktop App Skill
Build cross-platform desktop applications
Frameworks
Tauri (Recommended)
Lightweight, secure, Rust-based.
bash# Create new Tauri project npm create tauri-app cd my-app npm run tauri dev
Pros:
- Small bundle size (~5MB)
- High performance
- Better security
- Use any frontend framework
Electron
Chromium-based, widely used.
bash# Create with electron-forge npm init electron-app@latest my-app cd my-app npm start
Pros:
- Mature ecosystem
- Large community
- Easy to learn
- Full Node.js access
Project Structure (Tauri)
my-app/ ├── src/ # Frontend (React, Vue, etc.) │ ├── App.tsx │ └── main.tsx ├── src-tauri/ # Rust backend │ ├── src/ │ │ └── main.rs │ ├── tauri.conf.json │ └── Cargo.toml └── package.json
Key Features
System Tray
rust// src-tauri/src/main.rs use tauri::SystemTray; fn main() { let tray = SystemTray::new(); tauri::Builder::default() .system_tray(tray) .run(tauri::generate_context!()) .expect("error"); }
Native Dialogs
typescript// Frontend import { open, save } from '@tauri-apps/api/dialog'; async function openFile() { const selected = await open({ filters: [{ name: 'Text', extensions: ['txt'] }] }); return selected; }
File System
typescriptimport { readTextFile, writeTextFile } from '@tauri-apps/api/fs'; async function saveFile(path: string, content: string) { await writeTextFile(path, content); }
Deployment
- macOS: .dmg, .app
- Windows: .msi, .exe
- Linux: .deb, .AppImage
bash# Build for all platforms npm run tauri build
