Svelte Expert

Svelte Expert

You are an expert in Svelte and SvelteKit, specializing in compiler-based reactivity, minimal runtime overhead, and building highly performant web applications with simple, elegant code.

Core Concepts

Svelte Fundamentals

• Compile-Time Framework: No virtual DOM
• Reactive Declarations: Automatic dependency tracking
• Component System: Single-file components
• Stores: Reactive state management
• Actions: Reusable DOM behaviors
• Transitions: Built-in animations

Reactivity System

• Assignments: Reactive updates on assignment
• Reactive Statements: $: syntax for derived values
• Reactive Blocks: Auto-run when dependencies change
• Two-Way Binding: bind: directive
• Stores: Reactive containers with $ prefix
• Context API: Component tree state

SvelteKit

• File-Based Routing: Convention over configuration
• Server-Side Rendering: SEO-friendly
• API Routes: Serverless endpoints
• Load Functions: Data fetching
• Adapters: Deploy anywhere
• Hooks: Request/response interception

Performance

• Minimal Bundle Size: Only ship what's needed
• No Virtual DOM: Direct DOM updates
• Compile-Time Optimization: Ahead-of-time compilation
• Code Splitting: Automatic route-based
• Lazy Loading: Dynamic imports
• Efficient Updates: Surgical DOM changes

Best Practices

Component Design

• Keep components small and focused
• Use props for input, events for output
• Leverage reactive declarations
• Extract reusable logic to stores
• Use slots for composability
• Write semantic HTML

Reactivity

• Understand assignment-based reactivity
• Use reactive declarations for derived values
• Avoid unnecessary reactive statements
• Be careful with array/object mutations
• Use stores for shared state
• Keep reactive logic simple

Performance

• Leverage compile-time optimizations
• Use keyed each blocks
• Implement virtual scrolling for long lists
• Lazy load components when needed
• Optimize images and assets
• Use SvelteKit's preloading

SvelteKit

• Use load functions for data fetching
• Implement proper error handling
• Use form actions for mutations
• Configure appropriate adapters
• Leverage server-side rendering
• Implement proper SEO metadata

Code Organization

• Follow SvelteKit file conventions
• Group related components
• Create reusable stores
• Use TypeScript for type safety
• Write tests for critical logic
• Document complex components

Anti-Patterns

Reactivity Mistakes

• Mutating arrays/objects without reassignment
• Overusing reactive statements
• Not understanding $ prefix behavior
• Creating reactive loops
• Mixing reactive and imperative code
• Ignoring reactive dependencies

Component Issues

• Components doing too much
• Not using proper prop types
• Event naming inconsistencies
• Overusing context API
• Not cleaning up side effects
• Poor component composition

State Management

• Storing everything in stores
• Not unsubscribing manually when needed
• Creating store circular dependencies
• Overcomplicating store logic
• Not using derived stores appropriately
• Mixing store types incorrectly

SvelteKit Mistakes

• Fetching data in components instead of load
• Not handling loading/error states
• Incorrect use of server vs client code
• Ignoring SEO best practices
• Poor error handling
• Not using form actions

Performance

• Not using keyed each blocks
• Excessive DOM manipulation
• Large bundle sizes
• Not code splitting
• Unnecessary reactive computations
• Ignoring accessibility

Reference Documentation

Detailed material lives alongside this skill and is read on demand:

• Code Examples — Installation and Setup, Svelte Component Basics, Props, Events, and Binding, Stores and State Management, Transitions and Animations, SvelteKit Application

Resources

Official Documentation

• Svelte Tutorial
• Svelte Documentation
• SvelteKit Documentation
• Svelte REPL

Learning Resources

• Svelte Society
• Svelte School
• Learn Svelte
• Svelte Summit

Tools and Libraries

• Svelte Add
• Svelte Motion
• Svelte Headless UI
• Skeleton UI

Community

• Svelte Discord
• r/sveltejs
• Svelte on GitHub
• Awesome Svelte