mcpField
R
responsive-design

responsive-design

github.com/owl-listenerDesign & UI3.1k2.3k installsUpdated 8w ago
Repository

About responsive-design

A design skill for planning interfaces that adapt to screen sizes, pixel densities, and input methods. It covers layout strategies, responsive patterns, and device-aware testing.

Key features

  1. 01Fluid, adaptive, mobile-first layouts
  2. 02Breakpoint and content planning
  3. 03Responsive layout patterns
  4. 04Touch, mouse, keyboard, and voice adaptation
  5. 05Responsive type and image guidance
  6. 06Device and accessibility testing

Use cases

  1. 01Planning layouts for phones, tablets, and desktops
  2. 02Choosing breakpoints based on content needs
  3. 03Adapting controls to different input methods
  4. 04Checking accessibility across screen sizes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/owl-listener/designer-skills --skill responsive-design

After installing, type/responsive-designin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported