webf

Deploy WebF app assets to CDN with cache strategy, versioning, and rollback.

Development workflow for WebF apps (hot reload, DevTools, logs).

Quickstart for WebF app development (Vite + WebF Go).

Testing guidance for WebF apps (Vitest + React Testing Library).

Build a WebF bridge module/native plugin (module-codegen, Dart bindings, JS usage).

(Maintainers) Refresh the bundled OpenWebF docs snapshot used by the MCP server.

Search OpenWebF docs offline via MCP and pull relevant sections/snippets.

Detect project type (WebF app / Flutter host / monorepo) and recommend next steps.

Entry point: detect project type and show the right OpenWebF commands/templates to run next.

Add WebF to a Flutter host app and load a WebF bundle (remote/assets/localhost/inline).

Configure and debug WebF caching (modes, headers, clearing, adapters).

Embed WebF in Flutter layouts safely (constraints, scrollables, viewport sizing).

Set up hybrid routing with WebFSubView and go_router (and optional React router bridge).

Performance monitoring and optimization for WebF in Flutter (FP/FCP/LCP, dumps, best practices).

Theme WebF with Flutter (automatic sync, overrides, CSS/JS patterns, Tailwind notes).

Build hybrid UI components (custom elements backed by Flutter widgets).

Guided setup wizard for OpenWebF/WebF (WebF app, Flutter host, or monorepo).

Final release checklist across WebF app + Flutter host (caching, perf, security, store compliance).

Security checklist for OpenWebF/WebF apps (untrusted content, plugin vetting, API keys, storage).

App Store + Play Store guidelines for WebF-based apps (compliance checklist).

WebF app specialist (Vite/React/TS, WebF Go workflow, testing, deployment). Use for web-layer tasks.

Bridge module/native plugin specialist (module-codegen, Dart bindings, registration, JS usage). Use for JS↔Dart integration tasks.

Flutter host integration specialist (embedding WebF, bundles, routing, theming, caching, lifecycle). Use for Flutter-side tasks.

Performance specialist (profiling, FP/FCP/LCP, dumpLoadingState, optimization). Use when performance matters.

Release and rollout specialist (CDN deploy, cache strategy, versioning, rollback, progressive rollout). Use for shipping.

Security and compliance reviewer (remote content, plugin vetting, XSS, API keys, store guidelines). Read-only by default.

Debug WebF app runtime issues with Chrome DevTools (console/network/elements) and JS-side troubleshooting. Use when the user mentions DevTools console, network tab, stack traces, blank screen, layout measurement issues, or failing network requests.

