skilld
All skills
webflow avatar

/convert-component

@db69a53 official
by webflowwebflow/webflow-skills126 stars
21

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.

  • 2 files
  • 26.5 KB
  • Updated 7 months ago
  • GitHub

Ask your Agent

Use this Skill: https://skilld.dev/gh/webflow/webflow-skills/convert-component

This session only. Nothing lands on disk.

referencesprop-types.md

≈866 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Webflow Prop Types Quick Reference

Quick reference for all 11 Webflow code component prop types via props.<Type>() from @webflow/data-types.

Quick Reference Table

Type Alias Return Type Has defaultValue Unique Params
Text String string Yes —
RichText — ReactNode Yes —
TextNode — ReactNode Yes multiline
Link — object No —
Image — object No —
Number — number Yes min, max, decimals
Boolean — boolean Yes trueLabel, falseLabel
Variant — string Yes options (required)
Visibility — boolean Yes —
Slot Children ReactNode No —
ID — string No —

Type Signatures

Text (alias: String)

props.Text({ name, group?, tooltip?, defaultValue?: string })
// Returns: string

RichText

props.RichText({ name, group?, tooltip?, defaultValue?: string })
// Returns: ReactNode

TextNode

props.TextNode({ name, group?, tooltip?, defaultValue?: string, multiline?: boolean })
// Returns: ReactNode
  • Editable directly on the Webflow canvas

Link

props.Link({ name, group?, tooltip? })
// Returns: { href: string, target?: "_self" | "_blank" | string, preload?: "prerender" | "prefetch" | "none" | string }
  • No defaultValue param
  • Returns an object — may need a wrapper if component expects href and target separately

Image

props.Image({ name, group?, tooltip? })
// Returns: { src: string, alt?: string }
  • No defaultValue param
  • Returns an object — may need a wrapper if component expects src and alt separately

Number

props.Number({ name, group?, tooltip?, defaultValue?: number, min?: number, max?: number, decimals?: number })
// Returns: number

Boolean

props.Boolean({ name, group?, tooltip?, defaultValue?: boolean, trueLabel?: string, falseLabel?: string })
// Returns: boolean

Variant

props.Variant({ name, options: string[], group?, tooltip?, defaultValue?: string })
// Returns: string
  • options is required
  • defaultValue must match one of the options

Visibility

props.Visibility({ name, group?, tooltip?, defaultValue?: boolean })
// Returns: boolean

Slot (alias: Children)

props.Slot({ name, group?, tooltip? })
// Returns: ReactNode
  • No defaultValue param
  • Allows designers to insert child components

ID

props.Id({ name, group?, tooltip? })
// Returns: string
  • No defaultValue param
  • Used for HTML element IDs (CSS targeting, form labels, JS interactions)

Common Params

All types share: name (required), group (optional), tooltip (optional)

Source: SKILL.md on GitHub

Third-party checks

No third-party reports yet.

Provenance

Signed by skilld at db69a53. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub last week.

Activeupdated 7 months ago

Capability

compatibility
Node.js 18+, React 18+, TypeScript, @webflow/webflow-cli
metadata
{
  "author": "webflow",
  "version": "1.0"
}

Topics

README badge

README badge for webflow/webflow-skills/convert-component

What it does

Converts an existing React component into a Webflow Code Component by analyzing its TypeScript props and generating a .webflow.tsx definition file. Identifies incompatible patterns like Context usage, browser APIs in render, and function props, then maps TypeScript types to Webflow prop types (Text, Number, Boolean, Variant, Link, Image, Slot).

Generated from the current SKILL.md.

Frequently asked

Does this skill handle components with React Context?
No. The skill identifies Context usage as incompatible with Webflow code components and recommends refactoring to props or nano stores instead.
What TypeScript prop types can be converted to Webflow?
String, number, boolean, string literals (unions), enums, React.ReactNode, Link objects, and Image types. Complex objects and function props must be split or removed.
Does this skill modify the original component file?
No. The skill generates a separate `.webflow.tsx` definition file and identifies required changes to the original component, which you must apply manually.
What if my component uses styled-components or Emotion?
The skill detects these libraries and provides setup instructions for Shadow DOM decorators, including required package installs and webflow.json configuration.
Can this convert components that use browser APIs like localStorage?
The skill flags browser API usage as an SSR compatibility issue and recommends wrapping the code in useEffect or setting `ssr: false` in the component options.

Generated from the current SKILL.md. These answers refresh after source changes.