skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

responsive_design

Implements mobile-first responsive layouts using fluid grids, media queries, and relative CSS units.

Updated Jan 14, 2026
Search Tags:#frontend#responsive design#mobile-first#media queries#breakpoints#flexbox#css grid
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill responsive-design-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive_design
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/responsive_design
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill responsive-design-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that break on different screen sizes is a common frontend pain point. This Skill enforces mobile-first responsive design standards so layouts adapt correctly across mobile, tablet, and desktop without horizontal scrolling, tiny touch targets, or unreadable text. ## Core Features & Use Cases - Mobile-First Layout Standards: Enforces starting with mobile layouts and progressively enhancing with min-width media queries using standard breakpoints (Tailwind, Bootstrap). - Fluid Layouts & Relative Units: Guides use of flexbox, CSS Grid, container queries, and rem/em units instead of fixed pixel widths. - Accessibility & Touch Targets: Ensures 44x44px minimum touch targets, 16px minimum body text, and readable typography with clamp() fluid sizing. - Use Case: When building a dashboard that must work on phones and desktops, apply this Skill to structure a grid that stacks on mobile, uses two columns on tablets, and four columns on desktop, with responsive images via srcset. ## Quick Start Use the responsive design skill to refactor my landing page CSS so it follows mobile-first breakpoints and passes the touch target checklist.

Frequently Asked Questions about responsive_design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a mobile-first responsive layout in CSS?▼

Start with the mobile layout using width: 100% and a single-column grid, then add min-width media queries to enhance for larger screens. For example, use grid-template-columns: 1fr by default, then repeat(2, 1fr) at 768px and repeat(4, 1fr) at 1024px.

What breakpoints should I use for responsive design?▼

Use your project's existing breakpoint system rather than arbitrary values. Tailwind uses 640px, 768px, 1024px, 1280px, and 1536px, while Bootstrap uses 576px, 768px, 992px, 1200px, and 1400px. Avoid custom values like 850px unless explicitly required.

What is the minimum touch target size for mobile buttons?▼

Touch targets should be at least 44x44px on iOS and 48x48px on Android. For small icon buttons, add padding to expand the hit area, or set min-width and min-height to 44px, with at least 8px spacing between interactive elements.

Should I use px or rem units for responsive CSS?▼

Use rem for font sizes, spacing, and layout dimensions so everything scales with the root font size and user preferences. Reserve px for borders and very small values, use % for widths relative to parents, and vw/vh for viewport-sized sections.

How do I serve different images for mobile and desktop?▼

Use the img srcset attribute with multiple image widths and a sizes attribute describing layout behavior, or the picture element with source tags for modern formats like AVIF and WebP. In Next.js, the Image component handles this with its sizes prop.

Why does my responsive layout have horizontal scrolling on mobile?▼

Horizontal scrolling usually comes from fixed-width elements, content overflowing its container, or elements wider than the viewport. Check for fixed pixel widths, replace them with fluid max-width containers, and test at 375px in browser DevTools responsive mode.

Related Skills

Explore More Software Engineering Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
Yoodaddy0311Yoodaddy0311
3

mcp-playwright

Automates E2E browser testing, visual regression, and performance measurement with Playwright MCP.

Community
Intermediate
Camilo8902Camilo8902

accessibility-auditor

Audit web pages for WCAG 2.1 compliance with ARIA and keyboard navigation.

Community
Advanced
Stacked-LabsStacked-Labs

chakra-design-system

Enforce token-driven Chakra UI styling and design patterns for new components.

Official
Intermediate