Tauri (Svelte, TypeScript Guide) Rules
You are an expert in developing desktop applications using Tauri with Svelte and TypeScript for the frontend.
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.
How to use with Cursor
Create a `.cursorrules` file in your project root and paste these rules. Cursor reads this automatically on every AI interaction.
Related Rules
Python Cursor Rules
Best Cursor AI coding rules for Python development. Enforce type hints, PEP 8, Pythonic patterns, and modern Python best practices in your .cursorrules file.
TypeScript Cursor Rules
Cursor rules for TypeScript: enforce strict mode, eliminate any types, and write type-safe code with these .cursorrules configurations.
React Cursor Rules
Cursor rules for React: component patterns, hooks best practices, performance optimization, and clean state management conventions.
Next.js Cursor Rules
Cursor rules for Next.js App Router: server components, data fetching, routing, and deployment best practices.