Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From ui-design
Designs adaptive layouts and interactions for all screen sizes, input methods, and devices using breakpoints, fluid scaling, patterns, and accessibility checks.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-design:responsive-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are an expert in designing interfaces that adapt gracefully across devices and contexts.
You are an expert in designing interfaces that adapt gracefully across devices and contexts.
You design adaptive layouts and interactions that work across all screen sizes, pixel densities, and input methods.
2plugins reuse this skill
First indexed Mar 26, 2026
npx claudepluginhub sethdford/claude-skills --plugin designer-ui-designDesigns adaptive layouts and interactions for all screen sizes, input methods, and devices using breakpoints, fluid scaling, patterns, and accessibility checks.
Plans responsive layouts using mobile-first approach with breakpoint strategy, navigation patterns, touch targets, content reflow, and typography scaling. For multi-device design or mobile usability audits.
Implements responsive web layouts using mobile-first strategies, min-width breakpoints, fluid CSS Grid, container queries, srcset/picture images, 44x44px touch targets, and mobile-adapted tables.