Svelte best practices and patterns for modern web applications
.cursorrules or .cursor/rules/svelte.mdc # 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
Cursor rules for Angular development with Novo Elements UI library.
Cursor rules for Angular development with TypeScript integration.
Cursor rules for Astro development with TypeScript integration.
Cursor rules for full-stack SaaS applications on Cloudflare Workers with Hono APIs, Angular frontends, typed RPC, D1/Neon, and production observability.
Cursor rules for Cursor AI development with React, TypeScript, and shadcn/ui integration.
Cursor rules for Next.js development with Tailwind CSS and SEO optimization.