mobile-components
A library of touch-optimized UI components for mobile development, featuring common patterns like swipe actions and bottom navigation.
Install
mkdir -p .claude/skills/mobile-components && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/8211" && unzip -o skill.zip -d .claude/skills/mobile-components && rm skill.zipInstalls to .claude/skills/mobile-components
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Mobile-first UI components including bottom navigation, bottom sheets, pull-to-refresh, and swipe actions. Touch-optimized with proper gesture handling.Key capabilities
- →Implement touch-optimized bottom navigation
- →Create gesture-controlled bottom sheets
- →Add pull-to-refresh functionality
- →Enable swipe-to-action row interactions
How it works
The skill provides React components that use touch event listeners to track coordinates and apply CSS transforms for native-feeling gesture interactions.
Inputs & outputs
When to use mobile-components
- →Implementing bottom navigation
- →Adding pull-to-refresh functionality
- →Creating swipe-to-delete actions
About mobile-components
Provides pre-built, gesture-optimized UI components for mobile frameworks. It handles complex touch interactions to ensure a native feel for bottom sheets and navigation.
Mobile-first UI components including bottom navigation, bottom sheets, pull-to-refresh, and swipe actions. Touch-optimized with proper gesture handling.
When not to use it
- →Desktop-only applications without mobile requirements
Prerequisites
Limitations
- →Requires manual body scroll locking during active gestures
- →Must account for device safe areas in CSS
How it compares
It handles complex touch state management and gesture thresholds, which are difficult to implement manually with standard DOM events.
Compared to similar skills
mobile-components side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| mobile-components (this skill) | 3 | 6mo | No flags | Intermediate |
| mobile-developer | 5 | 4mo | No flags | Advanced |
| mobile_engineer | 0 | 2mo | No flags | Advanced |
| mobile-state-management-patterns | 0 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by dadbodgeoff
View all by dadbodgeoff →You might also like
mobile-developer
sickn33
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.
mobile_engineer
Sorravit
Act as a Senior Mobile Engineer. Use when user asks about React Native, Flutter, iOS, Android development, or mobile architecture.
mobile-state-management-patterns
almasumdev
Comparison of mobile state management patterns (MVVM, MVI, TEA, Redux, BLoC, Observable, Compose state, SwiftUI state) and how to choose. Use when designing state flow or evaluating a state library.
tamagui
tamagui
Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with `styled()`, configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/*" imports, "createStyledContext", "variants".
swiftui-liquid-glass
Dimillian
Implement, review, or improve SwiftUI features using the iOS 26+ Liquid Glass API. Use when asked to adopt Liquid Glass in new SwiftUI UI, refactor an existing feature to Liquid Glass, or review Liquid Glass usage for correctness, performance, and design alignment.
heroui-native
heroui-inc
HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when working with HeroUI Native components, installing HeroUI Native, customizing themes, or accessing component documentation. Keywords: HeroUI Native, heroui-native, React Native UI, Uniwind.