webf-native-ui_skill

Overview

This skill sets up and uses WebF's Cupertino native UI library to build iOS-style interfaces from JavaScript while rendering as native Flutter widgets. It provides 30+ pre-built components that follow Apple's Human Interface Guidelines and deliver Flutter-level performance. Use it to add native controls, dialogs, and pickers without hand-crafting everything in HTML/CSS.

How this skill works

The skill installs a Flutter package (webf_cupertino_ui) into your host Flutter project and registers the Cupertino UI components with the WebF runtime. JavaScript bindings are provided via React and Vue npm packages so your JS code can instantiate native widgets that render as Flutter controls on iOS/macOS. Props and events map to Dart-friendly camelCase names and the library includes many platform-optimized components and SF Symbols icons.

When to use it

• Building an iOS-style mobile or macOS app that should follow Apple's design language
• Replacing complex HTML/CSS widgets with native pickers, lists, dialogs, or controls for performance
• Adding native-looking forms, navigation, or settings screens to a WebF app
• Mixing native UI components with existing web layouts to balance fidelity and flexibility
• When you need smoother 60fps rendering for interactive UI elements

Best practices

• Install and initialize the Flutter package first and call installWebFCupertinoUI() in main.dart
• Use native components for platform-specific controls (date pickers, segmented controls, lists)
• Keep custom layouts in HTML/CSS and use native widgets where platform fidelity matters
• Prefer TypeScript for stronger type safety and to leverage included definitions
• Check component docs for exact prop names and event signatures before integrating

Example use cases

• A profile form built with FlutterCupertinoFormSection, FormRow, and TextField for native inputs
• A settings screen using ListSection, ListTile and Cupertino switches for crisp native toggles
• A confirmation flow that shows FlutterCupertinoAlertDialog for standard iOS dialogs
• Replacing a slow web date input with FlutterCupertinoDatePicker for better UX and performance
• Using segmented controls and sliders for iOS-style controls in a media or settings view