Does this skill support Tailwind CSS?

Yes, it includes comprehensive patterns and breakpoints for both standard CSS and Tailwind-specific responsive utility classes.

What is the benefit of using Container Queries over Media Queries?

Container Queries allow components to adapt based on the space available in their direct parent container, making them truly modular and reusable regardless of where they are placed on a page.

How does fluid typography work in this skill?

It utilizes the CSS clamp() function to define a minimum, preferred, and maximum value, allowing text to scale smoothly with the viewport width without manual breakpoint adjustments.

Does this skill provide guidance on responsive images?

Yes, it includes patterns for art direction using the picture element and resolution switching using the srcset and sizes attributes for optimal performance.

Responsive Design Master

Name: Responsive Design Master
Author: duanbiao2000

byduanbiao2000

•

Design Tools

Implements modern, mobile-first responsive layouts using container queries, fluid typography, and advanced CSS Grid patterns.

The Responsive Design skill enables Claude to architect and implement highly adaptive web interfaces that function seamlessly across any device context. By moving beyond basic media queries, this skill focuses on modern CSS techniques like Container Queries for component-level responsiveness, fluid typography using CSS clamp() for seamless scaling, and intrinsic layouts via CSS Grid and Flexbox. It is an essential tool for developers building professional design systems, complex dashboards, or content-rich applications that require precision-engineered responsiveness and optimal user experience across all screen sizes.

Key Features

011 GitHub stars

02Mobile-first breakpoint strategies and design token integration

03Component-level responsiveness via modern CSS Container Queries

04Fluid typography and spacing scales using CSS clamp() and viewport units

05Advanced 2D layouts with CSS Grid, Subgrid, and Flexbox patterns

06Performance-optimized responsive images and adaptive media implementations

Use Cases

01Refactoring legacy fixed-width layouts into modern, mobile-first responsive applications

02Building a component library where elements adapt based on parent container size rather than viewport

03Implementing a unified design system with fluid type and spacing scales that eliminate jagged jumps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add duanbiao2000/obsidiandoc26 responsive-design

For use in Claude.ai and ChatGPT

Download Skill