skillboardUpdated every 6 hours
skillboardDesign for mobile devices first, then scale up to larger screens. Create responsive interfaces that work seamlessly across all device sizes.
Mobile-first design prioritizes small screens as the starting point, ensuring core functionality works on all devices while leveraging larger screens for enhanced experience.
Minimal working example:
Mobile-First Approach:
Step 1: Design for Mobile (320px - 480px)
- Constrained space forces priorities
- Focus on essential content and actions
- Single column layout
- Touch-friendly interactive elements
Step 2: Enhance for Tablet (768px - 1024px)
- Add secondary content
- Multi-column layouts possible
- Optimize spacing and readability
- Take advantage of hover states
Step 3: Optimize for Desktop (1200px+)
- Full-featured experience
- Advanced layouts
- Rich interactions
- Multiple columns and sidebars
---
## Responsive Breakpoints:
Mobile: 320px - 480px
- iPhone SE, older phones
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents | |---|---| | Responsive Design Implementation | Responsive Design Implementation | | Mobile Performance | Mobile Performance | | Progressive Enhancement | Progressive Enhancement |
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/mobile-first-design · pinned to the source commit
git clone https://github.com/aj-geddes/useful-ai-prompts.git
cd useful-ai-prompts
git checkout 3f5182cfd739fc113f4af5244a1cf342ad7f7911
mkdir -p ".claude/skills/mobile-first-design"
cp -r "skills/mobile-first-design" ".claude/skills/mobile-first-design"Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
Scanner static-checks@0.1.0 · commit 3f5182cfd739. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.