Stats
Actions
Tags
From mobile-first-design
Designs responsive web interfaces using mobile-first CSS with media queries, touch-friendly elements, progressive enhancement, and performance guidelines for mobile-optimized sites.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mobile-first-design:mobile-first-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design interfaces starting with mobile as the foundation, then enhance for larger screens.
Design interfaces starting with mobile as the foundation, then enhance for larger screens.
| 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 |
/* 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;
}
}
/* Minimum touch target: 48x48px */
.button {
min-height: 48px;
min-width: 48px;
padding: 12px 24px;
}
/* Adequate spacing */
.list-item {
padding: 16px;
margin-bottom: 8px;
}
| Metric | Target |
|---|---|
| First Contentful Paint | <3s on 3G |
| JS bundle | <100KB gzipped |
| Total page weight | <500KB |
<!-- 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 -->
npx claudepluginhub secondsky/claude-skills --plugin mobile-first-designDesigns for 320px viewport and thumb-zone reachability first, then progressively enhances for larger viewports. Use when building responsive layouts to avoid desktop-first adaptation.
Designs adaptive layouts and interactions for all screen sizes, input methods, and devices using breakpoints, fluid scaling, patterns, and accessibility checks.
Implements responsive web layouts using mobile-first strategies, min-width breakpoints, fluid CSS Grid, container queries, srcset/picture images, 44x44px touch targets, and mobile-adapted tables.