responsive-design

Create mobile-first web layouts with CSS media queries and fluid units.

39|2|Updated Jan 31, 2026

Search Tags:#typography #layout #mobile-first #CSS #responsive #breakpoints #grid

Ready to run

npx skills add https://github.com/hffmnnj/opencode-goopspec --skill responsive-design-hffmnnj

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/hffmnnj/opencode-goopspec/tree/main/skills/responsive-design
Command: npx skills add https://github.com/hffmnnj/opencode-goopspec --skill responsive-design-hffmnnj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and developers ensure web interfaces render correctly across a wide range of devices, from mobile phones to large desktop monitors, reducing layout breakages and manual tweaks.

Core Features & Use Cases

Mobile-first design philosophy with scalable CSS that adapts at different breakpoints.
Fluid layouts using relative units and flexible containers to maintain harmony across sizes.
Responsive imagery and media queries to optimize performance and visual coherence on any device.
Use Case: A marketing site that must reorganize its grid and typography for phones, tablets, and desktops without rewriting markup.

Quick Start

Use the responsive-design skill to implement a mobile-first grid with media queries and fluid typography that adapts from single-column layouts on small screens to multi-column layouts on larger devices.

Frequently Asked Questions about responsive-design

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

FAQPage Schema

How do I create layouts that work on mobile, tablet, and desktop without rewriting code?▼

Use a mobile-first approach with CSS media queries and fluid units. Start with single-column layouts for small screens, then add breakpoints that expand to multi-column grids as viewport width increases. This ensures one codebase adapts across all devices.

What's the best way to make typography scale automatically across different screen sizes?▼

Responsive typography uses relative units like rem or em instead of fixed pixels, combined with media queries to adjust font sizes at key breakpoints. This maintains readability and visual hierarchy from mobile to desktop without manual adjustments.

How do CSS media queries and breakpoints ensure responsive behavior?▼

Media queries detect viewport width and apply different CSS rules at breakpoints you define. Breakpoints—typically at 480px, 768px, and 1024px—trigger layout changes like hiding sidebars, adjusting grid columns, or resizing containers to fit each device class.

Can I use flexible containers and relative units to build layouts that adapt to any screen size?▼

Yes. Flexbox and CSS Grid with percentage-based widths, combined with flexible container constraints, create layouts that reflow dynamically. Relative units maintain proportions across devices without hardcoding pixel dimensions.

What are the limitations of CSS-only responsive design without external tools?▼

Pure CSS responsive design requires careful manual breakpoint selection and testing across devices. Complex interactions, dynamic content sizing, and cross-browser media query support can demand workarounds, and performance optimization for images and assets remains a manual task.

Does responsive design work for images and media, or just layout?▼

Responsive design covers both. Use media queries to serve different image sizes, employ `srcset` for resolution-aware images, and apply max-width constraints to maintain aspect ratios. This optimizes performance and visual quality across all screen sizes.