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

description, disable-model-invocation

description	disable-model-invocation
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.	false

Tauri Framework Development

Your expert companion for building applications with Tauri - the framework that lets you build smaller, faster, and more secure desktop and mobile applications with a web frontend.

Quick Start

# 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):

import { invoke } from '@tauri-apps/api/core';

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

Rust → Frontend (Events):

use tauri::Emitter;

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

Frontend (Listen):

import { listen } from '@tauri-apps/api/event';

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

3. Commands (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:

{
  "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:

{
  "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

# Run dev server
npm run tauri dev

# With Tauri CLI
cargo tauri dev

Building

# 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:

# Sign and notarize
cargo tauri build --target universal-apple-dmg

Windows:

# 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
• Tauri GitHub
• Tauri Guides
• Tauri Architecture

Community

• Tauri Discord
• GitHub Discussions
• Stack Overflow

Examples

• Tauri Examples
• Community Projects

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.