convert-component

Name: convert-component
Author: webflow

106stars16forks

How to install convert-component?

webflow/webflow-skills/convert-component

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

Installs into the current project.

Summary

Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications.

Files · 1

View on GitHub

SKILL.md

1	# Convert Component
2
3	Convert an existing React component into a Webflow Code Component by analyzing its structure and generating the appropriate `.webflow.tsx` definition file.
4
5	## When to Use This Skill
6
7	Use when:
8	- User has an existing React component they want to use in Webflow
9	- User asks to "convert", "adapt", or "make this work with Webflow"
10	- User provides a React component file and wants a Webflow definition
11	- User is migrating components from another React project
12
13	Do NOT use when:
14	- Creating a component from scratch (use component-scaffold)
15	- User just wants to understand code components (answer directly)
16	- Component is already a Webflow code component (use component-audit)
17
18	## Instructions
19
20	### Phase 1: Analyze Existing Component
21
22	1. Read the React component file: Get the full source code
23
24	2. Extract component information:
25	- Component name (function/const name)
26	- Props interface or type definition
27	- Each prop's TypeScript type
28	- Default values if defined
29	- Whether component uses `children`
30
31	3. Identify incompatible patterns:
32
33	\| Pattern \| Issue \| Resolution \|
34	\|---------\|-------\|------------\|
35	\| React Context usage \| Context doesn't work across Webflow components \| Refactor to props or use nano stores \|
36	\| `window`/`document` in render \| SSR will fail \| Wrap in useEffect or set `ssr: false` \|
37	\| `localStorage`/`sessionStorage` in render \| SSR will fail \| Wrap in useEffect or set `ssr: false` \|
38	\| Complex object props \| Can't map to Webflow prop types \| Break into individual props \|
39	\| Function props (callbacks) \| Not supported in Webflow \| Remove or internalize logic \|
40	\| `useContext` hook \| Won't work across components \| Use alternative state patterns \|
41	\| External CSS imports \| May not work in Shadow DOM \| Import in .webflow.tsx instead \|
42	\| CSS class references to global styles \| Won't work in Shadow DOM \| Use component-scoped styles \|
43	\| styled-components \| Needs Shadow DOM decorator \| Set up globals.ts with decorator \|
44	\| Emotion (@emotion/styled) \| Needs Shadow DOM decorator \| Set up globals.ts with decorator \|
45
46	4. Detect styling approach and note required setup:
47
48	If using styled-components:
49	```bash
50	npm i @webflow/styled-components-utils styled-components
51	```
52
53	Create/update `globals.ts`:
54	```typescript
55	import { styledComponentsShadowDomDecorator } from "@webflow/styled-components-utils";
56	export const decorators = [styledComponentsShadowDomDecorator];
57	```
58
59	If using Emotion:
60	```bash
61	npm i @webflow/emotion-utils @emotion/cache @emotion/react
62	```
63
64	Create/update `globals.ts`:
65	```typescript
66	import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
67	export const decorators = [emotionShadowDomDecorator];
68	```
69
70	For both CSS-in-JS approaches, update `webflow.json`:
71
72	styled-components:
73	```json
74	{
75	"library": {
76	"globals": "./src/globals.ts",
77	"renderer": {
78	"server": "@webflow/styled-components-utils/server"
79	}
80	}
81	}
82	```
83
84	Emotion:
85	```json
86	{
87	"library": {
88	"globals": "./src/globals.ts",
89	"renderer": {
90	"server": "@webflow/emotion-utils/server"
91	}
92	}
93	}
94	```
95
96	5. Flag any dependencies that might cause issues:
97	- Large libraries (bundle size concern)
98	- Browser-only libraries
99	- Libraries that manipulate DOM directly
100
101	### Phase 2: Map Props to Webflow Types
102
103	6. Apply TypeScript → Webflow prop type mapping:
104
105	\| TypeScript Type \| Webflow Prop \| Notes \|
106	\|-----------------\|--------------\|-------\|
107	\| `string` \| `props.Text()` \| Default for short text \|
108	\| `string` (long/HTML content) \| `props.RichText()` \| If prop name suggests content/body/description \|
109	\| `React.ReactNode` / `children` \| `props.Slot()` \| For nested content \|
110	\| `number` \| `props.Number()` \| Numeric values \|
111	\| `boolean` \| `props.Boolean()` \| Toggles \|
112	\| `"option1" \\| "option2"` \| `props.Variant()` \| String literal unions (requires `options` array) \|
113	\| `enum` \| `props.Variant()` \| Convert enum values to `options` array (required) \|
114	\| `{ href: string; ... }` \| `props.Link()` \| Returns `{ href, target?, preload? }` object — may need wrapper if component expects separate `href`/`target` props \|
115	\| Image-related types \| `props.Image()` \| Image src, url, etc. \|
116	\| `string` (canvas-editable text) \| `props.TextNode()` \| For text editable directly on canvas; has `multiline` param \|
117	\| `boolean` (show/hide) \| `props.Visibility()` \| Semantic show/hide toggle \|
118	\| `string` (for HTML id) \| `props.

People who liked this also viewed

6 picks

Type

convert-component

106stars16forks

View on GitHub

How to install convert-component?

webflow/webflow-skills/convert-component

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Convert Component
2
3	Convert an existing React component into a Webflow Code Component by analyzing its structure and generating the appropriate `.webflow.tsx` definition file.
4
5	## When to Use This Skill
6
7	Use when:
8	- User has an existing React component they want to use in Webflow
9	- User asks to "convert", "adapt", or "make this work with Webflow"
10	- User provides a React component file and wants a Webflow definition
11	- User is migrating components from another React project
12
13	Do NOT use when:
14	- Creating a component from scratch (use component-scaffold)
15	- User just wants to understand code components (answer directly)
16	- Component is already a Webflow code component (use component-audit)
17
18	## Instructions
19
20	### Phase 1: Analyze Existing Component
21
22	1. Read the React component file: Get the full source code
23
24	2. Extract component information:
25	- Component name (function/const name)
26	- Props interface or type definition
27	- Each prop's TypeScript type
28	- Default values if defined
29	- Whether component uses `children`
30
31	3. Identify incompatible patterns:
32
33	\| Pattern \| Issue \| Resolution \|
34	\|---------\|-------\|------------\|
35	\| React Context usage \| Context doesn't work across Webflow components \| Refactor to props or use nano stores \|
36	\| `window`/`document` in render \| SSR will fail \| Wrap in useEffect or set `ssr: false` \|
37	\| `localStorage`/`sessionStorage` in render \| SSR will fail \| Wrap in useEffect or set `ssr: false` \|
38	\| Complex object props \| Can't map to Webflow prop types \| Break into individual props \|
39	\| Function props (callbacks) \| Not supported in Webflow \| Remove or internalize logic \|
40	\| `useContext` hook \| Won't work across components \| Use alternative state patterns \|
41	\| External CSS imports \| May not work in Shadow DOM \| Import in .webflow.tsx instead \|
42	\| CSS class references to global styles \| Won't work in Shadow DOM \| Use component-scoped styles \|
43	\| styled-components \| Needs Shadow DOM decorator \| Set up globals.ts with decorator \|
44	\| Emotion (@emotion/styled) \| Needs Shadow DOM decorator \| Set up globals.ts with decorator \|
45
46	4. Detect styling approach and note required setup:
47
48	If using styled-components:
49	```bash
50	npm i @webflow/styled-components-utils styled-components
51	```
52
53	Create/update `globals.ts`:
54	```typescript
55	import { styledComponentsShadowDomDecorator } from "@webflow/styled-components-utils";
56	export const decorators = [styledComponentsShadowDomDecorator];
57	```
58
59	If using Emotion:
60	```bash
61	npm i @webflow/emotion-utils @emotion/cache @emotion/react
62	```
63
64	Create/update `globals.ts`:
65	```typescript
66	import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
67	export const decorators = [emotionShadowDomDecorator];
68	```
69
70	For both CSS-in-JS approaches, update `webflow.json`:
71
72	styled-components:
73	```json
74	{
75	"library": {
76	"globals": "./src/globals.ts",
77	"renderer": {
78	"server": "@webflow/styled-components-utils/server"
79	}
80	}
81	}
82	```
83
84	Emotion:
85	```json
86	{
87	"library": {
88	"globals": "./src/globals.ts",
89	"renderer": {
90	"server": "@webflow/emotion-utils/server"
91	}
92	}
93	}
94	```
95
96	5. Flag any dependencies that might cause issues:
97	- Large libraries (bundle size concern)
98	- Browser-only libraries
99	- Libraries that manipulate DOM directly
100
101	### Phase 2: Map Props to Webflow Types
102
103	6. Apply TypeScript → Webflow prop type mapping:
104
105	\| TypeScript Type \| Webflow Prop \| Notes \|
106	\|-----------------\|--------------\|-------\|
107	\| `string` \| `props.Text()` \| Default for short text \|
108	\| `string` (long/HTML content) \| `props.RichText()` \| If prop name suggests content/body/description \|
109	\| `React.ReactNode` / `children` \| `props.Slot()` \| For nested content \|
110	\| `number` \| `props.Number()` \| Numeric values \|
111	\| `boolean` \| `props.Boolean()` \| Toggles \|
112	\| `"option1" \\| "option2"` \| `props.Variant()` \| String literal unions (requires `options` array) \|
113	\| `enum` \| `props.Variant()` \| Convert enum values to `options` array (required) \|
114	\| `{ href: string; ... }` \| `props.Link()` \| Returns `{ href, target?, preload? }` object — may need wrapper if component expects separate `href`/`target` props \|
115	\| Image-related types \| `props.Image()` \| Image src, url, etc. \|
116	\| `string` (canvas-editable text) \| `props.TextNode()` \| For text editable directly on canvas; has `multiline` param \|
117	\| `boolean` (show/hide) \| `props.Visibility()` \| Semantic show/hide toggle \|
118	\| `string` (for HTML id) \| `props.

People who liked this also viewed

6 picks

Type