Agent skill
frontend-debugging
Systematic 10-phase debugging procedure for SvelteKit 2 + Svelte 5 frontend issues. Use when components fail to render, routing breaks, runes throw errors, or Encore client calls fail.
Install this agent skill to your Project
npx add-skill https://github.com/nirukk52/ScreenGraph/tree/main/.claude-skills/frontend-debugging_skill
SKILL.md
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,$propsthat you mutate must uselet(neverconst)$bindablerequires{value}withoninputinstead ofbind:value$effectfor 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
browserchecks 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 signalsfrontend-development_skill– Source of truth for runes, Skeleton UI patterns, and API integration standardse2e-testing_skill– Playwright regression workflow when UI issues require end-to-end verification
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
nirukk52/ScreenGraph
before-task
Comprehensive discovery before starting any spec or major task. Searches Graphiti, recommends vibe/MCPs, surfaces patterns.
nirukk52/ScreenGraph
e2e-testing
Playwright end-to-end testing for ScreenGraph using .env-driven configuration. Use when validating full user flows, running regression suites, or inspecting UI behavior with Cursor browser tools.
nirukk52/ScreenGraph
slack-gif-creator
Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y".
nirukk52/ScreenGraph
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
nirukk52/ScreenGraph
after-task
Mandatory knowledge capture after completing work. Documents solution in Graphiti and tracks effectiveness for system improvement.
nirukk52/ScreenGraph
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Didn't find tool you were looking for?