aj-geddes/mobile-first-design
skills/mobile-first-design/SKILL.md
Design for mobile devices first, then scale up to larger screens. Create responsive interfaces that work seamlessly across all device sizes.
$ install --global
skillsauthnpx skillsauth add aj-geddes/useful-ai-prompts mobile-first-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 2, 2026, 2:40 AM66.2s6 files scanned
SKILL.md
- name:
- mobile-first-design
- description:
- >
Mobile-First Design
Table of Contents
- Overview
- When to Use
- Quick Start
- Reference Guides
- Best Practices
Overview
Mobile-first design prioritizes small screens as the starting point, ensuring core functionality works on all devices while leveraging larger screens for enhanced experience.
When to Use
- Web application design
- Responsive website creation
- Feature prioritization
- Performance optimization
- Progressive enhancement
- Cross-device experience design
Quick Start
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)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents | |---|---| | Responsive Design Implementation | Responsive Design Implementation | | Mobile Performance | Mobile Performance | | Progressive Enhancement | Progressive Enhancement |
Best Practices
✅ DO
- Design for smallest screen first
- Test on real mobile devices
- Use responsive images
- Optimize for mobile performance
- Make touch targets 44x44px minimum
- Stack content vertically on mobile
- Use hamburger menu on mobile
- Hide non-essential content on mobile
- Test with slow networks
- Progressive enhancement approach
❌ DON'T
- Assume all mobile users have fast networks
- Use desktop-only patterns on mobile
- Ignore touch interaction needs
- Make buttons too small
- Forget about landscape orientation
- Over-complicate mobile layout
- Ignore mobile performance
- Assume no keyboard (iPad users)
- Skip mobile user testing
- Forget about notches and safe areas
Related Skills
aj-geddes/zero-trust-architecture
development
VerifiedTrustedCommunity
Implement Zero Trust security model with identity verification, microsegmentation, least privilege access, and continuous monitoring. Use when building secure cloud-native applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/xss-prevention
development
VerifiedTrustedCommunity
Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/wireframe-prototyping
tools
VerifiedTrustedCommunity
Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/websocket-implementation
development
VerifiedTrustedCommunity
Implement real-time bidirectional communication with WebSockets including connection management, message routing, and scaling. Use when building real-time features, chat systems, live notifications, or collaborative applications.
154SKILL.mdUpdated Apr 1, 2026