Frontend Svelte

Frontend-Svelte

Technical reference for SvelteKit 5 development.

MCP Usage Priority

1. svelte - Official Svelte 5 and SvelteKit documentation (ALWAYS CHECK FIRST)
2. context7 - Third-party libraries:
   • shadcn-svelte: /huntabyte/shadcn-svelte
   • Other Svelte ecosystem packages
3. web_search - For cases not covered by MCPs

Svelte 5 Conventions

• Runes: $state, $derived, $effect, $props
• Components: Single-file .svelte components
• Events: Use onclick={handler} syntax

SvelteKit Conventions

• Routes: +page.svelte, +page.server.ts, +layout.svelte
• Data Loading: Use load functions in +page.server.ts
• Form Actions: +page.server.ts actions

Svelte 5 Standards

Runes (Svelte 5)

• Use $state() for reactive state
• Use $derived() for computed values
• Use $effect() for side effects (sparingly)
• Use $props() for component props

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

  let { user, onUpdate } = $props<{
    user: User;
    onUpdate: (user: User) => void;
  }>();

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

Component Structure

• Script (setup code) → Markup → Styles
• TypeScript by default
• Export props explicitly with $props()
• Keep components small (<200 lines)

State Management

• Local state: $state()
• Derived values: $derived()
• Cross-component: Svelte stores or context
• Avoid global stores when local state works

Stores (when needed)

// stores.ts
import { writable, derived } from "svelte/store";

export const user = writable<User | null>(null);
export const isLoggedIn = derived(user, ($user) => $user !== null);

Reactivity Best Practices

• Keep $effect() minimal and focused
• Avoid side effects in $derived()
• Use event handlers over watchers when possible
• Don't mutate props

Forms & Validation

• Use bind:value for two-way binding
• Validate on blur, not on every keystroke
• Use form actions for submissions (SvelteKit)
• Show errors after user interaction

SvelteKit Specific

• Use load functions for data fetching
• +page.svelte for routes
• +page.server.ts for server-side logic
• +layout.svelte for shared layouts
• Form actions in +page.server.ts

// +page.server.ts
export const load = async ({ params, locals }) => {
  const property = await db.property.findUnique({
    where: { id: params.id },
  });
  return { property };
};

export const actions = {
  default: async ({ request, locals }) => {
    const data = await request.formData();
    // handle form submission
  },
};

Component Props Pattern

<script lang="ts">
  interface Props {
    title: string;
    subtitle?: string;
    onSave?: (data: FormData) => void;
  }

  let { title, subtitle = '', onSave }: Props = $props();
</script>

Styling

• Scoped styles by default
• Use CSS variables for theming
• Tailwind for utility classes (if using)
• Keep critical CSS inline
• Avoid deep selectors (:global() sparingly)

Performance

• Use {#key} to force recreation when needed
• Lazy load heavy components
• Virtual lists for long lists
• Debounce expensive operations

Anti-Patterns to Avoid

• Don't use $effect() for derived state (use $derived())
• Don't create stores for everything (local state first)
• Don't mutate props directly
• Avoid nested reactive statements
• Don't use bind: for one-way data flow

Component Documentation Standard (Bestays)

Every component should have a header comment block:

<!--
ComponentName - Brief description

ARCHITECTURE:
  Layer: Component/Page
  Pattern: [Pattern Name]

PATTERNS USED:
  - Pattern 1
  - Pattern 2

DEPENDENCIES:
  External: [npm packages]
  Internal: [local imports]

INTEGRATION:
  - Used by: [files]
  - Spec: [spec file if exists]
-->