claude-keyboard-shortcuts

keyboard-shortcuts

A Claude skill that audits a web app for missing keyboard shortcuts, separates the genuine accessibility defects from the nice-to-haves, and implements them as one small system instead of another scattered keydown listener.

What it does

Most codebases arrive at shortcuts the same way: a useEffect with addEventListener('keydown') in one component, another in a modal, a palette somebody wired up for search, and a Cmd+S handler fighting the browser. This skill replaces that.

Audit. Ripgrep recipes find every existing listener, modal, list, form, search input, destructive action, editor, and mouse-only onClick. Every gap is sorted into four tiers. Tier 0 is reported as defects with WCAG citations (a modal with no Escape, a list the mouse can traverse but the keyboard cannot, onClick on a div with no onKeyDown), because framing those as enhancements is how they stay unfixed. Output goes to docs/keyboard-audit.md.

Implement. A command registry, an observable context store for scoping, bindings as data, one document-level listener, last-match-wins resolution. This is the VS Code model (key / command / when), which makes the palette, the ? help sheet, the <Kbd> hints, remapping, and telemetry all views over one data structure rather than parallel systems that drift apart.

Verify. It writes keymap.test.ts with six invariants for CI: no browser-reserved chords, every bare key focus-scoped, no duplicate binding in a scope, sequence prefixes unbound alone, every binding points at a registered command, every command discoverable. Plus the four manual checks tests cannot reach.

What it gets right that hand-rolled implementations usually do not

• IME composition. A keydown during CJK or Vietnamese composition carries candidate-selection intent, not command intent. Without an event.isComposing guard, Enter and arrows hijack the candidate window. Almost no library guards this for you.
• event.key, not event.code. code is a physical position, so "KeyQ" is the ' key on Dvorak and A on AZERTY. Several popular libraries default to matching code.
• Shift tokens. Shift already changed event.key for digits and punctuation (Shift+2 is @), so bind the produced character. Write ?, never Shift+/.
• Platform detection. navigator.userAgentData is Chromium-only, so it falls back the way shipping libraries actually do, and exposes the result as context so tests can swap it.
• Reserved keys. Mod+W, Mod+T, Mod+N, Mod+Q, Mod+L are refused. Firefox removed several of these from script control and closed it WONTFIX.
• WCAG 2.1.4 Character Key Shortcuts is Level A, and the skill treats it that way.

Install

As a plugin, in Claude Code or Cowork:

/plugin marketplace add nparashar150/claude-keyboard-shortcuts
/plugin install keyboard-shortcuts@nparashar-skills

With the skills CLI:

npx skills add nparashar150/claude-keyboard-shortcuts

Or upload keyboard-shortcuts.zip in claude.ai under Customize > Skills.

When it triggers

Any mention of keyboard shortcuts, hotkeys, keybindings, a command palette, Cmd+K, power-user features, or making an app feel fast. Also when building or reviewing a list, table, modal, form, or editor, since keyboard access belongs there whether or not anyone says the word shortcut.

Structure

.claude-plugin/
├── marketplace.json
└── plugin.json
skills/keyboard-shortcuts/SKILL.md

License

MIT