skills.rest
sandeshbagmare
sandeshbagmareCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/sandeshbagmare/AgenticQ --skill responsive-design-sandeshbagmare
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Gabrielloopes33Gabrielloopes33

web-quality-audit

Audit web pages for performance, accessibility, and SEO issues.

Community
Advanced
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
EIS-ITSEIS-ITS

Frontend CSS

Apply design tokens and CSS methodologies to style components and optimize production builds.

Official
Intermediate
0xDarkMatter0xDarkMatter
29

tailwind-patterns

Generate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.

Community
Basic