skills.rest
alemamdevs
alemamdevsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nativephp-webview-to-native

Converts NativePHP web-view screens into native SuperNative NativeComponent screens with EDGE elements.

Updated Sep 10, 2026
Search Tags:#php#migration#mobile#livewire#native ui#nativephp#edge components
One-click install
npx skills add https://github.com/alemamdevs/expense-tracker --skill nativephp-webview-to-native-alemamdevs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nativephp-webview-to-native
Source: https://github.com/alemamdevs/expense-tracker/tree/main/.agents/skills/nativephp-webview-to-native
Command: npx skills add https://github.com/alemamdevs/expense-tracker --skill nativephp-webview-to-native-alemamdevs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? NativePHP Mobile v4 renders fully native UI (SwiftUI/Compose) from PHP, but many apps still run legacy web-view screens built with Livewire, Inertia, or Blade. This Skill migrates those screens incrementally into native NativeComponent classes without a big-bang rewrite. ## Core Features & Use Cases - Incremental Migration Strategy: Inventories web routes, Livewire components, and Inertia pages, then converts one screen at a time while web and native stacks coexist via exitToWeb() and native routes. - Mapping Tables: Provides Livewire-to-SuperNative and HTML-to-EDGE conversion tables covering components, events, navigation, chrome elements, fonts, and icons. - Device API Conversion: Replaces JavaScript #nativephp device calls with PHP facades and #[On] event listeners that auto-teardown on unmount. - Use Case: A NativePHP app has a Livewire settings screen and an Inertia item list rendering in the web view. The Skill scaffolds native screens with native:make, registers Route::native() routes, converts templates to EDGE elements, and generates tests with native:make-test. ## Quick Start Convert my Livewire item list screen into a native NativeComponent screen and register it with Route::native.

Frequently Asked Questions about nativephp-webview-to-native

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

FAQPage Schema
How do I convert a Livewire component to a native NativePHP screen?▼

Scaffold a screen with php artisan native:make, move public properties over as-is, register it with Route::native(), and convert the template using EDGE elements. Replace wire:model with native:model and wire:click with @tap.

How to migrate NativePHP web-view screens to native UI incrementally?▼

Inventory all web routes, Livewire components, and Inertia pages, then convert one screen at a time starting with simple high-traffic screens. Native and web stacks coexist, so native screens can call exitToWeb() to reach remaining legacy screens.

Can web-view and native screens coexist in a NativePHP app?▼

Yes, the web view remains available during migration so both stacks run side by side. Native screens jump to web screens with $this->exitToWeb('/legacy-route'), and web screens can link into native routes.

What HTML elements map to EDGE components in NativePHP?▼

Divs become native:column or native:row, text becomes native:text, inputs become native:outlined-text-input, lists become native:list with native:list-item, and modals become native:modal or native:bottom-sheet. Raw HTML tags render nothing natively.

Why does my converted NativePHP screen render nothing?▼

Raw HTML tags render nothing in native screens; every element must be an EDGE component. Also verify Tailwind classes against the supported subset, since arbitrary CSS-dependent classes do not apply.

What if a native capability like a map or rich editor is missing?▼

Check the NativePHP plugin marketplace for an existing plugin, or build a custom plugin with php artisan native:plugin:create. Use native:web-view only as a last resort rather than leaving the screen in the web view.

Related Skills

Explore More Software Engineering Skills→
enigmaicon-engenigmaicon-eng
1

codebase-scanning

Extract product features, platform type, tech stack, and third-party integrations from codebases.

Community
Advanced
alsmadi99alsmadi99

react-native-expert

Build and optimize cross-platform React Native apps with Expo SDK.

Community
Advanced
qashsolutionsqashsolutions
1

skill-guided-home

Refactor the dashboard home into a time-aware, conversational interface with prioritized tasks and voice input.

Community
Advanced
maurodf0maurodf0

webf-routing-setup

Configure hybrid routing in WebF with native screen transitions.

Community
Advanced