mobile-responsiveness_skill

This skill helps you implement responsive, mobile-first layouts and interactions across breakpoints, touch events, and viewport-safe navigation.

74

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill hoodini/ai-agents-skills --skill mobile-responsiveness

SKILL.md5.2 KB

Overview

This skill helps you build responsive, mobile-first web applications that adapt across phones, tablets, and desktops. It provides patterns for breakpoints, fluid typography, touch interactions, mobile navigation, safe-area handling, and viewport configuration. Use the examples to implement robust layouts, touch-friendly components, and accessible mobile menus.

How this skill works

The skill inspects common responsive needs and supplies concise, production-ready patterns: mobile-first CSS breakpoints, Tailwind examples, clamp-based fluid typography, touch event handlers, and a mobile navigation pattern. It also covers safe-area insets and a viewport meta tag. Included hooks and components show how to detect screen sizes and wire up behaviour for different form factors.

When to use it

Implementing a mobile-first layout or defining breakpoints
Creating touch interactions like swipeable cards
Building a mobile navigation (hamburger + drawer)
Optimizing typography to scale smoothly across viewports
Handling device safe areas (notches, home indicator)
Detecting screen size in React with a media query hook

Best practices

Design mobile-first: write base styles for small screens, add media queries for larger sizes
Use clamp() for fluid typography to avoid abrupt size jumps
Prefer transform-based animations for performant mobile transitions
Respect safe-area-inset values for devices with notches and home indicators
Make touch targets at least 44px and debounce accidental touches
Keep accessible attributes: aria-expanded, aria-label, and focus management for menus

Example use cases

Create a responsive container that scales padding and max-width across breakpoints
Implement a swipeable card list with left/right swipe callbacks
Build a mobile hamburger menu that animates in and uses a backdrop to close
Apply clamp-based font sizing for body and headings to maintain visual rhythm
Use a useMediaQuery hook to render different component trees for mobile vs desktop

FAQ

No. Start with base styles that target mobile and add media queries using min-width for larger breakpoints so styles cascade up naturally.

How do I test safe-area insets on desktop?

Safe-area values are most relevant on devices with notches. Use device emulation in browser devtools or test on an actual device; provide sensible fallbacks like a minimum padding with max()/min() functions.