responsive-design
Installation
SKILL.md
Responsive Design Patterns for React Native
Documentation
This skill has comprehensive documentation:
- Production Examples - Real-world code examples from the codebase
- API Reference - Complete API documentation with official links
- Implementation Patterns - Best practices and anti-patterns
Core Principles
Use useWindowDimensions for reactive layouts and Dimensions.get for static constants. Categorize devices with DeviceDimensionsUtils and adapt layouts with percentage-based sizing and dynamic aspect ratios.
Why: Responsive design ensures optimal user experience across all device sizes (iPhone SE to iPad) by dynamically adapting layouts, images, and spacing. Proper responsive patterns prevent UI breaking on edge cases and create consistent experiences.