skills.rest
flitzrrr
flitzrrrCOMMUNITY
Explore all skills by this author →
𝕏@flitzrrrGitHub

responsive-design

Implement mobile-first CSS with fluid grids, responsive images, and touch optimization.

4|1|Updated Apr 4, 2026
Search Tags:#mobile-first#responsive#breakpoints#flexbox#fluid-typography#css-grid#responsive-images
One-click install
npx skills add https://github.com/flitzrrr/frontend-design-skills --skill responsive-design-flitzrrr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/responsive-design
Command: npx skills add https://github.com/flitzrrr/frontend-design-skills --skill responsive-design-flitzrrr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Responsive-design helps eliminate inconsistent cross-device layouts, broken breakpoints, oversized media, and poor touch interactions by guiding a mobile-first, content-driven approach to layout and media. It reduces layout regressions, cumulative layout shift, and usability issues caused by desktop-first thinking and fixed pixel measurements.

Core Features & Use Cases

  • Fluid layouts: Guidance on percentage-based grids, a 12-column baseline, and when to use CSS Grid vs Flexbox.
  • Mobile-first CSS: Patterns for writing base styles for small viewports and layering min-width media queries for larger screens.
  • Responsive images & media: srcset, picture element, width/height attributes, lazy-loading, and recommended formats (WebP/AVIF).
  • Content choreography & breakpoints: Define breakpoints where the design breaks, not by device; reorder content per viewport.
  • Touch & typography: Touch target sizing, spacing, and fluid typography with clamp() for scalable type.
  • Use Case: Convert a desktop-centric marketing page into a mobile-first layout with reflowing card grids, optimized images, and accessible touch navigation.

Quick Start

Use the responsive-design skill to audit a page and produce mobile-first CSS recommendations, breakpoint suggestions, and responsive image guidance.

Frequently Asked Questions about responsive-design

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

FAQPage Schema
How do I fix inconsistent cross-device layout behavior in my web pages?▼

Fix inconsistent cross-device layout behavior by adopting a mobile-first approach with min-width media queries, CSS Grid, and Flexbox to ensure content reflows correctly across viewports. Define breakpoints where the design visually breaks rather than targeting specific device widths.

What is the best way to implement responsive images and lazy-loading?▼

The best way to implement responsive images is using srcset and the picture element with width/height attributes, applying lazy-loading, and serving modern formats like WebP or AVIF to prevent oversized media and reduce layout shift.

How do I set up fluid typography that scales across different screen sizes?▼

Set up fluid typography using the CSS clamp() function to create scalable type that adapts smoothly across screen sizes. This approach eliminates fixed pixel measurements and ensures text remains readable on any device.

When should I use CSS Grid vs Flexbox for responsive layouts?▼

Use CSS Grid for two-dimensional layouts requiring precise column and row control, and Flexbox for one-dimensional content flows. This Skill guides when to apply each layout model to build fluid, percentage-based grids effectively.

How do I ensure accessible touch target sizing on mobile devices?▼

Ensure accessible touch target sizing by applying recommended spacing and sizing patterns for interactive elements on mobile devices. This Skill provides guidance on touch optimization to prevent usability issues caused by poorly sized navigation links or buttons.

Why does my desktop-first CSS cause layout regressions on smaller screens?▼

Desktop-first CSS causes layout regressions because fixed pixel measurements and max-width overrides fail to scale down cleanly. Transitioning to a mobile-first workflow with min-width media queries layers enhancements progressively for larger screens.

Related Skills

Explore More Design & Creative Skills→
JustineDevsJustineDevs

responsive-design

Design responsive web interfaces with mobile-first CSS using Flexbox and Grid.

Community
Advanced
markacianfranimarkacianfrani
6

layout-shift-qa

Detects and diagnoses layout shifts using Chrome's PerformanceObserver.

Community
Advanced
iButtersiButters
3

responsive-design

Creates mobile-first web layouts with fluid typography, breakpoints, and container queries.

Community
Advanced
marnecmarnec
1

responsive-design

Apply container queries, fluid typography, and grid/flex layouts for responsive UI.

Community
Intermediate