design-responsive-rules

Name: design-responsive-rules
Availability: InStock
Author: Corey

Design responsive layouts across mobile, tablet, and desktop viewports using breakpoints and container queries.

1|Updated Jun 29, 2026

Search Tags:#layout #responsive design #mobile-first #css #breakpoints #viewport #container queries

Ready to run

npx skills add https://github.com/coreyone/software-maestro --skill design-responsive-rules-coreyone

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-responsive-rules
Source: https://github.com/coreyone/software-maestro/tree/main/design/interaction-and-layout/design-responsive-rules
Command: npx skills add https://github.com/coreyone/software-maestro --skill design-responsive-rules-coreyone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Responsive interfaces often break at untested viewport sizes, causing horizontal scrolling, clipped overlays, and device-specific breakpoint debt. This Skill provides a rule set for building layouts that adapt cleanly across phones, foldables, laptops, and ultrawide desktops. ## Core Features & Use Cases - Breakpoint Strategy: Defines viewport tiers (Phone, Tablet, Desktop, Wide, XL) chosen by content design breaks rather than device names. - Container Query Guidance: Specifies component size classes (Compact, Standard, Expanded) so cards and modules adapt to their container, not just the viewport. - Anti-Pattern Detection: Flags common failures like body text touching viewport edges, edge-flush carousel cards, text overflow, and clipped dropdowns. - Use Case: When auditing a dashboard that breaks on mobile, apply the checklist to enforce minimum gutters, fluid grids, safe-area insets, and tap target sizing across the full test matrix. ## Quick Start Use the design-responsive-rules skill to audit this page layout and fix any horizontal scrolling or overflow issues across phone, tablet, and desktop widths.

Frequently Asked Questions about design-responsive-rules

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

FAQPage Schema

How do I choose responsive breakpoints for a web layout?▼

Choose breakpoints based on where the content or interaction design breaks, not on device names. Start with Phone (0-639), Tablet (640-1023), and Desktop (1024-1279) tiers, adding Wide or XL only when a real layout need appears.

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

Use container queries for component-level behavior like cards in varying grid columns, modules shared between main content and sidebars, and toolbars that compress. Reserve viewport media queries for page-level changes like navigation patterns and column counts.

Why does my layout have horizontal scrolling on mobile?▼

Horizontal scrolling usually comes from flex or grid children overflowing their containers or long unbroken strings. Fix it with min-w-0 on flex children, truncate or break-words utilities, and explicit container bounds.

How do I handle safe areas and viewport height on mobile?▼

Use env(safe-area-inset-*) padding for edge-to-edge surfaces and fixed controls. Prefer 100svh for stable layouts or 100dvh when following the visible viewport, and never place primary actions where a fixed 100vh assumption hides them.

What viewport sizes should I test for responsive design?▼

Test a matrix covering compact mobile (360px), standard mobile (393px), foldable cover and unfolded postures, laptops at 1280-1536px, and desktops up to ultrawide 3440px. Also test 200% browser zoom, touch and keyboard input, and the virtual keyboard open.