svelte 5 component structure snippets

When reviewing or writing code, apply these guidelines:

• Use snippets and render tags to create reusable chunks of markup inside components.
• Snippets help reduce duplication and enhance maintainability.

svelte 5 general rules

When reviewing or writing code, apply these guidelines:

• Always use Svelte 5 instead of Svelte 4.
• Use runes for controlling reactivity; runes replace certain non-runes features and provide more explicit control over state and effects.
• Treat event handlers as properties for simpler use and integration.

svelte 5 reactivity handling

When reviewing or writing code, apply these guidelines:

• Prefer runes over reactive declarations ( $:) for reactivity, e.g. bind:value
• Treat event handlers as properties, simplifying their use.

svelte and sveltekit general rules

When reviewing or writing code, apply these guidelines:

• Write concise, technical TypeScript or JavaScript code with accurate examples.
• Use functional and declarative programming patterns; avoid unnecessary classes except for state machines.
• Prefer iteration and modularization over code duplication.
• Structure files: component logic, markup, styles, helpers, types.
• Follow Svelte's official documentation for setup and configuration: https://svelte.dev/docs
• Use lowercase with hyphens for component files (e.g., components/auth-form.svelte).
• Use PascalCase for component names in imports and usage.
• Use camelCase for variables, functions, and props.
• Implement proper component composition and reusability.
• Use Svelte's props for data passing.
• Leverage Svelte's reactive declarations for local state management.
• Ensure proper semantic HTML structure in Svelte components.
• Implement ARIA attributes where necessary.
• Ensure keyboard navigation support for interactive elements.
• Use Svelte's bind:this for managing focus programmatically.
• Embrace Svelte's simplicity and avoid over-engineering solutions