xrnavigation
- 23 skills
- 0 followers
- 6 hours ago last updated
- ▌ CSS A11Y · xrnavigation bundleGuides CSS patterns that affect accessibility — focus indicators, forced-colors mode, prefers-reduced-motion, prefers-contrast, color-only information avoidance, and target sizing. Auto-invokes when writing CSS for interactive elements, animations, transitions, media queries, or custom focus styles.
- ▌ A11Y Grid · xrnavigation bundleGuides accessible data grid, interactive table, and sortable table implementation. Auto-invokes when creating data grids, spreadsheet interfaces, sortable tables, or interactive table cells. Critical distinction — most data tables do NOT need role="grid". Covers table vs grid decision, HTML table accessibility, sortable columns, and the APG grid pattern.
- ▌ A11Y Menu · xrnavigation bundleGuides accessible application menu and menu button implementation per APG patterns. Auto-invokes when creating menus, menubars, context menus, action dropdowns, or menu buttons. Critical distinction — site navigation is NOT a menu. Covers menu/menubar/menuitem roles, menuitemcheckbox, menuitemradio, and the menu button pattern.
- ▌ A11Y Tabs · xrnavigation bundleGuides accessible tab interface implementation per APG patterns. Auto-invokes when creating tabs, tabbed panels, tab navigation, or tabbed content components. Covers required ARIA roles/states, keyboard interaction, automatic vs manual activation, and horizontal vs vertical orientation.
- ▌ A11Y Tree · xrnavigation bundleGuides accessible tree view and treegrid implementation per APG patterns. Auto-invokes when creating tree views, file browsers, hierarchical lists, nested navigation trees, or treegrid components. Covers tree vs treegrid decision, required ARIA roles/states, keyboard interaction, and multi-select patterns.
- ▌ Form A11Y · xrnavigation bundleGuides comprehensive form accessibility beyond basic labels — error messaging and association, validation patterns, field grouping, accessible authentication (WCAG 2.2), redundant entry prevention, and autocomplete attributes. Auto-invokes when creating forms, validation logic, authentication flows, or multi-step form wizards.
- ▌ A11Y Audit · xrnavigation bundleRuns automated accessibility scans with axe-core, pa11y, Lighthouse, or eslint-plugin-jsx-a11y. Interprets results, prioritizes violations, and generates fix recommendations. Use when asked to audit, scan, or check accessibility of a page, component, or codebase.
- ▌ A11Y Dialog · xrnavigation bundleGuides accessible modal and non-modal dialog implementation. Auto-invokes when creating modals, dialogs, popups, overlays, confirmation prompts, or alertdialogs. Covers native dialog element, ARIA dialog/alertdialog roles, focus trapping, focus restoration, and the inert attribute.
- ▌ A11Y Listbox · xrnavigation bundleGuides accessible listbox implementation for single and multi-select lists per APG patterns. Auto-invokes when creating listboxes, selection lists, option lists, or custom multi-select components. Covers required ARIA, keyboard interaction, single vs multi-select, and reorderable lists (WCAG 2.2 dragging alternatives).
- ▌ Live Regions · xrnavigation bundleGuides ARIA live region usage for dynamic content announcements. Auto-invokes when creating notifications, toasts, status messages, loading indicators, search result counters, form validation summaries, or SPA route change announcers. Covers timing requirements, politeness levels, implicit live regions, and common pitfalls.
- ▌ A11Y Combobox · xrnavigation bundleGuides accessible combobox and autocomplete implementation per APG patterns. Auto-invokes when creating combobox, autocomplete, typeahead, select-with-search, or custom dropdown components. Covers required ARIA, keyboard interaction, and variant selection (select-only, editable, autocomplete modes).
- ▌ A11Y Accordion · xrnavigation bundleGuides accessible accordion and disclosure implementation. Auto-invokes when creating accordions, collapsible sections, expandable panels, or disclosure widgets. Covers native details/summary vs ARIA accordion, the APG accordion pattern, and the disclosure pattern.
- ▌ Cognitive A11Y · xrnavigation bundleGuides cognitive accessibility patterns — clear actionable error messages, consistent navigation, predictable behavior, timeout handling with warnings, progress indicators for multi-step processes, consistent help placement (WCAG 2.2), and plain language. Auto-invokes when writing error messages, multi-step flows, session timeout logic, or navigation structures.
- ▌ Alt Text Quality · xrnavigation bundleGuides alt text decision-making beyond presence — the W3C decision tree for decorative vs informative vs functional vs complex images, context-dependent descriptions, SVG accessibility, CSS background image alternatives, and icon button labeling. Auto-invokes when adding images, SVGs, icons, or image-based components.
- ▌ Focus Management · xrnavigation bundleGuides focus management for dynamic web applications — modal focus trapping, focus restoration, SPA route changes, dynamic content focus recovery, focus-not-obscured (WCAG 2.2), and skip navigation. Auto-invokes when creating modals, dialogs, SPAs, route handlers, or dynamically adding/removing DOM content.
- ▌ Testing Strategy · xrnavigation bundleGuides accessibility testing strategy — what to test automatically vs manually vs with assistive technology. Provides keyboard testing checklists, screen reader testing basics, and acceptance criteria templates. Use when planning testing, writing acceptance criteria, or deciding how to verify accessibility.
- ▌ Overlay Resistance · xrnavigation bundlePrevents agents from recommending accessibility overlay widgets (accessiBe, UserWay, AudioEye, etc.). These products are opposed by the disability community, have been fined by the FTC, and make accessibility worse. Use when asked about quick accessibility fixes, overlay products, or accessibility widgets. The agent must never recommend an overlay.
- ▌ Aria Decision Framework · xrnavigation bundleGuides correct ARIA usage by encoding the "first rule of ARIA" — use native HTML elements before reaching for ARIA roles. Auto-invokes when writing ARIA attributes, custom interactive elements, or role attributes. Prevents the most common LLM accessibility error: ARIA misuse and overuse.
- ▌ Disability User Stories · xrnavigation bundleGenerates accessibility-centered user stories, personas, and acceptance criteria that verify real assistive technology experiences. Use when writing user stories, sprint planning, defining acceptance criteria, or creating accessibility-specific test cases. Provides W3C, GOV.UK, and Microsoft persona frameworks plus Given/When/Then patterns for AT verification.
- ▌ Hostile Pattern Detection · xrnavigation bundleDetects and prevents hostile-by-design UI patterns that disproportionately harm disabled users. Auto-invokes when creating carousels, infinite scroll, hover-only interactions, auto-playing media, CAPTCHAs, cookie consent banners, or when considering accessibility overlay widgets. These patterns may be technically "fixable" but are fundamentally hostile — the skill recommends alternatives.
- ▌ Accessible Content Writing · xrnavigation bundleGuides accessible content writing — link text, error messages, alt text as craft, plain language, headings as navigation, and microcopy. Auto-invokes when writing UI text, link labels, error messages, button labels, form instructions, or heading structures. Content is an interface — bad content is an accessibility barrier.
- ▌ At Experience Verification · xrnavigation bundleHelps verify accessibility by describing what assistive technology users actually experience — what screen readers announce, what keyboard navigation feels like, what broken focus sounds like. Auto-invokes when writing forms, headings, ARIA, or interactive components. User-invocable for full AT experience walkthrough of a component.
- ▌ Cognitive Neurodivergent Experience · xrnavigation bundleGuides understanding of how cognitive disabilities and neurodivergence affect web interaction — why timeouts cause panic, why unpredictability causes distress, why sensory overload is pain not preference. Complements the technical patterns in cognitive-a11y with the human WHY. Auto-invokes when creating animations, multi-step flows, timed interactions, or notification-heavy interfaces.