component-scaffold

Name: component-scaffold
Author: webflow

106stars16forks

How to install component-scaffold?

webflow/webflow-skills/component-scaffold

$npx -y skills add webflow/webflow-skills --skill component-scaffold

Installs into the current project.

Summary

Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies.

Files · 1

View on GitHub

SKILL.md

1	# Component Scaffold
2
3	Generate a new Webflow Code Component with proper file structure, React component, and `.webflow.tsx` definition file.
4
5	## When to Use This Skill
6
7	Use when:
8	- Creating a new code component from scratch
9	- User asks to scaffold, generate, or create a component
10	- Starting a new component with proper Webflow file structure
11
12	Do NOT use when:
13	- Converting an existing React component (use convert-component skill)
14	- Modifying existing components (answer directly or use component-audit)
15	- Just asking questions about components (answer directly)
16	- Setting up a complex project with custom bundler config (use local-dev-setup instead)
17
18	Note: This skill can handle basic setup (webflow.json + dependencies) automatically. Use local-dev-setup only for complex setups requiring Tailwind, custom webpack config, or monorepo configurations.
19
20	## Instructions
21
22	### Phase 0: Prerequisites Check (Run First)
23
24	Before gathering any requirements, verify the project is set up for Webflow Code Components:
25
26	1. Check for webflow.json:
27	```bash
28	# Look for webflow.json in project root
29	```
30	- If missing: Offer to create it or invoke local-dev-setup skill
31
32	2. Check for required dependencies in package.json:
33	```json
34	{
35	"devDependencies": {
36	"@webflow/webflow-cli": "...",
37	"@webflow/data-types": "...",
38	"@webflow/react": "..."
39	}
40	}
41	```
42	- If missing: Offer to install them:
43	```bash
44	npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react
45	```
46
47	3. Check for components directory:
48	- Look for existing pattern (e.g., `src/components/`)
49	- If no components exist, determine where to create them based on webflow.json config
50
51	4. Report setup status:
52
53	If all prerequisites met:
54	```
55	✅ Project ready for code components
56	- webflow.json: Found
57	- Dependencies: Installed
58	- Components path: src/components/
59
60	Let's create your component...
61	```
62
63	If prerequisites missing:
64	```
65	⚠️ Project Setup Required
66
67	Missing:
68	- [ ] webflow.json configuration file
69	- [ ] @webflow/webflow-cli dependency
70	- [ ] @webflow/data-types dependency
71	- [ ] @webflow/react dependency
72
73	Would you like me to:
74	1. Set up the missing items now (quick setup)
75	2. Run full project initialization (local-dev-setup skill)
76
77	Choose an option:
78	```
79
80	Quick setup creates minimal config:
81	```json
82	// webflow.json
83	{
84	"library": {
85	"name": "My Component Library",
86	"components": ["./src/components/*/.webflow.tsx"]
87	}
88	}
89	```
90	And installs dependencies.
91
92	Optional: `webflow.json` also supports a `"globals"` field pointing to a globals file (e.g., `"globals": "./src/globals.webflow.ts"`). The globals file is used for global CSS imports (e.g., Tailwind) and exporting decorator arrays. Add this when using styled-components, Emotion, or Tailwind.
93
94	Only proceed to Phase 1 after prerequisites are confirmed.
95
96	---
97
98	### Phase 1: Gather Requirements
99
100	1. Get component name: Ask user for the component name
101	- Must be PascalCase (e.g., "Accordion", "ProductCard")
102	- Suggest name if user provides description instead
103
104	2. Determine component type: Ask what kind of component
105	- Interactive (buttons, forms, accordions)
106	- Display (cards, banners, testimonials)
107	- Layout (grids, containers, sections)
108	- Data-driven (lists, tables, charts)
109
110	3. Identify props needed: Based on component type, suggest props
111	- Text content → `props.Text()` or `props.RichText()`
112	- Canvas-editable text → `props.TextNode()`
113	- Images → `props.Image()`
114	- Links → `props.Link()`
115	- Numeric values → `props.Number()`
116	- Variants/styles → `props.Variant()`
117	- Nested content → `props.Slot()`
118	- Toggles → `props.Boolean()`
119	- Show/hide sections → `props.Visibility()`
120	- HTML element IDs → `props.Id()`
121
122	4. Styling approach: Ask preferred styling method
123	- CSS Modules (default, recommended)
124	- Tailwind CSS
125	- styled-components
126	- Emotion
127	- Sass / Less
128	- Plain CSS
129	- Other supported: MUI (uses Emotion), Shadcn/UI (uses Tailwind)
130
131	5. SSR requirements: Determine if component needs client-only features
132	- Uses browser APIs? → `ssr: false`
133	- Pure presentation? → `ssr: true` (default)
134
135	### Phase 2: Validate Project Setup
136
137	6. Check project structure:
138	- Verify `webflow.json` exists
139	- Check for required dependencies
140	- Identify components directory pattern
141
142	7. Check for conflicts:
143	- Ensure component name doesn't already exist
144	- Verify no `.webflow.tsx` file with same na

People who liked this also viewed

6 picks

