Skip to content
Design
Command

/responsive-audit

Audit a design's responsive behaviour across breakpoints — layout, touch targets, and content reflow.

BOOST
From plugin
designer-skills
2.9k33 skills33 commands
Install
> /plugin marketplace add Owl-Listener/designer-skills

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/responsive-audit

Context preview

What this command does when you run it.

Audit a design's responsive behaviour across breakpoints — layout, touch targets, and content reflow.

Command definition

responsive-audit.md
description: Audit a design's responsive behaviour across breakpoints — layout, touch targets, and content reflow.
argument-hint: "[screen or feature name to audit]"

/responsive-audit

Audit a design for responsive behavior.

Steps

1. **Breakpoints** — Review behavior at each breakpoint using `responsive-design` skill. 2. **Grid** — Check layout grid compliance using `layout-grid` skill. 3. **Typography** — Verify type scaling using `typography-scale` skill. 4. **Spacing** — Check spacing consistency using `spacing-system` skill. 5. **Hierarchy** — Verify hierarchy holds at all sizes using `visual-hierarchy` skill. 6. **Touch targets** — Verify minimum sizes for touch using `responsive-design` skill. 7. **Report** — Document findings with recommendations.

Output

Responsive audit report with findings per breakpoint, compliance status, and remediation recommendations. Consider following up with `/design-screen` to redesign problem areas.

Ships withdesigner-skills

Design skills for the agent era, written so an AI agent can actually use them. 273 skills and 76 commands across 33 plugins, in five collections, for Claude Code and Gemini CLI. Not sure which skill you need?

Get the whole plugin

Other commands on designer-skills.