secondsky/claude-skills539 installs
mobile-first-design
Designs responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing for mobile users, or implementing adaptive layouts.
How do I install this agent skill?
npx skills add https://github.com/secondsky/claude-skills --skill mobile-first-designIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill is a documentation resource providing guidelines and CSS/HTML snippets for mobile-first design. It contains no executable scripts, network requests, or sensitive file access.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
1/1 file flagged
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
Mobile-First Design
Design interfaces starting with mobile as the foundation, then enhance for larger screens.
Breakpoints
| Name | Width | Devices |
|---|---|---|
| Mobile | 320-480px | iPhone SE, small Android |
| Tablet | 481-768px | iPad mini |
| Desktop | 769-1024px | iPad Pro, laptops |
| Large | 1025px+ | Desktop monitors |
Mobile-First CSS
/* Base styles (mobile) */
.container {
padding: 1rem;
}
.nav {
display: none; /* Hidden on mobile */
}
.nav-toggle {
display: block; /* Hamburger visible */
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 720px;
margin: 0 auto;
}
.nav {
display: flex;
}
.nav-toggle {
display: none;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
Touch-Friendly Design
/* Minimum touch target: 48x48px */
.button {
min-height: 48px;
min-width: 48px;
padding: 12px 24px;
}
/* Adequate spacing */
.list-item {
padding: 16px;
margin-bottom: 8px;
}
Performance Requirements
| Metric | Target |
|---|---|
| First Contentful Paint | <3s on 3G |
| JS bundle | <100KB gzipped |
| Total page weight | <500KB |
Progressive Enhancement
<!-- Layer 1: Semantic HTML (works without CSS/JS) -->
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
<!-- Layer 2: CSS enhances appearance -->
<!-- Layer 3: JS adds interactivity -->
Best Practices
- Start design at 320px width
- Use relative units (rem, %, vw)
- Test on real devices
- Optimize images for mobile
- Minimize JavaScript for initial load
- Ensure readable text without zooming
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/secondsky/claude-skills/mobile-first-design">View mobile-first-design on skillZs</a>