About responsive-layout-review
A responsive layout review skill for design teams. It evaluates layouts across content-driven viewport states and produces a breakpoint strategy, findings, and acceptance checks while accounting for accessibility.
Key features
- 01Assess content hierarchy and primary task
- 02Review compact through wide layouts
- 03Check navigation, forms, and media
- 04Produce breakpoint strategy and checks
- 05Preserve keyboard and zoom usability
Use cases
- 01Review a layout across viewport sizes
- 02Find issues in forms and navigation
- 03Define responsive acceptance checks
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/responsive-layout-reviewin Claude Code to confirm it loaded.
Bundled filesagents/openai.yamlreferences/responsive-layout-rules.md
Details
From the project READMEResponsive Layout Review
Use this skill to make layouts adapt by intent, not by arbitrary breakpoints.
Workflow
- Identify content hierarchy, primary task, and supported viewport/device classes.
- Read
references/responsive-layout-rules.md. - Review layout states: compact, medium, wide, high-density, keyboard, zoom, and reduced width.
- Check navigation, tables, forms, modals, media, and empty/error states.
- Produce breakpoint strategy, issues, and acceptance checks.
When not to use
- Do not use for generic advice the base model already handles without this skill's specific artifact contract.
Guardrails
- Breakpoints should follow content stress points, not only device names.
- Do not hide critical actions on small screens.
- Preserve keyboard, focus, zoom, and screen-reader usability.
Output format
Surface:
Primary task:
Responsive strategy:
- <layout state> -> <behavior>
Findings:
- <rule id> <issue> -> <fix>
Acceptance checks:
- <viewport/state check>
Comments
Markdown supported