agentsclimarketplace
Sign in

Mobile tailwind responsive policy

Skill mhrsdev/AI-Agent-Skills-Library/organized-skills/responsive-mobile-navigation/mobile-tailwind-responsive-policy

Use when creating mobile-first responsive CSS, Tailwind-like utility layouts, viewport-safe sections, accessible utilities, hover/touch variants, and reduced-motion policies.From its SKILL.md

Install
npx -y skills add mhrsdev/AI-Agent-Skills-Library --skill mobile-tailwind-responsive-policy

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

One thing to look at

  • 4 stars4 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.4 KB, 256 tokens by cl100k_base, as published. Nobody here has run it

Mobile Tailwind Responsive Policy

Use this skill for mobile-first styling patterns inspired by tailwindlabs/tailwindcss.

Primary source:

Focus areas:

  • Mobile-first breakpoints.
  • Responsive spacing, type, grids, and images.
  • Avoiding accidental horizontal overflow.
  • Handling hover-only interactions on touch devices.
  • Respecting prefers-reduced-motion.
  • Using sr-only style utilities for accessible labels.

Checklist:

  • Start from the smallest viewport and progressively enhance.
  • Verify no element causes horizontal scroll at 320px.
  • Use fluid sizing carefully; avoid viewport-width font scaling.
  • Use min-height: 100dvh for full-height mobile sections.
  • Add width/height or aspect-ratio to images to reduce layout shift.
  • Lazy-load only below-the-fold media.
  • Do not rely on hover as the only way to reveal content.

Common fixes:

  • Replace fixed desktop widths with max-width, flexible grids, and wrapping.
  • Replace height: 100vh with min-height: 100dvh where mobile browser chrome breaks layout.
  • Use explicit tap targets of at least 44px, preferably 48px.

What ships with it: 1 file

2.4 KB alongside SKILL.md

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.