# Mobile UI

> Mobile UI design and implementation

- Skill: `ffsshhttiikk/mobile-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ffsshhttiikk/mobile-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ffsshhttiikk/mobile-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: ffsshhttiikk (https://skillmd.com/u/ffsshhttiikk)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ffsshhttiikk/mobile-ui

---


## What I do

- Design intuitive mobile user interfaces
- Implement responsive layouts for various screen sizes
- Create consistent navigation patterns
- Build accessible mobile experiences
- Optimize UI performance
- Design for different platform conventions (iOS vs Android)
- Implement animations and transitions

## When to use me

Use me when:
- Designing new mobile app screens
- Improving existing app usability
- Implementing platform-specific UI patterns
- Creating accessible mobile experiences
- Building custom UI components
- Optimizing UI rendering performance

## Key Concepts

### Platform Design Guidelines
- **iOS**: Apple Human Interface Guidelines (HUD, gesture-driven, depth)
- **Android**: Material Design 3 (material surfaces, motion, theming)
- **Cross-platform**: Balance consistency with platform expectations

### Responsive Layout Principles
```kotlin
// Android ConstraintLayout
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/title"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintWidth_max="600dp" />
        
    <Button
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

### Navigation Patterns
- **Tab-based**: Bottom navigation for equal priorities
- **Stack**: Drill-down navigation
- **Drawer**: Side navigation for many items
- **Modal**: Focused tasks, forms

### Accessibility (a11y)
- Minimum touch targets: 48x48dp
- Color contrast ratios (4.5:1 minimum)
- Screen reader support (TalkBack, VoiceOver)
- Content descriptions for images
- Focus management for navigation

### Animation Principles
- Duration: 200-300ms for most transitions
- Easing: Accelerate/decelerate curves
- Respect motion preferences (reduce motion setting)
- 60fps target for smooth experience