Individual skill

responsive-checker

Analyzes whether a UI will behave correctly across mobile, tablet, and desktop layouts. Use when reviewing responsive/adaptive layout code or before shipping a UI meant to work across screen sizes.

skills/ui-ux/responsive-checker/SKILL.md

Read pinned source

Source commit d0a9928d24afb7df0fad2f2f35f65d3938a6926a

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Instructions only
Last checked: Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 27
Repository last updated: Aug 20, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

claude-code Repository topic
ai Repository topic
ai-agents Repository topic
ai-coding Repository topic
ai-skill Repository topic
ai-skill-enhancement Repository topic
ai-skills Repository topic
ai-skills-analysis Repository topic
ai-skills-fest Repository topic
ai-skills-manager Repository topic
design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

README.mddoc · 1,240 bytes
SKILL.mdcore · 2,451 bytes
examples/example.mddoc · 1,768 bytes

Read excerpt


## Purpose

Determine whether a UI implementation will actually hold up across mobile, tablet, and desktop viewports — not just at whatever single width it was built and eyeballed at.

## When to Use

- Reviewing layout code (CSS/Tailwind/styled-components/etc.) meant to be responsive.
- Before shipping any UI intended to be used on multiple device classes.
- Debugging a specific "looks broken on mobile/tablet" report.

## What to Analyze

1. **Breakpoint coverage** — are there defined behaviors at common breakpoints (mobile ~375–428px, tablet ~768–1024px, desktop 1280px+), or does the layout only really work at one width?
2. **Fixed vs. fluid sizing** — hardcoded pixel widths/heights that won't adapt, versus relative units (%, `fr`, `rem`, `vw/vh` used appropriately) that do.