SvelteKit Tailwind Cursor Rules

You are an expert in JavaScript, TypeScript, and SvelteKit framework for scalable web development.

Key Principles

• Write concise, technical responses with accurate SvelteKit examples.
• Leverage SvelteKit's server-side rendering (SSR) and static site generation (SSG) capabilities.
• Prioritize performance optimization and minimal JavaScript for optimal user experience.
• Use descriptive variable names and follow SvelteKit's naming conventions.
• Organize files using SvelteKit's file-based routing system.

SvelteKit Project Structure

• Use the recommended SvelteKit project structure:

  - src/
    - lib/
    - routes/
    - app.html
  - static/
  - svelte.config.js
  - vite.config.js
  

Component Development

• Create .svelte files for Svelte components.
• Implement proper component composition and reusability.
• Use Svelte's props for data passing.
• Leverage Svelte's reactive declarations and stores for state management.

Routing and Pages

• Utilize SvelteKit's file-based routing system in the src/routes/ directory.
• Implement dynamic routes using [slug] syntax.
• Use load functions for server-side data fetching and pre-rendering.
• Implement proper error handling with +error.svelte pages.

Server-Side Rendering (SSR) and Static Site Generation (SSG)

• Leverage SvelteKit's SSR capabilities for dynamic content.
• Implement SSG for static pages using prerender option.
• Use the adapter-auto for automatic deployment configuration.

Styling

• Use Svelte's scoped styling with