skills.rest
kmshihab7878
kmshihab7878COMMUNITY
Explore all skills by this author →
GitHub

responsive-design

Provide mobile-first responsive layout patterns for React, Next.js, and Tailwind applications.

6|1|Updated Apr 7, 2026
Search Tags:#react#mobile-first#nextjs#responsive#tailwind#container-queries#fluid-typography
One-click install
npx skills add https://github.com/kmshihab7878/claude-code-setup --skill responsive-design-kmshihab7878
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/kmshihab7878/claude-code-setup/tree/main/skills/responsive-design
Command: npx skills add https://github.com/kmshihab7878/claude-code-setup --skill responsive-design-kmshihab7878

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many web interfaces are designed desktop-first and break on smaller viewports, causing layout overflow, poor touch targets, and inconsistent typography. This Skill provides a concise mobile-first approach and practical patterns to make React/Next.js/Tailwind UIs adapt reliably across phones, tablets, and desktops.

Core Features & Use Cases

  • Column collapse pattern for stacking content on mobile and side-by-side layouts on tablet and desktop.
  • Responsive grid strategies including breakpoint-based and auto-fill layouts for card collections.
  • Adaptive navigation patterns with mobile drawer and desktop horizontal menus, and guidance for touch targets.
  • Container queries and component-scoped adaptivity for reusable components in variable layouts.
  • Fluid typography with clamp(), responsive images and art-directed sources, and a pre-ship responsive checklist to validate common viewports.

Quick Start

Convert this desktop layout into a mobile-first Tailwind React layout and provide breakpoint, grid, navigation, and fluid-typography recommendations.

Frequently Asked Questions about responsive-design

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

FAQPage Schema
How do I convert a desktop layout to a mobile-first responsive layout in Tailwind?▼

This Skill provides mobile-first layout patterns for React and Tailwind, using column collapse strategies to stack content on mobile and expanding to side-by-side layouts on tablets and desktops using breakpoint modifiers.

What is the best way to implement fluid typography in a React application?▼

Fluid typography in a React application is best implemented using the CSS `clamp()` function. This allows text to scale dynamically across mobile, tablet, and desktop viewports without requiring multiple media queries or manual font size adjustments.

How do container queries work for adaptive React components?▼

Container queries enable component-scoped adaptivity by allowing a component to respond to the size of its parent container rather than the browser viewport. This makes reusable React components adapt reliably in variable layouts, independent of global breakpoints.

Do I need Next.js to use these responsive design patterns?▼

No, you do not need Next.js to use these responsive design patterns. While the guidance applies to Next.js, it also works with standard React applications using Tailwind utility classes, responsive images, and CSS container queries.

How do I build responsive navigation with touch targets for mobile users?▼

Building responsive navigation with touch targets involves using a mobile drawer pattern for small screens and a horizontal menu for desktops. You must also apply accessibility considerations for touch and keyboard navigation to ensure proper interaction.

Why does my responsive grid layout overflow on mobile screens?▼

Responsive grid layouts overflow on mobile screens when desktop-first styles are applied globally without smaller viewport overrides. Using auto-fill layouts and breakpoint-based mobile-first Tailwind utility classes ensures card collections adapt properly without horizontal overflow.

Related Skills

Explore More Design & Creative Skills→
ZoyaAfzalZoyaAfzal

tailwind-css

Provide Tailwind CSS utility patterns for React and Next.js projects.

Community
Intermediate
manhthien2005manhthien2005

responsive-qa

Verify responsive layout and interaction quality across Chrome viewports.

Community
Intermediate
zinohomezinohome
1

responsive-design-system

Implement responsive design systems with Tailwind CSS breakpoints and container queries.

Community
Intermediate
PrasadTelasulaPrasadTelasula

responsive-design

Implement mobile-first responsive layouts using Tailwind CSS breakpoints.

Community
Advanced