From webflow-cli-skills
Builds Webflow Designer Extensions via CLI: lists templates (default, react, typescript-alt), initializes projects, installs dependencies, bundles for upload, serves locally on port 1337.
npx claudepluginhub webflow/webflow-skills --plugin webflow-cli-skillsThis skill uses the workspace's default tool permissions.
Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.
ALWAYS use Bash tool for all Webflow CLI operations:
webflow extension commands via Bash toolwebflow --versionwebflow auth login (if needed)Package Manager Detection:
package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn)webflow --version to confirm CLI is installedwebflow extension listdefault - Basic HTML/CSS/JavaScript templatereact - React-based templatetypescript-alt - Alternative TypeScript templatewebflow extension init <project-name> <template>name (required) - Extension name as it appears in WebflowapiVersion (required) - API version (2)publicDir (required) - Directory to build from (dist)appIntents (optional) - Element types that can create connectionsappConnections (optional) - Connection configurationsnpm install in project directorywebflow extension serve [port]webflow extension bundleUser prompt:
Show me the available Designer Extension templates
Response:
๐ Designer Extension Templates
Listing available templates...
Executing: webflow extension list
Output:
Available templates:
1. default - Basic HTML, CSS, and JavaScript
2. react - React-based extension
3. typescript-alt - Alternative TypeScript template
To create a new extension:
webflow extension init <project-name> <template>
Example:
webflow extension init my-extension react
User prompt:
Create a new Designer Extension called gallery-manager using React
Step 1: Initialize Project
๐ Initialize Designer Extension
Project name: gallery-manager
Template: react
Executing: webflow extension init gallery-manager react
Output:
โ Created extension project at ./gallery-manager
โ Generated project structure
โ Created webflow.json with extension schema
โ Set up React template
๐ Project Structure:
./gallery-manager/
โโโ webflow.json # Extension schema
โโโ package.json # Dependencies
โโโ src/
โ โโโ index.html
โ โโโ index.tsx
โ โโโ styles.css
โโโ dist/ # Build output
โโโ README.md
Installing dependencies...
Executing: cd gallery-manager && npm install
โ Dependencies installed (45 packages)
Step 2: Show Schema
๐ Extension Schema (webflow.json)
Reading webflow.json...
{
"name": "Gallery Manager",
"apiVersion": "2",
"publicDir": "dist",
"appIntents": {},
"appConnections": []
}
Schema Fields:
โ name (required) - Extension name in Webflow
โ apiVersion (required) - API version: 2
โ publicDir (required) - Build directory: dist
appIntents (optional) - Element connection types
appConnections (optional) - Connection configs
Extension ready for development!
User prompt:
Run the extension on my local dev server
Default Port (1337):
๐ Starting Development Server
Executing: webflow extension serve
Output:
โ Building extension
โ Starting dev server
โ Extension ready
๐ Development Server Running
Local URL: http://localhost:1337
Status: โ Active
How to Load in Designer:
1. Open Webflow Designer
2. Open any site
3. Load extension from URL: http://localhost:1337
Press Ctrl+C to stop server
Custom Port:
User: "Run on port 3000 instead"
๐ Starting Development Server
Executing: webflow extension serve 3000
Output:
โ Building extension
โ Starting dev server on port 3000
โ Extension ready
๐ Development Server Running
Local URL: http://localhost:3000
Status: โ Active
Load in Designer: http://localhost:3000
User prompt:
Bundle my extension for upload
Step 1: Bundle
๐ฆ Bundling Extension
Executing: webflow extension bundle
Output:
โ Building production bundle
โ Creating bundle.zip
โ Bundle created successfully
Bundle Details:
- File: bundle.zip
- Location: ./dist/bundle.zip
- Size: 245 KB
โ
Bundle ready for upload!
Step 2: Upload Instructions
๐ค Upload Instructions
Your extension is bundled and ready to upload.
Upload Steps:
1. Go to Webflow Designer Extensions dashboard
2. Upload bundle.zip
3. Test the extension
4. Submit for review (if distributing)
Bundle location: ./dist/bundle.zip
User prompt:
Create a new Designer Extension for managing colors
Step 1: List Templates
๐ Designer Extension Workflow
First, let me show available templates.
Executing: webflow extension list
Available templates:
1. default - Basic HTML/CSS/JavaScript
2. react - React-based (recommended)
3. typescript-alt - TypeScript alternative
Which template would you like to use? (default/react/typescript-alt)
User selects: react
Step 2: Initialize
๐ Creating Extension
Project name: color-manager
Template: react
Executing: webflow extension init color-manager react
โ Project created at ./color-manager
โ webflow.json generated
โ React template configured
Installing dependencies...
โ npm install complete
๐ Extension Schema:
{
"name": "Color Manager",
"apiVersion": "2",
"publicDir": "dist",
"appIntents": {},
"appConnections": []
}
Step 3: Start Development
๐ Starting Dev Server
Executing: webflow extension serve
โ Server running at http://localhost:1337
Load in Designer:
1. Open Webflow Designer
2. Load extension from: http://localhost:1337
3. Start developing!
Server running... (Press Ctrl+C to stop)
Installation Check:
# Check if CLI is installed
webflow --version
# If not installed, guide user:
npm install -g @webflow/cli
Authentication (if needed):
# Site authentication if required
webflow auth login
List Templates Command:
webflow extension list
Available Templates:
Init Command:
webflow extension init <project-name> <template>
Arguments:
<project-name> (required) - Name of the new project directory<template> (required) - One of: default, react, typescript-altExample Commands:
# Initialize with default template
webflow extension init my-extension default
# Initialize with React template
webflow extension init my-extension react
# Initialize with TypeScript template
webflow extension init my-extension typescript-alt
Project Structure After Init:
/project-name/
โโโ webflow.json # Extension schema (required)
โโโ package.json # Dependencies
โโโ src/ # Source files
โ โโโ index.html
โ โโโ index.tsx (or .js)
โ โโโ styles.css
โโโ dist/ # Build output directory
โโโ README.md
Schema in webflow.json:
{
"name": "<Your Extension Name>",
"apiVersion": "2",
"publicDir": "dist",
"appIntents": {
"image": ["manage"],
"form": ["manage"]
},
"appConnections": [
"myAppImageConnection",
"myAppFormConnection"
]
}
Schema Fields:
| Field | Description | Default | Required |
|---|---|---|---|
name | Extension name as it appears in Webflow | - | Yes |
apiVersion | API version to use for extension | 2 | Yes |
publicDir | Directory to build and serve extension from | dist | Yes |
appIntents | Element types that can create connections | {} | No |
appConnections | Connection configurations for extension | [] | No |
Required Fields:
name - Must be unique and descriptiveapiVersion - Currently must be "2"publicDir - Directory where built files are placed (default: "dist")Optional Fields:
appIntents - Defines which element types can connect to your extension
{"image": ["manage"], "form": ["manage"]}appConnections - Array of connection identifiers
["myAppImageConnection", "myAppFormConnection"]Serve Command:
# Serve on default port (1337)
webflow extension serve
# Serve on custom port
webflow extension serve 3000
Arguments:
[port] (optional) - Port number to serve on (default: 1337)Development Server:
Loading in Designer:
Bundle Command:
webflow extension bundle
Output:
bundle.zip file in project directorypublicDirBundle Contents:
CLI Not Installed:
โ Webflow CLI Not Found
Designer Extensions require the Webflow CLI.
Installation:
npm install -g @webflow/cli
After installation, verify:
webflow --version
Documentation: https://developers.webflow.com/cli
Invalid Template:
โ Invalid Template
Error: Template "vue" not found
Available templates:
- default
- react
- typescript-alt
Retry with valid template:
webflow extension init my-extension react
Port Already in Use:
โ Development Server Failed to Start
Error: Port 1337 is already in use
Solutions:
1. Stop other process on port 1337
2. Use different port:
webflow extension serve 3000
Find process using port:
lsof -ti:1337 | xargs kill -9
Missing webflow.json:
โ Extension Schema Not Found
Error: webflow.json not found in current directory
This directory is not an extension project.
Solutions:
1. Initialize new extension:
webflow extension init <name> <template>
2. Navigate to existing extension directory
3. Create webflow.json with required schema
Bundle Failed:
โ Bundle Creation Failed
Error: Build failed with errors
Common Causes:
- Missing dependencies (run: npm install)
- Build errors in source files
- Invalid webflow.json schema
- Missing publicDir directory
Fix errors and retry:
webflow extension bundle
Reading Extension Files: Always use Read tool (never modify):
# View extension schema
Read: webflow.json
# View package dependencies
Read: package.json
# View source files
Read: src/index.html
Read: src/index.tsx
Discovering Project Files: Use Glob tool to find files:
# Find all source files
Glob: src/**/*
# Find configuration files
Glob: *.json
# Find built files
Glob: dist/**/*
Never Use Write/Edit Tools:
For Init:
๐ Creating Extension...
[โโโโโโโโโโโโโโโโโโโโโโโโ] 100%
โ Project created
โ Dependencies installed
Elapsed: 12s
For Bundle:
๐ฆ Bundling Extension...
[โโโโโโโโโโโโโโโโโโโโโโโโ] 100%
โ Bundle created: bundle.zip
Elapsed: 5s
For Serve:
๐ Starting Server...
[โโโโโโโโโโโโโโโโโโโโโโโโ] 100%
โ Server ready at http://localhost:1337
Elapsed: 3s
Template Selection:
Development Workflow:
Schema Configuration:
Local Development:
Bundling:
Workflow: list templates โ init โ serve โ develop โ bundle โ upload
Key Commands:
webflow extension list - Show available templateswebflow extension init <project-name> <template> - Create new extensionwebflow extension serve [port] - Start dev server (default: 1337)webflow extension bundle - Create bundle.zip for uploadTemplates: default, react, typescript-alt
Schema Fields (webflow.json):
name (required) - Extension nameapiVersion (required) - API version (2)publicDir (required) - Build directoryappIntents (optional) - Element connection typesappConnections (optional) - Connection configsDev Server: http://localhost:1337 (or custom port)
Bundle Output: bundle.zip in project directory
Documentation: https://developers.webflow.com/designer/reference/introduction