responsive-design

Overview of responsive-design skill

The responsive-design skill helps an agent produce modern, implementation-ready guidance for adaptive interfaces using container queries, fluid sizing, CSS Grid, Flexbox, and mobile-first breakpoints. It is best for people building real UI layouts, design system components, dashboards, cards, navigation, or data-heavy views that must work across screen sizes without maintaining brittle device-specific CSS.

Who this responsive-design skill is for

Use this responsive-design skill if you need more than “make it mobile-friendly.” It fits frontend engineers, UI designers working with implementation details, and agent users who want practical responsive patterns for component-level behavior, not just generic media query advice.

What job it actually helps you complete

The real job-to-be-done is turning a rough layout goal into a responsive implementation strategy: what should be fluid, what should use breakpoints, when to use container queries instead of viewport queries, and how to keep components reusable across contexts.

What makes this skill different from a generic prompt

A generic prompt often produces dated advice like device-based breakpoints and excessive media queries. The responsive-design skill is centered on newer CSS patterns surfaced in the repository, especially:

• content-driven, mobile-first breakpoint strategy
• container queries for reusable components
• clamp()-based fluid typography and spacing
• layout choices that separate viewport concerns from component concerns

What matters most before you install

This is a good fit if your output target is CSS, component specs, or UI implementation guidance. It is less useful if you only want visual mockups, no-code tooling instructions, or framework-specific abstractions without underlying CSS decisions. The repository is reference-driven, so its value comes from the patterns and examples in references/, not from automation scripts.

How to Use responsive-design skill

responsive-design install context

Install the skill from the repository root skill collection:

npx skills add https://github.com/wshobson/agents --skill responsive-design

Because the upstream skill does not ship with scripts or framework bindings, installation is mainly about making the guidance callable by your agent. Expect a documentation-and-pattern skill, not a code generator with strict inputs.

Read these files first

Start with these files in order:

1. plugins/ui-design/skills/responsive-design/SKILL.md
2. plugins/ui-design/skills/responsive-design/references/container-queries.md
3. plugins/ui-design/skills/responsive-design/references/fluid-layouts.md
4. plugins/ui-design/skills/responsive-design/references/breakpoint-strategies.md

This reading order matters: the core skill gives scope, then the references add the implementation detail that actually improves output quality.

What input the skill needs from you

The responsive-design skill works best when you provide:

• the component or page type
• layout constraints
• target screen contexts
• whether responsiveness should be viewport-based, container-based, or mixed
• any design system tokens or breakpoint conventions
• browser support requirements

Weak input: “Make this responsive.”

Stronger input: “Create a responsive card grid for a dashboard. Cards must work in a full-width page and in a narrow sidebar. Use container queries where component context changes, fluid spacing and type, and keep breakpoints aligned to our sm/md/lg token scale unless content forces a different threshold.”

How to turn a rough goal into a strong prompt

A strong responsive-design usage prompt usually includes five parts:

1. UI object: card list, nav bar, pricing table, form, data table
2. Behavioral changes: stack, wrap, collapse, resize, reorder, reveal
3. Constraint source: viewport, parent container, content width
4. System rules: token scale, grid rules, minimum tap size, accessibility needs
5. Output shape: CSS example, implementation plan, breakpoint rationale, refactor advice

Example prompt:

“Use the responsive-design skill to propose a responsive strategy for a product comparison table. Prioritize small screens first, avoid horizontal overflow where possible, use content-based breakpoints, and explain whether container queries or viewport media queries should control each part. Include sample CSS for typography, spacing, and layout transitions.”

When to ask for container queries

Use container queries when a component must adapt based on where it is placed, not just on the browser width. This is especially important for reusable cards, side panels, widgets, embedded modules, and design system components.

The repository’s references/container-queries.md is the best source file if your component appears in multiple parent layouts. It includes practical syntax, named containers, and browser support notes.

When to ask for fluid layouts instead of more breakpoints

If your UI problem is mostly about scaling text, spacing, or widths smoothly, point the agent toward fluid techniques first. The references/fluid-layouts.md file is useful when you want fewer hard breakpoint jumps and more natural resizing using clamp(), relative units, and intrinsic sizing.

This usually improves:

• headings and body text
• section spacing
• card sizing
• grids that should breathe before snapping

How to use breakpoint guidance well

The repository strongly favors content-driven, mobile-first breakpoints over device catalogs. In practice, ask the skill to justify each breakpoint by layout pressure: line length, card crowding, table overflow, nav wrapping, or touch target issues.

If your team already uses Tailwind or Bootstrap breakpoint tokens, say so. The references include common scales, which helps the skill map modern strategy to existing systems instead of inventing arbitrary values.

Suggested workflow for real projects

A practical responsive-design guide workflow:

1. Describe the component and failure modes at small and large sizes.
2. Ask for a layout strategy before asking for code.
3. Decide what should be fluid, what should snap, and what should reflow.
4. Request example CSS only after the strategy is sound.
5. Test the output against your actual container widths, not just browser presets.
6. Iterate with screenshots, DOM structure, or current CSS if the first pass is too generic.

