webflow-code-component:deploy-guide について
Webflow のコードコンポーネント開発者向けデプロイガイドスキルです。初回公開やライブラリ更新に向け、事前確認、認証、デプロイ、Designer での検証を案内し、CI/CD の手順も扱います。
主な機能
- 01デプロイ前チェックの実施
- 02対話式またはトークン認証の案内
- 03webflow library share によるデプロイ
- 04Designer でのコンポーネント確認
- 05CI/CD デプロイ手順の提示
- 06ログ確認と今後の更新方法の説明
活用シーン
- 01ワークスペースへの初回ライブラリ公開
- 02既存コンポーネントライブラリの更新
- 03CI/CD パイプラインでのデプロイ自動化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/webflow-code-component:deploy-guideを入力して読み込まれたか確認します。
詳細
デプロイガイド
コードコンポーネントライブラリを Webflow にデプロイする手順をユーザーに案内します。
このスキルを使用するタイミング
次の場合に使用します：
- ユーザーがコンポーネントを Webflow にデプロイする準備ができている
- ライブラリの共有、公開、デプロイ方法についてユーザーから質問がある
- ワークスペースへの初回デプロイ
- 手順を追ったデプロイの案内が必要
次の場合は使用しないでください：
- デプロイに失敗した場合（代わりに troubleshoot-deploy を使用してください）
- デプロイ前の検証のみを行う場合（代わりに pre-deploy-check を使用してください）
- ローカル開発環境をセットアップする場合（代わりに local-dev-setup を使用してください）
注： CLI コマンドは webflow library share です。このスキルでは、ユーザー向けの用語として「デプロイ」を使用します。
手順
フェーズ 1：事前確認
-
プロジェクトの準備状況を確認する：
- webflow.json の設定を確認する
- すべての依存関係がインストールされていることを確認する
- pre-deploy-check スキルのチェックを実行する
-
認証状況を確認する：
- API トークンを含む既存の .env があるか確認する
- WEBFLOW_WORKSPACE_API_TOKEN が設定されている場合は検証する
- 必要に応じて認証の準備をする
-
デプロイ先を確認する：
- どのワークスペースか？
- 新しいライブラリか、既存ライブラリの更新か？
フェーズ 2：認証
- 認証を案内する：
- 対話形式：CLI のプロンプトに従う
- CI/CD：--api-token フラグを使用する
- 必要に応じて、ワークスペース API トークンの取得方法を示す
フェーズ 3：デプロイ
- デプロイを実行する：
npx webflow library shareを実行する- エラーがないか確認する
- 出力を記録する
フェーズ 4：確認
-
デプロイを確認する：
- Webflow Designer でコンポーネントを確認する
- コンポーネントの機能をテストする
- すべてのコンポーネントが表示されることを確認する
-
次の手順を案内する：
- Designer でコンポーネントを使用する方法
- 今後、コンポーネントを更新する方法
- デプロイ後によく行う作業
- デプロイに失敗した場合は、troubleshoot-deploy を使用して問題を診断し、解決する
デプロイのワークフロー
標準のデプロイ
📦 Deploying Code Components
Step 1: Pre-flight checks
├── webflow.json ✅
├── Dependencies ✅
└── Build test ✅
Step 2: Authentication
├── Checking for existing auth...
└── Found valid token ✅
Step 3: Deploying
├── Bundling components...
├── Uploading to workspace...
└── Processing...
Step 4: Verification
├── Library registered ✅
└── 4 components available ✅
🎉 Deployment Complete!
CI/CD デプロイ
# Set environment variable
export WEBFLOW_WORKSPACE_API_TOKEN=your-token-here
# Deploy without prompts
npx webflow library share --no-input
例
ユーザーのプロンプト：
Deploy my components to Webflow
回答：
🚀 Deploy Guide: Code Components
Let me guide you through deploying your component library.
---
## Step 1: Pre-Flight Checks
Running validation...
✅ webflow.json configured
✅ Dependencies installed
✅ Build succeeds
✅ Bundle size: 2.3MB (under 50MB limit)
All checks passed! Ready to deploy.
---
## Step 2: Authentication
**Option A: Interactive (Recommended for first time)**
Run the deploy command:
```bash
npx webflow library share
次の操作が行われます：
- Webflow にログインするため、ブラウザーが開きます
- アプリの認証を求められます
- 認証情報が .env に保存されます
オプション B：API トークン（CI/CD または再度利用するユーザー向け）
-
ワークスペース API トークンを取得します：
- Webflow Dashboard に移動します
- ワークスペースの設定に移動します
- 「Apps & Integrations」→「Manage」を開きます
- 「Workspace API Access」で「Generate API Token」をクリックします
- トークンをコピーします
-
トークンを指定して実行します：
npx webflow library share --api-token YOUR_TOKEN_HERE
または、環境変数を設定します：
export WEBFLOW_WORKSPACE_API_TOKEN=YOUR_TOKEN_HERE
npx webflow library share
ステップ 3：デプロイ
デプロイする準備ができたら、次を実行します：
npx webflow library share
想定される出力：
✓ Bundling components...
✓ Authenticating...
✓ Uploading library...
✓ Processing...
Library "My Component Library" successfully shared!
Components:
- Button
- Card
- Accordion
- Modal
View in Designer: Open any site in your workspace
ステップ 4：Designer で確認
デプロイ後：
- ワークスペース内の任意のサイトで Webflow Designer を開きます
- Add Panel を開きます（A キーまたは + ボタン）
- 「Components」セクションを探します
- カスタムコンポーネントの下にライブラリがあることを確認します
- コンポーネントをキャンバスにドラッグしてテストします
ステップ 5：次の手順
✅ コンポーネントが公開されました！
後でコンポーネントを更新するには：
# Make your changes, then re-deploy
npx webflow library share
重要な注意事項：
- 更新するとライブラリ全体が置き換わります（部分的な更新はできません）
- 既存のコンポーネントインスタンスは自動的に更新されます
- .webflow.tsx ファイルの名前は変更しないでください（インスタンスが壊れます）
💡 ヒント：
- トークンを保護するため、.env を .gitignore に追加します
- 問題のデバッグには
--verboseフラグを使用します npx webflow library logを実行すると、最近のデプロイログを確認できます
---
**Example: First-Time Setup**
🚀 デプロイガイド：初回セットアップ
初回のデプロイのようですね。セットアップ全体を順に説明します。
ステップ 1：ワークスペース API トークンを取得
デプロイにはワークスペース API トークンが必要です：
-
Webflow Dashboard を開く webflow.com にアクセスしてログインします
-
ワークスペースの設定に移動 ワークスペース名をクリックし、Settings を選択します
-
API アクセスを探す 「Apps & Integrations」→「Manage」に移動します
-
トークンを生成 「Workspace API Access」で：
- 「Generate API Token」をクリックします
- トークンをコピーします（一度しか表示されません！）
-
トークンを保存 .env ファイルに追加します：
WEBFLOW_WORKSPACE_API_TOKEN=your-token-here⚠️ .env を .gitignore に追加します：
echo ".env" >> .gitignore
ステップ 2：デプロイ
次を実行します：
npx webflow library share
CLI は次の処理を行います：
- .env からトークンを読み取ります
- コンポーネントをバンドルします
- ワークスペースにアップロードします
ステップ 3：確認
デプロイが成功したら：
- Webflow Designer を開きます
- 「A」を押して Add パネルを開きます
- Components セクションでコンポーネントを探します
- キャンバスにドラッグしてテストします
🎉 初回のデプロイが完了しました！
今後のデプロイはさらに簡単です：
# Just run this after making changes
npx webflow library share
---
**Example: CI/CD Setup**
🚀 デプロイガイド：CI/CD の設定
パイプラインの自動デプロイを設定します。
GitHub Actions の例
.github/workflows/deploy.yml を作成します：
name: Deploy to Webflow
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Deploy to Webflow
env:
WEBFLOW_WORKSPACE_API_TOKEN: ${{ secrets.WEBFLOW_WORKSPACE_API_TOKEN }}
run: npx webflow library share --no-input
GitHub にシークレットを追加
- リポジトリに移動 → Settings → Secrets and variables → Actions
- 「New repository secret」をクリックします
- 名前：
WEBFLOW_WORKSPACE_API_TOKEN - 値：ワークスペースの API トークン
- 「Add secret」をクリックします
CI/CD の主なフラグ
npx webflow library share --no-input
--no-input：対話型プロンプトを無効にしますWEBFLOW_WORKSPACE_API_TOKEN環境変数を自動的に使用します
オプション：TypeScript のチェックを追加
- name: Type check
run: npx tsc --noEmit
✅ CI/CD の設定が完了しました！
これで、main へのプッシュごとにコンポーネントが自動的にデプロイされます。
## Validation
After deployment, verify success with these checks:
| Check | How to Verify |
|-------|---------------|
| Deploy completed | `npx webflow library share` exited without errors |
| Components visible | Open Designer Add panel → find your library |
| Import logs clean | `npx webflow library log` shows successful import |
| Bundle size OK | Output shows bundle under 50MB |
| Props work | Drag component onto canvas, verify props in right panel |
## Guidelines
### Terminology
The CLI command is `webflow library share`. This skill uses "deploy" as the user-facing term for consistency with common developer vocabulary. See the [CLI reference](../../references/CODE_COMPONENTS_REFERENCE.md) (Section 12) for full command documentation.
### Authentication Methods
| Method | Use Case | Command |
|--------|----------|---------|
| Interactive | First time, local dev | `npx webflow library share` |
| Environment variable | CI/CD, automation | Set `WEBFLOW_WORKSPACE_API_TOKEN` |
| CLI flag | One-off with different token | `--api-token TOKEN` |
### Pre-Deploy Checklist
Before every deployment:
- [ ] `npm install` is up to date
- [ ] Build succeeds locally
- [ ] Bundle under 50MB
- [ ] All component tests pass
- [ ] No SSR-breaking code (or ssr: false set)
- [ ] Props have default values where supported (not available for Link, Image, Slot, ID)
### Common Deploy Issues
| Issue | Cause | Solution |
|-------|-------|----------|
| "Authentication failed" | Invalid/expired token | Regenerate workspace token |
| "Bundle too large" | Over 50MB | Optimize dependencies |
| "Library not found" | Wrong workspace | Check token workspace |
| "Build failed" | Code errors | Fix compilation errors |
### CLI Flags Reference
All flags for `npx webflow library share`:
| Flag | Description | Default |
|------|-------------|---------|
| `--manifest` | Path to `webflow.json` file | Scans current directory |
| `--api-token` | Workspace API token | Uses `WEBFLOW_WORKSPACE_API_TOKEN` from `.env` |
| `--no-input` | Skip interactive prompts (for CI/CD) | No |
| `--verbose` | Display more debugging information | No |
| `--dev` | Bundle in development mode (no minification) | No |
### Rollback & Versioning
- Each `library share` replaces the **entire** library — there are no partial updates
- There is **no built-in rollback** — use git to revert changes and re-deploy
- **Never rename `.webflow.tsx` files** — renaming creates a new component and removes the old one, breaking all existing instances in projects
### Debugging Commands
```bash
# Check recent deploy logs
npx webflow library log
# Verbose deploy output (detailed errors)
npx webflow library share --verbose
# Local bundle verification (catches build errors before deploying)
npx webflow library bundle --public-path http://localhost:4000/
CI/CD デプロイ
上記の GitHub Actions の例は、どの CI システムにも適用できます。主な要素は次のとおりです：
# Generic CI pattern:
npm ci # Install dependencies
npx webflow library share --no-input # Deploy without prompts
# Requires WEBFLOW_WORKSPACE_API_TOKEN env var
デプロイ後の確認
デプロイ後は必ず確認してください：
- Designer を確認：コンポーネントが Add パネルに表示されること
- ドラッグ＆ドロップをテスト：コンポーネントがキャンバスに描画されること
- props をテスト：右側のパネルで props を編集できること
- プレビューをテスト：プレビューモードでコンポーネントが動作すること
- 公開をテスト：公開済みサイトでコンポーネントが動作すること
コメント
Markdown 対応