Menu
Use when optimizing forms for keyboard navigation, focus management, or accessibility. Triggers on login pages, signup forms, checkout flows, or any form where tab order and focus behavior need improvement.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Opinionated constraints for building better interfaces with agents.
Use when a UI change needs before/after screenshot pairs for a PR or review. Triggers on "vorher/nachher", "before/after screenshots", visual comparison of a frontend refactor, or verifying that a migration did not change the look.
Use when adding or substantially changing a user-facing feature flow that the in-app help guide documents, or when editing the help guide content, screenshots, or PDF export. Triggers on guide-data.ts, /help pages, Hilfe, Anleitung, guide chapters, GuideStep/GuideChapter, or "update the docs/guide".
Use when adding or substantially changing a user-facing feature flow that the in-app help guide documents, or when editing the help guide content, screenshots, or PDF export. Triggers on guide-data.ts, /help pages, Hilfe, Anleitung, guide chapters, GuideStep/GuideChapter, or "update the docs/guide".
Use when discovering a novel solution, pattern, or technique that could benefit the team. Triggers when solving a non-obvious problem, finding a useful workflow, or learning something worth sharing. Also use when user says "make this a skill" or "share this with team".
Use when adding, removing, or renaming environment variables, modifying docker-compose files, or when lefthook flags env sync warnings. Triggers on .env changes, docker-compose edits, or "missing keys" errors.
| name | optimizing-form-accessibility |
| description | Use when optimizing forms for keyboard navigation, focus management, or accessibility. Triggers on login pages, signup forms, checkout flows, or any form where tab order and focus behavior need improvement. |
| metadata | {"author":"moto-nrw","version":"1.0.0"} |
Optimize forms for keyboard navigation and accessibility using current best practices.
Always fetch fresh guidelines before making changes:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
Use WebFetch with prompt: "Extract all rules related to forms, keyboard navigation, focus management, and accessibility"
WebSearch: "[framework] form autofocus tabindex keyboard navigation accessibility [current year]"
Replace [framework] with the project's framework (React, Next.js, Vue, etc.)
developer.mozilla.org/en-US/docs/Web/Accessibilityweb.dev/control-focus-with-tabindex/When a user reports form accessibility issues:
Web accessibility standards evolve:
:focus → :focus-visible)Never rely on cached knowledge - always fetch current guidelines.