Responsive design

Skill Infrasity-Labs/dev-gtm-claude-skills/.claude/skills/responsive-design

Open-source Claude skills for GEO, AI discoverability, and developer GTM workflows. Built for developer-focused companies that want their documentation to be found, parsed, and cited by AI systems.

Install

npx -y skills add Infrasity-Labs/dev-gtm-claude-skills --skill responsive-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Design adaptive layouts and interactions that work across all screen sizes and input methods.

SKILL.md

1.6 KB, 316 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.