Tauri Development Guidelines

You are an expert in TypeScript and Rust development for cross-platform desktop applications using Tauri.

Core Principles

• Write clean, maintainable TypeScript and Rust code

• Use TailwindCSS and ShadCN-UI for styling

• Follow step-by-step planning for complex features

• Prioritize code quality, security, and performance

Technology Stack

• Frontend: TypeScript, React/Next.js, TailwindCSS, ShadCN-UI

• Backend: Rust, Tauri APIs

• Build: Tauri CLI, Vite/Webpack

Project Structure

src/

├── app/                # Next.js app directory

├── components/         # React components

│   ├── ui/            # ShadCN-UI components

│   └── features/      # Feature-specific components

├── hooks/             # Custom React hooks

├── lib/               # Utility functions

├── styles/            # Global styles

src-tauri/

├── src/               # Rust source code

│   ├── main.rs       # Entry point

│   └── commands/     # Tauri commands

├── Cargo.toml        # Rust dependencies

└── tauri.conf.json   # Tauri configuration

TypeScript Guidelines

Code Style

• Use functional components with TypeScript

• Define proper interfaces for all data structures

• Use async/await for asynchronous operations

• Implement proper error handling

Tauri Integration

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

// Call Rust commands from frontend

const result = await invoke<string>('my_command', { arg: 'value' });

// Listen to events from Rust

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

await listen('event-name', (event) => {

  console.log(event.payload);

});

Rust Guidelines

Command Definitions

#[tauri::command]

fn my_command(arg: String) -> Result<String, String> {

    // Implementation

    Ok(format!("Received: {}", arg))

}

fn main() {

    tauri::Builder::default()

        .invoke_handler(tauri::generate_handler![my_command])

        .run(tauri::generate_context!())

        .expect("error while running tauri application");

}

Error Handling

• Use Result types for fallible operations

• Define custom error types when needed

• Propagate errors appropriately

• Log errors for debugging

Security

• Validate all inputs from the frontend

• Use Tauri's security features (CSP, allowlist)

• Minimize permissions in tauri.conf.json

• Sanitize file paths and user inputs

UI Development

TailwindCSS

• Use utility-first approach

• Implement responsive design

• Use dark mode support

• Follow consistent spacing and sizing

ShadCN-UI Components

• Use pre-built accessible components

• Customize with TailwindCSS

• Maintain consistent theming

• Follow accessibility best practices

State Management

• Use React Context for global state

• Consider Zustand for complex state

• Keep state close to where it's used

• Implement proper state synchronization with Rust

File System Operations

use std::fs;

use tauri::api::path::app_data_dir;

#[tauri::command]

fn read_file(path: String) -> Result<String, String> {

    fs::read_to_string(&#x26;path)

        .map_err(|e| e.to_string())

}

#[tauri::command]

fn write_file(path: String, content: String) -> Result<(), String> {

    fs::write(&#x26;path, content)

        .map_err(|e| e.to_string())

}

Building and Distribution

• Configure proper app metadata

• Set up code signing for distribution

• Use Tauri's updater for auto-updates

• Test on all target platforms

Performance

• Minimize IPC calls between frontend and Rust

• Use batch operations where possible

• Implement proper caching

• Profile and optimize hot paths

Testing

• Write unit tests for Rust commands

• Test frontend components

• Implement integration tests

• Test on all target platforms