Audit and fix your site’s mobile responsiveness right in your codebase, and do it without breaking the desktop layout that already works. A free checker built on Claude Code that reads your source, explains what breaks on a phone and why, then fixes it. No live URL, no hosted dashboard, no signup.
/plugin marketplace add sigistry/marketplace/plugin install responsive-design-kit@sigistry/responsive-audit ./srcPowered by the responsive-design-kit plugin.
A source-level audit across ten categories, scored and ranked by impact, from the viewport tag that decides everything down to the touch targets your thumbs actually hit.
The viewport meta tag (the master switch for mobile) and zoom-blocking anti-patterns like user-scalable=no.
Fixed pixel widths, 100vw plus padding, nowrap text, unbroken strings, and oversized media, the causes of the dreaded sideways scroll.
Hardcoded px widths where %, max-width, or clamp() belong, and fixed heights that trap growing content.
max-width: 100% and aspect ratio so nothing overflows, plus srcset so phones do not download desktop-sized files.
Whether media queries exist at all, cover the right ranges, and follow a consistent mobile-first or desktop-first approach.
Non-wrapping rows, the min-width: auto overflow trap, and fixed-column grids that never collapse on small screens.
Wide data tables without a scroll wrapper or a stacking strategy, a classic mobile-overflow offender.
Buttons and links under ~44x44px, cramped spacing, and hover-only menus with no tap or focus path.
Sub-16px body text and the iOS Safari zoom-on-focus that a sub-16px input font-size triggers.
100vh vs the mobile browser chrome, and sticky headers that overlap content on short screens.
Retrofitting responsiveness is dangerous for one reason: touching layout CSS to help mobile can silently break desktop. So every finding carries a blast radius, whether the fix touches only small screens or changes everything. It is the most useful thing in the report, because it tells you exactly how safe each change is.
Adds a property that does nothing to your current desktop render and only acts on small screens or on overflow. The viewport tag, capping an image, wrapping a wide table. Applied automatically.
Lives inside a max-width media query, so desktop is untouched by construction, like stacking a toolbar below 640px. Applied automatically.
Changes a value at every breakpoint, so it changes desktop too, like a fixed width becoming max-width. Usually right, but proposed for your review, never applied silently.
Reflows the layout or changes markup, a fixed grid going fluid, a table restacked into cards. Needs design intent and device testing, so it is proposed with its desktop impact spelled out.
Add the marketplace and the responsive-design-kit plugin to Claude Code.
Run /responsive-audit on a file or your whole app. You get a scored report, every issue with a severity and its fix blast radius.
Run /responsive-fix. It applies the safe changes as diffs and proposes the desktop-affecting ones for your approval.
| Responsive Design Checker | Browser DevTools | Online responsive testers | |
|---|---|---|---|
| Reads your source code | Yes | No (rendered page) | No (loads a live URL) |
| Names the cause with file & line | Yes | Partial (inspect by hand) | No |
| Fixes the issues for you | Yes | No | No |
| Protects your desktop layout | Yes | N/A | N/A |
| Works before you deploy | Yes | Partial | No |
| Free, no signup | Yes | Yes | Usually limited |
It is a free tool that runs inside Claude Code. You install the responsive-design-kit plugin and run /responsive-audit to scan any HTML, React, Next.js, Vue, or static site for the responsiveness problems that break layouts on phones and tablets, then fix them with /responsive-fix, without breaking your desktop layout.
Yes. The responsive-design-kit plugin is free and open source (MIT). There is no signup, subscription, or hosted dashboard, it runs locally in Claude Code on your own machine.
DevTools and online testers show you that something looks wrong at a given width; you still have to find the cause in your code and fix it by hand. The Responsive Design Checker reads your actual source, tells you which rule or element causes each problem with a file and line, and applies the fix for you as a reviewable diff.
That is the whole point of the design. Every fix is scored by its blast radius. In its default conservative mode, /responsive-fix applies only the changes that cannot affect desktop (additive or mobile-only), and it proposes anything that could change desktop for your explicit approval, with the desktop impact spelled out. Fixes are never applied silently.
Start with the highest-impact basics: a correct viewport meta tag, capping images and media with max-width: 100%, eliminating fixed pixel widths that cause horizontal scrolling, adding breakpoints where the layout strains, and making touch targets at least ~44x44px. Run /responsive-audit and it reports exactly which of these your site is missing, ordered so the safe quick wins come first.
Yes. It is framework-aware and reads the right places for each stack: React and Next.js, Vue and Nuxt, Svelte, Astro, Tailwind (responsive prefixes and config), Bootstrap, CSS modules, and styled-components or Emotion.
No. Because it runs on your source files, you can audit and fix responsiveness in a feature branch before anything ships, no live URL or deployment required. It is a source review, so it complements testing on a real device rather than replacing it, and the audit names the viewports worth checking live.