// Mobile-first responsive design specialist for SARAISE React/TypeScript/Tailwind applications. Provides guidance on breakpoints, fluid typography, flexible layouts, touch targets, and progressive enhancement. Use when creating responsive layouts, optimizing for mobile, or ensuring cross-device compatibility.
| name | responsive-design |
| description | Mobile-first responsive design specialist for SARAISE React/TypeScript/Tailwind applications. Provides guidance on breakpoints, fluid typography, flexible layouts, touch targets, and progressive enhancement. Use when creating responsive layouts, optimizing for mobile, or ensuring cross-device compatibility. |
| status | ✅ Working |
| last-validated | "2025-01-02T00:00:00.000Z" |
Status: ✅ Last Validated: 2025-01-02
Invoked when creating responsive layouts or optimizing SARAISE UI for mobile/tablet devices. Provides mobile-first design principles aligned with Tailwind CSS breakpoints and SARAISE design system.
@media (min-width: 640px)@media (min-width: 768px)@media (min-width: 1024px)@media (min-width: 1280px)@media (min-width: 1536px)grid classes for page layouts (grid-cols-1 md:grid-cols-2 lg:grid-cols-3)flex classes for component layouts (flex flex-col md:flex-row)w-full with max-w-*max-w-7xl mx-auto px-4 sm:px-6 lg:px-8gap-* instead of margins in flex/grid (gap-4, gap-6)