Mobile first design

Skill VRIL-LABS/skill-jam/skills/ai-ml/claude-skills-main/claude-skills-main/plugins/mobile-first-design/skills/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.From its SKILL.md

Install

npx -y skills add VRIL-LABS/skill-jam --skill mobile-first-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.9 KB, 490 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.