yslootahrobotics/.claude/skills/premium-frontend-designer/RESPONSIVE_CHECKLIST.md

Responsive Checklist

Run through every item before declaring a page done.

Viewports to verify

• 320 px (iPhone SE 1st gen, smallest practical)
• 375 px (iPhone SE 2/3, iPhone 13 mini)
• 390 px (iPhone 14/15/16 default)
• 414 px (iPhone Plus)
• 768 px (iPad portrait, md: breakpoint)
• 1024 px (iPad landscape / small laptop, lg: breakpoint)
• 1440 px (full laptop)

Global guards

• body { overflow-x: hidden } in globals.css.
• No min-w-[...] on root containers.
• All decorative absolute elements live inside relative isolate overflow-hidden parents.
• max-w-* containers always paired with mx-auto px-6 md:px-10.

Header / Nav

• Logo left, menu/CTA right on mobile.
• Hamburger button is size-10 minimum (touch target).
• Mobile menu drawer closes when a link is clicked.
• No sticky-nav overlap on anchored sections scroll-mt-24 md:scroll-mt-28 on <Section>.
• Logo height responsive: h-11 sm:h-14 md:h-16.

Hero

• H1 clamp: clamp(2.4rem, 7vw, 6.4rem) never larger upper bound.
• leading-[1.0] on serif H1 (not 0.95 clips ascenders).
• Top padding generous: pt-32 sm:pt-36 md:pt-44 (clears sticky nav + breathing room).
• CTAs use flex flex-wrap items-center gap-4 so they stack on narrow screens.
• Stats panel: collapse 1-col-tall mobile layouts to a horizontal 3-col compact row.

Cards & grids

• Mobile: grid-cols-1. Tablet: sm:grid-cols-2. Desktop: lg:grid-cols-N matched to card count.
• Avoid lg:grid-cols-3 for a 5-card list (leaves orphan) use 5 or 2-row layout matched to count.
• Aspect-ratio used over fixed heights: aspect-[4/3] or aspect-[3/4].

Typography

• No tracking > 0.22em on small labels.
• text-balance on h1/h2.
• text-pretty on body paragraphs.
• Long tokens (cert numbers, emails) use break-all or break-words to wrap.

Images

• next/image with sizes attribute matched to layout.
• Hero LCP image gets priority.
• object-cover only when crop is visually intentional.
• object-contain for logos.
• Alt text meaningful never "image" or filename.

Forms

• Field grid: grid gap-5 sm:grid-cols-2 for first/last + email/phone.
• Inputs text-base (16 px+) on mobile to prevent iOS zoom-on-focus.
• Submit button respects pending state w/ spinner.
• Field errors render below field, not in a popup.
• Success/error banner renders outside button.

Motion

• useReducedMotion() checked in every component using motion props.
• Heavy halos / parallax skipped when reduced-motion is on.
• Marquee paused when reduced-motion is on (or replaced with grid).

External links

• All <a target="_blank"> carry rel="noopener noreferrer".
• WhatsApp / Instagram / store badges have aria-label.
• App badges sized 132 px (footer) / 140-160 px (CTA).

Footer

• No duplicated link labels across columns.
• Privacy Policy only in Legal column.
• Agency credit row sits below copyright, subtle.
• Watermark contained via overflow-hidden on footer root.

Accessibility

• Every interactive element keyboard-reachable.
• focus-visible: rings on buttons, inputs, anchors.
• Modal/lightbox: scroll-locked body + Escape closes + arrows navigate.
• Color contrast checked (text-bone on obsidian = 16:1).

Final smoke test

npx tsc --noEmit                                            # clean
curl -s -o NUL -w "%{http_code}" http://localhost:3000/...  # 200 on every route

Grep for placeholder leaks:

grep -rn 'href="#"' src/
grep -rn 'href=""'  src/
grep -rn 'href="/#' src/

Should all return zero (unless intentional same-page anchors with matching IDs).