Tauri

When to use this skill

Use this skill as the primary entry point for any Tauri-related request. It serves as a "Total Index" (like nvm) that routes you to specific sub-skills.

Why?

• Token Efficiency: Each sub-skill contains local examples/ and templates/ directories, providing detailed, offline-ready documentation without expensive network searches.
• Tauri v2 Ready: All sub-skills are updated for Tauri v2.0+ (plugins, capabilities, permissions).

How to use this skill

1. Identify Intent: Determine if the user needs setup, specific plugin functionality (FS, Dialog, SQL), or core app configuration. 2. Route: Invoke the specific sub-skill listed below. 3. Explore: Inside the sub-skill, use examples/usage.md for step-by-step guides and templates/capabilities.json for permission configs.

Sub-skill Map

Planning & Architecture

• tauri-app-planning: START HERE. Requirement analysis, plugin selection, architecture design, and Todo list generation. Includes orchestration patterns.

Core & Lifecycle

• tauri-setup: Project initialization and environment setup.
• tauri-scaffold: Creating files and structures.
• tauri-app-develop: Development workflow (dev, build, debug).
• tauri-app-process: Process management and exit handling.
• tauri-app-updater: Auto-update configuration and API.
• tauri-mobile: Android and iOS specific development.

System Integration

• tauri-app-shell: Spawn sidecars and run system commands.
• tauri-app-os-info: Get OS version, arch, and locale.
• tauri-app-clipboard: Read/write to system clipboard.
• tauri-app-dialog: Native file open/save dialogs and message boxes.
• tauri-app-notification: System notifications.
• tauri-app-global-shortcut: Register system-wide keyboard shortcuts.
• tauri-app-autostart: Launch app on system login.
• tauri-app-biometric: TouchID/FaceID authentication.
• tauri-app-opener: Open URLs/files in default apps.
• tauri-app-deep-linking: Handle custom protocol links (e.g., myapp://).

Data & Networking

• tauri-app-http-client: Rust-based HTTP client (CORS-free).
• tauri-app-websocket: WebSocket client.
• tauri-app-upload: File upload utility.
• tauri-app-sql: SQLite, MySQL, PostgreSQL database access.
• tauri-app-store: Simple persistent key-value store.
• tauri-app-stronghold: Secure secret management and encryption.
• tauri-app-file-system: Read/write files (sandboxed).

Window & UI

• tauri-app-window-menu: Native application menus and context menus.
• tauri-app-system-tray: System tray icon and menu.
• tauri-app-window-state: Persist window size/position.
• tauri-app-positioner: Tray and window positioning.
• tauri-app-single-instance: Prevent multiple app instances.

Examples and Templates

Global Examples (General Architecture)

• examples/start/: Introduction and Quick Start.
• examples/guide/: Architecture, Frontend/Backend patterns.

Sub-skill Examples (Specific Features) CRITICAL: Every sub-skill above has its own local assets.

• skills/tauri-app-dialog/examples/usage.md: detailed Dialog plugin usage.
• skills/tauri-app-sql/examples/usage.md: detailed SQL plugin usage.
• ... and so on for all skills.

Keywords

Tauri, tauri v2, rust, desktop app, mobile app, plugins, capabilities, permissions, system tray, notifications, file system, database, sql, http, websocket, updater, sidecar, ipc, events, commands, window customization

References

• https://v2.tauri.app/llms.txt

国内适配

• 支持中文文档和中文注释
• 示例代码兼容国内开发环境
• 提供中文 FAQ 和常见问题解答

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。

Commands API

Scope

• Command definition
• Command registration
• Payload serialization

Notes

• Keep inputs minimal and validated

Config API

Scope

• Config schema
• build/app/tauri sections
• Environment overrides

Notes

• Align with schema version 2

Events API

Scope

• Emit events
• Listen for events
• Payload typing

Notes

• Use namespaced event names

Filesystem API

Scope

• Read/write files
• Directory operations
• Path utilities

Notes

• Respect permission scopes

Tauri API

Core

• App lifecycle
• Window management
• Event system

Notes

• Refer to official docs for signatures

Window API

Scope

• Window creation
• Window controls
• Window events

Notes

• Control requires window handle

Architecture

官方文档: https://v2.tauri.org.cn/start/

Overview

Tauri uses a dual process model with a web frontend and a Rust backend.

Components

• Frontend: Web UI, bundled by a frontend toolchain
• Backend: Rust core and commands
• Runtime: WebView + native shell

Flow

1. UI renders in WebView 2. Frontend calls backend commands 3. Backend returns results or emits events

Key Points

• Clear separation between UI and system operations
• Commands are the primary interaction channel

Backend

官方文档: https://v2.tauri.org.cn/start/

Structure

• src-tauri/tauri.conf.json
• src-tauri/src/main.rs
• src-tauri/Cargo.toml

Example: Backend Responsibilities

• Define commands for frontend calls
• Access system APIs and filesystem
• Emit events to the frontend

Key Points

• Rust backend is the system boundary
• Keep business logic in Rust where needed

Build

官方文档: https://v2.tauri.org.cn/start/

Usage

Build produces platform-specific bundles.

Example: Build Commands

npm run tauri build

Release Checklist

• Frontend assets are built
• Version is updated
• Signing requirements are met

Key Points

• Build output differs per OS
• Use CI for reproducible builds

Commands

官方文档: https://v2.tauri.org.cn/start/

Usage

Commands are the primary way for the frontend to invoke backend logic.

Typical Steps

1. Define a command in the backend 2. Register it in the Tauri builder 3. Call it from the frontend

Key Points

• Keep command inputs small and validated
• Return serializable results

Configuration

官方文档: https://v2.tauri.org.cn/reference/config/

Usage

Tauri uses tauri.conf.json for core settings.

Example: Minimal Config

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "MyApp",
  "version": "0.1.0",
  "build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:5173"
  },
  "app": {
    "withGlobalTauri": false
  },
  "tauri": {
    "windows": [
      {
        "title": "MyApp",
        "width": 1024,
        "height": 768
      }
    ]
  }
}

