responsive-design

Plan mobile-first responsive layouts with breakpoints and content reflow rules.

13|3|Updated Mar 27, 2026

Search Tags:#typography #accessibility #mobile-first #ui-ux #breakpoints #responsive-design #design-systems

Ready to run

npx skills add https://github.com/heaptracetechnology/heaptrace-skills --skill responsive-design-heaptracetechnology

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/heaptracetechnology/heaptrace-skills/tree/main/designer/responsive-design
Command: npx skills add https://github.com/heaptracetechnology/heaptrace-skills --skill responsive-design-heaptracetechnology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle with inconsistent experiences across devices; this Skill provides a mobile-first planning framework to harmonize layouts and interactions.

Core Features & Use Cases

Mobile-first methodology: Start designs for small screens and scale up to larger viewports.
Breakpoint strategy: Define content-driven breakpoints to preserve readability and layout integrity.
Content reflow & navigation: Reflow content across breakpoints and select appropriate navigation patterns (tabs, hamburger, or persistent bars).
Assets and typography: Guidelines for images and scalable typography to maintain visual rhythm.
Use cases: Dashboard, admin panel, marketing site, and product pages across devices.

Quick Start

Outline a mobile-first responsive plan for a new dashboard and provide a breakpoint map and reflow rules.

Frequently Asked Questions about responsive-design

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

FAQPage Schema

How do I plan responsive layouts for a dashboard across different devices?▼

Plan responsive layouts by defining a mobile-first breakpoint strategy, content reflow rules, and scalable typography to harmonize UI inconsistencies from mobile to desktop.

What is mobile-first breakpoint strategy and when do I need it?▼

Mobile-first breakpoint strategy starts design on small screens and scales up using content-driven breakpoints to preserve readability and layout integrity across viewports.

How do I handle content reflow and navigation patterns for responsive design?▼

Handle content reflow by defining rules for rearranging elements across breakpoints and selecting appropriate navigation patterns like tabs, hamburger menus, or persistent bars.

Can I use this responsive design approach for marketing sites and admin panels?▼

Yes, this responsive design approach suits dashboards, admin panels, marketing sites, and product pages requiring consistent layout and interaction across devices.

What's the best way to scale typography and touch targets for accessibility?▼

Scale typography and touch targets by applying guidelines for scalable type and accessible touch dimensions to maintain visual rhythm and accessibility requirements.

Why does my UI look inconsistent across mobile and desktop breakpoints?▼

UI inconsistencies arise from lacking a mobile-first planning framework; resolve them by specifying content-driven breakpoints, reflow rules, and scalable typography.