agentsclimarketplace
Sign in

Responsive design

Skill Amey-Thakur/AI-SKILLS/skills/css-styling/responsive-design

Build layouts that adapt through fluid sizing, container queries, and content-driven breakpoints. Use when making a design work across screen sizes or replacing a brittle pile of media queries.From its SKILL.md

Install
npx -y skills add Amey-Thakur/AI-SKILLS --skill responsive-design

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

2 things to look at

  • 24 days oldThe repository was created 24 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 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

2.3 KB, 521 tokens by cl100k_base, as published. Nobody here has run it

Responsive design

Modern responsiveness is mostly not media queries: it is fluid values and intrinsically flexible layouts, with queries reserved for genuine rearrangement.

Method

  1. Start mobile, one column, content in priority order. The narrow view forces the hierarchy conversation; widening is additive. Desktop- first CSS accumulates unsetting rules (float: none, width: auto) that exist only to undo itself.
  2. Make size fluid before making it conditional. font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) and spacing built from the same pattern remove entire classes of breakpoints. Grid auto-fit/minmax handles card layouts with zero queries (see css-layout).
  3. Break where the content breaks, not at device names. Widen the window until the design looks wrong; that width is the breakpoint. Device-name breakpoints (768px "tablet") encode 2015's hardware into your stylesheet.
  4. Query the container for components. A card in a sidebar and the same card full-width need different layouts at the same viewport size. container-type: inline-size on the wrapper, then @container (min-width: 24rem) in the component. Media queries remain for page-level rearrangement and user preferences.
  5. Handle the non-width axes. @media (prefers-reduced-motion), (prefers-color-scheme), (hover: none) for touch, and dynamic viewport units (dvh) so mobile browser chrome does not eat your full-height layouts. Test landscape phones; 400px tall is real.
  6. Let images do their part. srcset/sizes for resolution, aspect-ratio to reserve space against layout shift, object-fit: cover for art-directed crops.

Boundaries

  • Hiding content at small sizes is a product decision, not a CSS convenience; if it is not worth showing on mobile, question whether it is worth showing at all.
  • Fluid type needs floor and ceiling; unclamped viewport math fails accessibility zoom and ultrawide monitors.
  • JS-measured breakpoints drift from CSS ones; if scripts must know the layout, read a custom property set by the same query.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 326,750. 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.