skills.rest
haotool
haotoolOFFICIAL
Explore all skills by this author →
GitHub

responsive-design

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

2|Updated Oct 12, 2025
Search Tags:#mobile-first#responsive#ui-design#breakpoints#container-queries#fluid-typography#css-grid
One-click install
npx skills add https://github.com/haotool/app --skill responsive-design-haotool
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/haotool/app/tree/main/.agents/skills/responsive-design
Command: npx skills add https://github.com/haotool/app --skill responsive-design-haotool

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solves the challenge of crafting interfaces that correctly respond to various screen sizes and contexts without resorting to brittle breakpoints.

Core Features & Use Cases

  • Container queries enable component-level responsiveness independent of viewport size.
  • Fluid typography and spacing scale gracefully with viewport changes.
  • CSS Grid and Flexbox patterns support robust, mobile-first layouts.
  • Use Case: design a dashboard layout where panels rearrange based on container width to preserve readability.

Quick Start

Create a responsive component layout that adapts to its container using container queries and fluid typography.

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 dashboard layout responsive based on component width instead of viewport size?▼

Use container queries to build responsive dashboard layouts where panels rearrange based on container width, enabling component-level responsiveness independent of the viewport size.

What is fluid typography and how does it scale across mobile-first web apps?▼

Fluid typography uses CSS techniques to ensure text scales gracefully with viewport changes, satisfying mobile-first requirements by adjusting type and spacing without relying on rigid breakpoints.

How do I build adaptive mobile-first interfaces without brittle breakpoints?▼

Combine CSS Grid and Flexbox patterns with container queries and fluid spacing to build adaptive interfaces that correctly respond to various screen sizes and contexts without brittle breakpoints.

Does this approach work for component libraries or only full page layouts?▼

This approach suits component libraries, mobile-first web apps, and dashboards, using container queries to enable component-level responsiveness independent of the overall page layout.

Why do my CSS Grid layouts break when rearranging panels for different screen sizes?▼

CSS Grid layouts often break when relying solely on viewport breakpoints; applying container queries allows panels to rearrange based on their actual container width to preserve readability.

Related Skills

Explore More Design & Creative Skills→
Naren7874Naren7874

responsive-design

Design responsive CSS layouts with mobile-first principles, Flexbox, and Grid.

Community
Intermediate
Camilo8902Camilo8902

responsive-design-system

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

Community
Intermediate
iButtersiButters
3

responsive-design

Creates mobile-first web layouts with fluid typography, breakpoints, and container queries.

Community
Advanced
kyamsSRLkyamsSRL

responsive-design

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

Community
Intermediate