responsive-testing
Automates responsive design testing across mobile, tablet, and desktop breakpoints.
Install
mkdir -p .claude/skills/responsive-testing && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12911" && unzip -o skill.zip -d .claude/skills/responsive-testing && rm skill.zipInstalls to .claude/skills/responsive-testing
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Verify responsive behavior across mobile, tablet, laptop, desktop, and large screens. Ensures layouts remain visually consistent and usable regardless of device.Key capabilities
- →Verify responsive behavior across mobile, tablet, laptop, desktop, and large screens
- →Ensure layouts remain visually consistent
- →Check for horizontal scrolling
- →Check for clipped content
- →Verify navbar visibility and usability
How it works
The skill runs checks against predefined breakpoints and UI elements to ensure the application's layout and components adapt correctly to different screen sizes.
Inputs & outputs
When to use responsive-testing
- →Testing responsive mobile layouts
- →Verifying desktop dashboard displays
- →Checking for layout overflows
About this skill
Responsive Testing Skill
Runs whenever frontend files are modified.
Goal
The application must feel native and polished on all devices.
Reference standard:
- Notion
- Stripe
- Linear
- Vercel
The user should have the same experience regardless of:
- iPhone
- Samsung
- OnePlus
- Pixel
- iPad
- Android Tablets
- MacBook
- Windows Laptop
- Ultrawide Monitor
Required Breakpoints
Mobile
- 320px
- 360px
- 375px
- 390px
- 414px
- 430px
Tablet
- 768px
- 820px
- 834px
- 1024px
Desktop
- 1280px
- 1440px
- 1728px
- 1920px
Navbar Checks
- Logo remains visible
- Navigation remains usable
- Mobile menu functions correctly
- No overlap between navigation items
- Avatar menu remains accessible
- Sign In / Sign Up remain visible
Form Checks
- Login page responsive
- Register page responsive
- Forgot password responsive
- OTP verification responsive
- No input overflow
- No button overflow
Layout Checks
- No horizontal scrolling
- No clipped content
- No overflowing cards
- No overflowing tables
- No overlapping elements
- No hidden buttons
Typography Checks
- Text remains readable
- Headings scale appropriately
- Paragraph width remains readable
- No text clipping
Image Checks
- Images remain responsive
- next/image used where applicable
- No stretched images
- No cropped critical content
Dashboard Checks
- Sidebar collapses correctly
- Mobile navigation available
- Tables remain usable
- Cards stack correctly
Validation Rules
FAIL IF:
- Horizontal scrollbar appears
- Layout breaks on any breakpoint
- Navbar becomes unusable
- Auth pages break
- Text overlaps
- Buttons become inaccessible
PASS ONLY IF:
All breakpoints render correctly.
When not to use it
- →Horizontal scrollbar appears
- →Layout breaks on any breakpoint
- →Navbar becomes unusable
Limitations
- →Auth pages break
How it compares
This workflow systematically checks responsive behavior against a set of rules and breakpoints, unlike a manual visual inspection that might miss issues.
Compared to similar skills
responsive-testing side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| responsive-testing (this skill) | 0 | 2mo | No flags | Beginner |
| browser-testing | 6 | 6mo | Review | Intermediate |
| reactive-dashboard-performance | 0 | 5mo | No flags | Advanced |
| harden | 0 | 4mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
browser-testing
benchflow-ai
VERIFY your changes work. Measure performance, CLS. Use BEFORE and AFTER making changes to confirm fixes. Includes ready-to-run scripts: measure-cls.ts, detect-flicker.ts
reactive-dashboard-performance
curiositech
Expert in building blazing-fast reactive dashboards with comprehensive testing. Masters React performance patterns, testing strategies for async components, and real-world patterns from Linear,
harden
Aixbox
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
audit
educlopez
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work.
webapp-testing
anthropics
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.