responsive

Create mobile-first responsive layouts with CSS Grid and Flexbox.

3|Updated May 28, 2026

Search Tags:#mobile-first #breakpoints #responsive-design #flexbox #viewport #css-grid

Ready to run

npx skills add https://github.com/mahg-es/araya --skill responsive-mahg-es

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive
Source: https://github.com/mahg-es/araya/tree/main/skills/responsive
Command: npx skills add https://github.com/mahg-es/araya --skill responsive-mahg-es

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Desktop-only designs break on mobile; phone-only designs waste desktop space. This skill produces responsive layouts that adapt gracefully to any viewport using CSS Grid, Flexbox, container queries, and responsive design patterns.

Core Features & Use Cases

Mobile-first base styles using CSS Grid and Flexbox.
Breakpoint-driven layout adjustments for tablet and desktop views.
Responsive images and typography to ensure accessibility and performance.
Use Case: Revamp an existing UI to work across devices from 320px to 4K.

Quick Start

Create a mobile-first base stylesheet using CSS Grid and Flexbox, then progressively add breakpoints at 768px and 1024px to adapt layouts for tablet and desktop.

Frequently Asked Questions about responsive

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

FAQPage Schema

How do I build mobile-first responsive layouts with CSS Grid and Flexbox?▼

Mobile-first responsive layouts start with a base stylesheet using CSS Grid and Flexbox, then progressively add breakpoints at 768px and 1024px to adapt the UI for tablet and desktop viewports.

What is the best way to make a desktop-only UI adapt to any viewport size?▼

To make a desktop UI adapt to any viewport, apply mobile-first base styles and use breakpoint-driven layout adjustments with CSS Grid, Flexbox, and container queries for graceful scaling across devices.

Can I use container queries for breakpoint-driven styling across different devices?▼

Yes, container queries can be used alongside CSS Grid and Flexbox to create breakpoint-driven styling that allows UI components to adapt fluidly based on their parent container size rather than just the viewport.

Does responsive design require separate stylesheets for different viewport breakpoints?▼

No, responsive design does not require separate stylesheets. You can create a single mobile-first base stylesheet and progressively enhance it with media queries at specific breakpoints like 768px and 1024px.

Why do I need responsive images and typography for mobile-first design?▼

Responsive images and typography are needed in mobile-first design to ensure accessibility and performance, allowing visual content and text to scale appropriately from small phone screens to large 4K desktops.

What are the limitations of using viewport-based breakpoints instead of container queries?▼

Viewport-based breakpoints adjust layouts based on the entire screen size, which can break modular UI components placed in varying container widths, whereas container queries allow components to adapt based on their direct parent element.