メニュー
Premium mobile UI skill for React Native and Expo apps. Enforces native-grade interaction patterns, platform-specific motion, gesture physics, and non-generic visual systems for iOS and Android.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Advanced motion and animation design skill. Covers scroll-storytelling, physics-grade interactions, Three.js/WebGL, GSAP choreography, and cinematic page transitions. Use alongside forge-core when MOTION_DEPTH >= 8 is needed.
Data-dense dashboard and admin panel design skill for AI agents. Enforces information hierarchy, data visualization clarity, high-density layouts, and professional SaaS-grade UI patterns.
Advanced motion and animation design skill for AI agents. Covers scroll-storytelling, physics-grade interactions, Three.js/WebGL, GSAP choreography, and cinematic page transitions. Use alongside bexa when MOTION_DEPTH >= 8 is needed.
Professional web design skill for AI coding agents. Overrides LLM default UI biases. Non-generic, minimalist, animated frontends. Framework-agnostic. Web / SaaS / Product / Portfolio / Editorial.
Agency-grade landing page design skill. High-conversion, brand-matched, animated. Overrides every generic landing page pattern AI defaults to. Produces Awwwards-caliber pages that convert.
| name | bexa-mobile |
| description | Premium mobile UI skill for React Native and Expo apps. Enforces native-grade interaction patterns, platform-specific motion, gesture physics, and non-generic visual systems for iOS and Android. |
| version | 1.2.0 |
Designing for a human holding glass with their thumbs. Every decision — padding, font, tap target, animation — must honor that physical reality.
NATIVE_FIDELITY: 8 (1=Web-wrapper / 10=Indistinguishable from OS)
GESTURE_DEPTH: 7 (1=Tap only / 10=Physics swipe, pinch, long-press)
VISUAL_RICHNESS: 6 (1=Minimal / 10=Rich depth layers)
Thumb Zone: Primary actions in bottom 40% of screen. Destructive actions top. NO hamburger menus.
Touch Targets:
Safe Areas: Always use SafeAreaView. Bottom: 34pt for home indicator. Never place critical content in top 59pt (Dynamic Island zone).
| Level | Size (pt/sp) | Weight |
|---|---|---|
| Display | 34 | 700 |
| Title 1 | 28 | 700 |
| Title 2 | 22 | 600 |
| Headline | 17 | 600 |
| Body | 17 | 400 |
| Footnote | 13 | 400 |
| Caption | 12 | 400 |
Font selection: Sora + DM Sans for iOS feel. Plus Jakarta Sans + Geist for Android feel. Never system defaults only.
When GESTURE_DEPTH >= 5: use react-native-reanimated + react-native-gesture-handler. Never PanResponder.
Spring configuration:
// Premium iOS-like spring
const spring = { damping: 15, stiffness: 150, mass: 0.8 };
// Snappy confirmation
const snap = { damping: 20, stiffness: 300, mass: 0.5 };
Haptics: Every state change triggers haptic feedback.
ImpactFeedbackStyle.LightNotificationFeedbackType.SuccessNotificationFeedbackType.ErrorImpactFeedbackStyle.MediumiOS: Sheets slide up from bottom with spring. Navigation push slides at 85% finger speed. Action completion scales to 0.95 → overshoot release.
Android: Material You ripple on all pressables. BottomSheetModal with snapPoints ['40%','70%','95%']. Shared element transitions on list→detail.
Universal:
Light — Surface: hsl(220 14% 98%) | Card: hsl(0 0% 100%)
Dark — Surface: hsl(220 20% 8%) | Card: hsl(220 20% 12%)
OLED — Background: hsl(0 0% 0%) | Cards remain hsl(220 20% 8%)
Accent: same rules as FORGE core (1 accent, sat ≤ 75%, no AI purple).
expo-image or FastImage. Never plain <Image> in lists.FlashList with estimatedItemSize. FlatList only for < 50 items.useSharedValue + useAnimatedStyle (Reanimated 3). JS thread animations = BANNED.React.memo all list items. useCallback all handlers passed as props.