skills.rest
VIDLG
VIDLGOFFICIAL
Explore all skills by this author →
GitHub

webf-routing-setup

Configure hybrid routing for WebF apps with @openwebf/react-router or @openwebf/vue-router.

4|Updated Jan 22, 2026
Search Tags:#react#routing#vue#navigation#webf#hybrid routing
One-click install
npx skills add https://github.com/VIDLG/webfly --skill webf-routing-setup-vidlg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webf-routing-setup
Source: https://github.com/VIDLG/webfly/tree/main/.claude/skills/webf-routing-setup
Command: npx skills add https://github.com/VIDLG/webfly --skill webf-routing-setup-vidlg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the fundamental difference in routing between web browsers (SPA routing) and WebF (hybrid routing), ensuring your navigation logic works correctly and leverages native transitions.

Core Features & Use Cases

  • Hybrid Routing Implementation: Guides you on setting up navigation using @openwebf/react-router or @openwebf/vue-router instead of browser-based routers like react-router-dom.
  • Native Transitions: Enables platform-native screen transitions for a true app-like feel.
  • Data Passing: Demonstrates how to pass data between routes using state parameters.
  • Route Parameters: Shows how to define and use dynamic route parameters.
  • Use Case: When building a multi-screen application in WebF, you need to configure navigation that uses native screen transitions and correctly handles the back button, which is different from standard web SPA routing.

Quick Start

Use the webf-routing-setup skill to configure hybrid routing for your React WebF application by installing @openwebf/react-router and using its Routes and Route components.

Frequently Asked Questions about webf-routing-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up hybrid routing for a WebF application?▼

Set up hybrid routing for WebF by installing dedicated packages like `@openwebf/react-router` or `@openwebf/vue-router`, using their `Routes` and `Route` components to configure navigation and manage the native screen stack.

Why does standard SPA routing not work correctly in WebF?▼

Standard SPA routing differs because WebF requires hybrid routing to leverage native screen transitions and handle the back button properly, avoiding browser-based limitations found in routers like `react-router-dom`.

Can I use react-router-dom for navigation in my WebF app?▼

You should not use `react-router-dom` for WebF navigation; instead, use `@openwebf/react-router` to ensure proper navigation stack management and enable platform-native screen transitions for a true app-like feel.

How do I pass data between routes in WebF?▼

Pass data between WebF routes by using state parameters within the `@openwebf/react-router` or `@openwebf/vue-router` packages, which support passing data and defining dynamic route parameters for programmatic navigation.

Does WebF support native screen transitions for multi-screen applications?▼

WebF supports native screen transitions for multi-screen applications by utilizing hybrid routing configurations, enabling platform-native animations and correct back button handling distinct from standard web SPA routing.

Related Skills

Explore More Software Engineering Skills→
openwebfopenwebf
2.5k

webf-quickstart

Scaffold a Vite-based frontend and load it into WebF Go for testing.

Official
Intermediate
gounthargounthar

expo-router-expert

Configure Expo Router file-based routing with dynamic routes and layouts.

Community
Advanced
alslimanyalslimany

swiftui-ui-patterns

Provide standardized SwiftUI patterns for navigation, layout, and state management.

Community
Intermediate
maxkishchenko2015maxkishchenko2015

flutter-navigation

Implement Flutter navigation and routing with Navigator API, go_router, or auto_route.

Community
Advanced