Type

component-scaffold

106stars16forks

View on GitHub

How to install component-scaffold?

webflow/webflow-skills/component-scaffold

$npx -y skills add webflow/webflow-skills --skill component-scaffold

Installs into the current project.

Summary

Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config/dependencies.

Files · 1

View on GitHub

SKILL.md

1	# Component Scaffold
2
3	Generate a new Webflow Code Component with proper file structure, React component, and `.webflow.tsx` definition file.
4
5	## When to Use This Skill
6
7	Use when:
8	- Creating a new code component from scratch
9	- User asks to scaffold, generate, or create a component
10	- Starting a new component with proper Webflow file structure
11
12	Do NOT use when:
13	- Converting an existing React component (use convert-component skill)
14	- Modifying existing components (answer directly or use component-audit)
15	- Just asking questions about components (answer directly)
16	- Setting up a complex project with custom bundler config (use local-dev-setup instead)
17
18	Note: This skill can handle basic setup (webflow.json + dependencies) automatically. Use local-dev-setup only for complex setups requiring Tailwind, custom webpack config, or monorepo configurations.
19
20	## Instructions
21
22	### Phase 0: Prerequisites Check (Run First)
23
24	Before gathering any requirements, verify the project is set up for Webflow Code Components:
25
26	1. Check for webflow.json:
27	```bash
28	# Look for webflow.json in project root
29	```
30	- If missing: Offer to create it or invoke local-dev-setup skill
31
32	2. Check for required dependencies in package.json:
33	```json
34	{
35	"devDependencies": {
36	"@webflow/webflow-cli": "...",
37	"@webflow/data-types": "...",
38	"@webflow/react": "..."
39	}
40	}
41	```
42	- If missing: Offer to install them:
43	```bash
44	npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react
45	```
46
47	3. Check for components directory:
48	- Look for existing pattern (e.g., `src/components/`)
49	- If no components exist, determine where to create them based on webflow.json config
50
51	4. Report setup status:
52
53	If all prerequisites met:
54	```
55	✅ Project ready for code components
56	- webflow.json: Found
57	- Dependencies: Installed
58	- Components path: src/components/
59
60	Let's create your component...
61	```
62
63	If prerequisites missing:
64	```
65	⚠️ Project Setup Required
66
67	Missing:
68	- [ ] webflow.json configuration file
69	- [ ] @webflow/webflow-cli dependency
70	- [ ] @webflow/data-types dependency
71	- [ ] @webflow/react dependency
72
73	Would you like me to:
74	1. Set up the missing items now (quick setup)
75	2. Run full project initialization (local-dev-setup skill)
76
77	Choose an option:
78	```
79
80	Quick setup creates minimal config:
81	```json
82	// webflow.json
83	{
84	"library": {
85	"name": "My Component Library",
86	"components": ["./src/components/*/.webflow.tsx"]
87	}
88	}
89	```
90	And installs dependencies.
91
92	Optional: `webflow.json` also supports a `"globals"` field pointing to a globals file (e.g., `"globals": "./src/globals.webflow.ts"`). The globals file is used for global CSS imports (e.g., Tailwind) and exporting decorator arrays. Add this when using styled-components, Emotion, or Tailwind.
93
94	Only proceed to Phase 1 after prerequisites are confirmed.
95
96	---
97
98	### Phase 1: Gather Requirements
99
100	1. Get component name: Ask user for the component name
101	- Must be PascalCase (e.g., "Accordion", "ProductCard")
102	- Suggest name if user provides description instead
103
104	2. Determine component type: Ask what kind of component
105	- Interactive (buttons, forms, accordions)
106	- Display (cards, banners, testimonials)
107	- Layout (grids, containers, sections)
108	- Data-driven (lists, tables, charts)
109
110	3. Identify props needed: Based on component type, suggest props
111	- Text content → `props.Text()` or `props.RichText()`
112	- Canvas-editable text → `props.TextNode()`
113	- Images → `props.Image()`
114	- Links → `props.Link()`
115	- Numeric values → `props.Number()`
116	- Variants/styles → `props.Variant()`
117	- Nested content → `props.Slot()`
118	- Toggles → `props.Boolean()`
119	- Show/hide sections → `props.Visibility()`
120	- HTML element IDs → `props.Id()`
121
122	4. Styling approach: Ask preferred styling method
123	- CSS Modules (default, recommended)
124	- Tailwind CSS
125	- styled-components
126	- Emotion
127	- Sass / Less
128	- Plain CSS
129	- Other supported: MUI (uses Emotion), Shadcn/UI (uses Tailwind)
130
131	5. SSR requirements: Determine if component needs client-only features
132	- Uses browser APIs? → `ssr: false`
133	- Pure presentation? → `ssr: true` (default)
134
135	### Phase 2: Validate Project Setup
136
137	6. Check project structure:
138	- Verify `webflow.json` exists
139	- Check for required dependencies
140	- Identify components directory pattern
141
142	7. Check for conflicts:
143	- Ensure component name doesn't already exist
144	- Verify no `.webflow.tsx` file with same na

People who liked this also viewed

6 picks

Type