How does it handle mobile browser UI quirks?

It utilizes modern dynamic viewport units (dvh, svh, lvh) to ensure layouts account for mobile browser address bars and navigation elements correctly.

Does this skill support Tailwind CSS?

Yes, it includes implementation patterns for both raw CSS and Tailwind CSS, covering utility-first responsive modifiers and complex grid configurations.

What makes this different from standard media queries?

This skill emphasizes modern techniques like container queries, which allow components to respond to their container's size rather than just the viewport, enabling truly modular UI development.

Can it help with responsive image optimization?

Yes, it provides patterns for art direction using the picture element and resolution switching with the srcset attribute to ensure optimal performance on all devices.

Responsive UI Design

Name: Responsive UI Design
Author: gwickman

bygwickman

0•

Design Tools

Implements adaptive layouts using container queries, fluid typography, and mobile-first CSS strategies for modern web interfaces.

This skill empowers developers to build high-performance, adaptive user interfaces that work seamlessly across any device size. It moves beyond traditional media queries by leveraging modern CSS features like container queries for component-level responsiveness, fluid scaling with the CSS clamp function, and intrinsic layout patterns with CSS Grid and Subgrid. It is particularly useful for building design systems, complex dashboards, and mobile-optimized web applications where consistency and flexibility are paramount.

Key Features

01Advanced CSS Grid and Flexbox patterns for intrinsic and 2D layouts

02Fluid typography and spacing scales using CSS clamp() and relative units

03Responsive media handling including art direction and resolution switching

04Mobile-first breakpoint strategies and design system token integration

05Container queries for component-level responsive behavior independent of viewport

060 GitHub stars

Use Cases

01Converting fixed-width legacy layouts into modern fluid interfaces

02Building modular design systems where components adapt based on their parent container

03Optimizing data-heavy dashboards for mobile viewports using card-based patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gwickman/auto-dev-test-target-1 responsive-design

For use in Claude.ai and ChatGPT

Download Skill