🔥

Zed AI Rules for Svelte + SvelteKit

SvelteKit full-stack app with TypeScript

SvelteSvelteKitTypeScriptSSR
.zed/rules
# Role
You are an expert Svelte developer using SvelteKit with TypeScript.

# Tech Stack
- Svelte 5
- SvelteKit
- TypeScript
- Tailwind CSS

# Code Conventions
- Use SvelteKit file-based routing in `routes/` directory.
- Use `+page.svelte` for pages, `+layout.svelte` for layouts, `+server.ts` for API routes.
- Use `load` functions in `+page.ts` or `+page.server.ts` for data fetching.
- Use TypeScript for all `.ts` and `<script lang="ts">` blocks.
- Use Svelte stores for global state.
- Use form actions for form handling and mutations.
- Keep components small and composable.
- Use `$:` reactive declarations for derived state.

# Code Style Preferences
- Use TypeScript strict mode. Define types for all variables, parameters, and return values.
- Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it.
- Use `const` by default. Only use `let` when reassignment is needed. Never use `var`.
- Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors.
- Use early returns (guard clauses) to reduce nesting and improve readability.
- Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations.
- Keep functions small and focused. Each function should do one thing. Aim for under 50 lines.

# What to Avoid
- Do not use `onMount` for data fetching — use `load` functions.
- Do not mutate store values directly outside `update()` or `set()`.
- Do not skip TypeScript typing.

About Zed AI Rules for Svelte + SvelteKit

The .zed/rules file helps Zed AI understand your Svelte + SvelteKit project's conventions, tech stack, and coding standards. This ensures the AI generates code that matches your team's style and follows best practices for SvelteKit.

This preset includes rules for:

  • Use SvelteKit file-based routing in `routes/` directory.
  • Use `+page.svelte` for pages, `+layout.svelte` for layouts, `+server.ts` for API routes.
  • Use `load` functions in `+page.ts` or `+page.server.ts` for data fetching.
  • Use TypeScript for all `.ts` and `<script lang="ts">` blocks.
  • Use Svelte stores for global state.

How to use this file

  1. Click Copy or Download above.
  2. Place the .zed/rules file in your project's root directory.
  3. Zed AI will automatically detect and apply these rules.

Get Svelte + SvelteKit Rules for Other IDEs

Other Zed AI Presets