What does the Svelte Cursor rules template include?

It includes 4 rule sections covering component structure, reactivity & state, styling & scoped css and other Svelte development conventions.

Can I generate Svelte Project Rules and AGENTS.md from the same template?

Yes. The generator can export the same stack-specific guidance as modern Project Rules (.mdc), AGENTS.md, or a legacy .cursorrules file.

Should I combine Svelte with other Cursor rules templates?

Yes. You can combine Svelte with related templates such as TypeScript, Tailwind CSS, Docker, or backend frameworks when your project uses multiple technologies.

Frontend4 sections

Svelte Cursor Rules Template

Generate production-ready Svelte Cursor rules for Project Rules (.mdc), AGENTS.md, or legacy .cursorrules. This template encodes stack-specific conventions for projects using Svelte. Compile-time framework that converts declarative components into lean JavaScript.

Copy the Full Rules Customize & Download

The Complete Svelte Cursor Rules

The full rule set in all three formats Cursor understands — copy the one your project uses. Project Rules (.mdc) load per-file via globs, AGENTS.md is portable across AI tools, and .cursorrules is the legacy single-file format.

Replacing a legacy file? Read the guide to migrate .cursorrules to Cursor Project Rules (.mdc) before copying this template into your project.

.cursor/rules/svelte-component-structure.mdc

---
description: "Component Structure"
alwaysApply: false
---
- Use Svelte 5 runes ($state, $derived, $effect) for reactivity.
- Keep script, template, and style sections in each .svelte file.
- Use    spaces for indentation.
- Use camelCase for variable and function names.
- Keep components focused on a single responsibility.
- Extract reusable logic into .svelte.js modules.

.cursor/rules/svelte-reactivity.mdc

---
description: "Reactivity & State"
alwaysApply: false
---
- Use $state() for reactive local state.
- Use $derived() for computed values — no manual invalidation.
- Use $effect() for side effects with automatic cleanup.
- Use $props() for component props with destructuring.
- Use $bindable() for two-way bindable props.
- Avoid overusing stores — prefer runes for local state.

.cursor/rules/svelte-styling.mdc

---
description: "Styling & Scoped CSS"
alwaysApply: false
---
- Use scoped <style> blocks in .svelte files.
- Use CSS custom properties for theme values.
- Use :global() modifier sparingly and only when necessary.
- Use class:directive for conditional classes.
- Prefer Tailwind CSS for utility-first styling when using SvelteKit.
- Keep styles co-located with components.

Customize These Rules

The generator below is preloaded with the Svelte template. Adjust indentation, quotes, naming, add your own rules, then download — no need to start from scratch on the homepage.

What This Template Covers

Required guidance

- Component Structure
- Reactivity & State
- Styling & Scoped CSS

Default style

- Indentation: 2 spaces
- Quotes: single
- Semicolons: disabled
- Naming: camelCase

Optional sections: Routing (SvelteKit).

Frequently Asked Questions

What does the Svelte Cursor rules template include?: It includes 4 rule sections covering component structure, reactivity & state, styling & scoped css and other Svelte development conventions.
Can I generate Svelte Project Rules and AGENTS.md from the same template?: Yes. The generator can export the same stack-specific guidance as modern Project Rules (.mdc), AGENTS.md, or a legacy .cursorrules file.
Should I combine Svelte with other Cursor rules templates?: Yes. You can combine Svelte with related templates such as TypeScript, Tailwind CSS, Docker, or backend frameworks when your project uses multiple technologies.