Skills
.Work. You
Rest

webf-routing-setup

Official

Seamless navigation for WebF apps.

Software Engineering#react#routing#vue#navigation#webf#hybrid routing
AuthorVIDLG
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: webf-routing-setup
Download link: https://github.com/VIDLG/webfly/archive/main.zip#webf-routing-setup

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.