svelte

---

description: "Svelte best practices and patterns for modern web applications" globs: /*.svelte, src//.ts, src/**/.js alwaysApply: false

Svelte Best Practices

Component Structure

• Keep components small and focused
• Use proper TypeScript integration
• Implement proper props typing
• Use proper event dispatching
• Keep markup clean and readable
• Use proper slot implementation

Reactivity

• Use proper reactive declarations
• Implement proper stores
• Use proper reactive statements
• Handle derived values properly
• Use proper lifecycle functions
• Implement proper bindings

State Management

• Use proper Svelte stores
• Keep stores modular
• Use proper derived stores
• Implement proper actions
• Handle async state properly
• Use proper store subscriptions

Performance

• Use proper component lazy loading
• Implement proper transitions
• Use proper animations
• Avoid unnecessary reactivity
• Use proper event forwarding
• Implement proper key blocks

Routing

• Use SvelteKit for routing
• Implement proper layouts
• Use proper route parameters
• Handle loading states properly
• Implement proper error pages
• Use proper navigation methods

Forms

• Use proper form bindings
• Implement proper validation
• Handle form submission properly
• Show proper loading states
• Use proper error handling
• Implement proper form reset

TypeScript Integration

• Use proper component types
• Implement proper prop types
• Use proper event types
• Handle proper type inference
• Use proper store types
• Implement proper action types

Testing

• Write proper unit tests
• Implement proper component tests
• Use proper testing libraries
• Test stores properly
• Implement proper mocking
• Test async operations

Best Practices

• Follow Svelte style guide
• Use proper naming conventions
• Keep components organized
• Implement proper error handling
• Use proper event handling
• Document complex logic