webflow-code-component:convert-component

Convert Component

Convert an existing React component into a Webflow Code Component by analyzing its structure and generating the appropriate .webflow.tsx definition file.

When to Use This Skill

Use when:

• User has an existing React component they want to use in Webflow
• User asks to "convert", "adapt", or "make this work with Webflow"
• User provides a React component file and wants a Webflow definition
• User is migrating components from another React project

Do NOT use when:

• Creating a component from scratch (use component-scaffold)
• User just wants to understand code components (answer directly)
• Component is already a Webflow code component (use component-audit)

Instructions

Phase 1: Analyze Existing Component

1. Read the React component file: Get the full source code

2. Extract component information:

   • Component name (function/const name)
   • Props interface or type definition
   • Each prop's TypeScript type
   • Default values if defined
   • Whether component uses children

3. Identify incompatible patterns:

   Pattern	Issue	Resolution
   React Context usage	Context doesn't work across Webflow components	Refactor to props or use nano stores
   window/document in render	SSR will fail	Wrap in useEffect or set ssr: false
   localStorage/sessionStorage in render	SSR will fail	Wrap in useEffect or set ssr: false
   Complex object props	Can't map to Webflow prop types	Break into individual props
   Function props (callbacks)	Not supported in Webflow	Remove or internalize logic
   useContext hook	Won't work across components	Use alternative state patterns
   External CSS imports	May not work in Shadow DOM	Import in .webflow.tsx instead
   CSS class references to global styles	Won't work in Shadow DOM	Use component-scoped styles
   styled-components	Needs Shadow DOM decorator	Set up globals.ts with decorator
   Emotion (@emotion/styled)	Needs Shadow DOM decorator	Set up globals.ts with decorator