scan-wave/.github/copilot-instructions.md

GitHub Copilot Instructions for This Repository Use Svelte 5 runes exclusively

Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. svelte.dev svelte.dev

Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!

Enforce a clean component structure

<script> comes first, followed by markup and then an optional <style> (rarely needed—prefer Tailwind). Export component props with export let … (still valid in Svelte 5). Keep each component focused on one visual/behavioural concern; split larger UIs into children. Tailwind-only styling conventions Base container: rounded-lg border border-gray-300 (or rounded-md on small items). Absolutely no shadow-* classes. Use p-4 or p-6 for internal padding, and gap-* utilities (not margin hacks) for spacing between children. Prefer neutral greys (gray-50‒gray-800) and a single accent palette defined in tailwind.config.js. HTML & accessibility Generate semantic elements (, , ,

, , etc.). Every interactive element must have an accessible name (aria-label, visible text, or title). Do not generate tabindex gymnastics; rely on natural DOM order. Type safety & tooling Default to <script lang="ts"> unless the file is explicitly plain JS. Always import types from @types/svelte or svelte where needed. File / folder conventions Component names are PascalCase.svelte. Collocate tests as ComponentName.test.ts beside the component. Put shared util functions in src/lib. Example pattern (reference only) svelte Copy Edit <script lang="ts"> let count = $state(0); let doubled = $derived(count * 2); $effect(() => console.log(`count is ${count}`)); </script>

count++} aria-label="Increment counter" > {count}

{doubled}

What not to do

No inline style="" attributes.

No external CSS files unless Tailwind cannot express the rule.

No class names that imply design debt (.box, .wrapper, .container-1, etc.).

Avoid non-reactive variables; if a value affects the UI, use a rune.

NEVER $: label syntax; use $state(), $derived(), and $effect().

If you want to use supabse client in the browser, it is stored in the data variable obtained from let { data } = $props();

Using on:click to listen to the click event is deprecated. Use the event attribute onclick instead