// 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.
Manage the AI coaching system for NutriProfile. Use this skill when working with personalized nutrition advice, daily tips, motivational messages, challenges, or the coaching features. Handles user context, streak management, and gamification integration.
Design and implement REST API endpoints for NutriProfile. Use this skill when creating new endpoints, modifying API schemas, working with Pydantic models, or ensuring OpenAPI compliance. Follows FastAPI best practices.
Manage PostgreSQL database for NutriProfile. Use this skill when working with SQLAlchemy models, Alembic migrations, query optimization, or database schema changes. Covers async operations and Fly Postgres deployment.
Deploy NutriProfile to production. Use this skill when deploying backend to Fly.io, frontend to Cloudflare Pages, managing secrets, running health checks, or troubleshooting deployment issues.
Manage internationalization for NutriProfile's 7 languages. Use this skill when adding translations, creating new i18n keys, checking translation coverage, or working with RTL support for Arabic. Ensures consistency across FR, EN, DE, ES, PT, ZH, AR.
Analyze food items and calculate nutritional values for NutriProfile. Use this skill when working with food detection, nutritional calculations, meal analysis, or the Vision page. Covers calories, proteins, carbs, fats, and portion estimation.
| 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 |
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).
ALWAYS design for mobile first, then add breakpoints for larger screens.
// ✅ CORRECT: Mobile-first
className="text-sm sm:text-base md:text-lg lg:text-xl"
// ❌ WRONG: Desktop-first
className="text-xl lg:text-lg md:text-base sm:text-sm"
| 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 |
// Page titles
className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold"
// Section headings
className="text-xl sm:text-2xl md:text-3xl font-semibold"
// Body text
className="text-sm sm:text-base"
// Small text / labels
className="text-xs sm:text-sm"
// Navigation labels (bottom nav)
className="text-[10px] sm:text-xs"
// Container padding
className="p-3 sm:p-4 md:p-6 lg:p-8"
// Section padding
className="py-12 sm:py-16 md:py-20 lg:py-24"
// Grid gaps
className="gap-2 sm:gap-3 md:gap-4 lg:gap-6"
// Component margins
className="mb-4 sm:mb-6 md:mb-8"
// Cards grid
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
// Dashboard widgets
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4"
// Form layout
className="grid grid-cols-1 md:grid-cols-2 gap-4"
// Full width on mobile, auto on desktop
className="w-full sm:w-auto"
// Touch-friendly size (min 44px)
className="px-4 py-3 sm:px-6 sm:py-3 min-h-[44px] text-sm sm:text-base"
// Icon buttons
className="p-2 sm:p-3 min-h-[44px] min-w-[44px]"
// Modal container - never exceed viewport
className="fixed inset-0 z-50 flex items-center justify-center p-4"
// Modal content - responsive width
className="relative w-full max-w-[calc(100vw-32px)] sm:max-w-md md:max-w-lg bg-white rounded-xl"
// Modal with max height
className="max-h-[calc(100vh-32px)] overflow-y-auto"
// Container
className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t safe-area-bottom"
// Nav items
className="flex justify-around items-center h-16 sm:h-20"
// Nav item
className="flex flex-col items-center justify-center py-2 px-3 min-w-[64px]"
// Icon
className="h-5 w-5 sm:h-6 sm:w-6"
// Label
className="text-[10px] sm:text-xs mt-1 truncate max-w-[48px] sm:max-w-none"
// Show on larger screens only
className="hidden md:flex items-center space-x-6"
// CRITICAL: Size blobs responsively to prevent overflow
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
"
// Always hide overflow on parent container
className="relative overflow-hidden"
// Responsive image
className="w-full h-auto object-cover"
// Hero image
className="w-full h-[200px] sm:h-[300px] md:h-[400px] object-cover"
// Avatar
className="w-10 h-10 sm:w-12 sm:h-12 rounded-full"
// Card container
className="
bg-white dark:bg-gray-800
rounded-lg sm:rounded-xl
p-4 sm:p-6
shadow-sm hover:shadow-md
transition-shadow
"
// Card with image
className="
overflow-hidden
rounded-lg sm:rounded-xl
"
Minimum touch target: 44x44 pixels
// Interactive elements must be at least 44px
className="min-h-[44px] min-w-[44px]"
// Add padding to reach minimum
className="p-3" // 12px padding on each side
// For inline links, add vertical padding
className="py-2 -my-2" // Visual alignment preserved
// Bottom navigation
className="pb-safe" // Uses safe-area-inset-bottom
// Or with Tailwind config
className="pb-[env(safe-area-inset-bottom)]"
// Full safe area
className="p-safe"
// Background
className="bg-white dark:bg-gray-900"
// Text
className="text-gray-900 dark:text-gray-100"
// Borders
className="border-gray-200 dark:border-gray-700"
// Hover states
className="hover:bg-gray-100 dark:hover:bg-gray-800"
// Prevent horizontal scroll on page
<body className="overflow-x-hidden">
// Container with decorative elements
<div className="relative overflow-hidden">
{/* Decorative blobs */}
</div>
// Text truncation
className="truncate" // Single line
className="line-clamp-2" // Multiple lines
// Fix: Add overflow-hidden to container
className="overflow-hidden"
// Fix: Use max-width with calc
className="max-w-[calc(100vw-32px)]"
// Fix: Reduce decorative element sizes on mobile
className="w-[200px] sm:w-[400px]"
// Fix: Start with readable size
className="text-sm sm:text-base" // Not text-xs
// Fix: Add minimum size
className="min-h-[44px] min-w-[44px] p-3"
// Fix: Use calc for max dimensions
className="max-w-[calc(100vw-32px)] max-h-[calc(100vh-32px)]"
// Fix: Add padding to main content
className="pb-20" // Height of bottom nav + spacing
Key responsive components:
frontend/src/components/layout/BottomNav.tsxfrontend/src/components/layout/Header.tsxfrontend/src/components/ui/Button.tsxfrontend/src/components/ui/Modal.tsxfrontend/src/pages/*.tsx (all pages)