mcpField
C
custom-code-management

custom-code-management

github.com/webflow開発132353 回インストール6 日前に更新
リポジトリ

custom-code-management について

Webflow サイトのインライン JavaScript を管理するスキルです。サイト全体とページ単位のコードについて、Webflow MCP ツールを使った確認、変更前の承認、実行後の検証を案内します。

主な機能

  1. 01登録済み・適用済みスクリプトの一覧
  2. 02ページ単位のカスタムコード確認
  3. 03インラインスクリプトの追加・更新
  4. 04サイトまたはページの全スクリプト削除
  5. 05変更の承認と結果の検証

活用シーン

  1. 01サイトに登録されたスクリプトの確認
  2. 02分析・トラッキングコードの追加
  3. 03特定ページのコード更新
  4. 04確認後の全スクリプト削除

MCP 対応

サイトやスクリプトの操作に Webflow MCP ツールを使用し、ほかのツールより先に webflow_guide_tool を呼び出します。スクリプトの一覧、追加、更新、削除に対応します。

インストール

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

$npx skills add https://github.com/webflow/webflow-skills --skill custom-code-management

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

詳細

カスタムコード管理

Webflow サイトにインラインのカスタムスクリプトを追加、確認、管理します。アナリティクス、トラッキングピクセル、チャットウィジェット、その他のカスタム JavaScript が対象です。

重要な注意事項

すべての操作には必ず Webflow MCP ツールを使用してください：

  • 他のツールを呼び出す前に、Webflow MCP の webflow_guide_tool を使用してベストプラクティスを確認してください
  • Webflow MCP の data_sites_tool でアクション list_sites を指定し、利用可能なサイトを特定してください
  • Webflow MCP の data_scripts_tool でアクション list_registered_scripts を指定し、登録済みスクリプトをすべて一覧表示してください
  • Webflow MCP の data_scripts_tool でアクション list_applied_scripts を指定し、ページに適用されているスクリプトを一覧表示してください
  • Webflow MCP の data_scripts_tool でアクション add_inline_site_script を指定し、新しいインラインスクリプトを登録してください
  • Webflow MCP の data_scripts_tool でアクション delete_all_site_scripts を指定し、サイトのスクリプトをすべて削除してください（個別削除はできません）
  • Webflow MCP の data_scripts_tool でアクション get_page_script を指定し、特定のページのカスタムコードを取得してください
  • Webflow MCP の data_scripts_tool でアクション upsert_page_script を指定し、ページレベルのカスタムコードを追加または更新してください
  • Webflow MCP の data_scripts_tool でアクション delete_all_page_scripts を指定し、ページのカスタムコードをすべて削除してください
  • すべてのツール呼び出しに、必須の context パラメーター（第三者視点で15〜25語）を含めてください

手順

フェーズ 1：情報収集
  1. 最初に webflow_guide_tool を呼び出します — MCP ツールの呼び出しは必ずこれから始めてください
  2. サイトを取得します：data_sites_tool でアクション list_sites を指定します。サイトが1つだけの場合は、自動的にそれを使用してください。
フェーズ 2：分析
  1. スクリプトを一覧表示します：list_registered_scripts と list_applied_scripts を並行して呼び出します
  2. ページレベルのスクリプトを確認します（該当する場合）：特定のページに対して get_page_script を使用します
  3. 確認結果を提示します：名前、バージョン、場所（ヘッダー／フッター）、登録状況と適用状況
フェーズ 3：計画と確認

変更を加える前に、計画を提示し、明示的な確認を求めてください：

  • スクリプトの追加：ユーザーは "add" と入力する必要があります
  • サイトのスクリプトをすべて削除：ユーザーは "delete all" と入力する必要があります（個別削除できないことを警告してください）
  • ページレベルの変更：ユーザーは "update" と入力する必要があります
フェーズ 4：実行
  1. サイトスクリプトを追加します：add_inline_site_script に displayName、sourceCode、version、location、canCopy を指定します
  2. サイトのスクリプトをすべて削除します：delete_all_site_scripts
  3. ページスクリプトを追加／更新します：upsert_page_script
  4. ページのスクリプトを削除します：delete_all_page_scripts
フェーズ 5：検証
  1. スクリプトを再度一覧表示し、成功を確認します
  2. 変更内容（名前、場所、バージョン、文字数）を報告します
  3. ユーザーに公開を促します — safe-publish スキルの使用を提案してください

例

例 1：スクリプトを表示する

ユーザー：「サイトにはどんなスクリプトがありますか？」

  1. webflow_guide_tool → data_sites_tool → list_registered_scripts と list_applied_scripts を並行して呼び出す
  2. すべてのスクリプトの概要を提示する
例 2：Google Tag Manager を追加する

ユーザー：「サイトに GTM を追加して」

  1. webflow_guide_tool → data_sites_tool → GTM コンテナ ID を尋ねる
  2. スクリプトをプレビューし、「add」と入力するよう求める → add_inline_site_script（ヘッダー、バージョン "1.0.0"）
  3. 検証し、公開を促す
例 3：すべてのスクリプトを削除する

ユーザー：「すべてのスクリプトを削除して」

  1. webflow_guide_tool → data_sites_tool → 現在のスクリプトを一覧表示する
  2. スクリプトがすべて削除されることを警告する。「delete all」と入力するよう求める → delete_all_site_scripts
  3. 検証し、公開を促す
例 4：ページ固有のトラッキング

ユーザー：「サンクスページにコンバージョントラッキングを追加して」

  1. webflow_guide_tool → data_sites_tool → get_page_script で既存のコードを確認する
  2. プレビューし、「update」と入力するよう求める → upsert_page_script
  3. 検証し、公開を促す

ガイドライン

  • webflow_guide_tool を常に最初に使う — ほかの MCP ツールを使う前に実行します
  • <script> タグは使用しない — Webflow が自動的に追加します
  • スクリプトは最大 10,000 文字です。displayName + version は一意である必要があります
  • サイトレベルのスクリプト（add_inline_site_script）はすべてのページに適用されます。ページレベルのスクリプト（upsert_page_script）は 1 ページに適用されます
  • 選択的な削除はできません — delete_all_site_scripts はすべてを削除します。失われるものをユーザーが把握できるよう、必ず最初にスクリプトを一覧表示してください
  • ホスト型／外部スクリプトは MCP 経由では利用できません — インラインのみです
  • アナリティクス（GA、GTM）にはヘッダーを、チャットウィジェットや重要度の低いスクリプトにはフッターを推奨します
  • displayName + version が存在する場合は、バージョンの引き上げを提案してください
  • 変更後は必ず公開するよう、ユーザーに伝えてください

コメント

Markdown 対応