added a basic realtime validation example

src/lib/components/Flows.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { Stepper, Step } from '@skeletonlabs/skeleton';
+	import { form, field } from 'svelte-forms';
+	import { required, between } from 'svelte-forms/validators';
+
+	let step = 1;
+	let name = '';
+	let age = '';
+	let flowData = {};
+
+	const handleNextStep = () => {
+		if (step === 1 && name.trim() === '') {
+			alert('Please enter a valid name.');
+			return;
+		}
+
+		if (step === 2 && age.trim() === '') {
+			alert('Please enter a valid age.');
+			return;
+		}
+
+		step += 1;
+	};
+
+	const handlePrevStep = () => {
+		step -= 1;
+	};
+
+	const handleConfirm = () => {
+		flowData = {
+			name,
+			age
+		};
+		alert('Flow data confirmed: ' + JSON.stringify(flowData));
+	};
+
+	const handleReset = () => {
+		step = 1;
+		name = '';
+		age = '';
+		flowData = {};
+	};
+</script>
+
+<Stepper start={step - 1}>
+	<Step>
+		<svelte:fragment slot="header">Step 1: Name</svelte:fragment>
+		<div>
+			<label for="name">Name:</label>
+			<input class="text-black" type="text" id="name" bind:value={name} />
+		</div>
+		<div slot="navigation">
+			<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
+		</div>
+	</Step>
+	<Step>
+		<svelte:fragment slot="header">Step 2: Age</svelte:fragment>
+		<div>
+			<label for="age">Age:</label>
+			<input class="text-black" type="number" id="age" bind:value={age} />
+		</div>
+		<div slot="navigation">
+			<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
+			<button class="btn variant-ghost" on:click={handleNextStep}>Next</button>
+		</div>
+	</Step>
+	<Step>
+		<svelte:fragment slot="header">Step 3: Confirm Summary</svelte:fragment>
+		<div>
+			<h3>Confirm Summary:</h3>
+			<p>Name: {name}</p>
+			<p>Age: {age}</p>
+		</div>
+		<div slot="navigation">
+			<button class="btn variant-ghost" on:click={handlePrevStep}>Previous</button>
+			<button class="btn variant-ghost-primary" on:click={handleConfirm}>Confirm</button>
+		</div>
+	</Step>
+</Stepper>
+
+<button on:click={handleReset}>Reset</button>

src/lib/types/UserSchema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const UserSchema = z.object({
+    name: z.string().min(3).max(10)
+});