responsive-design

Design adaptive user interfaces for web and mobile workflows.

3|Updated Mar 28, 2026

Search Tags:#typography #design #ui #accessibility #layout #responsive #breakpoints

Ready to run

npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill responsive-design-hulusi-tunc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: responsive-design
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/ui-design--responsive-design
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill responsive-design-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing consistent, accessible interfaces that work across devices and input methods.

Core Features & Use Cases

Fluid: percentage-based widths and flexible layouts that adapt to available space.
Adaptive: distinct layouts at defined breakpoints to optimize readability and interaction.
Mobile-first: start with the smallest screens and progressively enhance for larger viewports.
Content-first: prioritize content needs to drive breakpoints and component behavior.
Use Case: build a responsive dashboard that scales from mobile cards to a full desktop grid with accessible controls.

Quick Start

Define the smallest viewport first, then add breakpoints and patterns to adapt the UI at each size.

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 that adapt to different screen sizes?▼

Design responsive layouts by starting with a mobile-first approach, building fluid percentage-based widths, then adding content-driven breakpoints to adapt the UI for larger viewports and optimize readability across all screen sizes.

What is the mobile-first approach for adaptive UI design?▼

The mobile-first approach for adaptive UI design involves building the smallest viewport layout initially, then progressively enhancing the interface with distinct layouts and interaction patterns at defined breakpoints for larger screens.

How do I make responsive typography and images accessible across breakpoints?▼

Make responsive typography and images accessible across breakpoints by applying fluid layout strategies and ensuring controls support accessibility-ready focus and keyboard navigation at every defined viewport size.

What's the best way to build a responsive dashboard that scales from mobile cards to a desktop grid?▼

Build a responsive dashboard by starting with mobile card layouts, then applying content-first breakpoints and adaptive layout strategies to progressively scale the UI into a full desktop grid with accessible controls.

When do I need content-driven breakpoints versus fluid percentage-based layouts?▼

Use fluid percentage-based layouts to adapt to available space continuously, and apply content-driven breakpoints when content readability or interaction patterns require distinct, adaptive layouts at specific viewport widths.