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
Generate polished broadcast scripts from talking points, verify facts against sports data in real time, and prepare anchors with comprehensive interview prep including player history and context. You'll produce show-ready scripts with proper pacing, tone optimization for on-air delivery, and talking points for live ad-libs.
by majiayu000
You can analyze entire Android Jetpack Compose codebases or specific modules to uncover architectural and performance issues. The skill scans your source code against four critical categories—performance, state management, side effects, and composable API quality—scoring each from 0–10 and delivering an evidence-based markdown report that prioritizes the most impactful fixes first.
by eternaljust
You can debug, write, and optimize Python scripts for Cinema 4D with structured workflows and production-ready templates. This skill helps you resolve API errors, improve script performance, and automate complex 3D workflows with confidence, reducing iteration time and minimizing runtime issues in production pipelines.
by majiayu000
You can structure complex motion graphics projects by decomposing compositions into layers, sequences, and timing breakdowns before implementation. Claude helps you document creative direction, plan animation strategies, and create comprehensive production briefs that eliminate ambiguity and reduce After Effects rework.
by majiayu000
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
You create professional video scripts for digital news segments that balance journalistic integrity with audience engagement. The skill generates platform-specific content tailored to TikTok, YouTube, LinkedIn, or broadcast formats, complete with timing cues, B-roll suggestions, and retention hooks. Each script maintains editorial standards while maximizing viewer completion rates and social sharing potential.
by majiayu000
Transform raw news copy into professional radio scripts formatted for on-air delivery with precision timing, strategic pause and emphasis cues, and spontaneous ad-lib prompts. You get industry-standard formatting that anchors can read confidently under studio pressure while sounding natural and engaging. Every script fits your broadcast window exactly, with built-in coaching notes to elevate anchor performance.
by majiayu000
Convert raw news wire copy and story notes into polished, anchor-ready scripts with proper pacing, vocal tone guidance, and delivery cues. You get timing estimates, emphasis markers, pronunciation guides, and transition language that keeps listeners engaged and maintains your station's voice throughout every segment.
by majiayu000