skills.rest
pierregueroult
pierregueroultCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

responsive-design

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

Updated Oct 20, 2025
Search Tags:#responsive design#mobile-first#flexbox#css grid#fluid typography#container queries
One-click install
npx skills add https://github.com/pierregueroult/dot-files --skill responsive-design-pierregueroult
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/pierregueroult/dot-files/tree/main/opencode/skills/responsive-design
Command: npx skills add https://github.com/pierregueroult/dot-files --skill responsive-design-pierregueroult

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of user interfaces that adapt seamlessly to any screen size or device, ensuring a consistent and optimal user experience across all platforms.

Core Features & Use Cases

  • Container Queries: Implement component-level responsiveness independent of the viewport.
  • Fluid Typography & Spacing: Create scalable text and spacing using CSS clamp() and viewport units.
  • Layout Patterns: Utilize CSS Grid and Flexbox for robust and adaptive layouts.
  • Use Case: When designing a product card that needs to display differently on a mobile phone, a tablet, and a desktop monitor, this Skill provides the tools to make the card adjust its layout, image size, and text scaling based on its container's width.

Quick Start

Use the responsive-design skill to implement a mobile-first responsive layout for a webpage.

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 web layout adapt to different screen sizes using container queries?▼

Container queries enable component-level responsive design by styling elements based on their parent container's width rather than the viewport. This Skill implements them alongside fluid typography and CSS Grid to build adaptive interfaces that adjust independently of the screen size.

What is the best way to implement fluid typography in a responsive layout?▼

Fluid typography uses CSS clamp() and viewport units to scale text smoothly across screen sizes. This Skill applies fluid typography and spacing techniques to ensure text remains readable and proportional without requiring multiple breakpoint overrides.

How does mobile-first breakpoint strategy work for building adaptive interfaces?▼

Mobile-first breakpoint strategy starts with base styles for small screens and progressively adds styles for larger viewports. This Skill implements mobile-first responsive design using Flexbox and CSS Grid to ensure robust layouts across diverse devices.

Can I use CSS Grid and Flexbox together for responsive component design?▼

CSS Grid and Flexbox can be combined to create robust adaptive layouts. This Skill utilizes CSS Grid for two-dimensional layout patterns and Flexbox for component-level alignment, addressing the need for scalable web applications across diverse devices.

When do I need container queries instead of media queries for responsive web design?▼

Container queries are needed when a component must adapt based on its container's width rather than the viewport. This Skill uses container queries to implement component-level responsive behavior, useful for product cards that display differently across mobile, tablet, and desktop contexts.

Related Skills

Explore More Design & Creative Skills→
tan-yong-shengtan-yong-sheng
72

frontend-slides

Generate zero-dependency HTML slide decks with inline CSS and JS.

Community
Intermediate
fusenginefusengine
22

responsive-system

Implement mobile-first responsive layouts with Tailwind CSS breakpoints and container queries.

Community
Intermediate
moughamirmoughamir

tailwindcss-mobile-first

Implement mobile-first responsive Tailwind CSS layouts with progressive breakpoints and fluid typography.

Community
Advanced
kyamsSRLkyamsSRL

responsive-design

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

Community
Intermediate