skills.rest
oborchers
oborchersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

responsive-design

Implement responsive web design with CSS Grid, container queries, and responsive images.

28|3|Updated Feb 22, 2026
Search Tags:#accessibility#web development#responsive design#mobile-first#ui/ux#css grid
One-click install
npx skills add https://github.com/oborchers/fractional-cto --skill responsive-design-oborchers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/oborchers/fractional-cto/tree/main/visual-design-principles/skills/responsive-design
Command: npx skills add https://github.com/oborchers/fractional-cto --skill responsive-design-oborchers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating user interfaces that look and function optimally across a wide range of devices and screen sizes, ensuring a consistent and accessible user experience.

Core Features & Use Cases

  • Mobile-First Design: Guides users to prioritize content and functionality for smaller screens first, then progressively enhance for larger ones.
  • Fluid Grids & Layouts: Demonstrates techniques like CSS Grid with auto-fit and minmax() for layouts that adapt without explicit media queries.
  • Responsive Images: Explains the use of srcset and <picture> for efficient image loading and art direction.
  • Container Queries: Introduces how components can adapt to their immediate container size, independent of the viewport.
  • Touch Target Sizing: Enforces accessibility standards for interactive elements on touch devices.
  • Navigation Patterns: Recommends appropriate navigation strategies for different screen sizes.
  • Use Case: When designing a new SaaS product dashboard, this Skill will ensure that the layout, navigation, and interactive elements are usable and aesthetically pleasing whether viewed on a smartphone, tablet, or desktop monitor.

Quick Start

Apply the responsive-design skill to ensure all components adapt gracefully to different screen sizes, starting with mobile-first principles.

Frequently Asked Questions about responsive-design

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

FAQPage Schema
How do I build responsive web layouts that adapt to any screen size?▼

Responsive web layouts adapt to any screen size by applying mobile-first strategies, fluid grids using CSS Grid with `auto-fit` and `minmax()`, and `clamp()` to ensure cross-device usability and accessibility without explicit media queries.

What is the best way to implement responsive images for efficient loading?▼

Responsive images load efficiently by using the `srcset` attribute and `<picture>` element for art direction, allowing the browser to select appropriately sized image sources based on the current viewport.

How do container queries work for adaptive component design?▼

Container queries allow UI components to adapt their layout based on their immediate container size, independent of the viewport, ensuring modular elements render correctly regardless of where they are placed on the page.

What are the accessibility standards for touch target sizing on mobile devices?▼

Touch target sizing accessibility requires interactive elements on mobile devices to meet specific dimension standards, ensuring they are easily tappable and usable for all users on touch-enabled screens.

Does mobile-first design require explicit media queries for larger screens?▼

Mobile-first design progressively enhances layouts for larger screens, but techniques like CSS Grid with `auto-fit` and `minmax()` can create fluid layouts that adapt automatically without requiring explicit media queries.

How do I choose appropriate navigation patterns for different screen sizes?▼

Adaptive navigation patterns adjust based on screen size by recommending appropriate navigation strategies, ensuring usability whether the interface is viewed on a smartphone, tablet, or desktop monitor.

Related Skills

Explore More Design & Creative Skills→
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
deomiarndeomiarn

responsive-patterns

Create mobile-first responsive web layouts with CSS grid and media queries.

Community
Basic
wshobsonwshobson
38.6k

responsive-design

Implements responsive design with container queries, fluid typography, and CSS Grid.

Community
Intermediate
kyamsSRLkyamsSRL

responsive-design

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

Community
Intermediate