skills.rest
alex-jordan547
alex-jordan547COMMUNITY
Explore all skills by this author →
GitHub

Frontend Responsive Design Standards

Implements mobile-first responsive layouts using fluid grids, relative units, and standard breakpoints.

Updated Jul 3, 2026
Search Tags:#responsive design#mobile-first#css#media queries#breakpoints#flexbox#touch targets
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill frontend-responsive-design-standards-alex-jordan547
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Responsive Design Standards
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/frontend-responsive-design-standards
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill frontend-responsive-design-standards-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent responsive styling leads to broken layouts, unreadable text, and untappable buttons on mobile devices. This Skill enforces mobile-first CSS patterns, standard breakpoints, and touch-friendly sizing so interfaces work correctly across phones, tablets, and desktops. ## Core Features & Use Cases - Mobile-First Layouts: Enforces starting with mobile styles and progressively enhancing with min-width media queries instead of desktop-first overrides. - Standardized Breakpoints & Units: Aligns media queries with Tailwind or Bootstrap breakpoint systems and replaces fixed pixels with rem, em, %, and clamp() for scalable sizing. - Touch & Accessibility Standards: Guarantees 44x44px minimum touch targets, 16px minimum body text, WCAG AA contrast, and responsive images via srcset and modern formats. - Use Case: When building a product grid that collapses from four columns on desktop to one column on mobile, apply this Skill to generate the correct grid, breakpoints, fluid typography, and image srcset in one pass. ## Quick Start Refactor this page's CSS to be mobile-first with standard breakpoints, rem units, and touch-friendly buttons.

Frequently Asked Questions about Frontend Responsive Design Standards

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 styles for the smallest screen using single-column layouts and width: 100%, then add min-width media queries to enhance for tablets and desktops. This avoids overriding desktop styles and improves mobile performance.

What breakpoints should I use for responsive design?▼

Use your project's existing breakpoint system rather than inventing arbitrary values. Tailwind uses 640px, 768px, 1024px, 1280px, and 1536px; Bootstrap uses 576px, 768px, 992px, 1200px, and 1400px.

Should I use rem or px for font sizes and spacing?▼

Use rem for font sizes, spacing, and layout dimensions so everything scales with the root font size and respects user accessibility settings. Reserve px for borders, shadows, and very small values.

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 or min-width and min-height so the tappable area meets the requirement without changing the visual size.

How do I serve responsive images for different screen sizes?▼

Use the srcset and sizes attributes to let the browser pick an appropriately sized image, and wrap in a picture element to serve modern formats like AVIF or WebP with fallbacks. Frameworks like Next.js provide an Image component that handles this automatically.

Why does my layout have horizontal scrolling on mobile?▼

Horizontal scrolling usually comes from fixed pixel widths, elements wider than the viewport, or unwrapped long content. Replace fixed widths with width: 100% plus max-width, and test at 375px to catch overflow.

Related Skills

Explore More Software Engineering Skills→
noin-ainoin-ai

design

Generate UI design specs with responsive and dark mode variants.

Official
Intermediate
emiljuchnikowskiemiljuchnikowski

browser-capture

Capture browser screenshots at desktop, tablet, and mobile viewports with Playwright.

Community
Intermediate
EIS-ITSEIS-ITS

Frontend Accessibility

Identify and fix accessibility issues in frontend interfaces using semantic HTML, ARIA, and keyboard navigation.

Official
Intermediate
Jorge-IvanJorge-Ivan
1

tailwindcss-responsive

Implement responsive web design with Tailwind CSS breakpoints and container queries.

Community
Basic