keyboard-navigation
Designing for keyboard-first users, focus management, and keyboard shortcuts.
Works with
---
name: keyboard-navigation
description: Designing for keyboard-first users, focus management, and keyboard shortcuts.
license: MIT
---
# Keyboard Navigation
## Focus Order
1. Follows visual reading order (top-left to bottom-right in LTR)
2. Skip links at the top: "Skip to main content"
3. Tab moves forward, Shift+Tab moves backward
4. No keyboard traps (user can always Tab away, except modals)
5. Focus returns to trigger after modal/dialog close
## Focus Indicators
```css
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
```
- Always visible, never `outline: none` without replacement
- High contrast against background
- Consistent style across all elements
## Component Keyboard Patterns
| Component | Keys |
|-----------|------|
| Button | Enter/Space to activate |
| Link | Enter to follow |
| Tab panel | Arrow keys between tabs, Tab into content |
| Menu | Arrow keys to navigate, Enter to select, Escape to close |
| Modal | Escape to close, Tab cycles within |
| Combobox | Arrow keys, Enter to select, Escape to close |
| Slider | Arrow keys to adjust value |More Accessibility skills
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.
ui-ux-pro-max
nextlevelbuilder/ui-ux-pro-max-skill
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.
