skills.rest
thejordanleopold
thejordanleopoldCOMMUNITY
Explore all skills by this author →
Website𝕏@jordansleopoldGitHub

expo-app-design

Blueprint Expo app design with file-based routing, native navigation, and motion effects.

4|Updated Apr 9, 2026
Search Tags:#navigation#animations#react-native#expo#design-patterns#expo-router#native-ui
One-click install
npx skills add https://github.com/thejordanleopold/claude-code-skills-distilled --skill expo-app-design-thejordanleopold
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-app-design
Source: https://github.com/thejordanleopold/claude-code-skills-distilled/tree/main/expo-app-design
Command: npx skills add https://github.com/thejordanleopold/claude-code-skills-distilled --skill expo-app-design-thejordanleopold

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building mobile apps with Expo often requires assembling routing, navigation, and platform-specific UI patterns from scratch, which slows development and risks inconsistencies.

Core Features & Use Cases

  • File-based routing with Expo Router to structure screens and navigation
  • Native tabs, stacks, modals, and form sheets for platform-consistent navigation
  • Reanimated animations and scroll-driven effects to enhance UX
  • Media handling, storage patterns, and visual effects such as blur and glass
  • Platform-specific design patterns for iOS and Android, including SF Symbols integration and haptics guidance
  • Advanced UI patterns including 3D graphics support and responsive layout guidelines

Quick Start

Create a new Expo app and apply the expo-app-design guidelines to configure routing, navigation, and native UI patterns.

Frequently Asked Questions about expo-app-design

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

FAQPage Schema
How do I structure navigation and routing in an Expo React Native app?▼

File-based routing with Expo Router structures Expo navigation by defining screens inside an app/ directory, using _layout.tsx to configure native stacks, tabs, and modals.

How do I add motion effects and scroll-driven animations in React Native?▼

Reanimated enables scroll-driven animations and motion effects in Expo apps, providing blueprint patterns for enhancing native UI and UX without native code overrides.

What is the best way to handle platform-specific UI patterns for iOS and Android in Expo?▼

Applying process.env.EXPO_OS platform guards separates iOS and Android design patterns in Expo, enabling distinct native UI elements like SF Symbols and haptics guidance.

Can I use blur effects and form sheets with Expo Router?▼

Yes, Expo Router supports native modals and form sheets, and the design blueprint prescribes visual effects like blur and glass for polished platform-consistent navigation.

Does this Expo app design blueprint include media handling and storage patterns?▼

Yes, the blueprint covers media handling and storage patterns, enforcing expo-image for rendering while including guardrails for accessibility and performance optimization.

Related Skills

Explore More Software Engineering Skills→
TMHSDigitalTMHSDigital
2

mobile-project-setup

Scaffold an Expo React Native project with TypeScript and file-based routing.

Community
Intermediate
SovranBitcoinSovranBitcoin
23

building-native-ui

Build native iOS and Android UI patterns with Expo Router.

Official
Advanced
msichtermanmsichterman

building-native-ui

Guide building native UI in Expo Router apps with patterns and templates.

Community
Advanced
magnusrodsethmagnusrodseth
2

building-native-ui

Build native iOS and Android UIs with Expo Router.

Community
Advanced