skills.rest
heaptracetechnology
heaptracetechnologyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/heaptracetechnology/heaptrace-skills --skill responsive-design-heaptracetechnology
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
metedatametedata
3

crit-responsive

Evaluate responsive design adaptations across screen sizes and input modalities.

Community
Advanced
HieubkavHieubkav

Frontend Responsive

Implement responsive mobile-first layouts with fluid containers, breakpoints, and touch targets.

Community
Basic
gjwrootgjwroot

ui-skills

Standardize warm, friendly UI design across mobile and web interfaces.

Community
Intermediate
deomiarndeomiarn

responsive-patterns

Create mobile-first responsive web layouts with CSS grid and media queries.

Community
Basic