a11y-reflow-zoom

Community

Ensure UI integrity across zoom and reflow.

Authortsuji-tomonori
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill ensures that user interfaces remain functional and visually intact when users zoom in, change screen orientation, or when content reflows to fit smaller screens, preventing common accessibility barriers.

Core Features & Use Cases

  • Zoom & Reflow Compliance: Verifies that UIs do not break or become unusable at 200% zoom or on 320px width screens.
  • Layout Integrity: Addresses issues like horizontal scrolling, content overlap, and missing information in constrained layouts.
  • Hover/Focus UI Handling: Ensures that UI elements appearing on hover or focus are dismissible, hoverable, and persistent, and accessible via keyboard.
  • Use Case: When redesigning a dashboard with many cards and fixed headers, use this Skill to audit and ensure that all interactive elements and content remain accessible and usable on mobile devices and for users with low vision.

Quick Start

Audit the current screen's layout for compliance with WCAG 1.4.10 reflow and 1.4.13 hover/focus requirements.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: a11y-reflow-zoom
Download link: https://github.com/tsuji-tomonori/diopside-v3/archive/main.zip#a11y-reflow-zoom

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.