Key Points

• Keep schema updated
• Separate devUrl and frontendDist

Events

官方文档: https://v2.tauri.org.cn/start/

Usage

Events are used for one-to-many communication and notifications.

Typical Steps

1. Emit an event from the backend 2. Listen on the frontend 3. Handle payloads consistently

Key Points

• Use events for broadcast-style updates
• Keep event names stable

File System

官方文档: https://v2.tauri.org.cn/start/

Usage

File access uses scoped permissions for safety.

Typical Steps

1. Configure scopes and permissions 2. Read and write through backend APIs 3. Validate user-provided paths

Key Points

• Use least-privilege scopes
• Prefer app data directories

Frontend

官方文档: https://v2.tauri.org.cn/start/

Goals

• Choose a frontend framework
• Connect dev server to Tauri
• Output a static build for production

Example: Dev Server Flow

1. Start your frontend dev server 2. Run npm run tauri dev 3. Tauri loads the dev server URL

Example: Production Build Flow

1. Build frontend assets 2. Run npm run tauri build 3. Tauri bundles native binaries with static assets

Key Points

• Any web framework works
• Dev uses live server URL
• Build uses static assets

Window

官方文档: https://v2.tauri.org.cn/start/

Usage

Windows define how the app displays and behaves on each platform.

Typical Steps

1. Configure windows in tauri.conf.json 2. Control windows at runtime 3. Handle window events

Key Points

• Keep window identifiers stable
• Configure size and position defaults

CLI Reference

官方文档: https://v2.tauri.org.cn/reference/cli/

Common Commands

• tauri init
• tauri dev
• tauri build
• tauri info
• tauri icon

Example: Init

cargo tauri init

Example: Dev

cargo tauri dev

Example: Build

cargo tauri build

Key Points

• Use cargo for Rust-first workflows
• Use npm/yarn/pnpm for JS-first workflows

Config Reference

官方文档: https://v2.tauri.org.cn/reference/config/

Sections

• build
• app
• tauri

Example: Windows

{
  "tauri": {
    "windows": [
      { "label": "main", "title": "MyApp" }
    ]
  }
}

Key Points

• Validate config with schema
• Keep devUrl separate from production

Installation

官方文档: https://v2.tauri.org.cn/ ，https://v2.tauri.app

Prerequisites

• Node.js ≥ 16
• Rust（stable）
• 平台依赖（macOS、Linux、Windows、Android、iOS）

Install Rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
rustc --version
cargo -V

Install Tauri CLI（多包管理器）

# npm
npm install -D @tauri-apps/cli
# yarn
yarn add -D @tauri-apps/cli
# pnpm
pnpm add -D @tauri-apps/cli
# bun
bun add -d @tauri-apps/cli
# cargo
cargo install tauri-cli

Create a Project（多环境）

