svelte-code-writer について
Svelte ファイルの作成、編集、レビュー、デバッグに使うワークフロースキルです。Svelte のベストプラクティス、ドキュメント確認、ファイル検証を組み合わせます。
主な機能
- 01Svelte 5 の基本ガイドを読み込む
- 02用途に応じてローカルスキルを選択
- 03公式ドキュメントを参照
- 04変更した Svelte ファイルを検証
- 05Svelte CLI の解析ヘルパーを利用
活用シーン
- 01Svelte コンポーネントの作成や編集
- 02不確かな Svelte 構文の確認
- 03Svelte ファイルのレビューやデバッグ
- 04変更した Svelte ソースの検証
MCP 対応
このワークフローでは、ドキュメントのセクション一覧、内容の取得、Svelte ファイルの解析に `@sveltejs/mcp` の CLI ヘルパーを使います。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/svelte-code-writerを入力して読み込まれたか確認します。
詳細
Svelte コードライター
Svelte ファイルの作成、編集、レビュー、デバッグを行う際は、このワークフローを使用してください。
ワークフロー
- 基本となる Svelte 5 のルールを確認するため、
svelte-core-bestpracticesを読み込みます。 - 必要に応じて、より詳しいローカルスキルを読み込みます：
svelte-runes、svelte-template-directives、svelte-styling、sveltekit-data-flow、またはsveltekit-structure。 - 構文や動作が不確かな場合は、関連する公式ドキュメントを確認します。
- 最終確定の前に、変更した Svelte ファイルを検証します。
公式 Svelte CLI ヘルパー
ドキュメントのセクションを一覧表示します：
npx @sveltejs/mcp list-sections
関連するドキュメントのセクションを取得します：
npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
Svelte ファイルを解析します：
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte
プロジェクトで非同期 Svelte 機能を使用している場合は、--async を指定します：
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte --async
注意事項
- 推測するよりも、正確な構文をドキュメントで確認してください。
- インラインの rune コードをシェル経由で渡す際は、
$をエスケープしてください。 - 可能な場合は、変更した
.svelte、.svelte.ts、.svelte.jsファイルをすべて検証してください。 - 最終確認日： 2026-05-14
コメント
Markdown 対応