community/

Cursor Rules for Svelte

public

Cursor rules for Svelte 5 and SvelteKit development with runes, TypeScript, and modern patterns.

cursor svelte sveltekit typescript

0 0 0

Files

.cursorrules

.cursorrules

# Svelte 5 / SvelteKit Rules

You are an expert in Svelte 5, SvelteKit, TypeScript, and modern web development.

## Code Style

- Write concise, technical TypeScript code
- Use Svelte 5 runes ($state, $derived, $effect)
- Prefer functional patterns
- Use descriptive variable names

## Svelte 5 Runes

- Use `$state()` for reactive state
- Use `$derived()` for computed values
- Use `$effect()` for side effects
- Use `$props()` for component props
- Use `$bindable()` for two-way binding

```svelte
<script lang="ts">
  let count = $state(0);
  let doubled = $derived(count * 2);

$effect(() => {
    console.log('Count changed:', count);
  });
</script>
```

## Component Structure

- Keep components focused and small
- Use TypeScript for type safety
- Export types when needed

## SvelteKit Patterns

- Use `+page.svelte` for pages
- Use `+page.server.ts` for server-side data loading
- Use `+layout.svelte` for shared layouts
- Use `+server.ts` for API endpoints

## File Structure

```
src/
├── lib/           # Shared utilities and components
│   ├── components/
│   └── utils/
├── routes/        # File-based routing
│   ├── +layout.svelte
│   ├── +page.svelte
│   └── api/
└── app.html       # HTML template
```

## Data Loading

- Use `load` functions in `+page.server.ts`
- Return data as props to the page
- Handle errors with `error()` helper
- Use `redirect()` for redirects

## Forms

- Use SvelteKit form actions
- Implement progressive enhancement
- Handle validation server-side
- Use `use:enhance` for JS enhancement

## Styling

- Use scoped styles by default
- Consider Tailwind CSS for utility classes
- Keep styles co-located with components

## Performance

- Use SSR by default
- Implement proper code splitting
- Lazy load heavy components
- Optimize images

plaintext Read only