Agent skill

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.

View SKILL.md on GitHub Repository
Stars 109
Forks 14

Install this agent skill to your Project

npx add-skill https://github.com/secondsky/claude-skills/tree/main/plugins/mobile-first-design/skills/mobile-first-design

SKILL.md

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

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

css
/* 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

html
<!-- 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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

secondsky/claude-skills

skill-name

[TODO: Write comprehensive description in third-person. Start with "This skill provides..." or "This skill should be used when..."] [TODO: Add "Use when" scenarios - specific situations where Claude should use this skill] [TODO: Add keywords - technologies, use cases, error messages that should trigger this skill]

109 14
Explore
secondsky/claude-skills

websocket-implementation

Implements real-time WebSocket communication with connection management, room-based messaging, and horizontal scaling. Use when building chat systems, live notifications, collaborative tools, or real-time dashboards.

109 14
Explore
secondsky/claude-skills

ai-sdk-ui

109 14
Explore
secondsky/claude-skills

bun-nextjs

This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.

109 14
Explore
secondsky/claude-skills

bun-sqlite

Use for bun:sqlite, SQLite operations, prepared statements, transactions, and queries.

109 14
Explore
secondsky/claude-skills

bun-sveltekit

Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs

109 14
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results