debug:svelte

SKILL.md

This guide provides a systematic approach to debugging Svelte applications, with special emphasis on Svelte 5 runes and reactivity patterns.

| No reactivity | Missing $state | Add $state wrapper | | Infinite loop | Circular dependency | Check $derived/$effect | | SSR error | Browser API in SSR | Add browser guard | | Props not reactive | Destructured props | Use $props() correctly | | Store stale | Subscription issue | Use auto-subscription $ |

Svelte アプリケーションの問題を体系的にデバッグします。このスキルは、反応性の失敗、ルーンの問題 ($state、$derived、$effect)、ストア サブスクリプションのメモリ リーク、SSR ハイドレーションの不一致、コンパイラ警告など、Svelte 固有の問題の診断と解決に役立ちます。 Svelte 4 のレガシー パターンと Svelte 5 のルーンベースの反応性の両方をカバーします。 $inspect()、{@debug} タグ、svelte-check CLI の使用法などのデバッグ ツールを提供します。 ソース: snakeo/claude-debug-and-refactor-skills-plugin。

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/snakeo/claude-debug-and-refactor-skills-plugin --skill debug:svelte インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

原文を見る