webflow-cli:designer-extension

What this skill does

# Designer Extension

Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.

## Important Note

**ALWAYS use Bash tool for all Webflow CLI operations:**
- Execute `webflow extension` commands via Bash tool
- Use Read tool to examine generated files and schema (never modify)
- Use Glob tool to discover project files
- Verify CLI installation: `webflow --version`
- Check authentication: `webflow auth login` (if needed)
- DO NOT use Webflow MCP tools for CLI workflows
- All CLI commands require proper descriptions (not context parameters)

**Package Manager Detection:**
- Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)
- If no lock file found, ask user which package manager to use (npm/pnpm/yarn)
- Use detected package manager for all install/build commands

## Instructions

### Phase 1: Environment Verification
1. **Verify CLI installed**: Run `webflow --version` to confirm CLI is installed
2. **Check project state**: Check if already in an extension project (look for webflow.json with extension schema)
3. **Identify operation type**: Determine if user wants to:
   - List available templates
   - Initialize new extension
   - Bundle existing extension
   - Serve extension locally

### Phase 2: Template Listing & Selection
4. **List templates** (if user asks or before init): Run `webflow extension list`
5. **Show available templates**:
   - `default` - Basic HTML/CSS/JavaScript template
   - `react` - React-based template
   - `typescript-alt` - Alternative TypeScript template
6. **Ask user to select template** if initializing new extension

### Phase 3: Extension Initialization
7. **Choose project name**: Ask user for project directory name
8. **Run init command**: Execute `webflow extension init <project-name> <template>`
9. **Read generated schema**: Use Read tool to examine webflow.json
10. **Show schema structure**: Display the 5 schema fields:
    - `name` (required) - Extension name as it appears in Webflow
    - `apiVersion` (required) - API version (2)
    - `publicDir` (required) - Directory to build from (dist)
    - `appIntents` (optional) - Element types that can create connections
    - `appConnections` (optional) - Connection configurations
11. **Install dependencies**: Run `npm install` in project directory

### Phase 4: Local Development
12. **Start dev server**: Execute `webflow extension serve [port]`
13. **Show dev server info**:
    - Default port: 1337 (unless user specifies different port)
    - Local URL: http://localhost:[port]
    - How to load in Designer
14. **Provide loading instructions**:
    - Open Webflow Designer
    - Load extension from local URL
    - Test functionality

### Phase 5: Bundling for Upload
15. **Run bundle command**: Execute `webflow extension bundle`
16. **Show bundle output**: Display bundle.zip location and size
17. **Provide upload instructions**: Guide for uploading to Webflow
18. **Document next steps**: Testing and distribution guidance

## Examples

### Example 1: List Available Templates

**User 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
```

### Example 2: Initialize New Extension

**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!
```

### Example 3: Serve Extension Locally

**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
```

### Example 4: Bundle Extension

**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
```

### Example 5: Complete Workflow

**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)
```

## Guidelines

### Phase 1: CLI Verification

**Installation Check:**
```bash
# Check if CLI is installed
webflow --version

# If not installed, guide user:
npm install -g @webflow/cli
```

**Authentication (if needed):**
```bash
# Site authentication if required
webflow auth login
```

### Pha