frontend-debugging

Debugging component rendering failures in SvelteKit 2 requires a systematic 10-phase workflow starting with health checks and type safety validation, then confirming Encore client synchronization, validating rune usage ($state, $derived, $bindable), and checking SSR/CSR alignment. The Skill guides you through each phase with specific rules: enforce the Encore-generated client, ensure serializable data for SSR, and use browser DevTools to isolate rendering issues.

Svelte 5 rune errors arise from incorrect $state, $derived, $bindable, and $props usage. The Skill provides phase-driven diagnostics that enforce mutability and binding rules, identify state mutations outside reactive contexts, and resolve prop-binding conflicts. This prevents common runtime issues and ensures correct reactivity patterns in your SvelteKit application.

SSR hydration mismatches occur when server-rendered markup diverges from client-side rendering. The Skill includes dedicated SSR vs. CSR validation phases that ensure serializable data, confirm Encore client consistency between environments, and isolate environment-specific logic. This resolves hydration failures and synchronization problems.

Yes. The Skill covers API client failures as part of its 10-phase protocol, enforcing use of the Encore-generated client and forbidding manual fetch in production code paths. It diagnoses client synchronization issues, validates request/response data, and pinpoints routing or type errors affecting API calls.

Diagnosing routing problems in SvelteKit requires phase-by-phase validation of type safety, rune correctness, and API client state. The Skill enforces a rule-based protocol that checks for routing configuration errors, confirms Encore client sync, validates component isolation, and uses browser tooling. This systematic approach isolates routing root causes quickly.

Yes. The Skill's debugging protocol enforces use of the Encore-generated client and forbids manual fetch calls in production paths. This ensures type safety, client-server alignment, and serializable SSR data. Manual HTTP clients circumvent these protections and create difficult-to-diagnose runtime issues.