mcpField
W
webflow-cli:troubleshooter

webflow-cli:troubleshooter

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

webflow-cli:troubleshooter について

Webflow CLI 向けのトラブルシューティングスキルです。コマンド出力からインストール、認証、コマンド、ビルド、バンドラーの問題を調べ、修正を適用して結果を確認します。

主な機能

  1. 01CLI バージョンと構文の確認
  2. 02認証問題の診断
  3. 03詳細なコマンド診断
  4. 04バンドラー設定の確認
  5. 05修正の適用と結果の検証

活用シーン

  1. 01Webflow CLI のビルド失敗の調査
  2. 02認証またはインストールエラーの解決
  3. 03バンドル設定の問題の追跡

インストール

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

$npx skills add https://github.com/webflow/webflow-skills --skill webflow-cli:troubleshooter

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

詳細

Webflow CLI トラブルシューティング

診断コマンドと自動修正を使用して、Webflow CLI の問題を診断し、解決します。

重要な注意事項

すべての診断操作には、必ず Bash ツールを使用してください。

  • Bash ツールから診断コマンドを実行します
  • Read ツールを使用して設定ファイルを確認します
  • CLI のインストールを確認します：webflow --version
  • 認証を確認します：webflow auth login（必要な場合）
  • CLI の診断フラグを使用します：--verbose、--debug-bundler、--help
  • CLI ワークフローには Webflow MCP ツールを使用しないでください
  • すべての CLI コマンドには、適切な説明が必要です（コンテキストパラメーターではありません）

パッケージマネージャーの検出：

  • ロックファイルを確認します：package-lock.json（npm）、pnpm-lock.yaml（pnpm）、yarn.lock（yarn）
  • ロックファイルが見つからない場合は、使用するパッケージマネージャー（npm/pnpm/yarn）をユーザーに尋ねます
  • 検出したパッケージマネージャーを、すべてのインストール／ビルドコマンドで使用します

手順

フェーズ 1：問題の特定
  1. ユーザーに問題の説明を求めます：どのコマンドが失敗したか、またはどのようなエラーが発生したかを確認します
  2. エラーのカテゴリを特定します：
    • CLI がインストールされていない、またはバージョンが異なる
    • 認証に失敗した
    • ビルド／バンドルに失敗した
    • コマンドが認識されない
  3. エラーメッセージを取得します：正確なエラー出力を確認します
フェーズ 2：診断の実行
  1. CLI のインストールを確認します：webflow --version を実行します
  2. 認証を確認します：必要に応じて webflow auth login を実行します
  3. --verbose を付けてコマンドを実行します：失敗したコマンドに --verbose フラグを付け、詳細な出力を取得します
  4. --debug-bundler を使用します（バンドルの問題の場合）：--debug-bundler フラグを付けて実行し、バンドラーの設定を確認します
  5. --help を確認します：webflow <command> --help を実行して、コマンドの構文を確認します
フェーズ 3：分析と修正
  1. 根本原因を特定します：エラーメッセージと診断出力を解析します
  2. 修正方法を提示します：CLI エラーに応じた具体的な解決策を示します
  3. 修正を適用します：修正コマンドを実行します
  4. 確認します：元のコマンドを再実行して、問題が解決したことを確認します

例

例 1：CLI がインストールされていない

ユーザーのプロンプト：

Getting "webflow: command not found"

診断：

🔍 Checking CLI Installation

Executing: webflow --version

Error: bash: webflow: command not found

❌ Webflow CLI not installed

修正：

📋 Fix: Install Webflow CLI

Executing: npm install -g @webflow/cli

✓ CLI installed

Verifying...
Executing: webflow --version

Output: @webflow/cli/1.5.2

✅ Issue resolved
例 2：ビルドに失敗した

ユーザーのプロンプト：

Build is failing but I don't know why

診断：

🔍 Running Build with Diagnostics

Executing: webflow library bundle --verbose

Output:
[verbose] Loading webflow.json
[verbose] Found library config
[verbose] Building components from ./src/**/*.webflow.tsx
[verbose] Running bundler
Error: Failed to resolve import './missing-file.ts'

❌ Build failed: Missing import file

修正：

📋 Fix: Missing Import

Issue: Component imports './missing-file.ts' which doesn't exist

Solutions:
1. Create the missing file
2. Fix the import path
3. Remove the import if not needed

Check your component imports and ensure all files exist.
例 3：バンドル設定の問題

ユーザーのプロンプト：

Bundle is failing with webpack errors

診断：

🔍 Checking Bundle Configuration

Executing: webflow library bundle --debug-bundler

Output:
[debug-bundler] Final bundler configuration:
{
  "entry": "./src/Component.tsx",
  "output": {
    "path": "/dist",
    "filename": "bundle.js"
  },
  "resolve": {
    "extensions": [".ts", ".tsx", ".js"]
  }
}

Error: Module not found: Can't resolve 'styled-components'

❌ Bundle failed: Missing dependency

修正：

