Keyboard navigation
Skill Dragoon0x/everything-design-taste/skills/keyboard-navigation
A taste system for AI agents. 288 skills, 80 agents, 12 rules, and 8 hooks that turn generic AI output into work with genuine design quality. Anti-slop detection, typography craft, color systems, brand voice, product strategy, and 50+ specialized reviewers across UI, industry, platform, and content domains.
npx -y skills add Dragoon0x/everything-design-taste --skill keyboard-navigationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Designing for keyboard-first users, focus management, and keyboard shortcuts.
SKILL.md
1.1 KB, as published. Nobody here has run it
Keyboard Navigation
Focus Order
- Follows visual reading order (top-left to bottom-right in LTR)
- Skip links at the top: "Skip to main content"
- Tab moves forward, Shift+Tab moves backward
- No keyboard traps (user can always Tab away, except modals)
- Focus returns to trigger after modal/dialog close
Focus Indicators
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
- Always visible, never
outline: nonewithout 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 |