skills.rest
Jhabbig
JhabbigCOMMUNITY
Explore all skills by this author →
GitHub

responsive-design

Create responsive interface layouts using container queries, fluid typography, and CSS Grid.

Updated Apr 5, 2026
Search Tags:#responsive design#mobile-first#breakpoints#flexbox#css grid#fluid typography#container queries
One-click install
npx skills add https://github.com/Jhabbig/Habbig --skill responsive-design-jhabbig
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/Jhabbig/Habbig/tree/main/.claude/plugins/wshobson/ui-design/skills/responsive-design
Command: npx skills add https://github.com/Jhabbig/Habbig --skill responsive-design-jhabbig

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create interfaces that stay readable, usable, and visually balanced across phones, tablets, laptops, and large desktops without resorting to brittle one-off layouts.

Core Features & Use Cases

  • Mobile-first layout planning: Start with compact screens and progressively enhance for larger viewports.
  • Container queries and fluid scaling: Make cards, dashboards, and widgets respond to their own available space with scalable typography and spacing.
  • Adaptive component patterns: Build responsive navigation, grids, tables, images, and content sections that reflow gracefully.
  • Use Case: A product dashboard can switch from stacked mobile cards to a multi-column desktop layout while preserving hierarchy, readability, and touch-friendly controls.

Quick Start

Use the responsive-design skill to redesign the attached interface so it works cleanly from mobile through desktop with fluid spacing, container queries, and mobile-first breakpoints.

Frequently Asked Questions about responsive-design

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

FAQPage Schema
How do I create responsive layouts that adapt cleanly from mobile to desktop?▼

Responsive layouts adapt cleanly across screen sizes by applying a mobile-first breakpoint strategy, container queries, fluid typography, CSS Grid, and Flexbox to ensure components reflow gracefully without feeling cramped.

When should I use container queries instead of media queries for adaptive web components?▼

Container queries are used for adaptive web components like cards and dashboards when elements need to respond to their own available space rather than the viewport, allowing widgets to scale typography and spacing fluidly.

What is the best way to build a responsive product dashboard that switches from stacked cards to a multi-column layout?▼

The best way to build a responsive dashboard is using mobile-first progressive enhancement with CSS Grid and Flexbox, preserving hierarchy and touch-friendly controls while scaling up to a multi-column desktop layout.

How does fluid typography work in mobile-first redesign scenarios?▼

Fluid typography in mobile-first redesign scenarios scales text smoothly across viewports using CSS functions, ensuring readability and visual balance from compact phone screens through large desktop monitors.

Does fallback-aware progressive enhancement require specific dependencies for responsive media handling?▼

Fallback-aware progressive enhancement requires no external dependencies, relying on core CSS Grid, Flexbox, and container queries to provide responsive media handling and graceful reflow for legacy browser support.

Why do my responsive interface layouts feel cramped on tablets despite having breakpoints?▼

Responsive layouts feel cramped when breakpoints lack fluid spacing strategies, which can be fixed by implementing container queries and fluid typography so elements scale proportionally within their available space.

Related Skills

Explore More Design & Creative Skills→
Sir-chawakornSir-chawakorn
9

style-responsive-tailwind

Standardize responsive Tailwind CSS v4 layouts with CSS-first design tokens.

Community
Intermediate
Camilo8902Camilo8902

responsive-design-system

Implement mobile-first responsive design systems with Tailwind CSS breakpoints and fluid typography.

Community
Intermediate
haotoolhaotool
2

responsive-design

Build adaptive interfaces using container queries, grid layouts, and fluid typography.

Official
Advanced
ancolemanancoleman
503

designing-layouts

Design responsive layouts with CSS Grid, Flexbox, and breakpoints.

Community
Advanced