Responsive Viewport — Design skill for Claude Code

responsive-viewport

[](https://github.com/SurendharVr/responsive-viewport/actions/workflows/ci.yml)

A **Claude Code [Agent Skill](https://docs.claude.com/en/docs/claude-code/skills) for responsive web design**. It gives Claude the numbers and the rules for making a web app render correctly from a 320px phone to a 3440px ultra-wide monitor: CSS breakpoints, container max-widths, media queries and container queries, the `` tag, safe-area insets for the iPhone notch and home indicator, `dvh`/`svh` viewport units, fluid typography with `clamp()`, 44px touch targets, and images that do not shift the layout (CLS).

Reach for it when a page has a **horizontal scrollbar on mobile**, a hero **cut off on iOS Safari**, a fixed bar **under the home indicator**, a component that looks wrong in one container but fine in another, a layout **stranded in the middle of an ultra-wide monitor**, or a team that cannot agree on which breakpoints to use.

It is deliberately narrow. It has no opinions about how a page should look — only about the numbers, and about the handful of mistakes that break layouts regardless of taste. Pair it with a visual-design skill and let each own its half.

Install

Copy the folder into your skills directory:

git clone https://github.com/SurendharVr/responsive-viewport.git ~/.claude/skills/responsive-viewport

Or download the packaged `.skill` from the [latest release](https://github.com/SurendharVr/responsive-viewport/releases/latest), drop it into Claude, and use **Save skill**.

Usage

You don't invoke it by name. Once installed it loads on its own when a task touches responsive layout — including when the word "responsive" never appears. These are verbatim prompts from its trigger benchmark, all of which pull it in:

our pricing table has a horizontal scrollbar on my galaxy s23 but only on the /pricing pa