Have Autohand Code use web design guideline skills to review UI code for accessibility, layout, keyboard behavior, and responsive issues.
Check interaction, semantics, contrast, and responsive states
Quality Quality and review Review Review
autohand -p "Audit this UI for accessibility, responsive behavior, and interaction defects"
A prioritized UI accessibility review with file references, repro steps, and fixes.
Audit UI accessibility with Autohand Code is a UI quality workflow that reviews accessibility semantics, keyboard interaction, focus states, contrast, text fit, responsive behavior, and visual hierarchy. ### At a glance | Question | Answer | | --- | --- | | Best for | forms, dashboards, landing pages, component libraries, and UI changes before release | | Primary inputs | Route or component to review; Target browsers, viewport sizes, and theme requirements; Existing screenshots, acceptance criteria, and known user complaints | | Autohand Code returns | A prioritized UI accessibility review with file references, repro steps, and fixes. | | Avoid when | the design is still a rough sketch and no implementation exists yet | ### How Autohand Code handles this workflow 1. Reads UI code and nearby design conventions before judging issues. 2. Checks semantics, labels, keyboard access, focus, contrast, and responsive layout. 3. Ranks defects by user impact and release risk. 4. Provides targeted fixes and browser verification steps. ### Best inputs - Route or component to review - Target browsers, viewport sizes, and theme requirements - Existing screenshots, acceptance criteria, and known user complaints ### Strong prompt autohand -p "Audit this UI for accessibility, responsive behavior, and interaction defects" ### Autohand Code CLI options - Use `/skills use web-design-guidelines` for accessibility and UI review guidance. - Run `autohand -p "Audit this UI for accessibility, responsive behavior, and interaction defects"` with the route or component. - Use `/chrome` or browser tooling for screenshot checks after code changes. ### Review before accepting Findings should include affected element, user impact, reproduction path, suggested fix, and verification viewport. ### Source and validation signals Autohand AI maintains this workflow as first-party product guidance for Autohand Code. Use the [Autohand CLI Playbook](https://github.com/autohandai/code-cli/blob/main/docs/AUTOHAND_PLAYBOOK.md), [CLI reference](/docs/working-with-autohand-code/cli-reference.html), and [configuration reference](https://github.com/autohandai/code-cli/blob/main/docs/config-reference.md) when choosing between interactive mode, command mode, auto-mode, feature-enabled /goal, /settings, skills, MCP, and permission settings. The related resources below link to product docs and tutorials for the workflow, and the final answer should name repository-specific files, commands, outputs, or docs that a reviewer can verify. ### Frequently asked questions ### What is Audit UI accessibility with Autohand Code? Audit UI accessibility with Autohand Code is a UI quality workflow that reviews accessibility semantics, keyboard interaction, focus states, contrast, text fit, responsive behavior, and visual hierarchy. ### When should a team use Audit UI accessibility? Use it when UI code needs a quality review grounded in accessibility and product behavior. ### What evidence should reviewers check for Audit UI accessibility? Findings should include affected element, user impact, reproduction path, suggested fix, and verification viewport.
Skill Skilled: Web Design Guidelines Use accessibility and UI review guidance. https://skilled.autohand.ai/skill/web-design-guidelines Guide Frontend UI Skill Review frontend work against product conventions. /docs/guides/skills/frontend-ui.html Reference Chrome Verify UI behavior in browser contexts. /docs/working-with-autohand-code/chrome.html