This sequence gets better results than asking for final CSS immediately.

Output formats that work best

Ask the skill for one of these output shapes:

• responsive implementation plan
• breakpoint rationale table
• CSS starter pattern
• component refactor strategy
• audit of an existing layout
• “container query vs media query” decision

These formats force clearer decisions than “give me responsive code.”

Practical tips that improve output quality

For better responsive-design for UI Design results:

• include current HTML structure when layout relationships matter
• specify if content length varies heavily
• mention minimum readable text and minimum interactive target sizes
• tell the agent whether reordering content is allowed
• note legacy browser constraints before it suggests container-query-heavy solutions

Without these inputs, the skill may choose technically modern patterns that do not fit your support matrix or component architecture.

responsive-design skill FAQ

Is the responsive-design skill beginner-friendly?

Yes, if you already know basic CSS. The skill is conceptually modern rather than beginner-tutorial oriented, so it is strongest for users who can read CSS and want better responsive decisions. Beginners can still use it, but should expect terms like container queries, intrinsic sizing, and fluid scales.

Does this skill generate framework-specific code?

Not primarily. The repository content is CSS-pattern focused. You can still ask for adaptation to React, Vue, Tailwind, or plain CSS, but the core value is the responsive strategy, not framework integration details.

Is responsive-design better than a normal UI prompt?

Usually yes, when responsiveness is central to the task. Ordinary prompts often default to old breakpoint habits or shallow “stack on mobile” guidance. The responsive-design skill gives the agent a more opinionated and up-to-date vocabulary for layout decisions.

When should I not use responsive-design?

Skip it if your task is mainly:

• visual branding
• static mockup generation
• animation-heavy interaction design
• framework setup unrelated to layout
• pixel-perfect recreation without adaptive behavior decisions

It is also a weak fit if your team cannot use modern CSS features and needs IE-era compatibility patterns.

Does it cover browser support concerns?

Partly. The references note modern support, especially for container queries, and imply graceful fallbacks. But this is not a compatibility matrix skill. If browser support is critical, include your minimum supported browsers explicitly in the prompt.

Can the skill help with design systems?

Yes. It is a good fit for breakpoint philosophy, token-aligned spacing and typography, and reusable component behavior across containers. It is especially useful when a design system needs fewer page-specific hacks and more portable components.

How to Improve responsive-design skill

Give the responsive-design skill real constraints

The biggest quality jump comes from constraints. Provide actual widths, token names, content samples, and UI states. “Responsive dashboard card” is vague; “card used in 320px sidebar and 1200px main grid with long titles and two actions” is actionable.

Ask for decisions, not just code

Better prompt:
“Use the responsive-design skill to decide which parts should use fluid sizing, which need breakpoints, and where container queries are justified.”

This produces stronger reasoning than:
“Write responsive CSS.”

Provide existing CSS when refactoring

If you already have layout code, paste the current CSS and ask the skill to simplify it. This helps it remove unnecessary media queries, identify brittle width assumptions, and replace viewport-only logic with component-aware rules where appropriate.

Common failure modes to watch for

The first output may still be weak if:

• the agent guesses breakpoints without content evidence
• container queries are used where viewport rules would be simpler
• fluid typography is added without min/max bounds
• layout changes ignore accessibility or reading comfort
• examples look elegant but do not match your DOM structure

These are fixable if you ask for rationale and tie each rule to a UI problem.

Use iteration prompts after the first draft

Good follow-up prompts:

• “Reduce unnecessary breakpoints and explain what can be fluid instead.”
• “Refactor this so the component works in both narrow sidebar and wide content areas.”
• “Add fallbacks for teams that cannot rely fully on container queries.”
• “Audit this layout for overflow, cramped text, and awkward wrap points.”

These follow-ups improve practical adoption more than asking for a full rewrite from scratch.

Validate against component contexts, not just screen sizes

A core insight of the responsive-design skill is that many failures come from testing only viewport widths. Improve results by checking the same component inside:

• full page content
• sidebar
• modal
• dense dashboard grid
• embedded marketing section

If behavior changes by container, tell the skill upfront so it can choose the right responsive mechanism.

Use the reference files as prompt anchors

Mention the repository references directly when you want deeper output:

• references/container-queries.md for component responsiveness
• references/fluid-layouts.md for smooth scaling
• references/breakpoint-strategies.md for mobile-first breakpoint decisions

This is one of the easiest ways to get more grounded responsive-design usage from an agent instead of generic frontend advice.

Improve results with better acceptance criteria

Ask the skill to optimize for specific outcomes:

• fewer media queries
• no horizontal overflow below a given width
• readable line lengths
• reusable components across container sizes
• token-aligned spacing and type
• minimal layout shift between breakpoints

Clear acceptance criteria make the responsive-design skill much more useful for production UI work.