skills.rest
imkdw
imkdwCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Frontend Responsive

Implement Tailwind CSS v3 breakpoint-driven responsive UI layouts for Next.js applications.

1|Updated Dec 4, 2024
Search Tags:#accessibility#frontend#responsive design#UI/UX#mobile-first#Next.js#Tailwind CSS#breakpoints
One-click install
npx skills add https://github.com/imkdw/imkdw-dev --skill frontend-responsive-imkdw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Responsive
Source: https://github.com/imkdw/imkdw-dev/tree/main/.claude/skills/frontend-responsive
Command: npx skills add https://github.com/imkdw/imkdw-dev --skill frontend-responsive-imkdw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Websites that don't adapt gracefully to different screen sizes provide a poor user experience, leading to high bounce rates and frustrated users. This Skill ensures your UIs are fluid, accessible, and performant on any device, from mobile to large desktops.

Core Features & Use Cases

  • Mobile-First Design: Build layouts starting with mobile styles, then progressively enhance for larger screens using Tailwind CSS breakpoints, ensuring optimal performance.
  • Tailwind Breakpoints: Utilize Tailwind CSS v3 breakpoints (sm:, md:, lg:, xl:, 2xl:) for precise control over responsive layouts and component adaptations.
  • Adaptive Components: Implement responsive navigation (mobile sidebar, desktop header), fluid grid layouts, responsive typography, and optimized images with next/image.
  • Use Case: When designing a new article list, ensure it displays as a single column on mobile, two columns on tablets, and three columns on desktops, with images scaling appropriately using next/image and Tailwind's responsive utilities.

Quick Start

Help me make this div responsive: it should be flex-col on mobile, flex-row on medium screens, and have gap-4 on mobile, gap-6 on medium screens, using Tailwind CSS.

Frequently Asked Questions about Frontend Responsive

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

FAQPage Schema
How do I make a Next.js layout responsive across mobile, tablet, and desktop screens?▼

Build with mobile-first CSS using Tailwind CSS v3 breakpoints (sm:, md:, lg:, xl:, 2xl:) to progressively enhance layouts. Start with mobile styles, then layer breakpoint prefixes to adapt flexbox direction, grid columns, spacing, and typography for each viewport size.

What's the best way to structure responsive navigation in Next.js—mobile sidebar versus desktop header?▼

Use Tailwind breakpoints to conditionally render components: hide the desktop header and show a mobile sidebar below md:, then reverse above md:. Apply responsive utilities to adjust padding, positioning, and toggle visibility based on viewport size.

How do I optimize images for responsive layouts in Next.js?▼

Use next/image with srcSet and responsive sizes attribute to serve scaled images per viewport. Combine with Tailwind's responsive width and height utilities (w-full, h-auto) to ensure images scale fluidly without distortion across devices.

Can I ensure touch-friendly interactions on mobile while maintaining responsive design?▼

Responsive design includes accessibility for touch: set minimum touch-target sizes (48px recommended), increase padding and gap spacing on mobile using Tailwind utilities, and test across viewports with Playwright to verify interaction sizes on all devices.

Do I need Tailwind CSS v3 specifically for responsive breakpoints, or can I use earlier versions?▼

Tailwind v3 breakpoints (sm:, md:, lg:, xl:, 2xl:) are standard mobile-first utilities. Earlier versions include similar breakpoints, but v3 offers improved performance and tooling. Check your project's Tailwind config to confirm available breakpoint prefixes.

Why do responsive grids sometimes break layout on certain devices?▼

Misaligned breakpoints or fixed widths override Tailwind's fluid grid. Ensure grid columns use responsive prefixes (grid-cols-1 sm:grid-cols-2 lg:grid-cols-3), gaps scale with spacing utilities (gap-4 md:gap-6), and no fixed widths constrain container flexibility.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

responsive-design-system

Define responsive design systems with Tailwind CSS breakpoints, fluid typography, and container queries.

Community
Advanced
Gekkos-techGekkos-tech
4

core-web-vitals

Optimize LCP, INP, and CLS metrics for web pages.

Official
Intermediate
0xDarkMatter0xDarkMatter
29

tailwind-patterns

Generate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.

Community
Basic
PrasadTelasulaPrasadTelasula

responsive-design

Implement mobile-first responsive layouts using Tailwind CSS breakpoints.

Community
Advanced