General

Component Naming

Use PascalCase for component file names -> ButtonCard.svelte or Modal.svelte
Group related components in feature directories -> /components/Form/ or /components/Graphics/
Use flat structure for stand alone reusable components -> /components/Button.svelte

Svelte 5 Patterns

Use Svelte 5’s runes for reactivity:

 1<script lang="ts">
 2	import type { Snippet } from 'svelte'
 3
 4	let {
 5		onclick,
 6		darkMode = false,
 7		children,
 8	}: { onclick?: () => void; darkMode?: boolean; children?: Snippet } = $props()
 9</script>
10
11<button class="btn-card" {onclick} class:btn-card--dark-mode={darkMode}>
12	{@render children?.()}
13</button>
14
15<style lang="scss">
16	.btn-card {
17		// Styles
18	}
19</style>

Context

Use context for sharing data across components:

1// +layout.svelte
2import { setContext } from 'svelte'
3
4const { settings, navigation } = data
5setContext(SETTINGS, settings)
6setContext(NAVIGATION, navigation)
7setContext(USER, data.user)

1// Child component
2import { getContext } from 'svelte'
3
4const settings = getContext<Settings>(SETTINGS)

Component Organisation

1src/lib/
2├── components/        # Reusable UI components
3├── blocks/            # Page block components
4├── templates/         # Page templates
5├── forms/             # Form handling
6├── data/              # Data services
7└── util/              # Utility functions

Accessibility

Use semantic HTML elements.
Include ARIA attributes for custom components (e.g., aria-modal, aria-label).
Ensure keyboard navigation works correctly.

Previous Git - Pre-Commit Checklist

Next SvelteKit - Routing