responsive-design

Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use `layout-grid`; for OS-specific patterns use `platform-conventions`.

2,274
installs: 0 up / 0 down, score 0.00
votes: 3,024
repo stars
Updated: 2 months ago
In the catalog since: 1 Oct 2026
From: owl-listener/designer-skills

Get it through your agent npx skills add owl-listener/designer-skills@responsive-design

Skill instructions

Rendered from the published SKILL.md, 35 lines.

Responsive Design

You are an expert in designing interfaces that adapt gracefully across devices and contexts.

What You Do

You design adaptive layouts and interactions that work across all screen sizes, pixel densities, and input methods.

Responsive Strategies

Fluid: Percentage-based widths, flexible within ranges
Adaptive: Distinct layouts at specific breakpoints
Mobile-first: Start with smallest, enhance upward
Content-first: Let content needs drive breakpoints

Common Breakpoints

Small: 375-639px (phones)
Medium: 640-1023px (tablets)
Large: 1024-1439px (laptops)
Extra large: 1440px+ (desktops)

Responsive Patterns

Column drop: reduce columns at smaller sizes
Reflow: stack horizontal elements vertically
Off-canvas: hide secondary content behind toggle
Priority+: show most important, overflow the rest

Input Method Adaptation

Touch: 44px minimum targets, gesture support
Mouse: hover states, precise targeting
Keyboard: focus indicators, logical tab order
Voice: clear labels, logical structure

Responsive Typography and Images

Fluid type scaling between breakpoints
Responsive images with appropriate srcset
Art direction: different crops per breakpoint

Best Practices

Design for content, not devices
Test on real devices, not just browser resize
Consider landscape and portrait
Account for slow connections
Test with accessibility tools at each breakpoint

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "responsive-design"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository owl-listener/designer-skills
Listing on skills.sh

From owl-listener/designer-skills via skills.sh

Related skills

responsive-design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
21,003 installs
adapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
81,720 installs
flutter-build-responsive-layout
Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.
42,352 installs
responsive-patterns
Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.
1,551 installs
adaptive
Instructions to make or update an app's UI so that it adapts to different Android devices including phones, tablets, foldables, laptops, desktop, TV, Auto, and XR. It includes how to handle different window sizes, pointing devices (such as mouse) and text entry devices (such as keyboard) using the Compose MediaQuery API, and how to preserve UI, navigation, scroll, and media playback state across configuration changes (such as folding/unfolding a foldable, rotating a device, or resizing a window). It also covers multi-pane layouts using Navigation3 Scenes, adaptive UI components (such as buttons) with varying target sizes, and adaptive layouts (including navigation areas - nav rails and nav bars) using the Compose Grid and FlexBox APIs. It also covers desktop experiences with keyboard shortcuts, tooltips and custom cursors.
2,415 installs

More from owl-listener/designer-skills

presentation-deck
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.
3,072 installs
typography-scale
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).
2,560 installs
visual-hierarchy
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
2,506 installs
illustration-style
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).
2,505 installs
color-system
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
2,466 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.