Skip to main content

rule

svelte · patrickjs — Cursor rule: Svelte best practices

A Cursor rule that steers the agent toward Svelte conventions: component structure, reactivity, stores, SvelteKit routing and tests. Useful when the agent writes or edits Svelte code.

Install into Cursor · Manually: put the files in place All methods and platforms ↓

.cursor/rules/svelte.mdc

What svelte does

The file tells Cursor what to follow when it touches .svelte files and src/**/*.ts or src/**/*.js. Sections cover component structure, reactive declarations, stores, performance, routing, forms, TypeScript types, testing and build tooling. Routing points at SvelteKit, the build section at Vite.

The rule does not apply project-wide: it carries alwaysApply: false and relies on globs instead. So it only fires on files that match those patterns. Worth checking if your components live outside src — the globs would need editing.

Installation is one file at .cursor/rules/svelte.mdc. No dependencies, no API keys; the content is plain markdown with frontmatter.

What it helps with

keep Svelte components small and single-purpose
type props and events for TypeScript
split state into modular stores
set up routing and layouts with SvelteKit
cover components and stores with tests

Example prompts for the agent

add a new form component with validation following the svelte rule
rewrite this store using derived values and subscriptions
check this file for unnecessary reactivity against the svelte rule

How to install svelte

Manually: put the files in place

.cursor/rules/svelte.mdc

Frontmatter: description, globs, alwaysApply

Manually: put the files in place

.claude/rules/svelte.md

The paths frontmatter field limits the files: move globs from the source into paths

Manually: put the files in place

.github/instructions/svelte.instructions.md

The applyTo field sets which files it applies to: move globs from the source into applyTo

Manually: put the files in place

.devin/rules/svelte.md

Manually: put the files in place

.clinerules/svelte.md

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about svelte

How do I install svelte in Cursor?

Create .cursor/rules/svelte.mdc and paste the rule content into it. That is the whole setup.

What does the svelte rule do?

It gives Cursor conventions for Svelte code: component structure, reactivity, stores, routing, forms, types, testing and build setup.

When does the rule apply?

It sets alwaysApply: false, so it only applies to files matching **/*.svelte, src/**/*.ts and src/**/*.js.

Source text

svelte.mdc · CC0-1.0

---
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

## 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

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →

svelte by other authors comes first.

svelte sanjeed5 A Cursor rule that pins down how Svelte 5 components get written: runes instead of legacy reactivity, typed scripts, keyed lists. Useful when the project already runs Svelte 5. ★ 3,579repo stars svelte-code-writer sveltejs Fetches Svelte 5 documentation and analyzes components using autofixer. Useful when authoring or debugging .svelte and .svelte.ts files. CX Codex +1 12,900installs svelte-debug davila7 Reads a Svelte or SvelteKit error and stack trace, finds whether the cause is compilation, runtime or config, and hands you a fix. 134installs svelte-scaffold davila7 Builds out a new SvelteKit project, feature module or component library with a ready folder layout and config files. Handy when you want a starting point without wiring it by hand. 127installs svelte5-best-practices ejirocodes A skill that feeds your coding agent Svelte 5 runes, snippets and SvelteKit patterns while you write or refactor components. CX Codex +1 16,600installs sentry-svelte-sdk getsentry A skill that walks your agent through full Sentry setup in Svelte and SvelteKit: it scans the project, proposes a feature set and writes the config files. CX Codex +1 2,100installs svelte-components spences10 Tells your agent how to build Svelte components: headless libraries, custom elements, and forms that cannot wrap their inputs. CX Codex +1 531installs

From the same set68

tanstack-router A Cursor rule that sets agent conventions for TanStack Router v1: file-based routes, typed params and loader-based data fetching. ★ 41,011repo stars tanstack-query-v5-cursorrules-prompt-file A Cursor rule that tells the agent how to write TanStack Query v5 code: query keys, mutations, optimistic updates, Suspense and prefetching. ★ 41,011repo stars tailwind-react-firebase-cursorrules-prompt-file A Cursor rule that sets conventions for a mobile-first web app built with Tailwind, React and Firebase. ★ 41,011repo stars sveltekit-typescript-guide-cursorrules-prompt-file A Cursor rule that points the agent at Svelte 5, SvelteKit and TypeScript: project structure, runes, state handling. ★ 41,011repo stars solidjs-tailwind-cursorrules-prompt-file A Cursor rule that tells the agent how to write Solid.js code with Tailwind CSS: signals, utility classes, folder layout. ★ 41,011repo stars solidity-hardhat-cursorrules-prompt-file A Cursor rule that turns the AI assistant into a Solidity and smart contract security expert, with Hardhat-based testing and gas work. ★ 41,011repo stars snowflake-snowpark-dbt-cursorrules-prompt-file A Cursor rule that gives the agent context for Snowpark Python and dbt with the Snowflake adapter. Useful when you write transformation pipelines in either tool. ★ 41,011repo stars shopify-theme-dev-liquid A Cursor rule collecting Shopify theme practices across Liquid, JavaScript, CSS, accessibility and performance. Useful when you build a theme and want the agent to keep the structure. ★ 41,011repo stars

Project sponsors

Companies that keep this analytics open

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor