responsive-review
Review responsive and flexible layout for accessibility across devices, zoom levels, and orientations. Chains: responsive-accessibility, flexible-typography, information-density. Use when testing an existing interface across screen sizes and zoom levels for accessibility.
- Installs
- 83
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/inclusive-design-skills --skill responsive-review- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads responsive-review automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Responsive Accessibility Review
Test whether an interface maintains accessibility across the full range of screen sizes, zoom levels, and orientations that real users encounter.
Process
Step 1: Viewport Testing
Test the interface at these viewport widths:
- 320px (small mobile)
- 375px (standard mobile)
- 768px (tablet)
- 1024px (small desktop / tablet landscape)
- 1280px (standard desktop)
- 1440px+ (large desktop)
At each viewport, using responsive-accessibility, document:
- Content that overflows or is hidden
- Interactive elements that are unreachable
- Touch targets below 44×44px on touch viewports
- Navigation that doesn't adapt
- Functionality that disappears entirely
Step 2: Zoom Testing
At 1280px viewport, test at:
- 100% (baseline)
- 150% (common for low vision users)
- 200% (WCAG requirement)
Document:
- Horizontal scrolling that appears
- Text that overflows containers
- Overlapping elements
- Sticky headers that consume excessive space
- Modals or tooltips that go off-screen
Step 3: Typography Scaling
Using flexible-typography, test with system font size at maximum. Document:
- Text that doesn't scale
- Containers that clip or truncate text
- Layout that breaks when text grows
- Fixed-height elements that don't expand
Step 4: Orientation Testing
Test in both portrait and landscape. Document:
- Content that only works in one orientation
- Orientation lock that prevents rotation
- Layout that breaks or wastes space in one orientation
Step 5: Density Check
Using information-density, at each viewport verify:
- Is the default density appropriate for the device?
- Can users adjust density?
- Does compact density maintain minimum touch targets?
- Does spacious density work without excessive scrolling?
Output
Deliver a responsive accessibility report:
- Viewport matrix — pass/fail at each viewport width for core tasks
- Zoom results — issues at 150% and 200%
- Typography results — text scaling failures
- Orientation results — portrait/landscape issues
- Fix list — prioritised by severity, grouped by:
- Fixes that affect all viewports
- Fixes specific to mobile
- Fixes specific to zoom
FAQ
What does the responsive-review skill do?
Review responsive and flexible layout for accessibility across devices, zoom levels, and orientations. Chains: responsive-accessibility, flexible-typography, information-density. Use when testing an existing interface across screen sizes and zoom levels for accessibility.
How do I install responsive-review?
Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill responsive-review in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/responsive-review/ (personal) or .claude/skills/responsive-review/ (project).
Which AI agents can use responsive-review?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is responsive-review safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains responsive-review?
It is published by owl-listener in owl-listener/inclusive-design-skills. It has 83 recorded installs.
More from owl-listener/inclusive-design-skills
keyboard-navigation
owl-listener/inclusive-design-skills
Design keyboard navigation and focus management for users who cannot or prefer not to use a mouse or touch screen. Use when designing any interactive interface — forms, menus, modals, tabs, carousels, drag-and-drop, data tables, or custom components. Triggers on: keyboard, focus, tab order, focus trap, skip link, arrow keys, keyboard shortcut, can't use mouse, motor disability, switch access, focus indicator, focus ring.
plain-language-design
owl-listener/inclusive-design-skills
Write and review content for plain language accessibility. Use when writing interface copy, error messages, instructions, onboarding text, help content, legal or medical information, forms, or any user-facing text. Triggers on: plain language, reading level, simplify text, jargon, hard to understand, nobody reads this, unclear copy, rewrite, too complicated, ESL, literacy, readability.
cognitive-load-assessment
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
user-preference-respect
owl-listener/inclusive-design-skills
Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, media query, user settings, system settings, accessibility settings, OS settings.
error-prevention-recovery
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
responsive-accessibility
owl-listener/inclusive-design-skills
Design responsive layouts that maintain accessibility across screen sizes, zoom levels, and orientations. Use when designing responsive interfaces, testing zoom behaviour, or reviewing layouts across devices. Triggers on: responsive, zoom, reflow, breakpoint, mobile accessibility, screen size, orientation, viewport, 200% zoom, text scaling, layout shift, horizontal scroll.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.