Frontend Debugging Skill

Purpose: Systematic 10-phase debugging procedure for SvelteKit 2 + Svelte 5 frontend issues.

When to Use

• •Component rendering issues
• •Routing problems
• •Svelte 5 runes errors ($state, $derived, $effect)
• •API client failures
• •Build or type errors

10-Phase Debugging Process

Phase 1: Health Check

task frontend:dev
# Check browser console

Phase 2: Type Safety

task frontend:typecheck
task frontend:lint

Phase 3: Encore Client Sync

task founder:workflows:regen-client
# Verify ~encore/clients imports

Phase 4: Svelte 5 Runes

• •Check proper rune usage and declaration
• •$state, $derived, $bindable, $props that you mutate must use let (never const)
• •$bindable requires {value} with oninput instead of bind:value
• •$effect for side effects only (no async return)

Phase 5: Routing

• •Verify +page.svelte structure
• •Check +layout.svelte hierarchy
• •Review load functions

Phase 6: API Calls

• •Always use Encore generated client
• •Never manual fetch() calls
• •Full type safety guaranteed

Phase 7: SSR/CSR Issues

• •Check server vs browser context
• •Verify browser checks when needed

Phase 8: Component Isolation

• •Test component in isolation
• •Check props/slots/events

Phase 9: Build Testing

task frontend:build
# Test production build

Phase 10: Browser DevTools

• •Use Svelte DevTools extension
• •Check component state/props
• •Review network requests

Reference Library

• •references/svelte5-runes-debugging.md – Deep dive on rune errors (const vs let, $bindable, diagnostics workflow)
• •references/common-issues.md – Expanded checklist for routing, SSR hydration, Encore client sync, and fast-fail signals
• •frontend-development_skill – Source of truth for runes, Skeleton UI patterns, and API integration standards
• •e2e-testing_skill – Playwright regression workflow when UI issues require end-to-end verification