webf-native-ui-dev_skill

Overview

This skill helps you develop custom native UI libraries for WebF by wrapping Flutter widgets as web-accessible custom elements. It guides you from creating Dart widget wrappers and TypeScript definitions to generating React/Vue component packages with the WebF CLI. The goal is reusable, type-safe component libraries that bridge Flutter UI to JavaScript and TypeScript apps.

How this skill works

You write Flutter widget wrappers and accompanying .d.ts TypeScript definitions that describe properties, events, and methods. The WebF CLI parses those definitions, generates Dart binding classes and framework components (React/Vue), and produces npm packages with TypeScript support. Runtime integration registers custom elements with WebF so JavaScript can instantiate and interact with Flutter-backed components.

When to use it

• You need to expose Flutter widgets to web developers or web apps.
• You are building a cross-platform design system requiring native performance.
• You want to wrap existing Flutter packages for use from JavaScript/TypeScript.
• You need platform-specific components not achievable with pure HTML/CSS.
• You plan to publish reusable npm packages with TypeScript typings.

Best practices

• Keep .d.ts interfaces clear: Properties end with Properties and events end with Events; add JSDoc for documentation.
• Validate and normalize incoming property values in Dart; fallback to safe defaults and log warnings.
• Use JSON-encoded strings for complex data and parse them safely in Dart with error handling and emitted error events.
• Debounce frequent property updates to avoid rebuild thrash and perform cleanup in dispose/didMount lifecycle hooks.
• Dispatch CustomEvent with structured detail for events carrying data; use TypeScript CustomEvent<T> signatures for type safety.

Example use cases

• Create a MyCustomButton component that dispatches click events and supports variants (filled/outlined/text).
• Wrap a Flutter input widget exposing focus(), clear(), and value properties to JavaScript apps.
• Build a component library that reads CSS styles from the host page to match visual theming.
• Generate React and Vue wrapper packages with webf codegen and publish to npm for frontend teams.
• Expose a complex list widget where items are passed as JSON and rendered natively for high-performance scrolling.