NativePHP EDGE Components
Renders truly native UI elements in mobile applications using the Element Definition and Generation Engine (EDGE) within the NativePHP ecosystem.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Automated JSON structure generation for platform-specific UI rendering via Blade middleware
- Implementation guidance for native navigation components including TopBar, BottomNav, and SideNav
- Guidelines for utilizing Material Design icons and native action events
- Integration strategies for using native UI components within Inertia.js, Vue, and React layouts
- Standardized patterns for handling device-specific safe areas and viewport-fit configurations
Use cases
- Configuring mobile layouts to correctly handle device notches, rounded corners, and system indicators
- Developing mobile applications with Laravel and NativePHP that require a platform-native look and feel
- Integrating native navigation chrome into modern SPA frameworks within a PHP-based mobile environment
FAQ
Can I use this skill with Inertia.js, Vue, or React?
Yes. This skill includes specific integration strategies for modern frontend stacks, ensuring EDGE components are correctly placed in Blade layout files to be processed before the JavaScript framework renders.
When should I use this skill?
You should use this skill when building mobile apps with NativePHP and you need to implement native-feeling components such as TopBars, BottomNavs, SideNavs, or Floating Action Buttons that go beyond standard web views.
What does the NativePHP EDGE Components skill do?
This skill equips Claude with specialized knowledge to implement native UI elements in NativePHP mobile applications. It uses the Element Definition and Generation Engine (EDGE) to translate Blade components into platform-specific JSON structures for iOS and Android.
What specific UI components can I build with this skill?
It provides implementation guidance for TopBar navigation with action buttons, BottomNav with badges, multi-level SideNav drawers, Floating Action Buttons (FAB), and Material Design icon integration.
How does this skill handle mobile safe areas?
The skill provides automated guidance for handling notches and home indicators using the 'nativephp-safe-area' CSS class, specific CSS variables for custom layouts, and viewport-fit configurations for edge-to-edge rendering.
Related skills
NativePHP JavaScript Integration
Integrates native mobile device functionality like cameras, scanners, and biometrics into JavaScript-based frontend frameworks within the NativePHP ecosystem.
Mobile Development212 ptsNativePHP Events
Handles asynchronous events from native device features like the camera, scanner, and biometrics within Laravel and Livewire applications.
Mobile Development212 ptsNativePHP Configuration
Configures NativePHP mobile applications by managing environment variables, app permissions, and platform-specific build settings.
Mobile Development212 pts