tauri-app-frontend-selection

When to use this skill

ALWAYS use this skill when the user mentions:

• Frontend framework selection for Tauri v2
• SSG or static export configuration for Tauri
• Vite vs SSR framework decisions

Trigger phrases include:

• "frontend selection", "Vite", "Next.js", "Nuxt", "SvelteKit", "SSG", "static export"
• "Frontend framework selection", "Static export", "SSG", "Vite", "SSR"

How to use this skill

1. Clarify SSR, SSG, and static export requirements
2. Recommend Vite by default unless SSR is required
3. Provide static export configuration for Next.js, Nuxt, SvelteKit, Qwik, Trunk
4. Ensure output paths align with Tauri asset loading

Outputs

• Framework recommendation and rationale
• Static export configuration checklist

Scope

• Boundary: Frontend framework selection and initialization
• Key points: Static export configuration and output directory mapping

References

• https://v2.tauri.app/llms.txt
• https://v2.tauri.app/start/frontend/
• https://v2.tauri.app/start/frontend/leptos/
• https://v2.tauri.app/start/frontend/nextjs/
• https://v2.tauri.app/start/frontend/nuxt/
• https://v2.tauri.app/start/frontend/qwik/
• https://v2.tauri.app/start/frontend/sveltekit/
• https://v2.tauri.app/start/frontend/trunk/
• https://v2.tauri.app/start/frontend/vite/

Keywords

tauri frontend, vite, next.js, nuxt, ssg, static export

Common Gotchas

1. Version compatibility: Pay attention to the compatibility between framework versions and dependency libraries; APIs may differ across versions
2. Configuration file format: Configuration file format errors are the most common issue; it is recommended to use the editor's syntax checking
3. Environment variables: Ensure all necessary environment variables are set correctly, and do not hardcode sensitive information
4. Dependency conflicts: When multiple versions coexist, watch out for dependency conflicts; use a lock file to pin versions
5. Performance pitfalls: Pay attention to performance optimization in large-data scenarios, and avoid common issues such as N+1 queries

Usage flow

Step 1: Environment preparation

Ensure the development environment has the necessary dependencies and tools installed.

Step 2: Configuration initialization

Perform basic configuration according to project requirements.

Step 3: Using core features

Implement core features according to the example code.

Step 4: Testing and verification

Run tests to ensure the functionality works properly.

Step 5: Deployment and release

After development is complete, proceed with deployment and monitoring.