| name | responsive-design |
| description | Implement mobile-first responsive design for NutriProfile. Use this skill when working on UI components, fixing layout issues, ensuring touch targets, or optimizing for different screen sizes (375px to 1920px+). Uses Tailwind CSS breakpoints. |
| allowed-tools | Read,Write,Edit,Grep,Glob |
NutriProfile Responsive Design Skill
You are a responsive design expert for the NutriProfile application. This skill helps you implement mobile-first layouts that work across all screen sizes from 375px (iPhone SE) to 1920px+ (desktop).
Mobile-First Approach
ALWAYS design for mobile first, then add breakpoints for larger screens.
className="text-sm sm:text-base md:text-lg lg:text-xl"
className="text-xl lg:text-lg md:text-base sm:text-sm"
Tailwind Breakpoints
| Prefix | Min Width | Target Device |
|---|
| (none) | 0px | Mobile (iPhone SE, 375px) |
sm: | 640px | Large phones, small tablets |
md: | 768px | Tablets (iPad) |
lg: | 1024px | Laptops |
xl: | 1280px | Desktops |
2xl: | 1536px | Large desktops |
Common Patterns
Typography
className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold"
className="text-xl sm:text-2xl md:text-3xl font-semibold"
className="text-sm sm:text-base"
className="text-xs sm:text-sm"
className="text-[10px] sm:text-xs"
Spacing
className="p-3 sm:p-4 md:p-6 lg:p-8"
className="py-12 sm:py-16 md:py-20 lg:py-24"
className="gap-2 sm:gap-3 md:gap-4 lg:gap-6"
className="mb-4 sm:mb-6 md:mb-8"
Grid Layouts
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4"
className="grid grid-cols-1 md:grid-cols-2 gap-4"
Buttons
className="w-full sm:w-auto"
className="px-4 py-3 sm:px-6 sm:py-3 min-h-[44px] text-sm sm:text-base"
className="p-2 sm:p-3 min-h-[44px] min-w-[44px]"
Modals
className="fixed inset-0 z-50 flex items-center justify-center p-4"
className="relative w-full max-w-[calc(100vw-32px)] sm:max-w-md md:max-w-lg bg-white rounded-xl"
className="max-h-[calc(100vh-32px)] overflow-y-auto"
Navigation
Bottom Navigation (Mobile)
className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t safe-area-bottom"
className="flex justify-around items-center h-16 sm:h-20"
className="flex flex-col items-center justify-center py-2 px-3 min-w-[64px]"
className="h-5 w-5 sm:h-6 sm:w-6"
className="text-[10px] sm:text-xs mt-1 truncate max-w-[48px] sm:max-w-none"
Header Navigation (Desktop)
className="hidden md:flex items-center space-x-6"
Decorative Elements (Blobs)
className="
absolute -top-20 -left-20
w-[200px] h-[200px]
sm:w-[350px] sm:h-[350px]
md:w-[500px] md:h-[500px]
bg-gradient-to-r from-primary-500 to-emerald-500
rounded-full blur-3xl opacity-20
"
className="relative overflow-hidden"
Images
className="w-full h-auto object-cover"
className="w-full h-[200px] sm:h-[300px] md:h-[400px] object-cover"
className="w-10 h-10 sm:w-12 sm:h-12 rounded-full"
Cards
className="
bg-white dark:bg-gray-800
rounded-lg sm:rounded-xl
p-4 sm:p-6
shadow-sm hover:shadow-md
transition-shadow
"
className="
overflow-hidden
rounded-lg sm:rounded-xl
"
Touch Target Guidelines
Minimum touch target: 44x44 pixels
className="min-h-[44px] min-w-[44px]"
className="p-3"
className="py-2 -my-2"
Safe Area (iPhone Notch)
className="pb-safe"
className="pb-[env(safe-area-inset-bottom)]"
className="p-safe"
Dark Mode
className="bg-white dark:bg-gray-900"
className="text-gray-900 dark:text-gray-100"
className="border-gray-200 dark:border-gray-700"
className="hover:bg-gray-100 dark:hover:bg-gray-800"
Overflow Prevention
<body className="overflow-x-hidden">
<div className="relative overflow-hidden">
{/* Decorative blobs */}
</div>
className="truncate"
className="line-clamp-2"
Testing Checklist
Screen Sizes to Test
Visual Checks
Interaction Checks
Common Issues & Fixes
Issue: Horizontal overflow
className="overflow-hidden"
className="max-w-[calc(100vw-32px)]"
className="w-[200px] sm:w-[400px]"
Issue: Text too small on mobile
className="text-sm sm:text-base"
Issue: Touch targets too small
className="min-h-[44px] min-w-[44px] p-3"
Issue: Modal exceeds viewport
className="max-w-[calc(100vw-32px)] max-h-[calc(100vh-32px)]"
Issue: Content hidden behind bottom nav
className="pb-20"
File References
Key responsive components:
frontend/src/components/layout/BottomNav.tsx
frontend/src/components/layout/Header.tsx
frontend/src/components/ui/Button.tsx
frontend/src/components/ui/Modal.tsx
frontend/src/pages/*.tsx (all pages)