agentsclimarketplace

Mobile tailwind responsive policy

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

A curated library of 124 AI agent skills organized into 10 categories, with model-specific versions for Claude, GPT-5.5, GPT-5.4 and earlier, GLM, and DeepSeek.

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

  • 1 stars1 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.

What its author says it does

Copied from the file, not written here

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

SKILL.md

1.4 KB, 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.

Keep looking

Skills are one crate of 328,083. 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.