agentsclimarketplace

Responsive layout

Skill m-binimran/dev-pack/skills/responsive-layout

Guardrails, skills, loops, hooks & review agents for database + website builders on Claude Code (Next.js + Supabase).

Install
npx -y skills add m-binimran/dev-pack --skill responsive-layout

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

  • 2 stars2 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

Build mobile-first responsive layouts (≥375px) with fluid type, container queries, and grid/bento composition that doesn't break. Use when laying out a page or fixing responsive issues.

SKILL.md

1.5 KB, as published. Nobody here has run it

responsive-layout

Mobile-first, fluid, and composed — not a desktop layout crammed onto a phone.

Process

  1. Design at 375px first, then scale up. Every layout must work at 375px width.
  2. Fluid type & spacing: clamp() for headings and section padding so it scales smoothly between breakpoints instead of jumping.
  3. Use the right query: media queries for page layout; container queries for components that appear in multiple widths (cards, sidebars).
  4. Composition with intent: CSS grid for structure; break the grid (bento/editorial/overlap) where the design direction calls for it — don't default to uniform columns.
  5. Touch targets ≥44px, no hover-only interactions on touch, test the mobile nav (Sheet/Drawer).

Checklist

  • No horizontal scroll at 375px.
  • Text never below ~14px on mobile; line length readable on desktop (~60–75ch).
  • Images sized/next/image to avoid CLS.
  • Tap targets large enough; nav works on touch.

Output

  • The responsive layout, breakpoints used, and confirmation it was checked at 375px (or flagged unverified).

Guardrails

  • Don't claim "responsive" from code alone — view it at 375px (Playwright/preview) or say it's unverified.
  • Avoid fixed heights that clip content when text wraps on small screens.

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.