# Responsive Native

> Skill — Responsive Native UI & Platform-Specific Design

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

---


# Skill — Responsive Native UI & Platform-Specific Design

## When this skill activates
This skill activates when designing adaptive mobile interfaces, implementing platform-specific UX patterns, ensuring accessibility, handling gestures, or supporting diverse screen sizes including tablets and foldables.

## Mandatory actions when this skill is active

### Before writing any code
1. Define responsive breakpoints and layout strategies for phone, tablet, foldable, and landscape orientations
2. Review platform design guidelines (Apple HIG, Material Design) to ensure platform-appropriate patterns
3. Establish accessibility requirements: screen reader support, dynamic type scaling, color contrast, touch target sizes
4. Plan gesture handling strategy considering platform conventions (iOS swipe gestures vs Android navigation patterns)

### During implementation
- Use platform-appropriate navigation patterns (iOS tab bar + navigation stack, Android bottom nav + drawer)
- Implement safe area handling for notched devices (SafeAreaView, WindowInsets, notch cutouts)
- Support dynamic type scaling — use relative font sizes, test with largest accessibility sizes
- Implement proper touch target sizes (minimum 44x44pt iOS, 48x48dp Android) with adequate spacing
- Use semantic colors and avoid hardcoded values to support dark mode automatically
- Implement platform-specific gesture handlers (swipe back on iOS, hardware back button on Android)
- Handle keyboard interactions properly (dismiss on scroll, avoid keyboard covering inputs, proper focus management)

### After implementation
- Test on multiple screen sizes: smallest supported phone, largest phone, tablet, foldable (if applicable)
- Verify accessibility with screen readers (VoiceOver, TalkBack), ensure all interactive elements are labeled
- Test with maximum dynamic type size settings and ensure UI remains functional
- Validate gesture handling: swipe navigation, pull to refresh, long press actions work intuitively
- Check dark mode appearance, ensure proper contrast and no hardcoded light-mode colors

## Self-check before task completion
- [ ] Layout adapts correctly across all target screen sizes without clipping or awkward spacing
- [ ] Platform-specific patterns are used (no Android-style navigation on iOS, and vice versa)
- [ ] Accessibility score passes WCAG 2.1 AA minimum (contrast ratios, touch targets, screen reader support)
- [ ] Safe areas are properly handled on devices with notches, rounded corners, and home indicators
- [ ] Gestures work intuitively and don't conflict with system gestures or platform conventions
- [ ] Dynamic type scaling is supported with proper layout adjustments for large text sizes