Mobile First Design
- 430 installs
- 202 repo stars
- Updated August 4, 2026
- secondsky/claude-skills
mobile-first-design is a Claude Code skill that teaches responsive interface patterns starting from mobile screens with progressive enhancement for larger devices for developers who need consistent breakpoint-driven CSS.
About
mobile-first-design is a Claude Code skill from secondsky/claude-skills that structures responsive web work around four width tiers: Mobile (320-480px), Tablet (481-768px), Desktop (769-1024px), and Large (1025px+). The skill prescribes mobile-base CSS with min-width media queries so layouts scale up instead of collapsing down. Developers reach for mobile-first-design when building landing pages, dashboards, or component libraries where touch targets, readable type, and fluid grids must work on phones before desktop polish. It pairs naturally with Tailwind, plain CSS, or CSS-in-JS projects and emphasizes constraint-first layout before adding desktop-only enhancements.
- mobile-first-design
Mobile First Design by the numbers
- 430 all-time installs (skills.sh)
- +19 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #1,023 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/secondsky/claude-skills --skill mobile-first-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 430 |
|---|---|
| repo stars | ★ 202 |
| Last updated | August 4, 2026 |
| Repository | secondsky/claude-skills ↗ |
How do you implement mobile-first responsive CSS breakpoints?
Use mobile-first-design for development tasks
Who is it for?
Frontend developers implementing responsive websites who want a documented breakpoint system and mobile-first CSS conventions before adding tablet and desktop rules.
Skip if: Backend-only API work, native mobile app UIKit/SwiftUI projects, or teams that already enforce a complete design-system token package with fixed breakpoints.
When should I use this skill?
A developer asks to build or refactor a responsive layout, optimize for mobile users, or define adaptive breakpoints for a web interface.
What you get
Breakpoint reference table, mobile-base stylesheet patterns, and progressive-enhancement media-query structure for a responsive UI.
- breakpoint reference
- mobile-first CSS scaffold
By the numbers
- Defines 4 named responsive breakpoints from 320px through 1025px+
Files
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
Related skills
Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k
Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16kLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k
Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k
Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198kHow it compares
Choose mobile-first-design over generic frontend-design skills when you need explicit breakpoint widths and mobile-base CSS ordering rather than broad visual styling guidance.
FAQ
What breakpoints does mobile-first-design define?
mobile-first-design defines four tiers: Mobile 320-480px, Tablet 481-768px, Desktop 769-1024px, and Large 1025px+. Developers style the mobile range as the default base and add min-width rules for larger screens.
When should a developer invoke mobile-first-design?
mobile-first-design fits responsive website builds, mobile-user optimization, and adaptive layout work. Invoke it when starting CSS from the smallest screen and layering tablet and desktop enhancements with media queries.