Toolverse
All skills

webf-native-ui-dev

by openwebf

Develop custom native UI libraries based on Flutter widgets for WebF. Create reusable component libraries that wrap Flutter widgets as web-accessible custom elements. Use when building UI libraries, wrapping Flutter packages, or creating native component systems.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
openwebf
Category
Mobile

About this skill

Develop custom native UI libraries based on Flutter widgets for WebF. Create reusable component libraries that wrap Flutter widgets as web-accessible custom elements. Use when building UI libraries, wrapping Flutter packages, or creating native component systems.

How to use

  1. Zainstaluj skill webf-native-ui-dev w swoim projekcie WebF. Skill zawiera narzędzia CLI do generowania struktury biblioteki komponentów.

  2. Zdefiniuj komponenty TypeScript, które będą opakowywać widgety Flutter. Utwórz interfejsy dla właściwości komponentów i zdarzeń, które będą dostępne dla deweloperów JavaScript.

  3. Skonfiguruj definicje typów (.d.ts), aby komponenty były w pełni typizowane dla użytkowników w TypeScript i React/Vue. Skill automatycznie generuje część kodu na bazie Twoich specyfikacji.

  4. Opakuj wybrane pakiety Flutter, eksponując ich widgety jako niestandardowe elementy WebF dostępne z JavaScriptu. Upewnij się, że komponenty działają z React, Vue i vanilla JavaScript.

  5. Opublikuj swoją bibliotekę jako pakiet npm z wygenerowanymi definicjami typów. Skill wspiera cały proces przygotowania i publikacji pakietu.

  6. Testuj komponenty w aplikacjach webowych, aby upewnić się, że mostek między Flutter a JavaScript działa prawidłowo i że wydajność jest zadowalająca.

Related skills

interactive-portfolio

by davila7

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio,

Mobile
1823

openscad

by mitsuhiko

Create and render OpenSCAD 3D models. Generate preview images from multiple angles, extract customizable parameters, validate syntax, and export STL files for 3D printing platforms like MakerWorld.

Mobile
4291

liquid-glass-developer

by anyproto

Context-aware routing to iOS 26 Liquid Glass implementation patterns. Use when working with glass effects, GlassEffectContainer, morphing transitions, or iOS 26 visual effects.

Mobile
2061

app-store-optimization

by davila7

Complete App Store Optimization (ASO) toolkit for researching, optimizing, and tracking mobile app performance on Apple App Store and Google Play Store

Mobile
1153

vercel-react-native-skills

by vercel-labs

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or

Mobile
1745

swift-best-practices

by sammcj

This skill should be used when writing or reviewing Swift code for iOS or macOS projects. Apply modern Swift 6+ best practices, concurrency patterns, API design guidelines, and migration strategies. Covers async/await, actors, MainActor, Sendable, typed throws, and Swift 6

Mobile
36140