----- ## name: mobile-responsiveness description: > Ensure every website, web app, landing page, dashboard, or UI component is fully responsive across all screen sizes — mobile, tablet, desktop, ultrawide, and foldable devices. ALWAYS use this skill whenever you are asked to create, build, generate, or code any web page, website, web application, UI component, dashboard, layout, landing page, portfolio, form, or any HTML/CSS/JS/React/Vue/Svelte/Angular output. This skill applies regardless of the CSS framework (Tailwind, Bootstrap, plain CSS, CSS Modules, styled-components, etc.) or UI library being used. Even if the user does not mention “responsive” or “mobile” — every web output MUST be responsive by default. Treat responsiveness as a non-negotiable baseline, not an optional add-on. Triggers on: website, web page, web app, UI, component, layout, dashboard, landing page, portfolio, form, artifact, HTML, React, frontend, build me a site, create a page, make a component, or any request whose output will be rendered in a browser. # Mobile Responsiveness Skill **Golden Rule: Every web output is responsive by default. No exceptions.** When building any web interface, responsiveness is not a feature — it is a fundamental requirement. Every layout, component, and interactive element must adapt gracefully from 320px mobile screens to 2560px+ ultrawide monitors. This document provides the complete set of rules and patterns to follow, regardless of your tech stack or CSS framework. ----- ## 1. Mobile-First Mindset Build for the smallest screen first, then progressively enhance for larger viewports. **Why mobile-first matters:** Starting with mobile forces you to prioritize content, simplify layouts, and design for constraints. Enhancing upward is far easier and more reliable than trying to shrink a desktop layout down to mobile. **In practice, this means:** - Your base (un-media-queried) styles define the mobile layout - Use `min-width` media queries to layer on tablet and desktop enhancements - Never write desktop-first CSS that you then override with `max-width` queries for mobile - Content hierarchy should be determined at the mobile level — desktop just gets more room ----- ## 2. The Viewport Meta Tag Every HTML document MUST include this in the ``: ```html ``` Without this tag, mobile browsers will render the page at a virtual desktop width (~980px) and zoom out, making everything tiny and unreadable. This single line is the foundation of all mobile responsiveness. Never omit it. ----- ## 3. Breakpoint Strategy Use these breakpoints as your standard reference. They cover all common device categories: |Token|Min-width|Target devices | |-----|---------|-------------------------------------| |`xs` |0 |Small phones (320px–479px) | |`sm` |480px |Large phones (480px–639px) | |`md` |640px |Small tablets, large phones landscape| |`lg` |768px |Tablets portrait | |`xl` |1024px |Tablets landscape, small laptops | |`2xl`|1280px |Laptops, desktops | |`3xl`|1536px |Large desktops, ultrawide | **Framework mappings (for reference):** - **Tailwind CSS:** `sm:640`, `md:768`, `lg:1024`, `xl:1280`, `2xl:1536` - **Bootstrap:** `sm:576`, `md:768`, `lg:992`, `xl:1200`, `xxl:1400` - **Plain CSS:** Use the table above with `@media (min-width: ...)` queries **Important:** Don’t use breakpoints mechanically. Test your layout by resizing continuously from 320px to 2000px+. If something breaks at 520px, add a breakpoint at 520px. Content dictates breakpoints, not arbitrary device widths. ----- ## 4. Layout Rules ### 4.1 Fluid Containers Every top-level container must be fluid with a sensible max-width: ``` Container behavior: - width: 100% - max-width: 1200px–1400px (adjust to your design) - padding-inline: 16px (mobile) → 24px (tablet) → 32px+ (desktop) - margin-inline: auto (centers the container) ``` Never use a fixed pixel width on your main container. It will overflow on any screen smaller than that width. ### 4.2 Grid and Flex Layouts Must Collapse Every multi-column layout must gracefully reduce columns on smaller screens: ``` Column behavior by viewport: < 480px: 1 column (full width, stacked) 480–767px: 1–2 columns 768–1023px: 2–3 columns 1024px+: 3–4+ columns (as designed) ``` **CSS Grid approach:** Use `auto-fit` or `auto-fill` with `minmax()` so the grid adapts automatically: ```css grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); ``` **Flexbox approach:** Use `flex-wrap: wrap` so items flow to the next row when space runs out. **Tailwind approach:** ``` grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ``` ### 4.3 No Horizontal Overflow This is a hard rule. At no viewport width should the page produce a horizontal scrollbar on the main content. Common causes and fixes: - **Fixed-width elements:** Replace with `max-width: 100%` - **Wide tables:** Wrap in a horizontally scrollable container - **Long unbroken text/URLs:** Apply `overflow-wrap: break-word` or `word-break: break-word` - **Absolute positioned elements:** Ensure they don’t extend beyond the viewport - **Large images:** Always use `max-width: 100%; height: auto;` - **Pre/code blocks:** Wrap in `overflow-x: auto` container ### 4.4 Spacing Scales Down Padding and margins should reduce on smaller screens. Generous whitespace on desktop becomes tighter on mobile to conserve precious vertical space: ``` Desktop padding/gap: 32px–48px Tablet padding/gap: 24px–32px Mobile padding/gap: 12px–16px ``` Use relative units (`rem`, `em`, `clamp()`) or responsive utility classes to achieve this. ----- ## 5. Typography Rules ### 5.1 Fluid Typography Text must be readable at every viewport width without manual zooming. **Minimum base font size:** 16px (1rem). Never go below this for body text on any device. Mobile browsers may zoom in on inputs with font-size below 16px, causing layout shifts. **Use `clamp()` for fluid scaling:** ```css font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); /* body */ font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem); /* h1 */ font-size: clamp(1.25rem, 1rem + 1vw, 2rem); /* h2 */ ``` ### 5.2 Line Length Optimal reading line length is 45–75 characters. On wide screens, constrain text containers with `max-width: 65ch` or similar to prevent lines from stretching too far. ### 5.3 Text Overflow Long titles, names, or dynamic content must not break layouts: - Apply `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;` for single-line truncation - Or use `-webkit-line-clamp` for multi-line truncation - For URLs or code: `word-break: break-all` or `overflow-wrap: anywhere` ----- ## 6. Images and Media ### 6.1 Responsive Images Every image must have: ```css img { max-width: 100%; height: auto; display: block; } ``` For hero/banner images, use `object-fit: cover` with a defined aspect ratio to prevent distortion: ```css .hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } ``` ### 6.2 Art Direction with `