SuperCharged-Claude-Code-Upgrade/skills/tauri/skill.md

---
description: "Comprehensive Tauri framework development companion - Build tiny, fast, secure desktop & mobile apps with Rust backend and web frontend. Covers: Tauri 2.0, project scaffolding, IPC commands, native APIs, cross-platform builds, mobile support, security, distribution."
disable-model-invocation: false
---

# Tauri Framework Development

**Your expert companion for building applications with [Tauri](https://tauri.app/)** - the framework that lets you build smaller, faster, and more secure desktop and mobile applications with a web frontend.

## Quick Start

```bash
# Create a new Tauri app
npm create tauri-app@latest

# Or use the /tauri-init command for guided setup
/tauri-init
```

## What is Tauri?

Tauri is a framework for building tiny, blazingly fast binaries for all major desktop and mobile platforms. Developers can integrate any front-end framework that compiles to HTML, JS, and CSS for the user interface. The backend is a Rust-sourced binary with an API that the front-end can interact with.

**Key advantages:**
- 🔥 **Smaller binaries** - 10-100x smaller than Electron apps
- ⚡ **Faster** - Uses system webviews (WebView2, WebKit, WKWebView)
- 🔒 **More secure** - Built-in security audits, capability-based permissions
- 🌍 **Cross-platform** - Windows, macOS, Linux, iOS, Android
- 🦀 **Rust backend** - Memory safety, performance, system access

## Architecture Overview

```
┌─────────────────────────────────────────────────────────┐
│                    Tauri Application                    │
├─────────────────────────────────────────────────────────┤
│                                                           │
│  ┌──────────────────┐         ┌──────────────────┐      │
│  │   Frontend       │         │   Rust Backend   │      │
│  │   (WebView)      │◄───────►│   (src-tauri/)   │      │
│  │                  │  IPC    │                  │      │
│  │  React/Vue/      │         │  - Commands      │      │
│  │  Svelte/Solid    │         │  - Events        │      │
│  │  Vanilla JS      │         │  - Plugins       │      │
│  └──────────────────┘         │  - Resources     │      │
│                               └──────────────────┘      │
│                                                           │
│  ┌──────────────────────────────────────────────────┐   │
│  │              System WebView (WRY)                │   │
│  │  Windows: WebView2 | macOS: WKWebKit | Linux: WebKitGTK │
│  └──────────────────────────────────────────────────┘   │
│                                                           │
└─────────────────────────────────────────────────────────┘
```

## Available Commands

| Command | Purpose |
|---------|---------|
| `/tauri-init` | Initialize new Tauri project with guided setup |
| `/tauri-add-plugin` | Add Tauri plugin (fs, http, shell, etc.) |
| `/tauri-build` | Build for specific platform with optimizations |
| `/tauri-capability` | Create permission capability file |
| `/tauri-ipc` | Design IPC interface between Rust and web |
| `/tauri-native` | Add native feature (tray, notifications, etc.) |

## When to Use This Skill

Invoke this skill when:
- Building cross-platform desktop applications
- Creating mobile apps with Rust backend
- Migrating from Electron to Tauri
- Need native system access from web app
- Implementing system tray or notifications
- Designing IPC between Rust and JavaScript
- Setting up Tauri 2.0 mobile apps
- Configuring build and distribution

**Auto-triggers on:**
- "tauri app", "create-tauri-app", "tauri://"
- "desktop app with rust", "tauri command"
- "system tray desktop", "rust webview app"
- "tauri.conf.json", "src-tauri/"
- "invoke tauri", "tauri event"

## Core Concepts

### 1. Project Structure

```
my-tauri-app/
├── src/                  # Frontend source (your framework)
├── src-tauri/           # Rust backend
│   ├── Cargo.toml       # Rust dependencies
│   ├── tauri.conf.json  # Tauri configuration
│   ├── capabilities/    # Permission definitions
│   ├── src/            # Rust source code
│   │   ├── main.rs     # Entry point
│   │   ├── lib.rs      # Library exports
│   │   └── commands.rs  # Your commands
│   └── icons/          # App icons
├── package.json        # Frontend dependencies
└── tauri.conf.json     # Frontend Tauri config
```

### 2. IPC Communication

**Frontend → Rust (Commands):**
```typescript
import { invoke } from '@tauri-apps/api/core';

// Call Rust command
const result = await invoke('my_command', { param: 'value' });
```

**Rust → Frontend (Events):**
```rust
use tauri::Emitter;

// Emit event to frontend
window.emit("my-event", Payload { data: "value" })?;
```

**Frontend (Listen):**
```typescript
import { listen } from '@tauri-apps/api/event';

const unlisten = await listen('my-event', (event) => {
  console.log(event.payload);
});
```

### 3. Commands (Rust)

```rust
#[tauri::command]
fn my_command(param: String) -> Result<String, String> {
    Ok(format!("Received: {}", param))
}

// Register in main.rs
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![
            my_command,
            // other commands...
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
```

### 4. Capabilities & Permissions

**Tauri 2.0 Security Model:**

Create `capabilities/default.json`:
```json
{
  "identifier": "default",
  "description": "Default capabilities",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "fs:read-file",
    "fs:write-file",
    "dialog:default"
  ]
}
```

### 5. Configuration

**tauri.conf.json key settings:**
```json
{
  "productName": "MyApp",
  "version": "1.0.0",
  "identifier": "com.example.myapp",
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist",
    "withGlobalTauri": true
  },
  "app": {
    "windows": [{
      "title": "MyApp",
      "width": 1200,
      "height": 800,
      "resizable": true,
      "fullscreen": false
    }]
  },
  "bundle": {
    "active": true,
    "targets": ["dmg", "msi", "appimage", "deb"],
    "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png"]
  }
}
```

## Platform Support

### Desktop Platforms

| Platform | Min Version | WebView |
|----------|-------------|---------|
| Windows | 7+ | WebView2 |
| macOS | 10.15+ | WKWebView |
| Linux | Ubuntu 18.04+ | WebKitGTK 4.1 |

### Mobile Platforms (Tauri 2.0)

| Platform | Min Version | WebView |
|----------|-------------|---------|
| iOS | 9+ | WKWebView |
| Android | 7+ (8+ recommended) | Android System WebView |

## Common Plugins

| Plugin | Purpose |
|--------|---------|
| `@tauri-apps/plugin-fs` | File system access |
| `@tauri-apps/plugin-http` | HTTP requests |
| `@tauri-apps/plugin-shell` | Shell command execution |
| `@tauri-apps/plugin-dialog` | File dialogs |
| `@tauri-apps/plugin-notification` | Native notifications |
| `@tauri-apps/plugin-global-shortcut` | Global hotkeys |
| `@tauri-apps/plugin-os` | Operating system info |
| `@tauri-apps/plugin-process` | Process management |
| `@tauri-apps/plugin-clipboard-manager` | Clipboard access |
| `@tauri-apps/plugin-updater` | Auto-update functionality |

## Build & Distribution

### Development
```bash
# Run dev server
npm run tauri dev

# With Tauri CLI
cargo tauri dev
```

### Building
```bash
# Build for current platform
npm run tauri build

# Build for specific target
cargo tauri build --target universal-apple-dmg
cargo tauri build --target nsis  # Windows installer
cargo tauri build --target appimage  # Linux
```

### Code Signing

**macOS:**
```bash
# Sign and notarize
cargo tauri build --target universal-apple-dmg
```

**Windows:**
```bash
# Sign with certificate
cargo tauri signer sign <path-to-exe>
```

## Integration with Other Skills

- **rust-patterns** - Rust code quality and patterns
- **react-dev** / **vue** / **svelte** - Frontend framework guidance
- **architecture** - System architecture decisions
- **test-driven-development** - Testing patterns for Rust
- **api-patterns** - Design command interfaces
- **ui-ux-pro-max** - Desktop UI/UX considerations

## Troubleshooting

**Common issues:**

**WebView not loading:**
- Check `frontendDist` path in tauri.conf.json
- Verify `beforeBuildCommand` runs successfully
- Check browser console for errors

**Command not found:**
- Ensure command is registered in `invoke_handler`
- Check function signature matches `#[tauri::command]`
- Verify frontend import path

**Build failures:**
- Check Rust version: `rustc --version` (need 1.70+)
- Verify Node.js version: `node --version` (need 18+)
- Try cleaning: `cargo clean && cargo tauri build`

**Mobile build issues:**
- Ensure Xcode / Android Studio installed
- Check mobile targets in tauri.conf.json
- Verify Rust targets installed: `rustup target add aarch64-apple-ios`

## Best Practices

1. **Use TypeScript** for type-safe IPC
2. **Generate types** with `@tauri-apps/cli`
3. **Handle errors** in all commands (return `Result`)
4. **Use capabilities** for security (don't allow everything)
5. **Test on all target platforms** early
6. **Optimize bundle size** (tree-shake frontend)
7. **Use async** for long-running operations
8. **Log appropriately** for debugging
9. **Version control** both frontend and Rust
10. **Follow Tauri conventions** for consistency

## Resources

### Official Documentation
- [Tauri Documentation](https://v2.tauri.app/)
- [Tauri GitHub](https://github.com/tauri-apps/tauri)
- [Tauri Guides](https://v2.tauri.app/start/)
- [Tauri Architecture](https://v2.tauri.app/concept/architecture/)

### Community
- [Tauri Discord](https://discord.gg/tauri)
- [GitHub Discussions](https://github.com/tauri-apps/tauri/discussions)
- [Stack Overflow](https://stackoverflow.com/questions/tagged/tauri)

### Examples
- [Tauri Examples](https://github.com/tauri-apps/tauri/tree/dev/examples)
- [Community Projects](https://tauri.app/showcase)

## Credits

### Tauri Framework

**Tauri** is developed by The Tauri Programme within The Commons Conservancy.

- **GitHub**: https://github.com/tauri-apps/tauri
- **Website**: https://tauri.app/
- **License**: MIT / Apache 2.0

**Core Team:**
- Original Tauri Logo Designs by Alve Larsson, Daniel Thompson-Yvetot and Guillaume Chau
- Full contributor list: https://github.com/tauri-apps/tauri/graphs/contributors

**Key Dependencies:**
- **WRY** - WebView library: https://github.com/tauri-apps/wry
- **TAO** - Window handling: https://github.com/tauri-apps/tao
- **Tauri CLI** - Command-line tools

This skill builds on the excellent work of the Tauri open-source community.