What is the responsive-design skill?
The responsive-design skill, found in the ui-design plugin of Owl-Listener's designer-skills pack, makes your agent plan how an interface adapts: strategy, four breakpoint bands, layout patterns, input methods and fluid images. This page uses the owl- prefix to tell it apart from other responsive skills.
The skill's own name is responsive-design, and it lives in the ui-design plugin of Owl-Listener's designer-skills. Its SKILL.md describes an expert in responsive design, and asks the agent to make interfaces adapt across devices.
The description points to layout-grid and platform-conventions for neighbouring concerns. Grid numbers belong to the first, and platform-specific behaviour to the second, so this skill handles adaptation strategy.
Strategies and breakpoints
- Strategies: fluid, adaptive, mobile-first and content-first.
- Small: 375 to 639px, for phones.
- Medium: 640 to 1023px, for tablets.
- Large: 1024 to 1439px, for laptops.
- Extra large: 1440px and up.
Adaptation patterns
Four patterns are named: column drop, reflow, off-canvas and priority-plus. Each answers a different problem, from stacking content to hiding secondary content behind a toggle.
Input methods and media
- Touch needs 44px targets.
- Mouse supports hover.
- Keyboard needs a sensible focus order.
- Voice input is considered too.
- Type is fluid, images use srcset, and art direction swaps crops.
Who the responsive-design skill is for
Best for
- Planning how an interface behaves across the four bands before building.
- Setting touch, keyboard and hover behaviour per breakpoint.
- Choosing between column drop, reflow, off-canvas and priority-plus.
Not for
- Defining the grid itself. The description points to layout-grid.
- Writing code. The skill is guidance on strategy, bands, patterns and inputs, not a code generator.
Use it with UiChemy
Responsive plans need to survive the build. UiChemy Figma to WordPress converts Figma frames into a WordPress site, and AI to WordPress imports an AI build, so check the result at each breakpoint. Click Get Started on uichemy.com. Related pages: web-quality-audit, ui-styling and impeccable-audit.
How to install Responsive Design Skill: Breakpoints and Patterns
/plugin marketplace add Owl-Listener/designer-skillsRegister the marketplace
Paste the command above into the agent. It only records the source repository and installs nothing yet.
Install ui-design
Run
/plugin install ui-design@designer-skills, or tick the plugin on the Discover tab of /plugin. responsive-design is included.Gemini CLI
Per the README, copy the repository's .gemini/extensions contents into a .gemini/extensions folder in your project.
Make the request
Describe the interface and ask for a responsive plan. Say whether you work mobile-first.
Check that it loaded
Ask for a plan for one page. The reply should cover the four breakpoint bands, a pattern from the four named, 44px touch targets and keyboard focus order.
Key features
- Four strategiesFluid, adaptive, mobile-first and content-first approaches are each named.
- Breakpoint bandsSmall 375 to 639, medium 640 to 1023, large 1024 to 1439 and extra large 1440 and up.
- Column dropColumns stack as the viewport narrows.
- Reflow and off-canvasContent reflows, and secondary elements move off-canvas on small screens.
- Priority-plusShow the most important items and overflow the rest.
- Touch targetsTouch input needs 44px targets.
- Other input methodsMouse hover, keyboard focus order and voice are each considered.
- Fluid type and imagesFluid typography, responsive srcset and art direction adapt text and media.
- Content before devicesThe best practices say to start from the content when choosing breakpoints, and to test on real hardware and slow connections.
Frequently asked questions
What does the responsive-design skill do?
It instructs an AI agent to plan how an interface adapts across screen sizes and input methods. It covers strategy, breakpoint bands, adaptation patterns, touch and keyboard rules, fluid type and responsive images. It sits in the ui-design plugin of Owl-Listener's designer-skills.
Why is the page slug owl-responsive-design?
The skill's own folder and name are responsive-design. This hub prefixes owl- to separate it from other skills with a similar name, so the repository path remains ui-design/skills/responsive-design when you look it up on GitHub.
How do I install it?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install ui-design@designer-skills. Gemini CLI users copy the repository's .gemini/extensions contents into their project, as the README describes. Responsive-design arrives with the ui-design plugin.
Which breakpoints does it use?
Small covers 375 to 639px for phones, medium 640 to 1023px for tablets, large 1024 to 1439px for laptops, and extra large starts at 1440px. These are bands to reason about, and the best practices say to design for content first.
What size should touch targets be?
The skill gives 44px for touch input. It also asks for hover on mouse, a sensible focus order for keyboard users and consideration of voice input, so each input method has its own rule at every breakpoint.
Which agents does it support?
The pack's README names Claude Code and Gemini CLI as target agents. It names no others. The skill is plain instructions, so other tools that load skill folders may read it, but the repository does not promise support.
Does it write CSS media queries?
The skill is guidance on strategy, bands, patterns and inputs, not a code generator. Your agent can turn the plan into CSS, and the same plugin's responsive-audit command checks layout, touch targets and reflow across breakpoints afterwards.
What license applies?
GitHub lists the repository as MIT licensed. That covers reading and reusing the skill text. Check the license file in the repository for full terms before you copy files into a product you distribute.