Mobile Responsiveness

Covers the essentials for building mobile-first interfaces without making you hunt through docs. You get standard breakpoint patterns in both vanilla CSS and Tailwind, fluid typography with clamp, a swipeable component with touch event handling, and a solid mobile nav pattern with backdrop. The safe area insets section is especially useful if you're dealing with iOS notches and home indicators. Includes a useMediaQuery hook that actually handles cleanup properly. It's all copy-paste ready code rather than theory, which is what you want when you're just trying to make something work across screen sizes. The mobile-first approach is baked into the examples, so you're not retrofitting responsiveness later.

skills.sh installs: 1.4K
GitHub stars: 296
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hoodini/ai-agents-skills --skill mobile-responsiveness --agent claude-code

Installs into .claude/skills of the current project.

Files

Mobile Responsiveness

Build responsive, mobile-first web applications.

Mobile-First Breakpoints

/* Mobile first - no media query needed for mobile base */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Large desktop */
@media (min-width: 1280px) {
  .container {
    max-width: 1400px;
  }
}

Tailwind Breakpoints

<div className="
  p-4          /* Mobile: padding 1rem */
  md:p-8       /* Tablet 768px+: padding 2rem */
  lg:p-12      /* Desktop 1024px+: padding 3rem */
  xl:max-w-6xl /* Large 1280px+: max-width */
">
  <h1 className="
    text-2xl     /* Mobile */
    md:text-3xl  /* Tablet */
    lg:text-4xl  /* Desktop */
  ">
    Responsive Heading
  </h1>
</div>

Fluid Typography

:root {
  /* Fluid font size: 16px at 320px viewport, 20px at 1200px viewport */
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  
  /* Fluid heading */
  --font-size-h1: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

SKILL.md on GitHub