# Bash / zsh / fish 可用的在线脚本
sh <(curl https://create.tauri.app/sh)

# npm / yarn / pnpm / bun
npm create tauri-app
yarn create tauri-app
pnpm create tauri-app
bun create tauri-app

# Cargo
cargo tauri init

System Dependencies

macOS

xcode-select --install

Linux（Ubuntu/Debian）

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev build-essential curl wget libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev

Windows

• Microsoft Visual Studio C++ Build Tools
• WebView2 runtime

Key Points

• 先装 Rust，再装 CLI 与平台依赖
• 创建项目可选脚本与多包管理器
• 验证 Node/Rust/CLI 版本与工具链是否可用

Introduction

官方文档: https://v2.tauri.org.cn/ ，https://v2.tauri.app

Overview

Tauri 2.0 是一个跨平台应用框架：前端独立（可复用任意 Web 技术栈），后端采用 Rust，深度集成系统能力（可通过 Swift 与 Kotlin 在 iOS/Android 上扩展）。

Core Capabilities

• Frontend Independent：无需更换既有前端框架（Vue/React/Svelte/…）
• Cross Platform：单一代码库构建 Linux、macOS、Windows、Android、iOS
• Maximum Security：以安全为先，提供权限与隔离控制
• Minimal Size：依赖系统原生 Web 渲染，体积可低至约 600KB
• Native Integration：Rust 逻辑，高性能与更安全的系统访问

Architecture

• Frontend：Web UI（HTML/CSS/JS），由前端工具链构建与提供 Dev Server
• Backend：Rust 应用逻辑与系统 API 封装，通过命令（IPC）与事件进行交互
• Runtime：原生 WebView + 平台壳，负责窗口与系统集成

Use Cases

• 桌面与移动端跨平台应用（统一代码库）
• 对安全与体积敏感的客户端产品
• 需要原生系统集成（剪贴板、文件系统、通知、系统托盘、权限等）

Key Points

• 前端可选任何框架，后端使用 Rust
• Dev 与 Build 流程清晰：devUrl（开发）、frontendDist（生产）
• 强安全、体积小、性能好，覆盖桌面与移动平台

Prerequisites

官方文档: https://v2.tauri.org.cn/start/

Requirements

• Node.js v16+
• Rust (stable)
• Platform dependencies

macOS

xcode-select --install

Linux (Ubuntu/Debian)

sudo apt update
sudo apt install libwebkit2gtk-4.0-dev build-essential curl wget libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev

Windows

• Microsoft Visual Studio C++ Build Tools
• WebView2 runtime

Verify

node -v
rustc --version
cargo -V

Key Points

• Install platform dependencies before building
• Verify versions and toolchains

Quick Start

官方文档: https://v2.tauri.org.cn/start/

Instructions

This example provides a minimal workflow to create, run, and build a Tauri app.

Steps

1. Create a project 2. Run the dev build 3. Build a production bundle

Example: Create Project

npm create tauri-app

Example: Run Dev

npm run tauri dev

Example: Build

npm run tauri build

Key Points

• Use the CLI to scaffold
• Dev build uses your frontend dev server
• Production build packages native binaries

Usage: tauri

This document provides at least 5 usage examples for the tauri skill.

Example 1: Initialize Tauri

// Example initialization for Tauri
import { init } from 'tauri-plugin-tauri';

await init();

Example 2: Basic Usage of Tauri

// Basic operation
const result = await invoke('plugin:tauri|do_something');
console.log(result);

Example 3: Configure Tauri Settings

// Update tauri.conf.json
{
  "plugins": {
    "tauri": {
      "enabled": true
    }
  }
}

Example 4: Handle Tauri Errors

try {
  await performAction();
} catch (error) {
  console.error('Tauri Error:', error);
}

Example 5: Advanced Tauri Integration

// Combine with other Tauri APIs
import { emit } from '@tauri-apps/api/event';

emit('tauri-event', { status: 'active' });

Command Template

Backend

#[tauri::command]
fn greet(name: String) -> String {
  format!("Hello, {}!", name)
}

Frontend

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

const msg = await invoke<string>("greet", { name: "world" });

Configuration Template

Template

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "{product_name}",
  "version": "{version}",
  "build": {
    "frontendDist": "{frontend_dist}",
    "devUrl": "{dev_url}"
  },
  "app": {
    "withGlobalTauri": false
  },
  "tauri": {
    "windows": [
      {
        "label": "main",
        "title": "{window_title}",
        "width": {window_width},
        "height": {window_height}
      }
    ]
  }
}

Event Template

Backend Emit

app.emit_all("app:ready", "ok").ok();

Frontend Listen

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

await listen<string>("app:ready", (event) => {
  const payload = event.payload;
});

Installation Template

Checklist

• Node.js version: {node_version}
• Rust version: {rust_version}
• Platform dependencies installed
• CLI installed

Commands

npm install -D @tauri-apps/cli
cargo install tauri-cli

Verification

node -v
rustc --version
cargo tauri -V

Project Setup Template

Inputs

• Project name: {project_name}
• Frontend framework: {frontend_framework}
• Dev server URL: {dev_server_url}
• Dist directory: {frontend_dist}

Commands

npm create tauri-app

Notes

• Configure frontend build output
• Align dev server URL with tauri.conf.json

Window Template

Config

{
  "tauri": {
    "windows": [
      { "label": "main", "title": "{title}", "width": {width}, "height": {height} }
    ]
  }
}

Runtime Control

import { appWindow } from "@tauri-apps/api/window";

await appWindow.setFocus();
await appWindow.setAlwaysOnTop(true);