Svelte / SvelteKit

Core Principles

• Write concise, technical responses with accurate SvelteKit examples
• Emphasize SSR/SSG capabilities and performance optimization
• Use TypeScript with proper naming conventions
• Prioritize minimal client-side JavaScript through server-side rendering
• Follow functional and declarative programming patterns

Svelte 5 Runes

• Use

  $state

  for reactive state
• Use

  $derived

  for computed values
• Use

  $effect

  for side effects
• Use

  $props

  for component properties
• Use

  $bindable

  for two-way binding

Styling

• Use scoped styling via Svelte's

  <style>

  tags
• Integrate Tailwind CSS without

  @apply

  directives
• Keep styles co-located with components

State Management

• Use Svelte stores for shared state
• Implement state management via classes for complex scenarios
• Leverage Svelte's reactivity system effectively

SvelteKit Features

• Use file-based routing
• Implement proper load functions
• Handle errors appropriately
• Use form actions for mutations
• Leverage server-side data loading

Performance

• Focus on Web Vitals optimization
• Minimize client-side JavaScript
• Use preloading for faster navigation
• Implement lazy loading where appropriate

Internationalization

• Use Paraglide.js for i18n support
• Implement proper locale handling

Testing

• Use Vitest for unit testing
• Use Lighthouse for performance auditing
• Write comprehensive component tests

Accessibility

• Ensure accessibility compliance
• Use semantic HTML
• Implement proper ARIA attributes