responsive-design
3
总安装量
3
周安装量
#59974
全站排名
安装命令
npx skills add https://github.com/vanman2024/ai-dev-marketplace --skill responsive-design
Agent 安装分布
opencode
3
gemini-cli
3
claude-code
3
github-copilot
3
codex
3
amp
3
Skill 文档
Responsive Design
Comprehensive skill for building responsive layouts in React Native/Expo mobile apps.
Overview
Mobile responsive design requires:
- Safe area handling (notch, home indicator)
- Screen size adaptation
- Platform-specific styling (iOS vs Android)
- Orientation changes
- Tablet support
Use When
This skill is automatically invoked when:
- Building responsive layouts
- Handling safe areas
- Supporting multiple screen sizes
- Implementing platform-specific UI
Available Templates
| Template | Description |
|---|---|
templates/responsive.ts |
Responsive dimension utilities |
templates/safe-view.tsx |
Safe area wrapper component |
templates/typography.tsx |
Responsive text components |
templates/platform-styles.ts |
Platform-specific styles |
Key Utilities
// From templates/responsive.ts
wp(50); // 50% of screen width
hp(25); // 25% of screen height
moderateScale(16); // Scaled font size
isTablet; // Device type detection
Best Practices
- Always wrap root with SafeAreaProvider
- Use percentages and flex for layout
- Follow platform conventions (iOS/Android)
- Test on both small and large devices