# Popup Studio AI Bkit Codex Desktop App

> Desktop App Skill

- Skill: `tomevault-io/popup-studio-ai-bkit-codex-desktop-app` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/popup-studio-ai-bkit-codex-desktop-app`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/popup-studio-ai-bkit-codex-desktop-app/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/popup-studio-ai-bkit-codex-desktop-app

---


# Desktop App Skill

> Cross-platform desktop development with Electron or Tauri.

## Actions

| Action | Description | Example |
|--------|-------------|---------|
| `init` | Initialize desktop project | `$desktop-app init my-app` |
| `guide` | Desktop dev guide | `$desktop-app guide` |
| `build` | Build configuration help | `$desktop-app build` |

## Framework Comparison

| Feature | Electron | Tauri |
|---------|----------|-------|
| Language | JS/TS (Node.js) | Rust + JS/TS |
| Bundle Size | ~100MB+ | ~5-10MB |
| Memory Usage | High | Low |
| Native APIs | Via Node.js | Via Rust |
| Web Tech | Chromium | System WebView |
| Maturity | Very mature | Growing rapidly |
| Best For | Feature-rich apps | Lightweight apps |

## Recommended: Tauri

For bkit-codex users, Tauri is recommended because:
- Smaller bundle size
- Lower memory footprint
- Better security model
- Uses system WebView (no Chromium bundled)
- Rust backend for performance-critical tasks

## Project Structure (Tauri)

```
desktop-app/
├── src/                       # Frontend (React/Next.js)
│   ├── app/
│   ├── components/
│   ├── hooks/
│   └── lib/
├── src-tauri/                 # Tauri backend (Rust)
│   ├── src/
│   │   ├── main.rs           # Entry point
│   │   ├── commands.rs       # IPC commands
│   │   └── lib.rs
│   ├── Cargo.toml            # Rust dependencies
│   ├── tauri.conf.json       # Tauri configuration
│   └── icons/                # App icons
├── public/
├── package.json
└── tsconfig.json
```

## Core Patterns

### Tauri Commands (IPC)

```rust
// src-tauri/src/commands.rs
#[tauri::command]
fn read_file(path: String) -> Result<String, String> {
    std::fs::read_to_string(&path).map_err(|e| e.to_string())
}

#[tauri::command]
fn save_file(path: String, content: String) -> Result<(), String> {
    std::fs::write(&path, content).map_err(|e| e.to_string())
}
```

```typescript
// Frontend: invoke Tauri commands
import { invoke } from '@tauri-apps/api/core';

async function readFile(path: string): Promise<string> {
  return invoke('read_file', { path });
}

async function saveFile(path: string, content: string): Promise<void> {
  return invoke('save_file', { path, content });
}
```

### Window Management

```typescript
import { getCurrentWindow } from '@tauri-apps/api/window';

const appWindow = getCurrentWindow();
await appWindow.minimize();
await appWindow.maximize();
await appWindow.setTitle('My App - Document.txt');
```

### System Tray

```rust
// src-tauri/src/main.rs
use tauri::{SystemTray, SystemTrayMenu, CustomMenuItem};

fn main() {
    let tray_menu = SystemTrayMenu::new()
        .add_item(CustomMenuItem::new("show", "Show"))
        .add_item(CustomMenuItem::new("quit", "Quit"));

    tauri::Builder::default()
        .system_tray(SystemTray::new().with_menu(tray_menu))
        .run(tauri::generate_context!())
        .expect("error running app");
}
```

### File Dialog

```typescript
import { open, save } from '@tauri-apps/plugin-dialog';

// Open file
const filePath = await open({
  filters: [{ name: 'Documents', extensions: ['txt', 'md', 'json'] }],
});

// Save file
const savePath = await save({
  filters: [{ name: 'Documents', extensions: ['txt'] }],
});
```

## Electron Alternative

```typescript
// main.ts (Electron)
import { app, BrowserWindow } from 'electron';

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
    },
  });
  win.loadURL('http://localhost:3000');
}

app.whenReady().then(createWindow);
```

## Build & Distribution

### Tauri
```bash
# Development
npm run tauri dev

# Build
npm run tauri build

# Output: src-tauri/target/release/bundle/
# - macOS: .dmg, .app
# - Windows: .msi, .exe
# - Linux: .deb, .AppImage
```

### Code Signing
- macOS: Apple Developer ID certificate
- Windows: Code signing certificate (EV recommended)
- Linux: GPG signing

## Pipeline Integration

Desktop apps follow the 9-phase pipeline with desktop-specific considerations:
- Phase 3: Design for native OS look and feel
- Phase 5: Include OS-specific components (menu bar, tray, dialogs)
- Phase 6: Implement IPC between frontend and backend
- Phase 9: Code signing, auto-update, store submission

## Common Mistakes

| Mistake | Solution |
|---------|----------|
| Ignoring OS differences | Test on all target platforms |
| Large Electron bundles | Consider Tauri for smaller apps |
| No auto-updater | Implement from the start |
| Missing code signing | Users get security warnings without it |
| No offline support | Desktop apps should work offline |

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/popup-studio-ai) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->