Svelte 5 runes, component patterns, reactivity, and SvelteKit data loading best practices
99
99%
Does it follow best practices?
Impact
99%
1.11xAverage score across 10 eval scenarios
Passed
No known issues
A product team needs a feedback form page at /feedback in their SvelteKit application. The form collects a user's name, a feedback category (dropdown: "bug", "feature", "other"), and a message body. As the user types, a live preview panel below the form shows what the submitted feedback will look like, including a computed word count and a character-limited excerpt (first 100 characters).
Server-side validation rules: name and message are required, message must be at least 20 characters. On validation failure, the form re-displays with previous values and accessible error messages. On success, redirect to /feedback/confirmation.
The page must work without JavaScript (progressive enhancement). The team uses Svelte 5 and does not want any legacy Svelte 4 patterns -- specifically no export let, no $: reactive declarations, no on:click/on:input directives, and no createEventDispatcher. All reactivity should use runes.
Produce the following files:
src/routes/feedback/+page.server.ts -- form action with validation and redirectsrc/routes/feedback/+page.svelte -- feedback form with live preview, word count, and character-limited excerptThe server action can simulate storing the feedback. Write the files as they would appear in a working Svelte 5 SvelteKit project.
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
svelte-best-practices