菜单
Builds accessible navigation and wayfinding with landmarks, headings, skip links, breadcrumbs, nav lists, current-page state, disclosure navigation, and menu-vs-navigation decisions. Use when implementing headers, sidebars, nav bars, or complex page structure.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Builds accessible pages and components with semantic HTML, correct names/roles/states, keyboard support, focus management, links, images, SVG, media, and native controls first. Use when implementing or refactoring frontend UI.
Designs and reviews accessible forms, search, validation, errors, grouping, required state, multi-step flows, and recovery behavior. Use when implementing or auditing form-heavy UI.
Reviews frontend changes for accessibility regressions across semantics, keyboard/focus behavior, forms, dynamic updates, styling, ARIA, and tests. Use for pull requests, diffs, audits, and pre-merge sign-off.
Validates accessibility with automated checks, keyboard walkthroughs, screen reader smoke tests, zoom/preference checks, and focused regression reporting. Use when verifying new UI or confirming fixes.
Central routing and orchestration skill for web accessibility work. Use as the default entrypoint for accessibility-related UI tasks to select the right authoring, review, remediation, and testing workflows.
Reviews and writes CSS that preserves accessibility across contrast, focus styles, reduced motion, forced colors, zoom, target size, semantic integrity, and custom-styled controls. Use for UI styling and design-system changes.
| name | web-a11y-navigation |
| description | Builds accessible navigation and wayfinding with landmarks, headings, skip links, breadcrumbs, nav lists, current-page state, disclosure navigation, and menu-vs-navigation decisions. Use when implementing headers, sidebars, nav bars, or complex page structure. |
Navigation checklist
- [ ] Main content and navigation are easy to jump to
- [ ] Skip links are available where repeated content creates friction
- [ ] Breadcrumbs use a labeled nav, list semantics, and current-item indication
- [ ] Current page state does not rely on color alone
- [ ] Disclosure navigation uses buttons for toggles and links for navigation
- [ ] Responsive navigation preserves keyboard and screen reader flow
Explain landmark labels, current state, skip-link strategy, keyboard behavior, and any menu/navigation trade-offs.