Fitcheck: every screen size, checked and fixed

Web pages often break on small screens because of fixed widths, hidden content, or poor touch targets. This skill audits your components across five specific viewport widths to find and fix responsive layout failures.

What it does

• Multi-viewport testing checks layouts at 320, 375, 768, 1024, and 1440 px widths.
• Mobile-first enforcement refactors max-width overrides into layered min-width breakpoints.
• Touch target validation ensures interactive elements meet the 44px minimum for mobile usability.
• Visual stability fixes replaces vh with dvh units to prevent layout shifts from mobile browser bars.
• Overflow prevention identifies and resolves horizontal scrolling issues caused by long strings or rigid grid items.
• Form optimization scales input text to at least 16px to prevent intrusive iOS auto-zoom.

How it works

1. Scope definition identifies the target route or component and its associated layout files.
2. Visual audit captures screenshots or analyzes code at five specific breakpoints.
3. Rule validation checks the implementation against ten core responsive principles including safe areas and fluid typography.
4. Issue reporting generates a severity-ranked list of bugs with specific file:line references.
5. Applied fixes implements the minimal CSS or class changes required and re-verifies across all widths.

Frameworks & tools

This skill is framework-neutral. It works with Tailwind CSS, vanilla CSS, and modern web frameworks like React or Next.js. It utilizes Playwright or browser device toolbars for visual capture when available.

Why this beats prompting it yourself

Generic prompts often ignore the "small mobile" 320px width or suggest heavy JavaScript listeners for layout. This skill enforces a strict CSS-first approach and follows a systematic 10-point checklist that covers edge cases like env(safe-area-inset) and clamp() for fluid type.

Use cases

• Auditing a pricing page before shipping to ensure grid cards do not overflow on small phones.
• Fixing "broken" mobile navigation menus where touch targets are too small for thumbs.
• Migrating a legacy desktop-centric component to a modern mobile-first structure.
• Preventing horizontal scroll on blog layouts containing long URLs or wide tables.

Known limitations

Requires the application to be runnable locally for screenshot-based audits; otherwise, it performs a code-only static analysis. Does not add responsive libraries; CSS media and container queries cover it.