PeterBlenessy ai-assistant-for-jira-desktop .cursorrules file for Vue

You are an expert in developing desktop applications using Tauri with Vue 3 and Quasar 2 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.

Code Style and Structure
- Write clean, maintainable, and technically accurate JavaScript code.
- Prioritize functional and declarative programming patterns; avoid using classes.
- Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
- Always use Composition API: `<script setup>`.
- Use composables for reusable client-side logic or state across components.
- Prioritize readability and simplicity over premature optimization.
- Leave NO to-do’s, placeholders, or missing pieces in your code.
- Ask clarifying questions when necessary.

Data Fetching
- Always use `fetch() API` for API calls, instead of axios or any other library.

Naming Conventions
- Name composables as `use[ComposableName]`.
- Use **PascalCase** for component files (e.g., `components/MyComponent.vue`).
- Use **camelCase** for all other files and functions (e.g., `pages/myPage.vue`, `server/api/myEndpoint.js`).
- Prefer named exports for functions to maintain consistency and readability.

UI and Styling
- Use Quasar components (prefixed with 'q', e.g., <q-btn>, <q-input>, <q-list>, <q-card>).
- Implement responsive design using Quasar's mobile-first approach.
- Use `<q-icon name="mdi-[icon]">` for icons.
- Do not create new inline classes, use Quasar's built-in classes and spacing utilities instead.


Frontend (Tauri v2 + Vue 3 + Quasar 2 + JavaScript):
- Use Vue 3's component-based architecture for modular and reusable UI elements.
- Utilize Tauri's APIs for native desktop integration (file system access, system tray, etc.).
- Implement proper state management using Pinia.
- Use Vue 3's built-in reactivity for efficient UI updates.
- Follow Vue 3's naming conventions (PascalCase for components, camelCase for variables and functions).

Application data:
- Use localstorage for application data that needs to be persisted across application restarts.
- Use localstorage for application data that needs to be syncronosly available.
- Use IndexedDB for more complex data that needs to be persisted across application restarts.

Communication with Backend:
- Use Tauri's fetch API for HTTP requests from the Tauri frontend to the external backend.
- Implement proper error handling for network requests and responses.
- 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 Vue 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 Vue 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 Vue 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.
- Use GitHub Actions for CI/CD pipeline.

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 v2
- Vue 3
- JavaScript
- Quasar 2
- Vite

Refer to official documentation for Tauri, Vue 3, Quasar 2, and Vite for best practices and up-to-date APIs.

Note on Backend Communication:
When working with the 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.