webflow-code-components

Webflow Code Components Build, define, and import React code components into Webflow using DevLink. Code components let you develop advanced, interactive React components in your codebase and deploy them to Webflow as shared libraries for visual composition on the canvas. Quick Start Prerequisite: Webflow Workspace on Freelancer, Core, Growth, Agency, or Enterprise plan (or a site on CMS, Business, or Enterprise). Node.js 20+ and npm 10+. 1. Set up your project — Install the CLI and dependencies 2. Create a React component — Build your standard React component 3. Define the code component — C…

, line)\n if not match:\n continue\n key = match.group(1)\n value = match.group(2).strip()\n\n if (value.startswith('\"') and value.endswith('\"')) or \\\n (value.startswith(\"'\") and value.endswith(\"'\")):\n value = value[1:-1]\n\n if value.startswith(\"[\") and value.endswith(\"]\"):\n items = [item.strip().strip('\"').strip(\"'\")\n for item in value[1:-1].split(\",\")]\n value = [item for item in items if item]\n\n metadata[key] = value\n\n return metadata, body\n\n\ndef load_references(prop_types_only: bool = False) -> list[dict]:\n\n _validate_refs_dir()\n\n if prop_types_only:\n search_dir = REFS_DIR / \"prop-types\"\n if not search_dir.is_dir():\n print(f\"Error: prop-types directory not found: {search_dir}\")\n sys.exit(1)\n glob_pattern = \"*.md\"\n else:\n search_dir = REFS_DIR\n glob_pattern = \"**/*.md\"\n\n results = []\n for md_file in sorted(search_dir.glob(glob_pattern)):\n\n resolved = md_file.resolve()\n if not str(resolved).startswith(str(SKILL_ROOT)):\n continue\n\n text = md_file.read_text()\n metadata, body = parse_frontmatter(text)\n\n body = sanitize_body(body)\n\n results.append({\n \"file\": str(md_file),\n \"name\": metadata.get(\"name\", md_file.stem),\n \"description\": metadata.get(\"description\", \"\"),\n \"tags\": metadata.get(\"tags\", []),\n \"body\": body,\n })\n\n return results\n\n\ndef print_ref(ref: dict, include_body: bool = False) -> None:\n\n tags = ref[\"tags\"]\n tag_str = \", \".join(tags) if isinstance(tags, list) else str(tags)\n print(f\" Name: {ref['name']}\")\n print(f\" Description: {ref['description']}\")\n print(f\" Tags: {tag_str}\")\n print(f\" File: {ref['file']}\")\n if include_body and ref.get(\"body\"):\n print(\" --- BEGIN REFERENCE CONTENT ---\")\n print(ref[\"body\"])\n print(\" --- END REFERENCE CONTENT ---\")\n print()\n\n\ndef cmd_list(refs: list[dict]) -> None:\n\n print(f\"Found {len(refs)} reference files:\\n\")\n for ref in refs:\n print_ref(ref, include_body=False)\n\n\ndef cmd_tag(refs: list[dict], tag: str) -> None:\n\n tag_lower = tag.lower()\n matches = [r for r in refs if tag_lower in\n [t.lower() for t in r[\"tags\"]] if isinstance(r[\"tags\"], list)]\n\n if not matches:\n print(f\"No references found with tag: {tag}\")\n return\n\n print(f\"Found {len(matches)} reference(s) matching tag '{tag}':\\n\")\n for ref in matches:\n print_ref(ref, include_body=True)\n\n\ndef cmd_search(refs: list[dict], query: str) -> None:\n\n query_lower = query.lower()\n matches = []\n\n for ref in refs:\n tag_str = \" \".join(ref[\"tags\"]) if isinstance(ref[\"tags\"], list) else str(ref[\"tags\"])\n searchable = \" \".join([\n ref[\"name\"],\n ref[\"description\"],\n tag_str,\n ref[\"body\"],\n ]).lower()\n\n if query_lower in searchable:\n matches.append(ref)\n\n if not matches:\n print(f\"No references found matching: {query}\")\n return\n\n print(f\"Found {len(matches)} reference(s) matching '{query}':\\n\")\n for ref in matches:\n print_ref(ref, include_body=True)\n\n\ndef main():\n if len(sys.argv) \u003c 2:\n print(__doc__.strip())\n sys.exit(1)\n\n args = sys.argv[1:]\n prop_types_only = \"--prop-types\" in args\n if prop_types_only:\n args.remove(\"--prop-types\")\n\n refs = load_references(prop_types_only=prop_types_only)\n\n if not args:\n cmd_list(refs)\n return\n\n arg = args[0]\n\n if arg == \"--list\":\n cmd_list(refs)\n elif arg == \"--tag\":\n if len(args) \u003c 2:\n print(\"Usage: search_references.py [--prop-types] --tag \u003ctag>\")\n sys.exit(1)\n cmd_tag(refs, args[1])\n elif arg == \"--search\":\n if len(args) \u003c 2:\n print(\"Usage: search_references.py [--prop-types] --search \u003cquery>\")\n sys.exit(1)\n cmd_search(refs, args[1])\n else:\n print(f\"Unknown argument: {arg}\")\n print(__doc__.strip())\n sys.exit(1)\n\n\nif __name__ == \"__main__\":\n main()","content_type":"text/x-python; charset=utf-8","language":"python","size":5808,"content_sha256":"0ee131ba44e38429bff54a645f5e3976991da50e3921cb664643c88bd15bc7cb"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Webflow Code Components","type":"text"}]},{"type":"paragraph","content":[{"text":"Build, define, and import React code components into Webflow using DevLink. Code components let you develop advanced, interactive React components in your codebase and deploy them to Webflow as shared libraries for visual composition on the canvas.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Prerequisite:","type":"text","marks":[{"type":"strong"}]},{"text":" Webflow Workspace on Freelancer, Core, Growth, Agency, or Enterprise plan (or a site on CMS, Business, or Enterprise). Node.js 20+ and npm 10+.","type":"text"}]}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Set up your project","type":"text","marks":[{"type":"strong"}]},{"text":" — Install the CLI and dependencies","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create a React component","type":"text","marks":[{"type":"strong"}]},{"text":" — Build your standard React component","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Define the code component","type":"text","marks":[{"type":"strong"}]},{"text":" — Create a ","type":"text"},{"text":".webflow.tsx","type":"text","marks":[{"type":"code_inline"}]},{"text":" file with ","type":"text"},{"text":"declareComponent","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Import to Webflow","type":"text","marks":[{"type":"strong"}]},{"text":" — Run ","type":"text"},{"text":"npx webflow library share","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use on canvas","type":"text","marks":[{"type":"strong"}]},{"text":" — Install the library on a site, then drag and drop components","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"See ","type":"text"},{"text":"references/quick-start.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" for a full end-to-end tutorial.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Concepts","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Shadow DOM isolation","type":"text","marks":[{"type":"strong"}]},{"text":" — Styles and DOM are sandboxed per component","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Separate React roots","type":"text","marks":[{"type":"strong"}]},{"text":" — No shared React Context or state between components. Use URL params, browser storage, Nano Stores, or custom events","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"SSR by default","type":"text","marks":[{"type":"strong"}]},{"text":" — Server-rendered HTML is hydrated on the client. Disable with ","type":"text"},{"text":"ssr: false","type":"text","marks":[{"type":"code_inline"}]},{"text":" for browser-only components","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"declareComponent","type":"text","marks":[{"type":"code_inline"},{"type":"strong"}]},{"text":" — Defines how your React component appears in Webflow. See ","type":"text"},{"text":"references/hooks.md","type":"text","marks":[{"type":"code_inline"}]},{"text":" for the full API","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Prop types","type":"text","marks":[{"type":"strong"}]},{"text":" — 11 types available (","type":"text"},{"text":"Text","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Rich Text","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Text Node","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Link","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Image","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Number","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Boolean","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Variant","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Visibility","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"Slot","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"ID","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bundling","type":"text","marks":[{"type":"strong"}]},{"text":" — Webpack bundles your library (50MB max)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Important Notes","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"File names are unique identifiers.","type":"text","marks":[{"type":"strong"}]},{"text":" Renaming a ","type":"text"},{"text":".webflow.tsx","type":"text","marks":[{"type":"code_inline"}]},{"text":" file creates a new component and removes the old one — existing instances on sites will break.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"React Server Components are ","type":"text"},{"text":"not","type":"text","marks":[{"type":"strong"}]},{"text":" supported. Use standard React components only.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Components can fetch data client-side, but APIs must support CORS and you must never embed API keys in component code.","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Reference Documentation","type":"text"}]},{"type":"paragraph","content":[{"text":"Each reference file includes YAML frontmatter with ","type":"text"},{"text":"name","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"description","type":"text","marks":[{"type":"code_inline"}]},{"text":", and ","type":"text"},{"text":"tags","type":"text","marks":[{"type":"code_inline"}]},{"text":" for searchability. Use the search script in ","type":"text"},{"text":"scripts/search_references.py","type":"text","marks":[{"type":"code_inline"}]},{"text":" to find relevant references.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Getting Started","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/introduction.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/introduction.md","title":null}},{"type":"strong"}]},{"text":": Overview of DevLink and code components","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/quick-start.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/quick-start.md","title":null}},{"type":"strong"}]},{"text":": End-to-end tutorial from setup to canvas","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/installation.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/installation.md","title":null}},{"type":"strong"}]},{"text":": CLI installation, ","type":"text"},{"text":"webflow.json","type":"text","marks":[{"type":"code_inline"}]},{"text":" config, authentication","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Building Components","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/define-code-component.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/define-code-component.md","title":null}},{"type":"strong"}]},{"text":": ","type":"text"},{"text":"declareComponent","type":"text","marks":[{"type":"code_inline"}]},{"text":", props, decorators, options","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/hooks.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/hooks.md","title":null}},{"type":"strong"}]},{"text":": ","type":"text"},{"text":"declareComponent","type":"text","marks":[{"type":"code_inline"}]},{"text":" and ","type":"text"},{"text":"useWebflowContext","type":"text","marks":[{"type":"code_inline"}]},{"text":" hook reference","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/component-architecture.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/component-architecture.md","title":null}},{"type":"strong"}]},{"text":": Shadow DOM, SSR, state patterns, data fetching","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/styling-components.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/styling-components.md","title":null}},{"type":"strong"}]},{"text":": CSS in Shadow DOM, site variables, tag selectors","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/frameworks-and-libraries.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/frameworks-and-libraries.md","title":null}},{"type":"strong"}]},{"text":": Tailwind, styled-components, Emotion, Material UI, Shadcn/UI, Sass, Less","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Prop Types","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types.md","title":null}},{"type":"strong"}]},{"text":": All prop types with usage, return values, and examples","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/text.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/text.md","title":null}},{"type":"strong"}]},{"text":": Text — single-line text input","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/rich-text.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/rich-text.md","title":null}},{"type":"strong"}]},{"text":": Rich Text — formatted HTML content","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/text-node.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/text-node.md","title":null}},{"type":"strong"}]},{"text":": Text Node — on-canvas editable text","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/link.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/link.md","title":null}},{"type":"strong"}]},{"text":": Link — URL with target and preload","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/image.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/image.md","title":null}},{"type":"strong"}]},{"text":": Image — asset library image selection","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/number.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/number.md","title":null}},{"type":"strong"}]},{"text":": Number — numeric input with range controls","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/boolean.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/boolean.md","title":null}},{"type":"strong"}]},{"text":": Boolean — true/false toggle","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/variant.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/variant.md","title":null}},{"type":"strong"}]},{"text":": Variant — predefined option dropdown","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/visibility.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/visibility.md","title":null}},{"type":"strong"}]},{"text":": Visibility — show/hide toggle","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/slot.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/slot.md","title":null}},{"type":"strong"}]},{"text":": Slot — child component insertion","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/prop-types/id.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-types/id.md","title":null}},{"type":"strong"}]},{"text":": ID — HTML element identifier","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Bundling & CLI","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/cli.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/cli.md","title":null}},{"type":"strong"}]},{"text":": Webflow CLI commands, flags, CI/CD usage, troubleshooting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/bundling-and-import.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/bundling-and-import.md","title":null}},{"type":"strong"}]},{"text":": Webpack bundling, CLI import, CI/CD, debugging","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Help","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"references/faq.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/faq.md","title":null}},{"type":"strong"}]},{"text":": Frequently asked questions — setup, styling, imports, troubleshooting, performance","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Searching References","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# List all references with metadata\npython scripts/search_references.py --list\n\n# Search by tag (exact match)\npython scripts/search_references.py --tag \u003ctag>\n\n# Search by keyword (across name, description, tags, and content)\npython scripts/search_references.py --search \u003cquery>\n\n# Search only prop type references\npython scripts/search_references.py --prop-types\npython scripts/search_references.py --prop-types --tag \u003ctag>\npython scripts/search_references.py --prop-types --search \u003cquery>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Scripts","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"scripts/search_references.py","type":"text","marks":[{"type":"code_inline"},{"type":"strong"}]},{"text":": Search reference files by tag, keyword, or list all with metadata","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}}]},"metadata":{"date":"2026-06-05","name":"webflow-code-components","author":"@skillopedia","source":{"stars":7,"repo_name":"webflow-skills","origin_url":"https://github.com/224-industries/webflow-skills/blob/HEAD/skills/webflow-code-components/SKILL.md","repo_owner":"224-industries","body_sha256":"8d1eda0a8364c5c80ca7572cb6f542151318e7ebb7331250af0564322cd2be93","cluster_key":"a4e6db8391edd35e123ab3146129454cd6c41d532e91f7720ca9b59569d6f244","clean_bundle":{"format":"clean-skill-bundle-v1","source":"224-industries/webflow-skills/skills/webflow-code-components/SKILL.md","attachments":[{"id":"a44abee9-48aa-5db0-b5a1-2c0df3bec118","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/a44abee9-48aa-5db0-b5a1-2c0df3bec118/attachment.md","path":"references/bundling-and-import.md","size":5149,"sha256":"70f605229e5ecf69ab933427600e8b13d1d26ae83c6792660769cc50629c828a","contentType":"text/markdown; charset=utf-8"},{"id":"93f7ca4b-92b6-5a56-b4a2-7530ea2978e0","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/93f7ca4b-92b6-5a56-b4a2-7530ea2978e0/attachment.md","path":"references/cli.md","size":3155,"sha256":"e1b6c82615794cf1080b5c8d6925fe78e0e0ccc5fd27445d0ace928ee1c17bba","contentType":"text/markdown; charset=utf-8"},{"id":"b7432723-ec4b-5e41-96d1-f3bf32d0d7e6","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b7432723-ec4b-5e41-96d1-f3bf32d0d7e6/attachment.md","path":"references/component-architecture.md","size":10316,"sha256":"404d97873956e581b09c87885c30955d28899dfefb1698a69e5420dc92c2514c","contentType":"text/markdown; charset=utf-8"},{"id":"81484e2a-2154-5aef-a791-8d36c3b7f133","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/81484e2a-2154-5aef-a791-8d36c3b7f133/attachment.md","path":"references/define-code-component.md","size":11447,"sha256":"373986ee91cdb4e0864c064f52dad7fad29f4c5cf3ddef908affcc22f49d3af3","contentType":"text/markdown; charset=utf-8"},{"id":"4a59466b-6fc2-5b8f-839f-8d805e963ea5","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/4a59466b-6fc2-5b8f-839f-8d805e963ea5/attachment.md","path":"references/faq.md","size":5491,"sha256":"bd093787044b7e660f4ab37ba19ff77a959b31b20b36c0a1d33e03836d0444a9","contentType":"text/markdown; charset=utf-8"},{"id":"10eed8dc-e7ec-5f02-81cc-f068e7f92ea9","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/10eed8dc-e7ec-5f02-81cc-f068e7f92ea9/attachment.md","path":"references/frameworks-and-libraries.md","size":5470,"sha256":"0699fa5c935f685b696f09e5bf155504ca84f9628b8f3ce34a1c477a2242edb8","contentType":"text/markdown; charset=utf-8"},{"id":"241c8769-c491-5985-b867-db0d246d820a","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/241c8769-c491-5985-b867-db0d246d820a/attachment.md","path":"references/hooks.md","size":5791,"sha256":"b2be476fce0ad8a9d6936f9d1e5739e03bae8fbf78274a1184d451f10e826fd2","contentType":"text/markdown; charset=utf-8"},{"id":"8e31d140-5401-5764-921d-298e8c75f5ab","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/8e31d140-5401-5764-921d-298e8c75f5ab/attachment.md","path":"references/installation.md","size":3690,"sha256":"dfcfd7659d31fef229ef1bd908a74c88c4893ad4d932190d831ca99515d3940b","contentType":"text/markdown; charset=utf-8"},{"id":"ea887d69-6d4c-52d9-bbad-b44554e4e503","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/ea887d69-6d4c-52d9-bbad-b44554e4e503/attachment.md","path":"references/introduction.md","size":2393,"sha256":"85b4563a98744f8bd9451c6a5693a87a0a33e4fbd40f8e8d0f28ace295e55127","contentType":"text/markdown; charset=utf-8"},{"id":"cfd985c8-453d-5a93-bea8-dbf7e0f15d80","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/cfd985c8-453d-5a93-bea8-dbf7e0f15d80/attachment.md","path":"references/prop-types.md","size":7331,"sha256":"de024844f9e7441564770568d666c0e984a54d311a0023792fa2d9c86942b714","contentType":"text/markdown; charset=utf-8"},{"id":"cb8b2f43-425a-54d2-831d-8dbecb058c28","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/cb8b2f43-425a-54d2-831d-8dbecb058c28/attachment.md","path":"references/prop-types/boolean.md","size":2762,"sha256":"6430a7e6bacc1cd54fc8661a8ae7a16ab34409b624841a2ed0716b56e3f28838","contentType":"text/markdown; charset=utf-8"},{"id":"61029430-3020-551d-96ff-57f52e5ef0b7","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/61029430-3020-551d-96ff-57f52e5ef0b7/attachment.md","path":"references/prop-types/id.md","size":1834,"sha256":"8020dceec787bff0786d24b08677582089a06221382ec649c710b67c9912f9e9","contentType":"text/markdown; charset=utf-8"},{"id":"e1a43f1e-546b-514b-9860-c8017c3b8961","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/e1a43f1e-546b-514b-9860-c8017c3b8961/attachment.md","path":"references/prop-types/image.md","size":3135,"sha256":"80f5e8bcc1dc1656730032baa4338b02f574622dae18d7d850b1eae91c418150","contentType":"text/markdown; charset=utf-8"},{"id":"2bbd1ec7-a758-588d-b973-d6bccc59d41d","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/2bbd1ec7-a758-588d-b973-d6bccc59d41d/attachment.md","path":"references/prop-types/link.md","size":3703,"sha256":"1a54f725082355e5ae5996291ba9b530de48451ed4cb62d80f7fedfa9b56e2e1","contentType":"text/markdown; charset=utf-8"},{"id":"10c596c6-fc0d-5fe6-b1d8-de1ead40682a","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/10c596c6-fc0d-5fe6-b1d8-de1ead40682a/attachment.md","path":"references/prop-types/number.md","size":2272,"sha256":"aec0ba050a9b74d685668d224ccc7dd01a9cbc81384895fa2d280ab12c7bfa7b","contentType":"text/markdown; charset=utf-8"},{"id":"17b1af6f-5c36-51d3-a77a-4982f8810b02","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/17b1af6f-5c36-51d3-a77a-4982f8810b02/attachment.md","path":"references/prop-types/rich-text.md","size":2023,"sha256":"b9be61cc354e21b0ff2fc03c88326fb004a48896d7598ebf0f8269e52ee98329","contentType":"text/markdown; charset=utf-8"},{"id":"1dbb902a-78cc-574b-a6a5-ebaf44f2d17c","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/1dbb902a-78cc-574b-a6a5-ebaf44f2d17c/attachment.md","path":"references/prop-types/slot.md","size":1798,"sha256":"ae61ca968ded51e8d3321378ca0b88b2407904dac21a1c0829e55880d01633da","contentType":"text/markdown; charset=utf-8"},{"id":"d081d2bf-1fe1-5411-b13d-65aee54ef6e8","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/d081d2bf-1fe1-5411-b13d-65aee54ef6e8/attachment.md","path":"references/prop-types/text-node.md","size":2510,"sha256":"0eba373a766d59133ecc2dae04a5962aba77fb110f3665b4fcc24a9195ce154f","contentType":"text/markdown; charset=utf-8"},{"id":"6f9970ae-801d-51a9-9054-eaf585a9aa08","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/6f9970ae-801d-51a9-9054-eaf585a9aa08/attachment.md","path":"references/prop-types/text.md","size":1832,"sha256":"dddba6276801dc9a23a46b366b261d7def82ef0f3969f817bd4e91059475e054","contentType":"text/markdown; charset=utf-8"},{"id":"aa9cf1d7-1e57-5f25-9c1b-c3ba9353e6a5","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/aa9cf1d7-1e57-5f25-9c1b-c3ba9353e6a5/attachment.md","path":"references/prop-types/variant.md","size":2118,"sha256":"26c3f427acdad9fd361b241657d8ce596e865a65083fb0f9901aea96acd3c20c","contentType":"text/markdown; charset=utf-8"},{"id":"b0920d0c-a48e-5afe-a0af-bfc864b599d3","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b0920d0c-a48e-5afe-a0af-bfc864b599d3/attachment.md","path":"references/prop-types/visibility.md","size":1933,"sha256":"d66393265065a84a793c8539ae7f1fd15b511ea7c43c4df3835a029073d0bd13","contentType":"text/markdown; charset=utf-8"},{"id":"bbd6f184-a202-588b-be2a-9ef9c6e7d588","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/bbd6f184-a202-588b-be2a-9ef9c6e7d588/attachment.md","path":"references/quick-start.md","size":8256,"sha256":"ea0fc51edaa6f30a5f6ad80be4f155dfcf3503600fa075f1186dadb0e6317af3","contentType":"text/markdown; charset=utf-8"},{"id":"90f055db-ff92-5259-ab07-804d4c037995","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/90f055db-ff92-5259-ab07-804d4c037995/attachment.md","path":"references/styling-components.md","size":4053,"sha256":"2181a4a768f2fa032ffc3acf9764a5a7362e52cf51e79dbb2f50eaeebe60c343","contentType":"text/markdown; charset=utf-8"},{"id":"b4eae867-f527-5b54-875d-f6d2291ff553","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b4eae867-f527-5b54-875d-f6d2291ff553/attachment.py","path":"scripts/search_references.py","size":5808,"sha256":"0ee131ba44e38429bff54a645f5e3976991da50e3921cb664643c88bd15bc7cb","contentType":"text/x-python; charset=utf-8"}],"bundle_sha256":"ee2127d4ca6ee02804aa16df75a0935ec0377edaac01ac8912c91ea03401de5e","attachment_count":24,"text_attachments":24,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":"skills/webflow-code-components/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"license":"MIT","version":"v1","category":"web-development","metadata":{"url":"https://skills.224ai.au/webflow-code-components.skill","author":"Ben Sabic","version":"1.0.0","keywords":"ai, agent, skill, webflow, code-components, devlink, react, declareComponent, props, shadow-dom, bundling, webpack, library","repository":"https://github.com/224-industries/webflow-skills"},"import_tag":"clean-skills-v1","description":"Build, define, and import React code components into Webflow via DevLink. Use when creating Webflow code components, configuring declareComponent definitions, working with prop types, styling within Shadow DOM, bundling with Webpack, or troubleshooting DevLink imports."}},"renderedAt":1782986218762}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.