Support content reflow at 400% zoom
SkillMediazoom-reflow is a skill that guides an AI agent through checking whether web pages stay usable when zoomed to 400%. It is used when reviewing rendered HTML, interactive components, or design-system patterns related to Support content reflow at 400% zoom. The skill covers accessibility basics, starting with native semantics before moving to keyboard behavior, focus flow, accessible names, and screen-reader output.
Available today. Use it from your connected AI after setup.
No other account needed.
Have the rendered HTML, interactive component, or design-system pattern you want reviewed available to your agent.
Then ask your AI: use the Support content reflow at 400% zoom skill
What your AI can do with it
- Check native semantics of rendered HTML first
- Inspect keyboard behavior of interactive components
- Review focus flow across a page or component
- Verify accessible names on controls
- Check screen-reader output where relevant
- Review design-system patterns for Support content reflow at 400% zoom
Getting started
- Have the rendered HTML, interactive component, or design-system pattern you want reviewed available to your agent.
- Add the zoom-reflow skill to your agent's available skills.
- Ask the agent to review the page or component for Support content reflow at 400% zoom.
- The agent will check native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/zoom-reflow/SKILL.md and read by ahel’s review.
Users with low vision zoom to 400% to read content—horizontal scrolling at that level makes it impossible to track lines of text and navigate effectively.
Quick Reference
- Content must reflow to single column at 400% zoom (1280px width at 320px equivalent)
- No horizontal scrolling required to read content
- All functionality must remain accessible at high zoom levels
- Use relative units and fluid layouts that adapt to viewport
Check
Zoom the browser to 400% and verify content reflows to a single column without horizontal scrolling, truncation, or overlapping elements. Test all interactive features remain functional at this zoom level.
Fix
Use responsive CSS with relative units (rem, em, %) instead of fixed pixels. Implement fluid layouts that adapt to viewport width. Test with CSS media queries to ensure layouts reflow gracefully.
Explain
Explain how users with low vision rely on browser zoom up to 400% to read content, and why horizontal scrolling creates significant barriers for users who can only see a small portion of the screen at once.
Code Review
Review the rendered markup and interactive states that affect Support content reflow at 400% zoom. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/zoom-reflow
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- When reviewing rendered HTML, interactive components, or design-system patterns related to Support content reflow at 400% zoom.
- What does the agent check first?
- Native semantics are checked first, before keyboard behavior, focus flow, accessible names, and screen-reader output.
- Does it test at 400% zoom?
- It guides the agent through checking that pages stay usable when zoomed to 400%, covering accessibility basics.
Advanced
- Item type
- skill
- Key
zoom-reflow- Source
- github.com/thedaviddias/front-end-checklist