responsive-design

Design and review responsive interfaces across viewports, input modes, and accessibility preferences.

Updated Aug 28, 2026

Search Tags:#accessibility #frontend #responsive design #css #fluid layout #container queries #viewport testing

Ready to run

npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill responsive-design-trobias

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/trobias/portfolio-nextjs-v2/tree/main/.agents/skills/responsive-design
Command: npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill responsive-design-trobias

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often break on unusual viewport sizes, localized long text, zoom levels, or alternative input modes, causing overflow, clipped focus rings, and hidden actions that frustrate users. ## Core Features & Use Cases - Constraint-first layout guidance: Start from content constraints and component boundaries using fluid sizing, intrinsic layout, and container queries instead of device-specific breakpoints. - Comprehensive state testing: Check narrow, wide, tall, short, zoomed, and long-localized-content states, plus keyboard, touch, coarse pointers, safe areas, virtual keyboards, and reduced motion. - Use Case: Before shipping a Next.js marketing page, use this Skill to audit the hero, navigation, and dense interactive components for horizontal overflow, layout shifts, and oversized images across viewport ranges. ## Quick Start Review this page's layout for responsive issues across viewport sizes, input modes, and reduced-motion preferences.

Frequently Asked Questions about responsive-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design responsive layouts without device-specific breakpoints?▼

Start from content constraints and component boundaries rather than device screenshots. Use fluid sizing, intrinsic layout, and container queries, adding only the fewest breakpoints justified by actual content behavior.

How to test a website for responsive design issues?▼

Test narrow, intermediate, wide, tall, short, zoomed, and long-localized-content states. Verify the hero and navigation first, then representative dense and interactive components, checking for overflow, clipped focus rings, and hidden actions.

When should I use container queries instead of media queries?▼

Use container queries when a component's layout should respond to its own available space rather than the viewport, which suits reusable components placed in varied contexts. Media queries remain appropriate for page-level layout changes.

Does responsive design need to support reduced motion preferences?▼

Yes, interfaces should respect reduced-motion preferences alongside keyboard, touch, coarse pointers, safe areas, and virtual keyboards. Avoid adding heavy animation or rendering dependencies unless the performance cost is explicitly approved.

Why does horizontal overflow happen on mobile layouts?▼

Overflow typically comes from fixed-width elements, oversized images without reserved dimensions, or long unlocalized strings. Use fluid sizing, correctly sized responsive images, and test with long localized content to catch these cases.