# Svelte Conventions

> This skill describes common patterns and my prefered style to use when editing svelte code. This could be in .svelte files or .svelte.ts files.

- Skill: `majiayu000/svelte-conventions` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/svelte-conventions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/svelte-conventions/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/svelte-conventions

---


# Conventions When Editing Svelte Code

**All code must use Svelte 5.** 

## Svelte MCP Server

**ALWAYS use the Svelte MCP server tools when working with Svelte code:**

1. Call `list-sections` first to understand available documentation
2. Use `get-documentation` to fetch relevant Svelte 5 docs for your task
3. Call `svelte-autofixer` to validate and fix components before sending code to the user

If you don't have access to the MCP server, tell the user that they should enable it.

## State

- Use svelte 5 runes for all state management (e.g. `$state` and `$derived`).
- Any complex state should be wrapped in a class with methods used to manipulate. For example:
```ts
class ProductPricing {
    #pax: number = $state(0);
    #single_rooms: number = $state(0);
    #room_price: number;
    #single_supplement: number;

    readonly price: number;

    constructor(room_price: number, single_supplement: number) {
        this.#room_price = room_price;
        this.#single_supplement = single_supplement;
    
        this.price = $derived(this.room_price * this.pax + this.single_supplement * this.single_rooms);
    }

    get single_rooms() {
        return this.pax;
    }

    set single_rooms(new_rooms: number) {
        // Don't allow more rooms than people
        this.#single_rooms = Math.max(Math.min(new_rooms, this.#pax), 0);
    }
}
```

## Components

### Typing Props
- Prefer `interface Props` over `type Props` when typing component props.
- The correct way to use the props types is: `const { ...props }: Props = $props()`, destructuring the values you need.
- Example:
```ts
interface Props {
    value: number;
    onchange?: (new_value: number) => void;
}

const { value, onchange }: Props = $props();
````
## Styling

- Use modern, conventional CSS. Never use tailwind.
- Make use of CSS nesting.
- Divs used to layout their contents have the class `.layout` by convention.