responsive-design
Responsive web design patterns, mobile-first CSS, container queries, fluid typography, and accessibility-first layouts
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill responsive-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Responsive Design Modern responsive design patterns using mobile-first methodology, CSS Grid, Flexbox, and container queries. ## Mobile-First Approach ```css /* Base styles = Mobile */ .container { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; } /* Tablet */ @media (min-width: 768px) { .container { flex-direction: row; flex-wrap: wrap; padding: 2rem; } } /* Desktop */ @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; padding: 3rem; } } ``` ## Container Queries ```css /* Instead of viewport queries, query the container */ .card-container { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { display: grid; grid-template-columns: 200px 1fr; } } @container card (max-width: 399px) { .card { display: flex; flex-direction: column; } } ``` ## Fluid Typography ```css /* Fluid type scale using clamp() */ :root { --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); --text-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem); --text-xl: clamp(1.5rem, 1rem + 2vw, 2.5rem); } ``` --- ## Common Mistakes 1. **Starting with desktop**: Always design mobile-first. It's easi
- Mobile-First Approach
- Container Queries
- Fluid Typography
- Common Mistakes
What does the responsive-design skill do?
Responsive web design patterns, mobile-first CSS, container queries, fluid typography, and accessibility-first layouts
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill responsive-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.