responsive-design

designowl-listener1.9K installs

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`.

Install

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

SKILL.md

---name: responsive-designdescription: 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`.---

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

Related skills

frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography hyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.