skills.rest
ayia
ayiaCOMMUNITY
Explore all skills by this author →
GitHub

responsive-design

Apply mobile-first Tailwind CSS breakpoints to fix responsive UI layouts from 375px to 1920px+.

Updated Dec 22, 2025
Search Tags:#layout#mobile-first#css#responsive#tailwind#ui-design#breakpoints
One-click install
npx skills add https://github.com/ayia/NutriProfile --skill responsive-design-ayia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/ayia/NutriProfile/tree/main/.claude/skills/responsive-design
Command: npx skills add https://github.com/ayia/NutriProfile --skill responsive-design-ayia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

NutriProfile interfaces frequently break on smaller screens. This skill standardizes responsive behavior, ensuring components render correctly from mobile to desktop while maintaining accessibility and performance.

Core Features & Use Cases

  • Mobile-first approach: Design for small screens first, then progressively enhance with breakpoints (sm:, md:, lg:, xl:, 2xl:).
  • Tailwind breakpoints guidance: Clear mappings for typography, spacing, grid layouts, and common components.
  • Practical patterns: Typography, spacing, grids, modals, navigation, and decorative elements to maintain consistency across screens.

Quick Start

Begin by applying mobile-first Tailwind classes to components and progressively add breakpoints (sm:, md:, lg:, xl:, 2xl:) for larger screens.

Frequently Asked Questions about responsive-design

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

FAQPage Schema
How do I fix responsive UI layout breaks on smaller mobile screens?▼

Fix responsive UI layout breaks by applying a mobile-first approach with Tailwind CSS breakpoints (sm:, md:, lg:, xl:, 2xl:) to progressively enhance components and ensure cross-device consistency from 375px to 1920px+.

What is the best way to scale typography and spacing across breakpoints?▼

Scale typography and spacing across breakpoints by applying standardized Tailwind CSS breakpoint mappings and practical patterns, ensuring text and layout elements render consistently from mobile to desktop screens.

How do I build mobile-first navigation and modals in Tailwind CSS?▼

Build mobile-first navigation and modals in Tailwind CSS by applying breakpoint classes progressively from small screens upward, utilizing standardized patterns to maintain accessibility and cross-device consistency.

Does this responsive design approach support accessible touch targets on mobile?▼

Yes, this responsive design approach supports accessible touch targets on mobile by enforcing UI component fixes and cross-device consistency from 375px upward within the NutriProfile interface.

Can I use this skill for UI layouts beyond the 1920px breakpoint?▼

Yes, you can use this skill for UI layouts beyond the 1920px breakpoint, as it enforces Tailwind CSS breakpoint usage to ensure cross-device consistency up to and exceeding 1920px.

Why does my Tailwind grid layout break when scaling from mobile to desktop?▼

Your Tailwind grid layout breaks when scaling from mobile to desktop if you lack standardized responsive patterns; applying mobile-first breakpoint mappings for grids fixes cross-device rendering inconsistencies.

Related Skills

Explore More Design & Creative Skills→
Jicate-SolutionsJicate-Solutions

mobile-responsive

Convert web pages to mobile-responsive layouts in Next.js/React with Tailwind CSS.

Official
Intermediate
PrasadTelasulaPrasadTelasula

responsive-design

Implement mobile-first responsive layouts using Tailwind CSS breakpoints.

Community
Advanced
flitzrrrflitzrrr
4

responsive-design

Implement mobile-first CSS with fluid grids, responsive images, and touch optimization.

Community
Intermediate
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate