skills.rest
mrodrigues1
mrodrigues1COMMUNITY
Explore all skills by this author →
GitHub

responsive-design

Implement responsive web layouts with container queries and fluid scaling.

Updated Apr 4, 2026
Search Tags:#breakpoints#responsive-design#container-queries#fluid-typography#css-grid#responsive-images
One-click install
npx skills add https://github.com/mrodrigues1/akachan --skill responsive-design-mrodrigues1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/mrodrigues1/akachan/tree/main/.junie/skills/responsive-design
Command: npx skills add https://github.com/mrodrigues1/akachan --skill responsive-design-mrodrigues1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provide practical patterns and techniques to build interfaces that adapt fluidly across device sizes, container contexts, and input types, reducing layout breakage and manual breakpoint maintenance.

Core Features & Use Cases

  • Container queries for component-level responsiveness that react to parent size rather than viewport.
  • Fluid typography and spacing using clamp and viewport-relative mathematics to create smooth scaling between sizes.
  • CSS Grid and Flexbox responsive patterns, auto-fit/auto-fill grids, responsive images with art direction, and adaptive navigation and table patterns.
  • Breakpoint strategy guidance, feature-query fallbacks, testing approaches, and performance/accessibility best practices for production-ready responsive systems.
  • Use case: Convert a fixed-layout product catalog into a fluid grid with container-aware cards, responsive images, and accessible mobile navigation.

Quick Start

Build a responsive component by combining container queries, fluid typography with clamp, and a CSS Grid or auto-fit layout so it adapts across mobile, tablet, and desktop.

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 layouts?▼

Container queries enable responsive layouts by allowing components to adapt based on parent container size rather than the viewport. You apply them to create modular UI elements that adjust fluidly across different page contexts and grid areas.

What's the best way to implement fluid typography with CSS clamp?▼

Fluid typography with CSS clamp uses viewport-relative mathematics to scale text smoothly between defined minimum and maximum sizes. This approach eliminates manual breakpoint adjustments by relying on dynamic scaling values.

How do I build a responsive CSS Grid layout with auto-fit and auto-fill?▼

Responsive CSS Grid layouts use auto-fit and auto-fill functions to dynamically adjust column tracks based on available container space. This creates fluid grid structures that reflow content automatically without media queries.

Do I need fallbacks for container queries in older browsers?▼

Fallbacks for container queries are necessary in older browsers lacking support. You provide feature-query fallbacks using @supports conditional rules to ensure layouts remain functional and accessible across legacy environments.

How do I make responsive images with art direction for different screen sizes?▼

Responsive images with art direction use the picture element and source attributes to serve different image crops based on screen conditions. This ensures appropriate visual context and optimized loading across mobile, tablet, and desktop devices.

Can I use CSS Grid and Flexbox together for adaptive navigation patterns?▼

CSS Grid and Flexbox work together for adaptive navigation by using Grid for overall structural layout and Flexbox for internal item alignment. This combination supports accessible touch targets and mobile-first breakpoint strategies.

Related Skills

Explore More Design & Creative Skills→
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
cenjiecenjie

i-adapt

Adapt desktop web designs to mobile, tablet, and print layouts with CSS Grid and Flexbox.

Community
Intermediate
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
yashvinthanyashvinthan

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate