How do I install the Responsive Design skill?

Run npx skillmds@latest add amey-thakur/responsive-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Responsive Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Responsive Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Responsive Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Responsive Design?

Amey-Thakur (@amey-thakur) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Responsive Design by amey-thakur — Agent Skill

Name: Responsive Design
Author: Amey-Thakur

File contents

Responsive design

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

Method

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.
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).
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.
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.
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.
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.

---name: responsive-designdescription: 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.---# Responsive designModern responsiveness is mostly not media queries: it is fluid values andintrinsically flexible layouts, with queries reserved for genuinerearrangement.## Method1. **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.

Frequently asked questions

Responsive Design