skills.rest
nghyane
nghyaneCOMMUNITY
Explore all skills by this author →
Website𝕏@nghyaneGitHub

mobile-ui-patterns

Implements React Native UI components using design tokens, depth cards, and safe area patterns.

3|1|Updated Jan 12, 2026
Search Tags:#theming#design tokens#ui components#react native#expo#mobile ui#safe area
One-click install
npx skills add https://github.com/nghyane/VSTEP --skill mobile-ui-patterns-nghyane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-ui-patterns
Source: https://github.com/nghyane/VSTEP/tree/main/apps/mobile-v2/.agents/skills/mobile-ui-patterns
Command: npx skills add https://github.com/nghyane/VSTEP --skill mobile-ui-patterns-nghyane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mobile developers often hardcode colors, spacing, and typography values, causing visual inconsistency between the React Native app and the web frontend. This Skill enforces a shared design token system and reusable component patterns so every screen matches the VSTEP design language. ## Core Features & Use Cases - Design Tokens: Centralized colors, spacing, radius, and typography from src/theme/colors.ts, synced with the frontend-v3 web theme, including skill-specific and gamification palettes. - Reusable Components: DepthCard, DepthButton, HapticTouchable, Mascot, SpiderChart, GameIcon, and SkillIcon with defined variants, sizes, and usage rules. - Layout Patterns: Safe area handling, scrollable screens, fixed bottom CTAs, and staggered fade-in animations, plus explicit anti-patterns to avoid. - Use Case: When building a new exam results screen, use DepthCard with skill colors for each section, a SpiderChart for score visualization, and a fixed bottom DepthButton CTA with proper safe area padding. ## Quick Start Create a new mobile screen for the listening practice results using the design tokens, DepthCard components, and safe area layout patterns.

Frequently Asked Questions about mobile-ui-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use design tokens in React Native components?▼

Import colors, spacing, radius, fontSize, and fontFamily from the theme module and reference them in styles instead of hardcoding values. For example, use colors.light.primary and spacing.base rather than hex strings or raw numbers.

How to add haptic feedback to buttons in Expo React Native?▼

Use the HapticTouchable component instead of TouchableOpacity to get haptic feedback on press. It also supports a scalePress prop for scale animations and a haptic prop to disable feedback when needed.

Does the Mascot component support animations?▼

Yes, the Mascot component supports float, bounce, pop, and none animation modes across ten named variants like hero, happy, and levelup. Use it sparingly on onboarding screens, empty states, and celebrations, never as a looping background element.

How do I handle safe area insets for scrollable screens?▼

Use useSafeAreaInsets from react-native-safe-area-context and add insets.bottom plus spacing to the ScrollView contentContainerStyle paddingBottom. Fixed bottom buttons need the same inset padding to avoid overlapping system UI.

When should I use SpiderChart for skill scores?▼

Use SpiderChart to visualize Listening, Reading, Writing, and Speaking scores on a 0-10 scale with current and target polygons. It should only be shown after the learner has completed at least five exams.

Related Skills

Explore More Software Engineering Skills→
FutureAtomsFutureAtoms
1

typography-2026-playful-claymorphism

Provide rounded font pairings and design tokens for React Native Claymorphism systems.

Community
Intermediate
passionseedpassionseed
2

ui-worker

Implement React Native UI screens and navigation wiring in Expo Router projects.

Official
Intermediate
ayushrathore1ayushrathore1

Design System Patterns

Manage design tokens and theming for multi-platform UI foundations.

Community
Advanced
babuallybabually
1

uniwind

Configure Tailwind CSS v4 styling for React Native and Expo applications.

Community
Advanced