mcpField
S
svelte-code-writer

svelte-code-writer

github.com/sveltejs開発33513.2k 回インストール2 日前に更新
リポジトリ

svelte-code-writer について

svelte-code-writerは、SvelteやSvelteKitを使う開発者向けのコーディングスキルです。@sveltejs/mcp CLIでドキュメントを取得し、バージョンに応じたコード修正候補を確認できます。

主な機能

  1. 01Svelteドキュメントの章一覧
  2. 02選択したドキュメントの取得
  3. 03svelte-autofixerによるコード解析
  4. 04Svelte 4または5への対応
  5. 05非同期Svelteモードの利用

活用シーン

  1. 01Svelte 5のrune構文の確認
  2. 02コンポーネントの一般的な問題の確認
  3. 03Svelteのバージョンに応じたコード検査
  4. 04関連するSvelteKitドキュメントの取得

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sveltejs/ai-tools --skill svelte-code-writer

インストール後、Claude Code で/svelte-code-writerを入力して読み込まれたか確認します。

詳細

CLI ツール

Svelte に特化したサポートには、@sveltejs/mcp CLI を利用できます。次のコマンドを npx 経由で実行してください。

ドキュメントセクションの一覧表示
npx @sveltejs/mcp list-sections

利用可能な Svelte 5 および SvelteKit のドキュメントセクションを、タイトルとパスとともにすべて一覧表示します。

ドキュメントの取得
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."

指定したセクションのドキュメント全文を取得します。関連するドキュメントを取得するには、list-sections の実行後に使用してください。

例：

npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
Svelte オートフィクサー
npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]

Svelte コードを分析し、よくある問題の修正案を提示します。

オプション：

  • --async - 非同期 Svelte モードを有効にします（デフォルト：false）
  • --svelte-version - 対象バージョンを指定します。バージョン固有の提案を有効にするには、package.json に記載されている完全なバージョン（例：5.16.0）が理想的です。メジャーバージョンは 4 または 5 である必要があります（デフォルト：5）

例：

# Analyze inline code (escape $ as \$)
npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>'

# Analyze a file
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte

# Target Svelte 4
npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4

重要： ターミナル経由でルーン（$state、$derived など）を含むコードを渡す場合は、シェルによる変数置換を防ぐため、$ 文字を \$ としてエスケープしてください。

ワークフロー

  1. 構文が不確かな場合 関連トピックの list-sections を実行してから、get-documentation を実行します
  2. レビューやデバッグを行う場合 コードに対して svelte-autofixer を実行し、問題を検出します
  3. 必ず検証してください Svelte コンポーネントを仕上げる前に、svelte-autofixer を実行します

コメント

Markdown 対応