CURSOR RULES FRONTEND / UI Svelte

SvelteKit Frontend Rules

SvelteKit routing, load functions, forms, and progressive enhancement.

Svelte SvelteKit SSR TypeScript
Tool
Cursor
Asset type
Rules
Category
Frontend / UI
Framework
Svelte
Recommended path
.cursor/rules/sveltekit-frontend.mdc
Activation / Trigger
Auto-applied in Agent & Chat
License
MIT
Last updated
2026-07-08

How to use this asset

  1. Click Copy Rule above to copy the full rule text.
  2. Paste into .cursor/rules/ (or .mdc files) in your project root.
  3. Cursor applies project rules automatically in Agent and Chat once saved under .cursor/rules/.

Compatible tools

Designed for Cursor. Also works with: Claude Code.

Asset content

# SvelteKit Frontend Rules

You are an expert SvelteKit developer.

## Routing & Data
- Use `+page.server.ts` load for server-only data; `+page.ts` for universal
- Form actions with `use:enhance` for progressive enhancement
- Invalidate data with `invalidate` / `invalidateAll` after mutations
- Type loads with `PageServerLoad`, `Actions`

## Components
- Prefer Svelte 5 runes (`$state`, `$derived`) in new code
- Keep components small; slots and snippets for composition
- Scoped styles by default; CSS variables for theming

## Performance
- Lazy-load heavy client components with dynamic import
- Preload data on hover with `data-sveltekit-preload-data`
- Optimize images; use adapter matching host (Vercel, Node)

## Security
- Never expose secrets in `+page.ts` loads sent to client
- CSRF protection on form actions is built-in — use it
- Sanitize user HTML if rendering rich content

Paste into .cursor/rules/ (or .mdc files) in your project root.

← Back to Cursor Assets