local-dev-setup

Name: local-dev-setup
Author: webflow

106stars16forks

How to install local-dev-setup?

webflow/webflow-skills/local-dev-setup

$npx -y skills add webflow/webflow-skills --skill local-dev-setup

Installs into the current project.

Summary

Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.

Files · 1

View on GitHub

SKILL.md

1	# Local Dev Setup
2
3	Set up a new Webflow Code Components project from scratch.
4
5	## When to Use This Skill
6
7	Use when:
8	- Starting a brand new code components project
9	- User asks to set up, initialize, or create a new project
10	- Adding code components to an existing React project
11	- Setting up the development environment for the first time
12
13	Do NOT use when:
14	- Project already exists and is configured (just answer questions directly)
15	- Creating individual components (use component-scaffold instead)
16	- Deploying components (use deploy-guide instead)
17
18	## Instructions
19
20	### Phase 1: Assess Current State
21
22	1. Check if project exists:
23	- Is there an existing package.json?
24	- Is there an existing webflow.json?
25	- What's the current project structure?
26
27	2. Determine setup type:
28	- New project from scratch
29	- Add to existing React project
30	- Add to existing Next.js/Vite project
31
32	### Phase 2: Project Initialization
33
34	3. Create project structure (if new):
35	- Initialize npm project
36	- Set up TypeScript
37	- Create folder structure
38
39	4. Install dependencies:
40	- Core: React, TypeScript
41	- Webflow: CLI, data-types, react utils
42	- Optional: Styling libraries
43
44	### Phase 3: Configuration
45
46	5. Create webflow.json:
47	- Set library name
48	- Configure component glob pattern
49	- Set up globals if needed
50
51	6. Configure TypeScript:
52	- Set up tsconfig.json
53	- Enable JSX support
54
55	### Phase 4: Create Starter Files
56
57	7. Create example component:
58	- Simple Button component
59	- Definition file
60	- Basic styling
61
62	8. Create globals file (optional):
63	- For shared styles
64	- For decorators
65
66	### Phase 5: Verify Setup
67
68	9. Verify bundle compiles:
69	- Run `npx webflow library bundle --public-path http://localhost:4000/` to catch build errors locally
70	- This verifies your components, imports, and configuration are correct
71	- Full testing in the Webflow Designer requires deploying with `npx webflow library share`
72
73	10. Provide next steps:
74	- How to create more components
75	- How to deploy
76	- Development workflow
77
78	## Examples
79
80	For detailed step-by-step examples, see [references/EXAMPLES.md](references/EXAMPLES.md).
81
82	Available examples:
83	1. New Project from Scratch - Complete setup with React, TypeScript, and CSS Modules
84	2. Add to Existing React Project - Integrate code components into an existing codebase
85	3. With Tailwind CSS - Setup with Tailwind CSS support
86
87	Quick Start (New Project):
88
89	```bash
90	# 1. Create project
91	mkdir my-webflow-components && cd my-webflow-components
92	npm init -y
93
94	# 2. Install dependencies
95	npm install react react-dom
96	npm install -D typescript @types/react @types/react-dom
97	npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react
98
99	# 3. Create webflow.json
100	echo '{"library":{"name":"My Library","components":["./src/*/.webflow.tsx"]}}' > webflow.json
101
102	# 4. Create component directory
103	mkdir -p src/components/Button
104	```
105
106	Then create your component files (.tsx, .webflow.tsx, .module.css). See Example 1 in [references/EXAMPLES.md](references/EXAMPLES.md) for complete file contents including component, definition, and CSS files.
107
108	Deploy with:
109	```bash
110	npx webflow library share
111	```
112
113	## Validation
114
115	After setup, verify the project is correctly configured:
116
117	\| Check \| How to Verify \|
118	\|-------\|---------------\|
119	\| `webflow.json` exists in project root \| `cat webflow.json` \|
120	\| Dependencies installed \| `npm list @webflow/webflow-cli` \|
121	\| Bundle compiles without errors \| `npx webflow library bundle --public-path http://localhost:4000/` \|
122	\| At least one component found \| Check bundle output for "Found N component(s)" \|
123
124	## Guidelines
125
126	### Minimum Requirements
127
128	Every code components project needs:
129
130	1. package.json with dependencies
131	2. webflow.json with library config
132	3. tsconfig.json (for TypeScript)
133	4. At least one `.webflow.tsx` file
134
135	### Recommended Structure
136
137	```
138	project/
139	├── src/
140	│ ├── components/
141	│ │ └── [ComponentName]/
142	│ │ ├── [ComponentName].tsx
143	│ │ ├── [ComponentName].webflow.tsx
144	│ │ └── [ComponentName].module.css
145	│ ├── hooks/ # Custom hooks
146	│ ├── utils/ # Utilities
147	│ ├── declarations.d.ts # CSS module types
148	│ ├── globals.ts # Decorators/global imports
149	│ └── globals.css # Global styles
150	├── package.json
151	├── tsconfig.json
152	├── webflow.json
153	└── .gitignore
154	```
155
156	### Development Workflow
157
158	1. Create component: Use [component-scaffold](../component-scaffold/SKILL.md) skill
159	2. Develop locally: Run React project to iterate (e.g., `npm run dev`)
160	3. Validate: Use [pre-deploy-check](../pre-deploy-che

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

local-dev-setup

106stars16forks

View on GitHub

How to install local-dev-setup?

webflow/webflow-skills/local-dev-setup

$npx -y skills add webflow/webflow-skills --skill local-dev-setup

Installs into the current project.

Summary

Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.

Files · 1

View on GitHub

SKILL.md

1	# Local Dev Setup
2
3	Set up a new Webflow Code Components project from scratch.
4
5	## When to Use This Skill
6
7	Use when:
8	- Starting a brand new code components project
9	- User asks to set up, initialize, or create a new project
10	- Adding code components to an existing React project
11	- Setting up the development environment for the first time
12
13	Do NOT use when:
14	- Project already exists and is configured (just answer questions directly)
15	- Creating individual components (use component-scaffold instead)
16	- Deploying components (use deploy-guide instead)
17
18	## Instructions
19
20	### Phase 1: Assess Current State
21
22	1. Check if project exists:
23	- Is there an existing package.json?
24	- Is there an existing webflow.json?
25	- What's the current project structure?
26
27	2. Determine setup type:
28	- New project from scratch
29	- Add to existing React project
30	- Add to existing Next.js/Vite project
31
32	### Phase 2: Project Initialization
33
34	3. Create project structure (if new):
35	- Initialize npm project
36	- Set up TypeScript
37	- Create folder structure
38
39	4. Install dependencies:
40	- Core: React, TypeScript
41	- Webflow: CLI, data-types, react utils
42	- Optional: Styling libraries
43
44	### Phase 3: Configuration
45
46	5. Create webflow.json:
47	- Set library name
48	- Configure component glob pattern
49	- Set up globals if needed
50
51	6. Configure TypeScript:
52	- Set up tsconfig.json
53	- Enable JSX support
54
55	### Phase 4: Create Starter Files
56
57	7. Create example component:
58	- Simple Button component
59	- Definition file
60	- Basic styling
61
62	8. Create globals file (optional):
63	- For shared styles
64	- For decorators
65
66	### Phase 5: Verify Setup
67
68	9. Verify bundle compiles:
69	- Run `npx webflow library bundle --public-path http://localhost:4000/` to catch build errors locally
70	- This verifies your components, imports, and configuration are correct
71	- Full testing in the Webflow Designer requires deploying with `npx webflow library share`
72
73	10. Provide next steps:
74	- How to create more components
75	- How to deploy
76	- Development workflow
77
78	## Examples
79
80	For detailed step-by-step examples, see [references/EXAMPLES.md](references/EXAMPLES.md).
81
82	Available examples:
83	1. New Project from Scratch - Complete setup with React, TypeScript, and CSS Modules
84	2. Add to Existing React Project - Integrate code components into an existing codebase
85	3. With Tailwind CSS - Setup with Tailwind CSS support
86
87	Quick Start (New Project):
88
89	```bash
90	# 1. Create project
91	mkdir my-webflow-components && cd my-webflow-components
92	npm init -y
93
94	# 2. Install dependencies
95	npm install react react-dom
96	npm install -D typescript @types/react @types/react-dom
97	npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react
98
99	# 3. Create webflow.json
100	echo '{"library":{"name":"My Library","components":["./src/*/.webflow.tsx"]}}' > webflow.json
101
102	# 4. Create component directory
103	mkdir -p src/components/Button
104	```
105
106	Then create your component files (.tsx, .webflow.tsx, .module.css). See Example 1 in [references/EXAMPLES.md](references/EXAMPLES.md) for complete file contents including component, definition, and CSS files.
107
108	Deploy with:
109	```bash
110	npx webflow library share
111	```
112
113	## Validation
114
115	After setup, verify the project is correctly configured:
116
117	\| Check \| How to Verify \|
118	\|-------\|---------------\|
119	\| `webflow.json` exists in project root \| `cat webflow.json` \|
120	\| Dependencies installed \| `npm list @webflow/webflow-cli` \|
121	\| Bundle compiles without errors \| `npx webflow library bundle --public-path http://localhost:4000/` \|
122	\| At least one component found \| Check bundle output for "Found N component(s)" \|
123
124	## Guidelines
125
126	### Minimum Requirements
127
128	Every code components project needs:
129
130	1. package.json with dependencies
131	2. webflow.json with library config
132	3. tsconfig.json (for TypeScript)
133	4. At least one `.webflow.tsx` file
134
135	### Recommended Structure
136
137	```
138	project/
139	├── src/
140	│ ├── components/
141	│ │ └── [ComponentName]/
142	│ │ ├── [ComponentName].tsx
143	│ │ ├── [ComponentName].webflow.tsx
144	│ │ └── [ComponentName].module.css
145	│ ├── hooks/ # Custom hooks
146	│ ├── utils/ # Utilities
147	│ ├── declarations.d.ts # CSS module types
148	│ ├── globals.ts # Decorators/global imports
149	│ └── globals.css # Global styles
150	├── package.json
151	├── tsconfig.json
152	├── webflow.json
153	└── .gitignore
154	```
155
156	### Development Workflow
157
158	1. Create component: Use [component-scaffold](../component-scaffold/SKILL.md) skill
159	2. Develop locally: Run React project to iterate (e.g., `npm run dev`)
160	3. Validate: Use [pre-deploy-check](../pre-deploy-che

People who liked this also viewed

6 picks

Type