skills.rest
VIDLG
VIDLGOFFICIAL
Explore all skills by this author →
GitHub

webfly-bridge-dev

Bridge Flutter/Dart native modules to React/TypeScript frontends via WebF.

4|Updated Jan 22, 2026
Search Tags:#typescript#react#flutter#native modules#bridging#webf
One-click install
npx skills add https://github.com/VIDLG/webfly --skill webfly-bridge-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webfly-bridge-dev
Source: https://github.com/VIDLG/webfly/tree/main/.claude/skills/webfly-bridge-dev
Command: npx skills add https://github.com/VIDLG/webfly --skill webfly-bridge-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the development of hybrid applications by enabling seamless communication and data transfer between Flutter/Dart native modules and a React/TypeScript frontend, leveraging the WebF runtime.

Core Features & Use Cases

  • Native Module Development: Create new native capabilities for WebFly by bridging Dart code to the JavaScript layer.
  • Bidirectional Communication: Supports method invocation from React to Dart and event streaming from Dart to React.
  • Use Case: Develop a custom Bluetooth Low Energy (BLE) module in Flutter that can be fully controlled and monitored by your React-based application interface.

Quick Start

Use the webfly-bridge-dev skill to create a new Flutter native module named 'camera' that can be invoked from the React frontend.

Frequently Asked Questions about webfly-bridge-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bridge Flutter Dart code to a React TypeScript frontend?▼

To bridge Flutter Dart to React TypeScript, use the WebF runtime to develop native modules. Define Dart classes extending WebFBaseModule and create TypeScript wrappers using createModuleInvoker for seamless integration.

Can I stream events from Flutter native modules to React?▼

Yes, streaming events from Flutter to React is supported through bidirectional communication. The WebF bridge enables event streaming from Dart to React, alongside standard method invocation from the React frontend to Dart.

How to create a native module for device features like BLE and camera in WebF?▼

Create a native module for features like BLE and camera by defining a Dart module extending WebFBaseModule. Then, expose its capabilities to your React application by defining a TypeScript wrapper using createModuleInvoker.

Does WebF support bidirectional method invocation between Dart and React?▼

Yes, WebF supports bidirectional method invocation between Dart and React. This allows React to invoke Dart methods directly while enabling Dart modules to stream events back to the React frontend.

What is the best way to integrate native Flutter capabilities into a hybrid app?▼

The best way to integrate native Flutter capabilities into a hybrid app is using WebF to bridge Dart modules to React. This facilitates seamless communication and data transfer for native features without leaving the React frontend.

Related Skills

Explore More Software Engineering Skills→
TMHSDigitalTMHSDigital
2

mobile-native-modules

Scaffold native modules for Expo, React Native, or Flutter with Swift, Kotlin, TypeScript, and Dart.

Community
Advanced
MicrockMicrock
322

native-modules

Bridge JavaScript and native code for React Native iOS and Android modules.

Community
Advanced
maurodf0maurodf0

webf-native-plugins

Integrate Flutter plugins with JavaScript APIs for native device features in WebF apps.

Community
Intermediate
openwebfopenwebf
2.5k

webf-native-plugin-dev

Wrap Flutter packages as WebF native plugins with JavaScript APIs.

Official
Advanced