Toolverse
All skills
Testing

webf-routing-setup

by openwebf

Setup hybrid routing with native screen transitions in WebF - configure navigation using WebF routing instead of SPA routing. Use when setting up navigation, implementing multi-screen apps, or when react-router-dom/vue-router doesn't work as expected.

Installation

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

Installation

Quick info

Author
openwebf
Category
Testing
GitHub repo

About this skill

Setup hybrid routing with native screen transitions in WebF - configure navigation using WebF routing instead of SPA routing. Use when setting up navigation, implementing multi-screen apps, or when react-router-dom/vue-router doesn't work as expected.

How to use

  1. Zainstaluj skill webf-routing-setup w swoim projekcie WebF. Upewnij się, że masz już skonfigurowane narzędzia WebF (Vite, npm) i framework (React, Vue lub Svelte).

  2. Zamiast importować routing z react-router-dom lub vue-router, użyj WebFRouter z pakietu @openwebf/react-router. Zaimportuj komponenty Routes, Route i WebFRouter potrzebne do konfiguracji nawigacji.

  3. Zdefiniuj swoje trasy jako osobne komponenty, pamiętając że każda trasa będzie renderowana na oddzielnym ekranie Flutter, a nie jako sekcja jednej strony. Każdy komponent trasy powinien być samodzielny.

  4. Skonfiguruj WebFRouter w głównym komponencie aplikacji, opakowując Routes i Route'y. To zapewni prawidłową obsługę natywnych przejść między ekranami oraz działanie przycisku wstecz na urządzeniach mobilnych.

  5. Przetestuj nawigację między ekranami, sprawdzając czy przejścia używają natywnych animacji platformy (iOS lub Android) zamiast CSS-owych efektów. Upewnij się że przycisk sprzętu do powrotu działa prawidłowo.

  6. Wdróż aplikację na Vercel, Netlify lub inną usługę wspieraną przez WebF, korzystając z tych samych narzędzi i procesów co w tradycyjnym web developmencie.

Related skills

ad-creative

by alirezarezvani

When the user needs to generate, iterate, or scale ad creative for paid advertising. Use when they say 'write ad copy,' 'generate headlines,' 'create ad variations,' 'bulk creative,' 'iterate on ads,' 'ad copy validation,' 'RSA headlines,' 'Meta ad copy,' 'LinkedIn ad,' or

Testing
2863

lean4-theorem-proving

by cameronfreer

Use when developing Lean 4 proofs, facing type class synthesis errors, managing sorries/axioms, or searching mathlib - provides build-first workflow, instance management patterns (haveI/letI), and domain-specific tactics

Testing
9108

differential-review

by trailofbits

Performs security-focused differential review of code changes (PRs, commits, diffs). Adapts analysis depth to codebase size, uses git history for context, calculates blast radius, checks test coverage, and generates comprehensive markdown reports. Automatically detects and

Testing
2510

test-cases

by cexll

This skill should be used when generating comprehensive test cases from PRD documents or user requirements. Triggers when users request test case generation, QA planning, test scenario creation, or need structured test documentation. Produces detailed test cases covering

Testing
2862

playwright-browser-automation

by lackeyjb

Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test

Testing
13130

code-reviewer

by google-gemini

Use this skill to review code. It supports both local changes (staged or working tree) and remote Pull Requests (by ID or URL). It focuses on correctness, maintainability, and adherence to project standards.

Testing
1248