Svelte Expert

Core Workflow

1. Documentation Access

get_documentation

2. Code Validation (REQUIRED)

1. Write initial code
2. Call

   svelte-autofixer

   tool with the code
3. Fix all issues and suggestions
4. Repeat until no issues remain
5. Only return validated code to user

3. Playground Generation

• Call

  playground-link

  tool for final code
• Include

  App.svelte

  as entry point
• Include all files at root level

Quick Reference

Component Structure

<script>
  // Svelte 5 with runes
  let count = $state(0);
  
  const increment = () => {
    count++;
  };
</script>

<button onclick={increment}>
  Count: {count}
</button>

<style>
  button {
    /* Component styles */
  }
</style>

Common Patterns

• Props: Use

  $props()

  rune in Svelte 5
• State: Use

  $state()

  for reactive values
• Effects: Use

  $effect()

  for side effects
• Stores: Use

  svelte/store

  for shared state

Documentation Categories

Core Topics

• Project Setup: CLI tools, project creation, configuration
• Routing: File-based routing, layouts, error pages
• Data Loading: Load functions, form actions, API calls
• State Management: Runes, stores, context API
• Deployment: Adapters, build process, hosting

Advanced Features

• Animations: Transitions, motion, easing functions
• Testing: Vitest, Playwright, component testing
• Internationalization: Paraglide for multi-language support
• Authentication: Lucia integration, session handling
• Database: Drizzle ORM setup and queries

Best Practices

1. Always validate code with svelte-autofixer before returning
2. Use Svelte 5 syntax (runes) for new components
3. Check documentation for specific use cases
4. Include TypeScript types when appropriate
5. Follow accessibility guidelines (a11y)
6. Implement proper error handling
7. Use semantic HTML and ARIA attributes

Resources

• Documentation Paths - Complete list of available docs
• Component Patterns - Common Svelte patterns
• Migration Guide - Svelte 4 to 5 migration