📋 Fix: Install Missing Dependency

Executing: npm install styled-components

✓ Dependency installed

Retrying bundle...
Executing: webflow library bundle

✓ Bundle created successfully

✅ Issue resolved

ガイドライン

CLI 診断コマンド

バージョンの確認：

webflow --version
# or
webflow -V

コマンドのヘルプ：

webflow --help                    # General help
webflow library --help            # Library commands help
webflow library bundle --help     # Specific command help

詳細出力：

# Add --verbose to any command for detailed debugging
webflow library bundle --verbose
webflow cloud deploy --verbose
webflow extension bundle --verbose

バンドラーのデバッグ：

# Show final bundler configuration
webflow library bundle --debug-bundler
webflow extension bundle --debug-bundler
よくある問題と修正方法

問題：CLI が見つからない

  • 診断： webflow --version が失敗する
  • 修正： npm install -g @webflow/cli
  • 確認： webflow --version にバージョンが表示される

問題：CLI のバージョンが古い

  • 診断： webflow --version に古いバージョンが表示される
  • 修正： npm update -g @webflow/cli
  • 確認： 最新バージョンがインストールされている

問題：コマンドが認識されない

  • 診断： 「Unknown command」エラーが発生する
  • 修正： webflow --help でコマンドを確認する
  • 確認： 正しいコマンド構文を使用する

問題：認証に失敗した

  • 診断： 「Not authenticated」エラーが発生する
  • 修正： webflow auth login
  • 確認： 認証が成功する

問題：ビルドに失敗した

  • 診断： --verbose フラグを付けて実行する
  • 修正： 詳細出力に表示されたエラーを修正する
  • 確認： ビルドが成功する

問題：バンドル設定エラー

  • 診断： --debug-bundler フラグを付けて実行する
  • 修正： webflow.json のバンドラー設定を調整する
  • 確認： バンドルが成功する

問題：依存関係が不足している

  • 診断： 「Module not found」エラーが発生する
  • 修正： npm install を実行するか、特定のパッケージをインストールする
  • 確認： ビルド／バンドルが成功する

問題：node_modules が破損している

  • 診断： 原因不明のビルド失敗が発生する
  • 修正： rm -rf node_modules && npm install
  • 確認： ビルドが成功する
エラー処理

CLI がインストールされていない場合：

❌ Webflow CLI Not Found

Install:
npm install -g @webflow/cli

Verify:
webflow --version

Docs: https://developers.webflow.com/cli

認証が必要な場合：

❌ Authentication Failed

Fix:
webflow auth login

Follow browser prompts to authenticate

ビルド／バンドルに失敗した場合：

❌ Build Failed

Run with diagnostics:
webflow library bundle --verbose --debug-bundler

This shows:
- Detailed build steps
- Import resolution
- Bundler configuration
- Exact error location

Fix the errors shown in output

不明なエラーの場合：

❌ Unknown Issue

Gather info:
1. What command are you running?
2. Run command with --verbose flag
3. Check command syntax with --help
4. Share full error output

This helps identify the specific problem
ファイル操作

設定ファイルの読み取り：

# View webflow.json
Read: webflow.json

# View package.json
Read: package.json

# View build output
Read: dist/

ファイルの検出：

# Find config files
Glob: **/webflow.json

# Find components
Glob: src/**/*.webflow.tsx

# Find logs
Glob: **/*.log
ベストプラクティス

まず必ず次のことを確認します：

  1. CLI のバージョンを確認します：webflow --version
  2. コマンドの構文を確認します：webflow <command> --help
  3. 詳細モードで実行します：--verbose フラグを追加します

ビルド／バンドルの問題の場合：

  1. 詳細な出力を確認するため、--verbose を使用します
  2. 設定を確認するため、--debug-bundler を使用します
  3. インポートパスを確認します
  4. 依存関係がインストールされていることを確認します

認証の問題の場合：

  1. webflow auth login を実行します
  2. ブラウザーのプロンプトに従います
  3. ワークスペースにアクセスできることを確認します

インストールの問題の場合：

  1. Node.js のバージョンを確認します：node --version
  2. CLI をグローバルにインストールします：npm install -g @webflow/cli
  3. インストールを確認します：webflow --version

クイックリファレンス

ワークフロー： 特定 → 診断 → 修正 → 検証

診断フラグ：

  • --version / -V - CLI のバージョンを確認します
  • --help / -h - コマンドのヘルプを表示します
  • --verbose - 詳細なデバッグ出力を表示します
  • --debug-bundler - バンドラーの設定を表示します

よくある問題の修正方法：

  • 未インストール → npm install -g @webflow/cli
  • バージョンが異なる → npm update -g @webflow/cli
  • 認証に失敗 → webflow auth login
  • ビルドに失敗 → --verbose の出力を確認します
  • バンドルエラー → --debug-bundler の出力を確認します
  • 依存関係が不足 → npm install

ドキュメント： https://developers.webflow.com/cli

コメント

Markdown 対応