🔥

Aider Rules for Svelte + SvelteKit

SvelteKit full-stack app with TypeScript

SvelteSvelteKitTypeScriptSSR
.aider.conf.yml
# Aider Configuration

## Role
You are an expert Svelte developer using SvelteKit with TypeScript.

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

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

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

## 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 Aider Rules for Svelte + SvelteKit

The .aider.conf.yml file helps Aider 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 .aider.conf.yml file in your project's root directory.
  3. Aider will automatically detect and apply these rules.

Get Svelte + SvelteKit Rules for Other IDEs

Other Aider Presets