webflow-code-component:deploy-guide
Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.
- Installs
- 990
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/webflow/webflow-skills --skill webflow-code-component:deploy-guide- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads webflow-code-component:deploy-guide automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Deploy Guide
Guide users through deploying their code component library to Webflow.
When to Use This Skill
Use when:
- User is ready to deploy components to Webflow
- User asks how to share, publish, or deploy their library
- First-time deployment to a workspace
- Step-by-step deployment walkthrough needed
Do NOT use when:
- Deployment failed (use troubleshoot-deploy instead)
- Just validating before deploy (use pre-deploy-check instead)
- Setting up local development (use local-dev-setup instead)
Note: The CLI command is webflow library share. This skill uses "deploy" as the user-facing term.
Instructions
Phase 1: Pre-Flight Checks
-
Verify project is ready:
- Check webflow.json configuration
- Ensure all dependencies installed
- Run pre-deploy-check skill checks
-
Check authentication status:
- Look for existing .env with API token
- Verify WEBFLOW_WORKSPACE_API_TOKEN if set
- Prepare for authentication if needed
-
Confirm deployment target:
- Which workspace?
- New library or update existing?
Phase 2: Authentication
- Guide authentication:
- Interactive: Follow CLI prompts
- CI/CD: Use --api-token flag
- Show how to get workspace API token if needed
Phase 3: Deployment
- Execute deployment:
- Run
npx webflow library share - Monitor for errors
- Capture output
- Run
Phase 4: Verification
-
Verify deployment:
- Check Webflow Designer for components
- Test component functionality
- Confirm all components appear
-
Provide next steps:
- How to use components in Designer
- How to update in future
- Common post-deploy tasks
- If deployment fails, use troubleshoot-deploy to diagnose and fix issues
Deployment Workflow
Standard Deployment
📦 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 Deployment
# Set environment variable
export WEBFLOW_WORKSPACE_API_TOKEN=your-token-here
# Deploy without prompts
npx webflow library share --no-input
Examples
User prompt:
Deploy my components to Webflow
Response:
🚀 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
This will:
- Open your browser for Webflow login
- Ask you to authorize the app
- Save credentials to .env
Option B: API Token (For CI/CD or returning users)
-
Get your Workspace API Token:
- Go to Webflow Dashboard
- Navigate to your Workspace Settings
- Find "Apps & Integrations" → "Manage"
- Under "Workspace API Access", click "Generate API Token"
- Copy the token
-
Run with token:
npx webflow library share --api-token YOUR_TOKEN_HERE
Or set environment variable:
export WEBFLOW_WORKSPACE_API_TOKEN=YOUR_TOKEN_HERE
npx webflow library share
Step 3: Deploy
Ready to deploy? Run:
npx webflow library share
Expected output:
✓ 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
Step 4: Verify in Designer
After deployment:
- Open Webflow Designer for any site in your workspace
- Open Add Panel (A key or + button)
- Find "Components" section
- Look for your library under custom components
- Drag a component onto the canvas to test
Step 5: Next Steps
✅ Your components are live!
To update components later:
# Make your changes, then re-deploy
npx webflow library share
Important notes:
- Updates replace the entire library (no partial updates)
- Existing component instances will update automatically
- Don't rename .webflow.tsx files (breaks instances)
💡 Tips:
- Add .env to .gitignore to protect your token
- Use
--verboseflag for debugging issues - Run
npx webflow library logto see recent deploy logs
---
**Example: First-Time Setup**
🚀 Deploy Guide: First-Time Setup
I see this is your first deployment. Let me walk you through the full setup.
Step 1: Get Workspace API Token
You'll need a Workspace API token to deploy:
-
Open Webflow Dashboard Go to webflow.com and log in
-
Navigate to Workspace Settings Click your workspace name → Settings
-
Find API Access Go to "Apps & Integrations" → "Manage"
-
Generate Token Under "Workspace API Access":
- Click "Generate API Token"
- Copy the token (you won't see it again!)
-
Save Token Add to your .env file:
WEBFLOW_WORKSPACE_API_TOKEN=your-token-here⚠️ Add .env to .gitignore:
echo ".env" >> .gitignore
Step 2: Deploy
Now run:
npx webflow library share
The CLI will:
- Read your token from .env
- Bundle your components
- Upload to your workspace
Step 3: Verify
After successful deploy:
- Open Webflow Designer
- Press 'A' to open Add panel
- Find your components in the Components section
- Drag onto canvas to test
🎉 First deployment complete!
Future deployments are simpler:
# Just run this after making changes
npx webflow library share
---
**Example: CI/CD Setup**
🚀 Deploy Guide: CI/CD Setup
Setting up automated deployments for your pipeline.
GitHub Actions Example
Create .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
Add Secret to GitHub
- Go to your repo → Settings → Secrets and variables → Actions
- Click "New repository secret"
- Name:
WEBFLOW_WORKSPACE_API_TOKEN - Value: Your workspace API token
- Click "Add secret"
Key Flags for CI/CD
npx webflow library share --no-input
--no-input: Disables interactive prompts- Uses
WEBFLOW_WORKSPACE_API_TOKENenv var automatically
Optional: Add TypeScript Check
- name: Type check
run: npx tsc --noEmit
✅ CI/CD configured!
Now every push to main will automatically deploy your components.
## 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 Deployment
The GitHub Actions example above applies to any CI system. The key elements are:
# Generic CI pattern:
npm ci # Install dependencies
npx webflow library share --no-input # Deploy without prompts
# Requires WEBFLOW_WORKSPACE_API_TOKEN env var
Post-Deploy Verification
Always verify after deployment:
- Check Designer: Components appear in Add panel
- Test drag-and-drop: Component renders on canvas
- Test props: Props editable in right panel
- Test preview: Component works in preview mode
- Test publish: Component works on published site
FAQ
What does the webflow-code-component:deploy-guide skill do?
Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.
How do I install webflow-code-component:deploy-guide?
Run npx skills add https://github.com/webflow/webflow-skills --skill webflow-code-component:deploy-guide in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/webflow-code-component:deploy-guide/ (personal) or .claude/skills/webflow-code-component:deploy-guide/ (project).
Which AI agents can use webflow-code-component:deploy-guide?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is webflow-code-component:deploy-guide safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains webflow-code-component:deploy-guide?
It is published by webflow in webflow/webflow-skills. It has 990 recorded installs.
More from webflow/webflow-skills
webflow-cli:cloud
webflow/webflow-skills
Create, build, and deploy Webflow Cloud apps from the CLI (site-attached or project apps), and manage existing ones — apps, domains, environments, deployments, build/runtime logs, and environment variables including secrets. Use when initializing or deploying a Cloud app, importing an existing GitHub repository, setting up CI/CD (GitHub Actions or GitHub-linked deploys), setting or importing secrets, retrying or rolling back a deployment, diagnosing a failed build, or resolving app/environment/workspace IDs from webflow.json or env vars.
webflow-cli:code-component
webflow/webflow-skills
Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.
webflow-cli:designer-extension
webflow/webflow-skills
Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default/react/typescript-alt), bundles extensions for upload, and serves locally for development.
webflow-code-component:component-audit
webflow/webflow-skills
Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.
webflow-cli:troubleshooter
webflow/webflow-skills
Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.
webflow-code-component:component-scaffold
webflow/webflow-skills
Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies.
Popular devops & cloud skills
microsoft-foundry
microsoft/azure-skills
Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and resources end to end. USE FOR: foundry, azd ai agent, azd provision/deploy, hosted agent scaffold/develop/run/deploy/troubleshoot, prompt agent create, managed harness agent create, GitHub Copilot harness agent, create agent, update agent, add tool to agent, invoke agent, agent insights, evaluate agent, batch eval, continuous eval, continuous monitoring, agent CI/CD, optimize prompt, improve prompt, optimize agent instructions, Agent Optimizer scaffold, dataset curation from traces, deploy model, model fine-tuning (SFT/DPO/RFT), Foundry project, RBAC, role assignment, permissions, quota, capacity, region, deployment failure, AI Services, create Foundry resource, knowledge index, customize deployment, onboard, availability, training-data, grader, distillation, large file upload. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure
azure-diagnostics
microsoft/azure-skills
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, container app 503 or target port mismatch, troubleshoot functions, function telemetry missing or stopped after a config/connection-string change, troubleshoot AKS, VM RDP, Linux SSH, VM black screen, can't connect to VM, reset VM password, NSG or firewall blocking, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, lock renewal during long-running processing, service bus dead letter.
azure-prepare
microsoft/azure-skills
Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wants to use azd as the deployment tool, or the project already has an azure.yaml file. DO NOT USE FOR: non-azd deployments, Python App Service code-only deploys (use python-appservice-deploy), or cross-cloud migration (use azure-cloud-migrate). WHEN: prepare app for azd, create azure.yaml, set up azd infrastructure, modernize app for Azure with azd, deploy with azd, function app, timer trigger, service bus trigger, event-driven function, managed identity, generate Bicep, generate Terraform, create and deploy to Azure.
azure-ai
microsoft/azure-skills
Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.
azure-deploy
microsoft/azure-skills
Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.
azure-validate
microsoft/azure-skills
Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.