Frontend .mdc

Svelte

Svelte best practices and patterns for modern web applications

How to use
  1. Copy the rule content.
  2. In your project root, create .cursorrules or .cursor/rules/svelte.mdc
  3. Paste the content and save.

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

Build and Tooling

  • Use Vite for development
  • Configure proper build setup
  • Use proper environment variables
  • Implement proper code splitting
  • Use proper asset handling
  • Configure proper optimization

Similar rules

More in Frontend →