Generate Svelte Components with Best Practices

Writes clean, performant, maintainable Svelte components following the standard three-section script/markup/style structure, with imports, typed props using export let with TypeScript annotations, a strongly-typed event dispatcher, reactive declarations, local state, and functions ordered consistently within the script block. Reactivity best practices lean on Svelte's $: reactive statements for derived data, like a sorted or filtered list recomputed whenever its dependencies change, reactive statements with side effects such as a console warning when a dataset crosses a size threshold, and statements with multiple dependencies computed together. Props and events follow a clear pattern: typed props with sensible defaults and constrained string-union types, a strongly-typed createEventDispatcher generic naming every event and its payload shape, and DOM event forwarding combined with custom logic, like blocking a click and preventing default while a loading prop is true.

Store integration wires Svelte's own writable and derived stores together with auto-unsubscribing $store syntax in the template, and manual store updates during an async operation set loading and error state around the actual request. Lifecycle handling covers onMount returning its own cleanup function, explicit onDestroy cleanup for things like a pending animation frame, and beforeUpdate/afterUpdate for capturing state before or reacting to state after a DOM update. Accessibility patterns generate a stable random ID for a form field and wire aria-invalid, aria-describedby, and an aria-live="polite" error region together so assistive technology announces validation errors properly. Performance optimization covers debounced search input:

let searchTimeout: NodeJS.Timeout;
$: if (searchTerm) {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    currentPage = 0;
  }, 300);
}

memoized filtering and pagination through chained reactive statements, and tick() for waiting on the next DOM update before scrolling. Component communication covers binding a child component reference to call its exposed public methods directly, and exporting internal state getters specifically to make a component's behavior testable from the outside.

Use it when building a new Svelte component, or reviewing an existing one for correct reactivity, typed props and events, store usage, lifecycle cleanup, accessibility, or performance. Every pattern assumes TypeScript and Svelte's own store and lifecycle APIs rather than a framework-agnostic approach.

Takes a component's intended props, events, and behavior; produces a Svelte component following the three-section structure, with typed props and events, correct reactive statements, proper lifecycle cleanup, and accessible markup.

Svelte developers who want components built to a consistent, typed, accessible, and performant standard rather than ad hoc reactive statements and untyped props.