NikosDevMC/claude-svelte5-skill

claude-svelte5-skill は何をしますか？

🚀 Claude Code で効率的な Svelte 5 開発を探求しましょう。トークンを節約しながら、専門家の洞察、ベストプラクティス、実践的なパターンを習得できます。

はじめに

Svelte 5 は、リアクティビティとパフォーマンスに革命をもたらしました。このスキルは、Claude Code の機能を最大限に活用して、Svelte 5 プロジェクトを効率的に開発するためのガイドです。

主な機能

• リアクティビティシステム: $state、$derived、$effect などの runes を使用した宣言的リアクティビティ
• スニペット: {#snippet} ブロックによるコンポーネントのコード分割と再利用
• イベントハンドリング: 新しいイベント構文とカスタムイベントの作成
• ストア管理: Svelte 5 でのストアパターンの実装
• タイプセーフ: TypeScript との統合による型安全な開発

使用例

<script lang="ts">
  let count = $state(0);
  let doubled = $derived(count * 2);

  function increment() {
    count += 1;
  }
</script>

<button onclick={increment}>
  クリック: {count}
</button>
<p>2倍: {doubled}</p>

トークン節約のヒント

Claude Code で Svelte 5 開発を行う際は、以下の方法でトークン消費を抑えられます：

• 短い、焦点を絞ったプロンプトを使用する
• 既存のコードを再利用し、必要に応じて変更を加える
• run コマンドでファイルを直接操作する
• コンテキストを最小限に保つ

参考リンク

• Svelte 5 公式ドキュメント
• Svelte 5 チュートリアル
• Claude Code ドキュメント