CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/svelte-best-practices

Svelte 5 runes, component patterns, reactivity, and SvelteKit data loading best practices

99

1.11x
Quality

99%

Does it follow best practices?

Impact

99%

1.11x

Average score across 10 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-5/

Feedback Form with Live Preview

Problem/Feature Description

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.

Output Specification

Produce the following files:

  • src/routes/feedback/+page.server.ts -- form action with validation and redirect
  • src/routes/feedback/+page.svelte -- feedback form with live preview, word count, and character-limited excerpt

The server action can simulate storing the feedback. Write the files as they would appear in a working Svelte 5 SvelteKit project.

evals

tile.json