Responsive Design Skill: Container Queries and Fluid Layouts

What is the responsive design skill?

The skill's own description names four techniques: container queries, fluid typography, CSS Grid and mobile-first breakpoint strategies. It targets adaptive interfaces, fluid layouts and component level responsive behavior, and it sits in the ui-design plugin of wshobson/agents.

The SKILL.md itself is a navigation layer. Worked examples live in references/details.md, and the folder adds breakpoint-strategies.md, container-queries.md and fluid-layouts.md for the agent to open when the short rules are not enough.

Rules the agent follows

1. Start with mobile styles, then enhance for larger screens.
2. Set breakpoints from content, not from named devices.
3. Prefer fluid values over fixed ones for type and spacing.
4. Use container queries when a component should respond to its own space.
5. Keep touch targets at 44 by 44 pixels or more on mobile.
6. Use logical properties, inline and block, for internationalization.

Bugs it is told to look for

• Horizontal overflow, where content breaks out of the viewport.
• Fixed pixel widths instead of relative units.
• The 100vh problem on mobile browsers.
• Text that is too small on a phone and buttons too small to tap.
• Images that squish or stretch, and overlays that stack wrongly across screens.

Who should install it

Best for

• Front end work where the agent writes the CSS, from a single card to a full page layout.
• Design systems that need a breakpoint strategy.
• Reviews of generated layouts. Related: layout and fixing-accessibility.

Not for

• Choosing a visual style. Related: frontend-design.
• Native mobile apps, because the rules cover CSS and web media.
• Verifying results. The skill says to test real devices, so it does not replace that step.

Use it with UiChemy

This skill shapes CSS your agent writes. For WordPress, UiChemy Composer is an AI visual editor that writes real HTML, CSS and JS inside Elementor or Gutenberg, and you can still check the result against these rules. Click Get Started on uichemy.com.

How to install Responsive Design Skill: Container Queries and Fluid Layouts

gh skill install wshobson/agents responsive-design

1. Check the prerequisite

   The README says gh skill needs GitHub CLI 2.90 or later. It installs a single skill without the plugin's agents, commands or hooks.

2. Run the install

   Run gh skill install wshobson/agents responsive-design and select your coding tool when prompted. The README shows this form with a different skill name.

3. Copy it by hand

   Clone https://github.com/wshobson/agents.git and copy plugins/ui-design/skills/responsive-design, with its references folder, to your agent's skills location.

4. Ask for a layout

   Request a responsive card grid or a page header and say which breakpoints matter. The skill's description tells the agent when to apply it.

Check that it loaded

Ask for a three column product grid. The result should start from a single column, change at content driven breakpoints and use fluid sizing rather than fixed pixel widths.

Read the official instructions on GitHub

Key features

• Mobile-first approachBase styles target small screens, and larger screens add enhancements, so the default experience never depends on a wide viewport.
• Content-based breakpointsBreakpoints come from where the content breaks, with a breakpoint-strategies.md reference for design systems.
• Container queriesComponent level responsiveness is a stated use case, backed by a container-queries.md reference.
• Fluid typography and spacingFluid values are preferred over fixed ones, with a fluid-layouts.md reference for scales and layouts.
• Grid and Flexbox layoutsThe use list includes complex layouts built with CSS Grid and Flexbox, plus responsive tables and data displays.
• Responsive images and mediaCovers images and media, with advice to optimize images and lazy load off-screen content.
• Adaptive navigationLists adaptive navigation patterns as a covered use case for different screen sizes.
• Touch target minimumKeeps targets at 44 by 44 pixels or larger on mobile, and flags buttons that are too small to tap.
• Logical propertiesRecommends inline and block properties so layouts work for internationalization.
• Common issues checklistNames horizontal overflow, fixed widths, 100vh on mobile, small text, tap targets, aspect ratios and z-index stacking as the problems to check.

Frequently asked questions