webf-native-ui-dev

Wrap Flutter widgets as HTML custom elements using WebF tooling.

218|33|Updated Jan 7, 2026

Search Tags:#flutter #dart #web-components #custom-elements #webf #ui-library

Ready to run

npx skills add https://github.com/first-fluke/fullstack-starter --skill webf-native-ui-dev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: webf-native-ui-dev
Source: https://github.com/first-fluke/fullstack-starter/tree/main/.agents/skills/webf-native-ui-dev
Command: npx skills add https://github.com/first-fluke/fullstack-starter --skill webf-native-ui-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

WebF enables rendering HTML/CSS with Flutter, but exposing complex Flutter widgets as standard HTML custom elements requires boilerplate and integration work. This skill provides a guided approach to wrapping Flutter widgets as native web components that can be used in any web page.

Core Features & Use Cases

Wrap Flutter widgets as HTML custom elements for reuse in web apps.
Register and integrate custom elements with minimal boilerplate using WebF tooling.
Create UI libraries that span WebF, Flutter, and HTML ecosystems; reuse across projects.

Quick Start

Install Flutter and WebF tooling, then create a Flutter widget, define a WidgetElement subclass, register the custom element with WebF, and use it in HTML as a standard tag.

Frequently Asked Questions about webf-native-ui-dev

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

FAQPage Schema

How do I expose Flutter widgets as HTML custom elements?▼

To expose Flutter widgets as HTML custom elements, you define a WidgetElement subclass, map widget properties to HTML attributes, and register the custom element with WebF. This enables standard web pages to embed and reuse Flutter components.

Can I use WebF to build a shared UI library for Flutter and web apps?▼

Yes, WebF allows you to build a shared UI library by wrapping Flutter widgets as native web components. This enables consistent UI rendering across WebF, Flutter, and standard HTML ecosystems with minimal boilerplate.

What do I need to set up before wrapping Flutter widgets for the DOM?▼

Before wrapping Flutter widgets for the DOM, you need to install Flutter, Dart, and WebF tooling. These dependencies allow you to define custom elements and dispatch events between Flutter and the DOM.

How does WebF handle event dispatching between Flutter and standard web pages?▼

WebF handles event dispatching by mapping interactions through the WidgetElement subclass to standard DOM events. This bridges the integration gap, allowing Flutter widgets to dispatch events directly to the surrounding HTML.

Are there limitations when using WebF custom elements in standard web apps?▼

The primary limitation is the boilerplate required to map complex Flutter widget properties to HTML attributes. This skill guides you through minimizing this boilerplate using WebF tooling for seamless integration.