jpskill.com
✍️ ライティング コミュニティ

svelte-code-writer

Svelte 5のドキュメント検索やコード分析を行うCLIツールで、Svelteコンポーネントやモジュール作成・編集時に活用し、svelte-file-editorエージェントと連携することで最適な結果を得るSkill。

📜 元の英語説明(参考)

CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Svelte 5のドキュメント検索やコード分析を行うCLIツールで、Svelteコンポーネントやモジュール作成・編集時に活用し、svelte-file-editorエージェントと連携することで最適な結果を得るSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o svelte-code-writer.zip https://jpskill.com/download/20938.zip && unzip -o svelte-code-writer.zip && rm svelte-code-writer.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/20938.zip -OutFile "$d\svelte-code-writer.zip"; Expand-Archive "$d\svelte-code-writer.zip" -DestinationPath $d -Force; ri "$d\svelte-code-writer.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して svelte-code-writer.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → svelte-code-writer フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] svelte-code-writer

Svelte 5 コードライター

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 - ターゲットバージョン: 4 または 5 (デフォルト: 5)

例:

# インラインコードを分析する ($ は \$ としてエスケープ)
npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>'

# ファイルを分析する
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte

# 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 を実行してください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Svelte 5 Code Writer

CLI Tools

You have access to @sveltejs/mcp CLI for Svelte-specific assistance. Use these commands via npx:

List Documentation Sections

npx @sveltejs/mcp list-sections

Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.

Get Documentation

npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."

Retrieves full documentation for specified sections. Use after list-sections to fetch relevant docs.

Example:

npx @sveltejs/mcp get-documentation "$state,$derived,$effect"

Svelte Autofixer

npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]

Analyzes Svelte code and suggests fixes for common issues.

Options:

  • --async - Enable async Svelte mode (default: false)
  • --svelte-version - Target version: 4 or 5 (default: 5)

Examples:

# 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

Important: When passing code with runes ($state, $derived, etc.) via the terminal, escape the $ character as \$ to prevent shell variable substitution.

Workflow

  1. Uncertain about syntax? Run list-sections then get-documentation for relevant topics
  2. Reviewing/debugging? Run svelte-autofixer on the code to detect issues
  3. Always validate - Run svelte-autofixer before finalizing any Svelte component