skills.rest
maxjuniorbr
maxjuniorbrCOMMUNITY
Explore all skills by this author →
GitHub

responsive-design

Implement responsive layouts with CSS Grid and container queries.

2|Updated Nov 21, 2025
Search Tags:#typography#layout#mobile-first#responsive-design#container-queries#css-grid
One-click install
npx skills add https://github.com/maxjuniorbr/segflow-crm --skill responsive-design-maxjuniorbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/maxjuniorbr/segflow-crm/tree/main/.cursor/skills/responsive-design
Command: npx skills add https://github.com/maxjuniorbr/segflow-crm --skill responsive-design-maxjuniorbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds fluid, responsive interfaces that adapt across devices using mobile-first strategies, CSS Grid, and container queries.

Core Features & Use Cases

  • Fluid typography and spacing for scalable, accessible UI
  • Container queries to adjust component styling based on container size
  • CSS Grid and Flexbox patterns for complex responsive layouts
  • Breakpoint strategies and design tokens to support design systems
  • Real-world scenarios: dashboards, data tables, navigation menus, and adaptive cards

Quick Start

Create a mobile-first page layout that uses container queries to progressively switch from a single-column to a multi-column grid as screen size grows.

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 layouts that adapt to dashboards and admin panels?▼

Container queries adjust component styling based on the container size rather than the viewport, allowing individual cards or data tables to adapt their layout independently within complex responsive interfaces.

What's the best way to implement fluid typography and spacing?▼

This Skill implements mobile-first responsive layouts by combining CSS Grid, container queries, and design tokens, using a single-column layout that progressively switches to multi-column grids as the container size grows.

Does this approach work for data tables and navigation menus?▼

No additional dependencies are required to use container queries and CSS Grid for responsive design, as the Skill relies entirely on native CSS features to implement fluid typography and adaptive layouts.

When should I not use container queries for responsive design?▼

You should avoid using container queries when standard media queries suffice for full-page layouts, reserving container queries instead for scalable components like adaptive cards that need to respond to their specific parent container size.

Related Skills

Explore More Design & Creative Skills→
wshobsonwshobson
38.6k

responsive-design

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

Community
Intermediate
aldasorolauti-pixelaldasorolauti-pixel

responsive-design

Implement responsive layouts with container queries, fluid typography, CSS Grid, and mobile-first breakpoints.

Community
Advanced
wernerglinkawernerglinka

css-layout-development

Create container-aware CSS layouts using container queries and fluid typography.

Community
Intermediate
kyamsSRLkyamsSRL

responsive-design

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

Community
Intermediate