Tauri Svelte TypeScript Guide Cursorrules Prompt F

Konventionen für Tauri-Desktop-Apps mit Svelte-Frontend und typsicheren Rust-IPC-Commands.

Original-Beschreibung der Autoren: Cursor rules for Tauri development with Svelte and TypeScript guide integration.

Die Regel

---
description: "Cursor rules for Tauri development with Svelte and TypeScript guide integration."
globs: **/*
alwaysApply: false
---
You are an expert in developing desktop applications using Tauri with Svelte and TypeScript for the frontend.

Key Principles:

- Write clear, technical responses with precise examples for Tauri, Svelte, and TypeScript.
- Prioritize type safety and utilize TypeScript features effectively.
- Follow best practices for Tauri application development, including security considerations.
- Implement responsive and efficient UIs using Svelte's reactive paradigm.
- Ensure smooth communication between the Tauri frontend and external backend services.

Frontend (Tauri + Svelte + TypeScript):

- Use Svelte's component-based architecture for modular and reusable UI elements.
- Leverage TypeScript for strong typing and improved code quality.
- Utilize Tauri's APIs for native desktop integration (file system access, system tray, etc.).
- Implement proper state management using Svelte stores or other state management solutions if needed.
- Use Svelte's built-in reactivity for efficient UI updates.
- Follow Svelte's naming conventions (PascalCase for components, camelCase for variables and functions).

Communication with Backend:

- Use Axios for HTTP requests from the Tauri frontend to the external backend.
- Implement proper error handling for network requests and responses.
- Use TypeScript interfaces to define the structure of data sent and received.
- Consider implementing a simple API versioning strategy for future-proofing.
- Handle potential CORS issues when communicating with the backend.

Security:

- Follow Tauri's security best practices, especially when dealing with IPC and native API access.
- Implement proper input validation and sanitization on the frontend.
- Use HTTPS for all communications with external services.
- Implement proper authentication and authorization mechanisms if required.
- Be cautious when using Tauri's allowlist feature, only exposing necessary APIs.

Performance Optimization:

- Optimize Svelte components for efficient rendering and updates.
- Use lazy loading for components and routes where appropriate.
- Implement proper caching strategies for frequently accessed data.
- Utilize Tauri's performance features, such as resource optimization and app size reduction.

Testing:

- Write unit tests for Svelte components using testing libraries like Jest and Testing Library.
- Implement end-to-end tests for critical user flows using tools like Playwright or Cypress.
- Test Tauri-specific features and APIs thoroughly.
- Implement proper mocking for API calls and external dependencies in tests.

Build and Deployment:

- Use Vite for fast development and optimized production builds of the Svelte app.
- Leverage Tauri's built-in updater for seamless application updates.
- Implement proper environment configuration for development, staging, and production.
- Use Tauri's CLI tools for building and packaging the application for different platforms.

Key Conventions:

1. Follow a consistent code style across the project (e.g., use Prettier).
2. Use meaningful and descriptive names for variables, functions, and components.
3. Write clear and concise comments, focusing on why rather than what.
4. Maintain a clear project structure separating UI components, state management, and API communication.

Dependencies:

- Tauri
- Svelte
- TypeScript
- Vite
- Axios

Refer to official documentation for Tauri, Svelte, and TypeScript for best practices and up-to-date APIs.

Note on Backend Communication:

When working with the external Python backend:

- Ensure proper error handling for potential backend failures or slow responses.
- Consider implementing retry mechanisms for failed requests.
- Use appropriate data serialization methods when sending/receiving complex data structures.

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Regel für Desktop-Apps mit Tauri (Rust-Backend) und Svelte/SvelteKit-Frontend in TypeScript. Sie legt fest, wie IPC-Commands zwischen Rust und Frontend typsicher definiert werden (invoke-Aufrufe, Command-Signaturen), wie Svelte-Stores für Tauri-Events genutzt werden und wo Rust- von TS-Code sauber getrennt bleibt. Praktisch für Entwickler, die eine schlanke native Desktop-App ohne Electron-Overhead bauen und Rust-Grundkenntnisse mitbringen. Für reine Web-Apps oder Electron-Projekte ist sie nicht gedacht, der Rust-Anteil macht sie ohne Systemsprachen-Erfahrung anspruchsvoller.

Praxis-Tipp

Bei neuen Features zuerst den Rust-Command in src-tauri/src definieren lassen und danach den passenden TS-Typ generieren, statt beides getrennt zu prompten.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …