skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
sanky369sanky369
29

layout-system

Design responsive layouts with Flexbox, Grid, container queries, and scalable breakpoints.

Community
Advanced
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
mrodrigues1mrodrigues1

responsive-design

Implement responsive web layouts with container queries and fluid scaling.

Community
Intermediate
ArogyaReddyArogyaReddy

responsive-design

Build responsive web interfaces with container queries, fluid typography, and CSS Grid.

Community
Advanced