Building Ui
Build beautiful mobile apps with Expo Router, native controls, and animations
What You Can Do
You'll learn to structure mobile apps using Expo Router's file-based routing system, implement native iOS controls like tabs, switches, and pickers, create smooth animations with Reanimated, and apply advanced styling with blur effects, gradients, and glassmorphism. This skill covers everything from routing fundamentals to production-ready patterns for building polished, performant applications.
Features
Organize your app with dynamic routes, query parameters, route groups, and folder conventions
Create native bottom tab navigation with NativeTabs and migrate from JavaScript tab solutions
Integrate iOS controls including Switch, Slider, SegmentedControl, DateTimePicker, and Picker components
Build entering, exiting, layout, and scroll-driven animations using React Native Reanimated
Apply blur effects, liquid glass morphism, and CSS gradients to create modern UI designs
Implement searchable screens with search bar headers and filtering patterns
Work with camera, audio, video, and file storage in Expo Router apps
Create 3D visualizations and games using WebGPU and Three.js
Example Output
Route Structure Example:
app/
├── (tabs)/
│ ├── index.tsx
│ ├── explore.tsx
│ └── _layout.tsx
├── [id].tsx
└── _layout.tsx
Native Tab Bar Code: Implement smooth native bottom tabs with customizable icons and animations, switching from JavaScript-based solutions to platform-native implementations.
Animation Example: Entering animations that slide components in from edges, layout animations that smoothly transition between states, and scroll-driven animations that respond to user scrolling.
What's Included
- SKILL.md instruction file with Expo Router fundamentals:
- Route structure reference guide with dynamic routing patterns:
- Native tabs implementation guide with iOS 26 features:
- Controls reference for iOS Switch, Slider, SegmentedControl, DateTimePicker:
- Animation patterns using React Native Reanimated:
- Visual effects guide (blur, glass effects, gradients):
- Search bar integration and filtering patterns:
- Media handling (camera, audio, video) workflows:
- Data storage patterns (SQLite, AsyncStorage, SecureStore):
- 3D graphics and WebGPU/Three.js references:
Who It's For
- Mobile app developers building with React Native and Expo
- iOS developers transitioning to cross-platform development
- Frontend engineers creating polished mobile experiences
- Startup founders and full-stack developers prototyping mobile apps
Best For
- Structuring multi-screen mobile applications with file-based routing
- Implementing native tab navigation and iOS UI components
- Creating smooth animations and visual effects for modern interfaces
- Building production-ready apps with advanced styling and glassmorphism
- Integrating media handling, search, and data storage features
You might also like
Analyze your Premiere Pro projects to identify performance bottlenecks, memory issues, and rendering inefficiencies. You'll receive targeted optimization recommendations, automation scripts, and troubleshooting guidance tailored to your specific system configuration and project complexity. Claude becomes your technical production consultant, helping you resolve crashes, slow timelines, and resource conflicts.
by majiayu000
Get instant expert guidance on setting up remote broadcast gear, troubleshooting signal problems, and solving connectivity issues before they derail your show. You describe your equipment, network conditions, or specific error, and receive actionable diagnostics and step-by-step fixes tailored to your exact broadcast scenario.
by majiayu000
You'll design and implement mobile features with architectural rigor, cross-platform considerations, and edge-case handling built-in. This skill generates complete system designs, platform-specific implementation strategies, performance optimization approaches, and testing frameworks. The output is production-ready guidance spanning iOS and Android with security, offline resilience, and deployment strategies included.
You generate production-ready design briefs from client requirements, automatically check dozens of designs for brand consistency violations, and orchestrate batch workflows with approval checkpoints. This skill ensures every design aligns with your brand guidelines while accelerating your design approval cycle by weeks.
by majiayu000
You can architect scalable component systems in Framer that maintain design consistency across projects. Claude helps you establish reusable patterns, manage component variants systematically, and generate comprehensive design system documentation that bridges design and code.
by majiayu000
You can organize intricate multi-track timelines with nested sequences, manage high-resolution and proxy workflows, and generate detailed technical specifications for multi-format delivery across broadcast, streaming, and archival standards. Claude analyzes your project structure, tracks media dependencies, and creates implementation roadmaps that ensure smooth handoff to colorists, sound designers, and delivery teams.
by majiayu000
Generate polished sports segment scripts complete with stat callbacks, narrative hooks, and compelling angles — in minutes instead of hours. Get interview question briefs with talking points and live ad-lib suggestions that keep your anchors prepared and articulate. Transform raw game data and story ideas into broadcast-ready copy your newsroom will love.
by majiayu000
Generate complete sports news packages in minutes—including researched facts, talking points, interview questions, and live broadcast scripts. You get verified information with proper attribution, multiple story angles, and production-ready content that's camera-and-microphone ready for immediate air.
by majiayu000