Verified:GitHub

responsive-design

Document responsive web design techniques including container queries, fluid typography, and layout patterns.

Updated May 30, 2026

Search Tags:#responsive design #design patterns #Flexbox #CSS Grid #fluid typography #container queries #breakpoint strategies

Ready to run

npx skills add https://github.com/sandeshbagmare/AgenticQ --skill responsive-design-sandeshbagmare

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/sandeshbagmare/AgenticQ/tree/main/examples/portfolio_site/.claude/plugins/ui-design/skills/responsive-design
Command: npx skills add https://github.com/sandeshbagmare/AgenticQ --skill responsive-design-sandeshbagmare

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to implementing modern responsive layouts and typography, helping designers and developers create interfaces that adapt seamlessly across all screen sizes and device contexts.

Core Features & Use Cases

Container Queries: Leverage container queries for component-level responsiveness.
Fluid Typography: Implement fluid typography and spacing scales.
Layout Patterns: Use CSS Grid and Flexbox for responsive layouts.
Breakpoint Strategies: Implement mobile-first breakpoint strategies and content-based breakpoints.
Responsive Patterns by Component: Navigation, cards, hero sections, tables, print styles, preference queries, and testing breakpoints.
Design Token Integration: Use design tokens for consistent styling across breakpoints.
Fallback Strategies: Provide fallbacks for older browsers and less supported features.
Performance Considerations: Optimize images and content for performance.
Testing Breakpoints: Automated testing for responsive design.
Resources: Links to external resources for further learning.

Quick Start

Use the responsive-design skill to learn about responsive design patterns and techniques.

Frequently Asked Questions about responsive-design

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

FAQPage Schema

How do I use container queries for component-level responsive design?▼

Container queries enable component-level responsive design by allowing elements to adapt based on their parent container's dimensions rather than the viewport. This Skill provides comprehensive examples and best practices for implementing container queries effectively.

What's the best way to implement fluid typography and spacing scales in CSS?▼

Fluid typography and spacing scales are implemented using viewport units and intrinsic sizing to ensure text scales smoothly across screen sizes. This guide covers modern techniques, design token integration, and fallback strategies for older browsers.

How do I structure mobile-first breakpoint strategies for responsive layouts?▼

Mobile-first breakpoint strategies structure responsive layouts by applying base styles to smaller screens and progressively enhancing them for larger viewports using content-based breakpoints. This Skill details implementation patterns using CSS Grid and Flexbox.

Do I need basic JavaScript knowledge to use modern responsive design patterns?▼

Basic knowledge of HTML, CSS, and JavaScript is required to fully utilize this Skill's responsive design patterns. The guide focuses on CSS Grid, Flexbox, and container queries, while also covering automated testing for breakpoints.

How do I provide fallbacks for older browsers when using CSS container queries?▼

Fallbacks for older browsers and less supported features like container queries are provided through progressive enhancement and feature detection. This Skill outlines specific fallback strategies and performance considerations for responsive images.