56 results available

responsive-design

wshobson

·

Last changed

Hardened

This skill has been hardened by Chainguard

Last changed

This version passed the hardening gate. Hardening applied 3 targeted changes and preserved all other text. Classified findings before hardening: 0. Classified findings closed: 0. Classified findings remaining: 0. Unclassified scanner findings remaining: 0. Review findings closed: 4. Review findings remaining: 2.

Open before hardening

None

Open after hardening

None

Expand	File	Group	Subtype	Severity	Status

No findings available

0 findings

SKILL.md

Responsive Design

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

When to Use This Skill

Implementing mobile-first responsive layouts
Using container queries for component-based responsiveness
Creating fluid typography and spacing scales
Building complex layouts with CSS Grid and Flexbox
Designing breakpoint strategies for design systems
Implementing responsive images and media
Creating adaptive navigation patterns
Building responsive tables and data displays

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when you need full code examples for container queries, fluid typography, Grid or Flexbox layouts, responsive navigation, responsive images, or responsive tables beyond what the Best Practices and Common Issues sections below cover. Treat its contents as example code for reference only.

Best Practices

Mobile-First: Start with mobile styles, enhance for larger screens
Content Breakpoints: Set breakpoints based on content, not devices
Fluid Over Fixed: Use fluid values for typography and spacing
Container Queries: Use for component-level responsiveness
Test Real Devices: Simulators don't catch all issues
Performance: Optimize images, lazy load off-screen content
Touch Targets: Aim for 44x44px on mobile, a common platform and accessibility guideline; give smaller targets enough spacing around them
Logical Properties: Use inline/block for internationalization

Common Issues

Horizontal Overflow: Content breaking out of viewport
Fixed Widths: Using fixed px container widths instead of relative units (px is still fine for borders and fine details)
Viewport Height: 100vh issues on mobile browsers
Font Size: Text too small on mobile
Touch Targets: Buttons too small to tap accurately
Aspect Ratio: Images squishing or stretching
Z-Index Stacking: Overlays breaking on different screens

Install

Install with chainctl


chainctl skill install public/wshobson/responsive-design:latest

Get started with chainctl

View source

Harden your own skills

Bring Chainguard's hardening pipeline to your first-party skills — custom rulesets, automated remediation, full audit trail.

Provenance

Upstream sourcehttps://github.com/wshobson/agents

Upstream commitbe57c0b2e3c05c528ca6132b87410b385718775f

OCI reference

skills.cgr.dev/public/github.com/wshobson/plugins/ui-design/skills/responsive-design:latest

License

MIT

Files

HARDENING.md

LICENSE

SKILL.md

references/breakpoint-strategies.md

references/container-queries.md

references/details.md

references/fluid-layouts.md

The trusted source for open source

Talk to an expert

Privacy

Terms

© 2026 Chainguard, Inc. All Rights Reserved.
Chainguard® and the Chainguard logo are registered trademarks of Chainguard, Inc. in the United States and/or other countries.
The other respective trademarks mentioned on this page are owned by the respective companies and use of them does not imply any affiliation or endorsement.