Troubleshoot dev server reachability and HMR for WebF apps on real devices (Vite/Webpack): LAN IP vs localhost, 0.0.0.0/--host binding, firewall/ports, and websocket/HMR (ws://) issues. Use when the user mentions HMR, websocket, ws://, --host, 0.0.0.0, LAN IP, firewall, or a device that can load HTML but not assets/HMR.

Measure and optimize WebF app performance from the JavaScript side (performance.mark/measure, bundle size, code splitting, debouncing, CSS transforms). Use when the user mentions performance.mark/measure, JS profiling, heavy JS work, bundle size, code splitting, debouncing, or animation performance.

Set up and improve WebF app tests with Vitest and React Testing Library. Use when the user mentions Vitest, React Testing Library, unit tests, component tests, “testing trophy”, or asks to add/fix tests in a Vite/React/TS WebF app.

Run and debug a WebF app specifically in WebF Go (desktop/iOS/Android): load dev URLs, connect via devtools://, collect WEBF_NATIVE_LOG logs, clear WebF Go cache, and handle WebF Go limitations. Use when the user explicitly mentions WebF Go, devtools://, WEBF_NATIVE_LOG, the WebF Go debug button, or WebF Go settings (Clear Cache).

DEPRECATED umbrella Skill (backward compatibility). Use only for cross-cutting orchestration across multiple WebF app tasks when a request spans several capabilities (dev loop + debugging + testing + release). Prefer focused openwebf-app-* Skills.

Build a WebF bridge module/native plugin using the module-codegen workflow (*.module.d.ts → codegen → Dart implementation → registration → JS usage). Use when the user mentions module-codegen, bridge module, native plugin, *.module.d.ts, or registering a module.

DEPRECATED umbrella Skill (backward compatibility). Use only for broad bridge-module orchestration across codegen + Dart + registration + JS usage. Prefer the focused bridge module codegen Skill.

Choose and implement WebFBundle loading in a Flutter host (remote URL, assets, localhost dev, inline) and diagnose bundle load failures (bad URL, missing assets, network errors). Use when the user mentions WebFBundle, bundle URL/path, remote vs assets vs localhost vs inline, or “bundle won’t load”.

Configure and debug WebF runtime caching in Flutter using HttpCacheMode (stale content, offline-first, cache busting, clearing caches with WebF.clearAllCaches). Use when the user mentions HttpCacheMode, WebF.clearAllCaches, offline-first, stale remote bundles, or cache adapter behavior.

Manage WebF controllers safely with WebFControllerManager (lifecycle, reuse, pre-render, multiple controllers). Use when the user mentions WebFControllerManager, controller lifecycle, pre-render controller, or multi-page WebF integration.

Fix Flutter layout/constraint issues when embedding WebF (scrollables, unbounded constraints, viewport sizing). Use when the user mentions ListView/ScrollView, “unbounded height”, infinite constraints, RenderBox errors, or embedding WebF in part of the screen.

Implement hybrid routing between Flutter and WebF using WebFSubView and go_router (route mapping and layouts). Use when the user mentions WebFSubView, go_router, hybrid routing, or mapping Flutter routes to WebF routes.

Instrument and diagnose WebF performance in Flutter (FP/FCP/LCP, dumpLoadingState, loading-state events). Use when the user mentions FP/FCP/LCP, dumpLoadingState, first render slow, LCP verification, or performance monitoring.

Sync theming between Flutter and WebF (automatic theme sync, prefers-color-scheme, dark mode patterns). Use when the user mentions theme sync, dark mode, prefers-color-scheme, CSS variables, or WebF theming from MaterialApp.

DEPRECATED umbrella Skill (backward compatibility). Use only when a Flutter host request spans multiple WebF integration areas (controllers + bundles + embedding + routing + caching/theming + perf). Prefer focused openwebf-host-* Skills.

Plan and implement CDN deployment of built WebF app assets (Vercel/Netlify/S3+CloudFront/GitHub Pages), including cache headers and verification. Use when the user mentions CDN, cache headers, S3/CloudFront, Vercel, Netlify, GitHub Pages, or deploying build output.

Design versioning, cache busting, progressive rollout, and rollback for remote WebF bundles. Use when the user mentions version pinning, cache busting, force update, rollback, feature flags, or staged rollout.

DEPRECATED umbrella Skill (backward compatibility). Use only when release work spans deployment + cache headers + versioning + rollback. Prefer focused `openwebf-release-cdn-deploy` and `openwebf-release-versioning-rollback` Skills.

Review security risks and mitigations for remote WebF content (untrusted bundles, URL allowlists, HTTPS, trust boundaries, clickjacking). Use when the user mentions untrusted remote bundles, bundle URL validation/allowlists, or remote updates risk.

Ensure store compliance for WebF apps (remote updates, interpreters, rollout/rollback constraints). Use when the user mentions App Store/Play Store, store compliance, remote updates, or publishing WebF-hosted content.

Review and mitigate XSS risks in WebF apps (sanitize HTML, validate input, avoid unsafe string rendering). Use when the user mentions XSS, sanitize HTML, innerHTML-like rendering, user-generated HTML, or “untrusted input”.

DEPRECATED umbrella Skill (backward compatibility). Use only for cross-cutting security reviews spanning remote content + XSS/sanitization + store compliance. Prefer focused openwebf-security-* Skills.

1 hook across 1 event