skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

responsive-patterns

Generate mobile-first responsive patterns with Tailwind breakpoints, clamp() typography, and srcset images.

Updated Aug 27, 2026
Search Tags:#accessibility#responsive design#tailwind css#responsive images#fluid typography#container queries#breakpoint strategy
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill responsive-patterns-andersoncollab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-patterns
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/responsive-patterns
Command: npx skills add https://github.com/andersoncollab/design-agent --skill responsive-patterns-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves inconsistent layouts across devices by providing production-ready responsive patterns that prevent usability issues on small screens and scale smoothly up to large displays.

Core Features & Use Cases

  • Mobile-first breakpoint strategy: Defines a clear approach across standard ranges (mobile/tablet/desktop/large) to avoid override spaghetti.
  • Fluid typography with clamp(): Smoothly scales text between viewport sizes without harsh jumps.
  • Container queries for component-aware responsiveness: Makes reusable components adapt to parent width rather than only the viewport.
  • Responsive images: Uses srcset/sizes (and optionally picture) to deliver appropriately sized assets for each device.
  • Accessibility-minded responsiveness: Enforces touch target sizing (minimum 44×44px) and addresses safe areas for notched devices.
  • Common responsive UI patterns: Includes responsive navigation, grids, hero sections, tables (mobile horizontal scroll), and spacing scales.

Example: You need a landing page that looks great on a phone, tablet, laptop, and ultrawide, with a hamburger-to-desktop nav, fluid headline sizing, and correctly sized hero images to avoid wasted bandwidth.

Quick Start

Use the responsive-patterns skill to generate a mobile-first Tailwind layout for your component that includes breakpoint classes, fluid clamp typography, and responsive images using srcset and sizes.

Frequently Asked Questions about responsive-patterns

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

FAQPage Schema
How do I implement fluid typography with clamp() for responsive web design?▼

Fluid typography uses CSS clamp() formulas to scale text smoothly between viewport sizes without harsh jumps. This approach establishes minimum and maximum font sizes, ensuring text remains readable across mobile, tablet, and desktop displays automatically.

How do I use container queries for component-aware responsive layouts?▼

Container queries make reusable components adapt to their parent element width rather than the viewport. This allows component resizing logic to remain independent of the page layout, ensuring UI patterns behave consistently across different placement contexts.

What is the best mobile-first breakpoint strategy for Tailwind CSS?▼

A mobile-first breakpoint strategy defines clear approach ranges across mobile, tablet, desktop, and large screens to avoid override spaghetti. Applying Tailwind breakpoint conventions ensures production-ready responsive patterns that scale smoothly up to large displays.

How do I configure responsive images with srcset and sizes?▼

Responsive images use srcset and sizes attributes to deliver appropriately sized assets for each device. This configuration prevents wasted bandwidth on small screens by instructing browsers to download correctly sized hero image assets based on viewport dimensions.

Does responsive design require specific accessibility considerations for mobile devices?▼

Accessibility-minded responsiveness enforces minimum touch target sizes of 44×44px and addresses safe areas for notched devices. These requirements ensure mobile interfaces remain usable by preventing overlapping interactive elements and accommodating screen hardware variations.

Why does my responsive layout shift when moving from mobile to desktop screens?▼

Inconsistent layouts across devices often stem from lacking production-ready responsive patterns. Implementing mobile-first breakpoint strategies, fluid typography, and responsive image delivery prevents usability issues and ensures smooth scaling up to large displays.

Related Skills

Explore More Design & Creative Skills→
Likas07Likas07

ux-architect

Generate CSS design systems and layout frameworks for web development projects.

Community
Advanced
hkcm91hkcm91

optimizing-mobile-experience

Implement responsive design and touch gestures for mobile web applications.

Community
Intermediate
kentojekentoje
2

ui-skills

Enforce UI constraints for accessible agent interfaces using Tailwind defaults.

Community
Basic
RamonsDkaRamonsDka
1

responsive-design

Apply container queries, fluid typography, and grid layouts for cross-device interfaces.

Community
Intermediate