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
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
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 generate production-ready ExtendScript code to automate batch Photoshop workflows, process hundreds of assets with consistent results, and build custom image processing pipelines. Claude helps you debug complex scripts, optimize for performance, and solve asset management challenges without requiring deep ExtendScript expertise.
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
Debug, optimize, and troubleshoot Blender Python scripts, add-ons, and automation workflows with precision. This skill analyzes error messages, suggests performance improvements, and provides API best practices to help you build robust Blender tools and custom workflows.
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
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