AutoGineer
Generated banner for Responsive Design
Generated logo for Responsive Design

Responsive Design

Seth HobsonCommunityCreated by Seth Hobson

  • Skill
  • Guidelines
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
— the description by Seth Hobson

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a comprehensive framework for building adaptive web interfaces. It moves beyond traditional device-based breakpoints to focus on content-driven design, leveraging modern CSS features like container queries, fluid typography, and CSS Grid. By adopting a mobile-first approach and utilizing relative units, developers can create resilient, reusable components that function seamlessly across diverse screen sizes and contexts.

What it does

  • Defines mobile-first strategies for progressive enhancement
  • Explains implementation of container queries for component-level responsiveness
  • Provides techniques for fluid typography and spacing using CSS clamp
  • Offers guidance on identifying natural, content-based breakpoints
  • Details the use of CSS Grid and Flexbox for adaptive layouts
  • Addresses common responsive issues like overflow and touch target sizing

When to use it

  • When building interfaces that must adapt to various device screen sizes
  • When creating reusable UI components that need to respond to their parent container
  • When implementing design systems that require consistent, fluid scaling
  • When refactoring fixed-width layouts to support modern responsive standards

Advantages

  • Improved component reusability via container queries
  • Better performance through mobile-first loading strategies
  • More natural layout transitions based on content rather than arbitrary device widths
  • Enhanced accessibility through proper touch target sizing and relative units

Usage examples

“How do I make a card component change its layout based on its parent container width?”
The agent will guide you to set 'container-type: inline-size' on the parent and use '@container' queries to adjust the card's internal layout.
“What is the best way to handle font sizes that scale smoothly across screens?”
The agent will explain the use of the 'clamp()' CSS function to define fluid typography ranges based on viewport or container units.
“Should I use device-based breakpoints like 768px for tablets?”
The agent will advise against device-specific breakpoints, recommending instead that you identify where your specific content layout breaks.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/wshobson/responsive-design/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip responsive-design.zip -d .agents/skills

Documentation by Seth Hobson

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 the navigation tier above is insufficient.

Best Practices

  1. Mobile-First: Start with mobile styles, enhance for larger screens

  2. Content Breakpoints: Set breakpoints based on content, not devices

  3. Fluid Over Fixed: Use fluid values for typography and spacing

  4. Container Queries: Use for component-level responsiveness

  5. Test Real Devices: Simulators don't catch all issues

  6. Performance: Optimize images, lazy load off-screen content

  7. Touch Targets: Maintain 44x44px minimum on mobile

  8. Logical Properties: Use inline/block for internationalization

Common Issues

  • Horizontal Overflow: Content breaking out of viewport

  • Fixed Widths: Using px instead of relative units

  • 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

Files

LICENSE

MIT License

Copyright (c) 2024 Seth Hobson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Seth Hobson
Publisher
Seth Hobson (Community)
Source
wshobson/agents · plugins/ui-design/skills/responsive-design · commit 4bde316
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Seth Hobson.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download responsive-design.zip