designer-extension-command

Name: designer-extension-command
Author: webflow

106stars16forks

How to install designer-extension-command?

webflow/webflow-skills/designer-extension-command

$npx -y skills add webflow/webflow-skills --skill designer-extension-command

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Designer Extension
2
3	Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.
4
5	## Important Note
6
7	ALWAYS use Bash tool for all Webflow CLI operations:
8	- Execute `webflow extension` commands via Bash tool
9	- Use Read tool to examine generated files and schema (never modify)
10	- Use Glob tool to discover project files
11	- Verify CLI installation: `webflow --version`
12	- Check authentication: `webflow auth login` (if needed)
13	- DO NOT use Webflow MCP tools for CLI workflows
14	- All CLI commands require proper descriptions (not context parameters)
15
16	Package Manager Detection:
17	- Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)
18	- If no lock file found, ask user which package manager to use (npm/pnpm/yarn)
19	- Use detected package manager for all install/build commands
20
21	## Instructions
22
23	### Phase 1: Environment Verification
24	1. Verify CLI installed: Run `webflow --version` to confirm CLI is installed
25	2. Check project state: Check if already in an extension project (look for webflow.json with extension schema)
26	3. Identify operation type: Determine if user wants to:
27	- List available templates
28	- Initialize new extension
29	- Bundle existing extension
30	- Serve extension locally
31
32	### Phase 2: Template Listing & Selection
33	4. List templates (if user asks or before init): Run `webflow extension list`
34	5. Show available templates:
35	- `default` - Basic HTML/CSS/JavaScript template
36	- `react` - React-based template
37	- `typescript-alt` - Alternative TypeScript template
38	6. Ask user to select template if initializing new extension
39
40	### Phase 3: Extension Initialization
41	7. Choose project name: Ask user for project directory name
42	8. Run init command: Execute `webflow extension init <project-name> <template>`
43	9. Read generated schema: Use Read tool to examine webflow.json
44	10. Show schema structure: Display the 5 schema fields:
45	- `name` (required) - Extension name as it appears in Webflow
46	- `apiVersion` (required) - API version (2)
47	- `publicDir` (required) - Directory to build from (dist)
48	- `appIntents` (optional) - Element types that can create connections
49	- `appConnections` (optional) - Connection configurations
50	11. Install dependencies: Run `npm install` in project directory
51
52	### Phase 4: Local Development
53	12. Start dev server: Execute `webflow extension serve [port]`
54	13. Show dev server info:
55	- Default port: 1337 (unless user specifies different port)
56	- Local URL: http://localhost:[port]
57	- How to load in Designer
58	14. Provide loading instructions:
59	- Open Webflow Designer
60	- Load extension from local URL
61	- Test functionality
62
63	### Phase 5: Bundling for Upload
64	15. Run bundle command: Execute `webflow extension bundle`
65	16. Show bundle output: Display bundle.zip location and size
66	17. Provide upload instructions: Guide for uploading to Webflow
67	18. Document next steps: Testing and distribution guidance
68
69	## Examples
70
71	### Example 1: List Available Templates
72
73	User prompt:
74	```
75	Show me the available Designer Extension templates
76	```
77
78	Response:
79	```
80	🔍 Designer Extension Templates
81
82	Listing available templates...
83	Executing: webflow extension list
84
85	Output:
86	Available templates:
87	1. default - Basic HTML, CSS, and JavaScript
88	2. react - React-based extension
89	3. typescript-alt - Alternative TypeScript template
90
91	To create a new extension:
92	webflow extension init <project-name> <template>
93
94	Example:
95	webflow extension init my-extension react
96	```
97
98	### Example 2: Initialize New Extension
99
100	User prompt:
101	```
102	Create a new Designer Extension called gallery-manager using React
103	```
104
105	Step 1: Initialize Project
106	```
107	📋 Initialize Designer Extension
108
109	Project name: gallery-manager
110	Template: react
111
112	Executing: webflow extension init gallery-manager react
113
114	Output:
115	✓ Created extension project at ./gallery-manager
116	✓ Generated project structure
117	✓ Created webflow.json with extension schema
118	✓ Set up React template
119
120	📁 Project Structure:
121	./gallery-manager/
122	├── webflow.json # Extension schema
123	├── package.json # Dependencies
124	├── src/
125	│ ├── index.html
126	│ ├── index.tsx
127	│ └── styles.css
128	├── dist/ # Build output
129	└── README.md
130
131	Installing dependencies...
132	Executing: cd gallery-manager && npm install
133
134	✓ Dependencies installed (45 packages)
135	```
136
137	Step 2: Show Schema
138	```
139	📋 Extension Schema (webflow.json)
140
141	Reading webflow.json...
142
143	{
144	"name": "Gallery Manager",
145	"apiVersion": "2",
146	"publicDir": "dist",
147	"appIntents": {},
148	"appConnections": []
149	}
150
151	Schema Fields:
152	✓ name (required)

People who liked this also viewed

6 picks

Type

designer-extension-command

106stars16forks

View on GitHub

How to install designer-extension-command?

webflow/webflow-skills/designer-extension-command

$npx -y skills add webflow/webflow-skills --skill designer-extension-command

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Designer Extension
2
3	Create and develop Designer Extensions for Webflow with template selection, local development server, and bundling for distribution.
4
5	## Important Note
6
7	ALWAYS use Bash tool for all Webflow CLI operations:
8	- Execute `webflow extension` commands via Bash tool
9	- Use Read tool to examine generated files and schema (never modify)
10	- Use Glob tool to discover project files
11	- Verify CLI installation: `webflow --version`
12	- Check authentication: `webflow auth login` (if needed)
13	- DO NOT use Webflow MCP tools for CLI workflows
14	- All CLI commands require proper descriptions (not context parameters)
15
16	Package Manager Detection:
17	- Check for lock files: `package-lock.json` (npm), `pnpm-lock.yaml` (pnpm), `yarn.lock` (yarn)
18	- If no lock file found, ask user which package manager to use (npm/pnpm/yarn)
19	- Use detected package manager for all install/build commands
20
21	## Instructions
22
23	### Phase 1: Environment Verification
24	1. Verify CLI installed: Run `webflow --version` to confirm CLI is installed
25	2. Check project state: Check if already in an extension project (look for webflow.json with extension schema)
26	3. Identify operation type: Determine if user wants to:
27	- List available templates
28	- Initialize new extension
29	- Bundle existing extension
30	- Serve extension locally
31
32	### Phase 2: Template Listing & Selection
33	4. List templates (if user asks or before init): Run `webflow extension list`
34	5. Show available templates:
35	- `default` - Basic HTML/CSS/JavaScript template
36	- `react` - React-based template
37	- `typescript-alt` - Alternative TypeScript template
38	6. Ask user to select template if initializing new extension
39
40	### Phase 3: Extension Initialization
41	7. Choose project name: Ask user for project directory name
42	8. Run init command: Execute `webflow extension init <project-name> <template>`
43	9. Read generated schema: Use Read tool to examine webflow.json
44	10. Show schema structure: Display the 5 schema fields:
45	- `name` (required) - Extension name as it appears in Webflow
46	- `apiVersion` (required) - API version (2)
47	- `publicDir` (required) - Directory to build from (dist)
48	- `appIntents` (optional) - Element types that can create connections
49	- `appConnections` (optional) - Connection configurations
50	11. Install dependencies: Run `npm install` in project directory
51
52	### Phase 4: Local Development
53	12. Start dev server: Execute `webflow extension serve [port]`
54	13. Show dev server info:
55	- Default port: 1337 (unless user specifies different port)
56	- Local URL: http://localhost:[port]
57	- How to load in Designer
58	14. Provide loading instructions:
59	- Open Webflow Designer
60	- Load extension from local URL
61	- Test functionality
62
63	### Phase 5: Bundling for Upload
64	15. Run bundle command: Execute `webflow extension bundle`
65	16. Show bundle output: Display bundle.zip location and size
66	17. Provide upload instructions: Guide for uploading to Webflow
67	18. Document next steps: Testing and distribution guidance
68
69	## Examples
70
71	### Example 1: List Available Templates
72
73	User prompt:
74	```
75	Show me the available Designer Extension templates
76	```
77
78	Response:
79	```
80	🔍 Designer Extension Templates
81
82	Listing available templates...
83	Executing: webflow extension list
84
85	Output:
86	Available templates:
87	1. default - Basic HTML, CSS, and JavaScript
88	2. react - React-based extension
89	3. typescript-alt - Alternative TypeScript template
90
91	To create a new extension:
92	webflow extension init <project-name> <template>
93
94	Example:
95	webflow extension init my-extension react
96	```
97
98	### Example 2: Initialize New Extension
99
100	User prompt:
101	```
102	Create a new Designer Extension called gallery-manager using React
103	```
104
105	Step 1: Initialize Project
106	```
107	📋 Initialize Designer Extension
108
109	Project name: gallery-manager
110	Template: react
111
112	Executing: webflow extension init gallery-manager react
113
114	Output:
115	✓ Created extension project at ./gallery-manager
116	✓ Generated project structure
117	✓ Created webflow.json with extension schema
118	✓ Set up React template
119
120	📁 Project Structure:
121	./gallery-manager/
122	├── webflow.json # Extension schema
123	├── package.json # Dependencies
124	├── src/
125	│ ├── index.html
126	│ ├── index.tsx
127	│ └── styles.css
128	├── dist/ # Build output
129	└── README.md
130
131	Installing dependencies...
132	Executing: cd gallery-manager && npm install
133
134	✓ Dependencies installed (45 packages)
135	```
136
137	Step 2: Show Schema
138	```
139	📋 Extension Schema (webflow.json)
140
141	Reading webflow.json...
142
143	{
144	"name": "Gallery Manager",
145	"apiVersion": "2",
146	"publicDir": "dist",
147	"appIntents": {},
148	"appConnections": []
149	}
150
151	Schema Fields:
152	✓ name (required)

People who liked this also viewed

6 picks

Type