skills.rest
r-senchuk
r-senchukCOMMUNITY
Explore all skills by this author →
GitHub

mobile-first-layout

Implements responsive mobile-first page layouts and grids for Tailwind CSS v4 Next.js sites.

Updated Mar 29, 2026
Search Tags:#responsive design#mobile-first#css#next.js#tailwind css#touch targets#grid layout
One-click install
npx skills add https://github.com/r-senchuk/agentskills --skill mobile-first-layout-r-senchuk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-first-layout
Source: https://github.com/r-senchuk/agentskills/tree/main/.agents/skills/mobile-first-layout
Command: npx skills add https://github.com/r-senchuk/agentskills --skill mobile-first-layout-r-senchuk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building page layouts that work on small mobile screens and scale cleanly to tablet and desktop is error-prone: grids overflow, CTAs misalign, touch targets fall below accessibility minimums, and horizontal scroll appears at 375px. This Skill provides a structured procedure and ready-made Tailwind CSS v4 patterns to get responsive layouts right the first time. ## Core Features & Use Cases - Layout Pattern Library: Predefined templates for heroes, feature grids, testimonial rows, timelines, and 2/3+1/3 sidebar layouts with correct mobile-to-desktop breakpoint behavior. - Accessibility & Edge Handling: Enforces 44x44px touch targets, safe-area insets for sticky bottom bars, and i18n text-overflow handling for English and Italian content. - Use Case: You need a hero section with a background image, gradient overlay, and stacked CTA buttons that collapse to a single column on mobile. The Skill supplies the exact section shell, grid classes, and completion checklist to verify no horizontal scroll at 375px. ## Quick Start Ask the agent to create a responsive three-column feature grid section with stacked CTA buttons for a Next.js page using Tailwind CSS v4.

Frequently Asked Questions about mobile-first-layout

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

FAQPage Schema
How do I build a mobile-first responsive layout with Tailwind CSS?▼

Start with unprefixed classes for the mobile single-column state, then add sm:, md:, and lg: variants for larger breakpoints. Use grid with md:grid-cols-2 or md:grid-cols-3 for multi-column sections and wrap content in a max-w-5xl centered container.

How to stack CTA buttons on mobile and align horizontally on desktop?▼

Use the flex flex-col sm:flex-row pattern on the button group container with gap-4 spacing. Give the primary button w-full on mobile and sm:w-auto on larger screens so it fills the viewport width only on small devices.

Does this layout approach work with Next.js App Router?▼

Yes, the patterns target Next.js 15+ with Tailwind CSS v4, including next/image usage for hero backgrounds with fill, priority, and sizes attributes. The section shells and grids are plain JSX compatible with App Router server and client components.

What is the minimum touch target size for mobile buttons?▼

Interactive elements must meet a 44x44 pixel minimum per WCAG guidance. Achieve this with py-3 padding on text buttons, explicit h-11 w-11 sizing on icon buttons, and added padding on navigation links.

Why does my layout cause horizontal scroll on mobile?▼

Horizontal scroll usually comes from fixed pixel widths on containers or images, or content overflowing its parent. Remove fixed widths, ensure grids default to a single column without prefixes, and verify at a 375px viewport width.

When should I not use this layout skill?▼

Do not use it for design token changes, z-index or sticky element work, or non-Next.js frameworks. Those concerns belong to theming and floating-UI skills respectively, while this one covers section shells, grids, and responsive structure only.

Related Skills

Explore More Software Engineering Skills→
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
cwpete61cwpete61

geo-technical

Audit technical SEO factors including AI crawler access and server-side rendering.

Community
Advanced
dembrandtdembrandt
33

sticky-and-fixed-elements

Choose sticky or fixed positioning for persistent interface elements with CSS.

Official
Intermediate
VYRE-StudiosVYRE-Studios

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Official
Intermediate