Svelte Cursor Rules: Reactive UI and SvelteKit Development
Cursor rules for Svelte and SvelteKit that enforce reactive patterns, stores, routing, and testing. Generate maintainable, accessible, performance-focused UI.
Overview
Professional cursor rules for Svelte and SvelteKit that emphasize reactive UI, component architecture, and store-based state management. These rules help AI generate clean, accessible, and maintainable Svelte code with complete context.
Note:
Optimizes Svelte 4+ and SvelteKit patterns with reactive declarations, stores, routing, and SSR-aware code generation.
Rules Configuration
.cursor/rules/svelte.mdc
---
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
Key Features
Reactive Declarations
Use $: and store reactivity to update UI efficiently
Store-Based State
Readable, writable, and derived stores for shared state
SvelteKit Routing
File-based routes, load functions, and SSR-aware data
Accessibility
ARIA-friendly components and keyboard interactions
Testing Built-In
Unit, integration, and E2E tests with Vitest and Playwright
Performance First
Minimal re-renders, efficient transitions, and lazy loading
Installation
Choose Your IDE
Select the appropriate file path based on your development environment.
Create the Rules File
Create the cursor rules file in your project:
Create file: .cursor/rules/svelte.mdc
Add the Rules Configuration
Copy the rules configuration above into your newly created file.
Start Coding
Your AI assistant will now follow Svelte best practices automatically.
Use Cases
Content Sites
Static or hybrid pages with SSR and progressive enhancement
SPAs
Reactive components with store-driven state and routing
Dashboards
Data-fetching, charts, and interactive controls with smooth UX
Form-Heavy Apps
Validation, accessibility, and controlled inputs with actions
Standards Reference
| Standard | Description | Enforcement |
|---|---|---|
| Svelte Style | Consistent component structure | Prettier formatting |
| Type Safety | JSDoc or TypeScript usage | Enforced via types |
| Testing | Vitest/Playwright test coverage | Auto-generated with code |
| Accessibility | ARIA roles and keyboard support | Built into patterns |
| Architecture | Components, stores, actions | Enforced via structure |
Note:
Combine these rules with Prettier, ESLint, and TypeScript for strong code quality.
Best Practices
Code Organization
- Components handle UI and interaction
- Stores manage shared state and side effects
- Actions encapsulate DOM behavior
- Routes define data loading and page structure
Reactivity
- Use
$:for derived values and side effects - Prefer stores for cross-component state
- Avoid unnecessary reactive chains
- Clean up subscriptions on destroy
Testing Strategy
- Unit tests for components and stores
- Integration tests for routing and data
- E2E tests for critical user flows
- Mock external dependencies appropriately
Related Resources
Related Articles
Flutter Cursor Rules: Widgets, State Management, Performance
Flutter cursor rules for clean widgets, state management, performance, platform integration, testing, and deployment. Build maintainable, reliable mobile apps.
Framework-Specific Cursor Rules for Web and Mobile Development
Discover cursor rules and best practices for popular frameworks including React, Vue, Angular, Next.js, Flutter, React Native, and more for efficient development.
Frontend Framework Cursor Rules for Modern Web Development
Master cursor rules for React, Vue, Angular, Next.js, Svelte, Qwik, and Astro. Framework-specific best practices for efficient web development workflows.