A professional toolkit for building fluid, native-feeling mobile interfaces using Expo Router, React Native, and Apple Human Interface Guidelines.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install native-ui
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install native-ui using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Native UI with Expo Router?
The native-ui skill provides a robust set of patterns and conventions for developing mobile applications that feel truly native. By prioritizing Expo Router for navigation and native OS components over web-based wrappers, it ensures that developers using Openclaw Skills can deliver high-quality user experiences. It covers everything from file-based routing and native tab bars to advanced visual effects like liquid glass and haptic feedback.
This skill is designed to streamline the mobile development lifecycle by recommending modern libraries such as expo-symbols and expo-audio while enforcing best practices for responsiveness and layout. Whether you are building a simple utility or a complex data-driven app, these patterns help maintain a clean architecture and high performance across all mobile platforms.
Native UI with Expo Router Use Cases
- Creating high-performance iOS and Android applications with native navigation stacks.
- Implementing complex routing architectures using the Expo Router file-based system.
- Designing interfaces that strictly follow the Apple Human Interface Guidelines for a premium look and feel.
- Integrating native platform features like SF Symbols, system haptics, and context menus into a React Native workflow.
- Developing responsive mobile layouts that handle safe areas and platform-specific insets automatically.
How Native UI with Expo Router Works
- Initialize the project using Expo Go for immediate feedback or create custom builds for specialized native modules.
- Organize the application structure within the app directory, utilizing folder-based routing and group routes for shared layouts.
- Configure root and nested _layout.tsx files to define navigation hierarchies such as Stack, Tabs, and Modal presentations.
- Utilize specialized hooks like useSearch and components like NativeTabs to access native platform behaviors.
- Apply styling and animations using Reanimated and CSS-in-JS patterns that support haptics and smooth transitions.
- Optimize the user experience by implementing Link Previews and Context Menus for enhanced interactivity.
Native UI with Expo Router Setup
To integrate this skill into your environment, use the following command:
npx clawhub@latest install native-ui
After installation, start your development server with npx expo start and use the Expo Go app to preview your native UI components instantly.
Native UI with Expo Router Data Schema & Taxonomy
The skill follows a strict directory and metadata schema to ensure compatibility with modern mobile development workflows:
| Feature | Convention |
|---|---|
| Routing Root | All route files must reside in the /app directory. |
| Layouts | Use _layout.tsx to define navigation stacks and tab bars. |
| File Naming | Use kebab-case for all source files (e.g., user-profile.tsx). |
| References | Technical docs are stored in /references covering icons, storage, and animations. |
| Aliases | Path aliases in tsconfig.json are preferred over relative imports for cleaner code. |
Native UI with Expo Router Advanced Features
- Support for iOS 26+ features including liquid glass effects and native form sheet detents.
- Implementation of SF Symbols with expo-symbols for animated, system-compliant iconography.
- Advanced interaction patterns such as long-press context menus and interactive Link Previews.
- High-performance 3D visualizations and GPU-accelerated graphics using WebGPU and Three.js.
- Seamless haptic feedback integration via expo-haptics for delightful user interactions.
SKILL.md
Loading
Related Openclaw Skills
Monorepo Management
Efficiently manage multi-package projects and applications using industry-leading tools like Turborepo, Nx, and pnpm workspaces.
Monitor TokenJar
A real-time monitoring dashboard for Uniswap protocol fees that predicts the most profitable moments to execute burns.
Microservices Patterns
A comprehensive guide and pattern library for designing, migrating to, and maintaining robust microservices architectures using Openclaw Skills.
Mermaid Diagrams
A text-to-diagram tool for creating version-controllable software visualizations including flowcharts, ERDs, and sequence diagrams.
Next.js App Router Master
A comprehensive framework of best practices and patterns for building high-performance Next.js applications using the modern App Router architecture.
Node.js Backend Patterns
A complete blueprint for developing secure, scalable, and maintainable Node.js backend services using Express, Fastify, and TypeScript.
Featured*
