skills.rest
kyamsSRL
kyamsSRLCOMMUNITY
Explore all skills by this author →
GitHub

responsive-design

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

Updated Mar 18, 2026
Search Tags:#mobile-first#breakpoints#responsive-design#container-queries#fluid-typography#css-grid#responsive-images
One-click install
npx skills add https://github.com/kyamsSRL/TinyCopro --skill responsive-design-kyamssrl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/kyamsSRL/TinyCopro/tree/main/.claude/skills/responsive-design
Command: npx skills add https://github.com/kyamsSRL/TinyCopro --skill responsive-design-kyamssrl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Modern web interfaces must adapt reliably across diverse screen sizes and component contexts, and ad-hoc breakpoints or fixed sizing lead to brittle layouts, poor readability, and inconsistent component behavior; this skill consolidates modern techniques to build resilient, adaptive UI systems.

Core Features & Use Cases

  • Container Queries & Component Responsiveness: Enable component-level styling using container-type containment and @container rules so components respond to their parent size rather than the viewport.
  • Fluid Typography & Spacing: Use clamp(), viewport and container-relative units to create scalable type and spacing with min/max bounds for consistent readability.
  • Layout Patterns: Apply CSS Grid, Flexbox, auto-fit/auto-fill, intrinsic sizing, and subgrid patterns to create robust multi-column and dashboard layouts.
  • Breakpoint Strategy & Fallbacks: Design mobile-first, content-driven breakpoints, integrate design tokens, and use feature queries and media-query fallbacks for broader browser support.
  • Responsive Media & Data Displays: Implement art-directed images with picture/srcset, responsive tables (scrolling or card transforms), and performance-minded lazy loading strategies.

Quick Start

Build a responsive card component using container queries, clamp-based type, and an auto-fit grid so it adapts across viewports and container sizes.

Frequently Asked Questions about responsive-design

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

FAQPage Schema
How do I make a responsive layout respond to its parent container instead of the viewport?▼

Fluid typography uses the CSS clamp() function with viewport or container-relative units to scale text smoothly between defined minimum and maximum bounds. This approach maintains consistent readability across diverse screen widths without setting discrete breakpoint font sizes.

What's the best way to structure mobile-first breakpoints for web UI development?▼

Mobile-first breakpoint strategies use content-driven sizing to define media queries, starting with base mobile styles and enhancing layout for larger screens. Integrating design tokens into these breakpoints ensures consistent scaling and prevents brittle, ad-hoc layout shifts across viewports.

How do I create robust multi-column responsive layouts using CSS Grid?▼

CSS Grid supports responsive multi-column layouts through auto-fit, auto-fill, and intrinsic sizing properties. These features allow grid tracks to adapt automatically to available space, creating resilient dashboard and card layouts without requiring complex media queries.

Do I need feature queries for container queries to work across older browsers?▼

Responsive images use the picture element and srcset attribute to deliver art-directed or resolution-appropriate visuals based on viewport size. Combined with performance-minded lazy loading strategies, this technique ensures efficient media delivery and optimal rendering across devices.

Related Skills

Explore More Design & Creative Skills→
sandeshbagmaresandeshbagmare

responsive-design

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

Community
Advanced
FAeN399FAeN399

css-layout-builder

Create responsive CSS layouts using Grid, Flexbox, and container queries.

Community
Advanced
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
JustineDevsJustineDevs

responsive-design

Design responsive web interfaces with mobile-first CSS using Flexbox and Grid.

Community
Advanced