Do I need the Webflow CLI installed to use this skill?

Yes, this skill acts as an interface for the @webflow/cli package. You must have it installed on your system for the commands to execute properly.

Can I use pnpm or yarn instead of npm?

Yes, the skill automatically detects your project's lock file (pnpm-lock.yaml or yarn.lock) and will use your preferred package manager for all installation and build tasks.

What does the 'bundle' command do?

It compiles your source code, processes your assets into the distribution folder, and creates a 'bundle.zip' file that is ready for manual upload to the Webflow developer dashboard.

How do I test my extension in the Webflow Designer?

Use the 'serve' command to start a local development server (typically on port 1337) and load that URL within the Webflow Designer extensions menu for real-time testing.

What templates are available for Webflow extensions?

You can choose from 'default' (standard HTML/JS), 'react' (React-based), or 'typescript-alt' (TypeScript) to jumpstart your extension development.

Webflow Designer Extension CLI

Name: Webflow Designer Extension CLI
Author: webflow

bywebflow

•

Design Tools

Builds and manages custom Webflow Designer Extensions with integrated template initialization, local development servers, and production bundling.

This skill empowers developers to extend the Webflow Designer's functionality by providing a streamlined workflow for creating custom extensions. It automates project setup using React or vanilla JavaScript templates, manages the complex webflow.json configuration schema, and facilitates a robust local development environment. By integrating directly with the Webflow CLI, it ensures that extensions are correctly structured, served for real-time testing within the Webflow interface, and properly bundled for official distribution and upload.

Key Features

0146 GitHub stars

02Instant initialization of extension projects using React, TypeScript, or vanilla JS templates.

03Production-ready bundling of extensions into ZIP format for Webflow dashboard upload.

04Validation and management of the webflow.json extension schema, app intents, and connections.

05Automated local development server setup with hot-reloading for real-time Designer testing.

06Integrated environment verification and automatic package manager detection for npm, pnpm, and yarn.

Use Cases

01Developing specialized element management tools or external API integrations for Webflow site creators.

02Rapidly prototyping and testing new Designer functionality on a local server before production deployment.

03Creating a custom React-based UI panel to manage site colors or brand assets directly within Webflow.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add webflow/webflow-skills designer-extension-command

For use in Claude.ai and ChatGPT

Key Features

0146 GitHub stars

02Instant initialization of extension projects using React, TypeScript, or vanilla JS templates.

03Production-ready bundling of extensions into ZIP format for Webflow dashboard upload.

04Validation and management of the webflow.json extension schema, app intents, and connections.

05Automated local development server setup with hot-reloading for real-time Designer testing.

06Integrated environment verification and automatic package manager detection for npm, pnpm, and yarn.

Use Cases

01Developing specialized element management tools or external API integrations for Webflow site creators.

02Rapidly prototyping and testing new Designer functionality on a local server before production deployment.

03Creating a custom React-based UI panel to manage site colors or brand assets directly within Webflow.