Update Svelte instructions with Svelte 5 best practices

[GeekTrainer]

Summary

Updates the Svelte instructions file to reflect the latest Svelte 5 and SvelteKit best practices based on the official documentation.

Changes Made

New Content

• Added advanced Svelte 5 runes: $derived.by(), $effect.pre(), untrack(), $effect.tracking()
• Added type-safe context pattern with createContext() helper
• Added transitions and animations section (stable, widely-used feature)
• Added function bindings for two-way binding
• Added SSR safety guidance (avoiding global $state modules)
• Emphasized derived value overrides for optimistic UI (Svelte 5.25+)

Enhanced Best Practices

• Stronger guidance to prefer $derived() over $effect() for state synchronization
• Moved Effect Best Practices into a dedicated, prominent section
• Clarified TypeScript prop annotations
• Added explicit {#snippet} block documentation

Structural Improvements

• Reorganized into logical sections for better readability:
  • Core Concepts - Architecture & Component Design
  • Reactivity and State - Runes, State Management, Effects
  • SvelteKit Patterns - Routing, Data Loading, Forms
  • UI and Styling - Styling & Animations
  • TypeScript and Tooling - Type safety & Dev tools
  • Production Readiness - Performance, Testing, Security, A11y
• Consolidated related topics (data loading scattered → grouped)
• Improved information flow: Learn → Build → Polish → Ship

Documentation Source

All updates verified against official Svelte 5 and SvelteKit documentation via the Svelte MCP server to ensure accuracy and currency.

File Stats

• Previous: 162 lines
• Updated: 193 lines (+31 lines of valuable content)
• Focus: Production-ready, stable features only (excluded experimental features)

[Copilot]

Pull request overview

This PR updates the Svelte instructions file to align with Svelte 5 and SvelteKit best practices, incorporating advanced features and improved organizational structure based on official documentation.

Changes:

• Added advanced Svelte 5 runes ($derived.by(), $effect.pre(), untrack(), $effect.tracking(), $effect.pending()) and best practices
• Reorganized content into logical sections: Core Concepts, Reactivity and State, SvelteKit Patterns, UI and Styling, TypeScript and Tooling, and Production Readiness
• Enhanced guidance on effects, context API, SSR safety, TypeScript prop annotations, and transitions/animations

[Copilot]

The createContext() helper is mentioned but lacks explanation. Consider adding a brief example or description of how this pattern differs from raw setContext/getContext to help developers understand when and how to use it.

Suggested change

	- Implement type-safe context with `createContext()` helper over raw `setContext`/`getContext`
	- Implement type-safe context with a `createContext()` helper over raw `setContext`/`getContext`. A typical helper wraps Svelte's context APIs, fixes the key and value type in one place, and returns typed setter/getter functions:
	```ts
	// context/user-context.ts
	// createContext<T>() returns [set, get] tied to a specific key and type
	const [setUserContext, getUserContext] = createContext<User>('user');
	// in parent component
	setUserContext({ id: '123', name: 'Ada' });
	// in child component
	const user = getUserContext(); // strongly typed User

• Prefer this pattern so components call getUserContext() instead of repeating the context key and types around raw setContext/getContext, reducing bugs and improving type safety.

[Copilot]

The function binding syntax shown appears incomplete or unclear. The pattern bind:value={() => value, setValue} needs clarification—typically function bindings use a different syntax. Consider providing a clearer example or verifying this syntax against Svelte 5 documentation.

Suggested change

	- Function bindings (`bind:value={() => value, setValue}`) for two-way binding
	- Function bindings and `bind:value` (e.g. `<input bind:value={value} />`) for two-way binding