skills.rest
atemaguer
atemaguerCOMMUNITY
Explore all skills by this author →
GitHub

building-native-ui

Create native-feeling Expo Router interfaces with consistent layout and navigation rules.

Updated Aug 27, 2026
Search Tags:#responsive design#navigation#react native#expo#expo router#mobile ui
One-click install
npx skills add https://github.com/atemaguer/bfloat-ide --skill building-native-ui-atemaguer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/atemaguer/bfloat-ide/tree/main/resources/skills/building-native-ui
Command: npx skills add https://github.com/atemaguer/bfloat-ide --skill building-native-ui-atemaguer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build native-feeling Expo and React Native interfaces with consistent layout, navigation, responsiveness, and styling rules, so screens stay polished and maintainable as the app grows.

Core Features & Use Cases

  • Expo Router patterns: Organize app screens with stacks, tabs, modals, sheets, and route groups in a way that matches native app conventions.
  • Responsive mobile UI: Use scroll views, safe-area aware layouts, flexbox, and window-dimension handling to keep screens usable on different device sizes.
  • Apple-style interaction design: Apply native navigation behaviors, context menus, previews, haptics, glass effects, and smooth state transitions for a more premium experience.
  • Practical use case: When creating a new settings screen, onboarding flow, or tabbed app section, this Skill provides the structure and styling guidance needed to ship a clean Expo UI without reinventing core patterns.

Quick Start

Ask for a new Expo Router screen that follows these native UI guidelines, including responsive layout, correct navigation structure, and Apple-style styling.

Frequently Asked Questions about building-native-ui

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

FAQPage Schema
How do I structure Expo Router navigation for tabs, stacks, and modals?▼

To build responsive mobile UI in React Native, use scroll views, safe-area aware layouts, flexbox, and window-dimension handling. This ensures screens remain usable and adapt correctly across different mobile device sizes.

How do I build a native-feeling settings screen in React Native?▼

Yes, you can apply Apple Human Interface Guidelines to Expo apps by using native navigation behaviors, context menus, haptics, and glass effects. This provides a premium interaction experience while maintaining compliance with iOS design standards.

What is the best way to handle safe areas in an Expo Router app?▼

The best way to handle safe areas in an Expo Router app is by implementing safe-area aware layouts. This prevents UI elements from overlapping device notches or home indicators, keeping screens polished and usable.

Does this Skill work for building complex onboarding flows in Expo?▼

Yes, this Skill works for building onboarding flows in Expo by providing the necessary structure and styling guidance. It helps ship clean, native-feeling UIs for onboarding without reinventing core navigation patterns.

Related Skills

Explore More Software Engineering Skills→
anton-abyzovanton-abyzov
156

expo-workflow

Configure Expo SDK 54+ projects for EAS Build and Update workflows.

Community
Advanced
J03Fr0stJ03Fr0st

frontend-ui-engineering

Create accessible, responsive UI components adhering to WCAG 2.1 AA standards.

Community
Advanced
Prisma-Labs-DevPrisma-Labs-Dev
299

ios-ui-craft

Create SwiftUI interfaces with Liquid Glass API and haptic feedback.

Official
Advanced
gounthargounthar

expo-router-expert

Configure Expo Router file-based routing with dynamic routes and layouts.

Community
Advanced