SvelteKit TypeScript Tailwind Supabase Best Practices: Essential Coding Rules

**Do:** Adopt kebab-case naming for all Svelte components to ensure consistency.
**Example:** Create `user-profile.svelte` instead of `UserProfile.svelte`.

**Don't:** Use PascalCase or camelCase for component filenames.
**Example:** Avoid `UserProfile.svelte` – it breaks SvelteKit conventions.

**Do:** Leverage SvelteKit's SSR capabilities for server-side rendering whenever feasible to boost performance and SEO.
**Example:** Fetch data in `+page.server.ts` and render on the server.

**Don't:** Rely excessively on client-side rendering for core pages.
**Example:** Skip `onMount` for initial data loads; use server loaders instead.

**Do:** Limit client-side components to tiny, self-contained pieces like modals or tooltips.
**Example:** Keep interactive UI in `+page.svelte` with SSR props.

**Don't:** Build large client-only apps that hydrate fully on the client.
**Example:** Avoid wrapping entire pages in `{#await}` without server fallbacks.

**Do:** Include loading spinners and error boundaries in every data-fetching component.
**Example:** Use `{#await promise} ... {:then data} ... {:catch error} {/await}`.

**Don't:** Omit loading or error UI, leading to blank or broken states.
**Example:** Never just `console.log(error)` without user feedback.

**Do:** Add comprehensive error handling with logging to services like Sentry.
**Example:** `try { await supabase.from('users').select(); } catch (e) { logError(e); }`.

**Don't:** Ignore exceptions or use bare `try-catch` without recovery.
**Example:** Skip silent failures in async operations.

**Do:** Employ semantic HTML tags for better accessibility and SEO.
**Example:** `<article>` for posts, `<nav>` for menus, not generic `<div>`.

**Don't:** Overuse `<div>` for structural elements.
**Example:** Avoid `<div class="nav">` – use `<nav>`.

**Do:** Manage shared state with Svelte stores for reactivity.
**Example:** `import { writable } from 'svelte/store'; export const userStore = writable(null);`.

**Don't:** Pass props deeply or use context for global data.
**Example:** Skip manual prop drilling across components.

**Do:** Enforce TypeScript everywhere for robust type checking.
**Example:** Define interfaces like `interface User { id: string; name: string; }`.

**Don't:** Write untyped JavaScript in .svelte or .ts files.
**Example:** Avoid `any` types liberally.

**Do:** Strictly adhere to user instructions, delivering complete, bug-free code.
**Example:** Implement every feature without stubs.

**Don't:** Add TODOs, placeholders, or incomplete logic.
**Example:** Never leave `// TODO: implement login`.

**Do:** Prioritize code readability with clear structure and comments.
**Example:** Use descriptive variables like `fetchUserProfile()` over `getData()`.

**Don't:** Optimize prematurely at readability's expense.
**Example:** Avoid cryptic one-liners for simple operations.

**Do:** Reference exact file paths in responses.
**Example:** "Update `src/routes/profile/+page.server.ts` with...".

**Don't:** Be verbose; keep explanations minimal and code-focused.
**Example:** Skip long prose – show code directly.

**Do:** Admit unknowns honestly.
**Example:** "I'm unsure about that Supabase edge case; let's check docs."

**Don't:** Guess or fabricate solutions.
**Example:** Avoid unverified code snippets.