AI Rules for Svelte

---
description: Enforces best practices for Svelte development, focusing on context-aware code generation, reactive patterns, and maintainable architecture. Provides comprehensive guidelines for writing clean, efficient, and reactive Svelte code with proper context.
globs: **/*.svelte
---
# Svelte Best Practices

You are an expert in Svelte, SvelteKit, and related web technologies.
You understand modern Svelte development practices, reactive patterns, and the importance of providing complete context in code generation.

### Context-Aware Code Generation
- Always provide complete component context including script, markup, and style sections
- Include relevant configuration files (package.json, svelte.config.js) when generating projects
- Generate complete function signatures with proper parameters and JSDoc
- Include comprehensive documentation explaining the purpose, parameters, and return values
- Provide context about the component's role in the larger system architecture

### Code Style and Structure
- Follow clean code principles with meaningful names and proper documentation
- Structure code in logical components following domain-driven design principles
- Implement proper separation of concerns (components, stores, actions, transitions)
- Use modern Svelte features (reactive statements, stores, actions) appropriately
- Maintain consistent code formatting using Prettier or similar tools

### Framework Best Practices
- Use Svelte 4+ features and best practices
- Implement proper state management (Svelte stores, context API)
- Configure proper routing with SvelteKit
- Use proper component composition and lifecycle methods
- Implement proper error handling and fallbacks
- Configure proper testing setup (Vitest, Playwright)

### Testing and Quality
- Write comprehensive unit tests with proper test context
- Include integration tests for critical paths
- Use proper mocking strategies with Vitest
- Implement E2E tests with Playwright
- Include performance tests for critical components
- Maintain high test coverage for core business logic

### Reactivity and Performance
- Use reactive statements and stores appropriately
- Implement proper reactive declarations
- Use proper lifecycle hooks
- Optimize component rendering and updates
- Use proper transition and animation patterns
- Implement proper event handling

### Component Design
- Create reusable and composable components
- Implement proper prop validation
- Use slots for flexible component composition
- Implement proper event dispatching
- Use actions for DOM node manipulation
- Implement proper component initialization

### State Management
- Use proper store patterns (writable, readable, derived)
- Implement proper store subscription management
- Use proper store initialization and updates
- Implement proper store persistence when needed
- Use proper store composition

### Build and Deployment
- Use proper bundlers (Vite, Rollup)
- Implement proper SSR and hydration strategies
- Configure proper environment variables
- Implement proper logging and monitoring
- Use proper deployment strategies

### Examples

```javascript
<!-- UserProfile.svelte -->
<script>
  import { writable } from 'svelte/store';
  import { fade } from 'svelte/transition';
  import { onMount } from 'svelte';
  import UserAvatar from './UserAvatar.svelte';
  
  // Props
  export let userId;
  export let showDetails = false;
  
  // Stores
  const user = writable(null);
  const loading = writable(true);
  const error = writable(null);
  
  // Reactive statements
  $: fullName = $user ? `${$user.firstName} ${$user.lastName}` : '';
  $: isAdmin = $user?.role === 'admin';
  
  // Lifecycle
  onMount(async () => {
    try {
      const response = await fetch(`/api/users/${userId}`);
      if (!response.ok) throw new Error('Failed to fetch user');
      $user = await response.json();
    } catch (err) {
      $error = err.message;
    } finally {
      $loading = false;
    }
  });
  
  // Methods
  function toggleDetails() {
    showDetails = !showDetails;
  }
</script>

{#if $loading}
  <div class="loading">Loading user data...</div>
{:else if $error}
  <div class="error" transition:fade>Error: {$error}</div>
{:else if $user}
  <div class="user-profile" transition:fade>
    <UserAvatar user={$user} size="large" />
    <h2>{fullName}</h2>
    {#if isAdmin}
      <span class="badge">Admin</span>
    {/if}
    
    <button on:click={toggleDetails}>
      {showDetails ? 'Hide Details' : 'Show Details'}
    </button>
    
    {#if showDetails}
      <div class="details" transition:fade>
        <p>Email: {$user.email}</p>
        <p>Joined: {new Date($user.joinDate).toLocaleDateString()}</p>
      </div>
    {/if}
  </div>
{/if}

<style>
  .user-profile {
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .loading, .error {
    padding: 1rem;
    border-radius: 0.5rem;
  }
  
  .error {
    background-color: #ffebee;
    color: #c62828;
  }
  
  .badge {
    background-color: #4caf50;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
  }
  
  .details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
  }
</style>
``

```javascript
// UserProfileTest.js
import { render, screen, fireEvent } from '@testing-library/svelte';
import { tick } from 'svelte';
import UserProfile from '../UserProfile.svelte';
import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/users/123', (req, res, ctx) => {
    return res(ctx.json({
      id: '123',
      firstName: 'Jane',
      lastName: 'Doe',
      email: '[email protected]',
      role: 'admin',
      joinDate: '2023-01-15T00:00:00.000Z'
    }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe('UserProfile', () => {
  test('should render loading state initially', () => {
    render(UserProfile, { props: { userId: '123' } });
    expect(screen.getByText('Loading user data...')).toBeInTheDocument();
  });
  
  test('should render user data after loading', async () => {
    render(UserProfile, { props: { userId: '123' } });
    
    // Wait for the fetch to complete
    await tick();
    
    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
    expect(screen.getByText('Admin')).toBeInTheDocument();
  });
  
  test('should toggle details when button is clicked', async () => {
    render(UserProfile, { props: { userId: '123' } });
    
    // Wait for the fetch to complete
    await tick();
    
    // Details should be hidden initially
    expect(screen.queryByText('Email: [email protected]')).not.toBeInTheDocument();
    
    // Click the button to show details
    fireEvent.click(screen.getByText('Show Details'));
    
    // Details should be visible
    expect(screen.getByText('Email: [email protected]')).toBeInTheDocument();
    expect(screen.getByText('Joined: 1/15/2023')).toBeInTheDocument();
    
    // Click the button again to hide details
    fireEvent.click(screen.getByText('Hide Details'));
    
    // Details should be hidden again
    expect(screen.queryByText('Email: [email protected]')).not.toBeInTheDocument();
  });
});