🎯

webf-api-compatibility

🎯Skill

from openwebf/webf

VibeIndex|
What it does

Validates and ensures web API compatibility across different platforms and environments within the WebF framework for Flutter.

webf-api-compatibility

Installation

Install skill:
npx skills add https://github.com/openwebf/webf --skill webf-api-compatibility
4
AddedJan 27, 2026

Skill Details

SKILL.md

Overview

What is WebF?

WebF is a W3C/WHATWG-compliant web runtime for Flutter that implements HTML, CSS, and the DOM, running JavaScript in a browser-like environment. It's not a browserβ€”it's an application runtime optimized for building native apps using web technologies.

Unlike traditional WebViews, WebF features:

  • A custom Flutter-based rendering engine rather than relying on system browsers
  • Direct JavaScript-to-native communication without traditional bridge limitations
  • Ability to embed Flutter widgets as HTML elements within the app UI
  • An application-first design with a persistent JavaScript context

Why WebF?

Build Fast. Ship Fast. Run Fast.

WebF seamlessly glues Web, Flutter, and Native platforms together, enabling you to:

  • πŸš€ Build Fast: Develop with React, Vue, Svelte, Solid + TailwindCSS, build with Vite or Webpack, and leverage the entire npm ecosystem - it all just works in WebF
  • πŸ“¦ Ship Fast: Deploy once across all Flutter-supported platforms (iOS, Android, Windows, macOS, Linux) from a single codebase
  • ⚑ Run Fast: Experience native-like performance with sub-100ms cold starts and 60fps animations that outpaces traditional WebView solutions

Key Features

Web Standards Compliance

  • πŸ”· Modern JavaScript (ES6+) - QuickJS runtime with async/await, Promises, modules, optional chaining, and template literals
  • πŸ”· Essential DOM APIs - Element creation/manipulation, event listeners (capture/bubble), query selectors, classList, custom elements, MutationObserver
  • πŸ”· Comprehensive CSS Support - Flexbox layouts, positioned layouts (absolute/relative/fixed/sticky), flow layouts, colors, gradients, transforms (2D/3D), transitions, animations, CSS variables, media queries, pseudo-classes
  • πŸ”· Web APIs - fetch, XMLHttpRequest, WebSockets, localStorage, sessionStorage, Canvas 2D, SVG, URL parsing, timers

Framework & Tooling Compatibility

  • βš›οΈ Frameworks: React, Vue, Svelte, Preact, Solid, Qwik - your existing components and hooks work without modification
  • πŸ› οΈ Build Tools: Vite (recommended), Webpack, esbuild, Rollup, Parcel - HMR, tree-shaking, code splitting all supported
  • 🎨 Styling: Tailwind CSS v3, Sass/SCSS, PostCSS, CSS Modules, Styled Components, Emotion
  • πŸ“¦ npm Ecosystem: Access to thousands of npm packages and the entire JavaScript ecosystem

Flutter Integration

  • πŸ”— Hybrid UI - Embed Flutter widgets as HTML custom elements with native performance and platform-appropriate appearance
  • 🎯 Advanced Gestures - Handle complex touch interactions with native precision via FlutterGestureDetector
  • πŸ“± Native Plugins - Access Flutter plugins (Share, Deep linking, and more) as npm packages
  • πŸ—οΈ Cupertino Components - iOS-style native components without CSS emulation

Developer Experience

  • πŸ” Chrome DevTools - Console, DOM