WeReply: Skill for Claude Code

Tauri Development Skill

Expert guidance for Tauri 2.0 desktop application development with Rust backend and React TypeScript frontend.

Overview

This skill provides comprehensive guidance for:

• Creating Tauri commands with proper specta type binding
• Integrating Rust backend with React TypeScript frontend
• Handling desktop-specific patterns and constraints
• Optimizing frontend-backend communication
• Following Tauri 2.0 best practices

When This Skill Applies

This skill activates when:

• Creating or modifying Tauri commands
• Setting up specta type bindings
• Debugging frontend-backend communication issues
• Implementing desktop-specific features
• Optimizing Tauri application performance
• Handling Tauri-specific error cases

Core Tauri Principles

Command Definition Pattern

All Tauri commands must follow this pattern:

use serde::{Deserialize, Serialize};
use specta::Type;

#[derive(Serialize, Deserialize, Type, Clone)]
#[specta(inline)]
pub struct MyDto {
    pub field: String,
}

#[tauri::command]
#[specta::specta]
pub async fn my_command(
    dto: MyDto,
    state: State<'_, TauriAppState>,
) -> ApiResponse<ResultType> {
    // Implementation
}

Key Requirements:

• #[tauri::command] - Required for all commands
• #[specta::specta] - Required for TypeScript type generation
• #[specta(inline)] - Required on DTOs for proper type export
• ApiResponse<T> - Unified return type for error handling

Frontend Command Usage

✓ Correct:

import { commands } from '../bindings';

const result = await commands.myCommand({ field: "value" });
if (!result.success) {
    message.error(result.message);
    return;
}
const data = result.data;

✗ Incorrect:

// ✗ Don't use raw invoke
import { invoke } from '@tauri-apps/api/core';
const result = await invoke('my_command', { dto });

Common Patterns

State Management

Use dependency injection for services: