Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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.
npx claudepluginhub secondsky/claude-skills --plugin mobile-first-designHow 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.
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.
Builds responsive web layouts using Flexbox, CSS Grid, media queries, and mobile-first approach for multi-device compatibility and flexible UIs.
Share bugs, ideas, or general feedback.
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 -->