mcpField
S
svelte-code-writer

svelte-code-writer

github.com/midudev開発7.0k60 回インストール2 週間前に更新
リポジトリ

svelte-code-writer について

Svelte のコンポーネント開発を支援するスキルです。ドキュメントの検索と自動修正ツールで、コードの確認を行えます。

主な機能

  1. 01Svelte 5 と SvelteKit のドキュメント一覧
  2. 02指定したドキュメントの取得
  3. 03svelte-autofixer によるコード解析
  4. 04非同期モードと Svelte バージョンの指定

活用シーン

  1. 01コンポーネント編集前の構文確認
  2. 02コンポーネントの一般的な問題の確認
  3. 03Svelte コードの最終チェック

MCP 対応

@sveltejs/mcp CLI を使用してドキュメントを一覧・取得し、Svelte autofixer を実行します。

インストール

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

$npx skills add https://github.com/midudev/autoskills --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 対応