UI Skillbook
2

Kbd

Styled notation for a keyboard key or a key combination inside text, buttons or menus.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-kbd and follow the Siteplane Kbd skill it prints for this task.

Paste this into your agent.

Kbd shows the shortcut for an action in a hint sentence, a search field addon or after a button label. It displays keys; your app implements the shortcut.

Install

bashnpx shadcn@4.18.0 add @siteplane/kbd

Import it from @/siteplane/components/kbd. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Code: Pick Code instead for commands, values or source snippets.
  • vs Command: Use Command's own shortcut part inside a command palette.

Rules

  • Wrap keys pressed together in KbdGroup.
  • Show labels that match the person's platform, such as Cmd on macOS and Ctrl elsewhere.
  • Implement every shortcut you display; Kbd adds no key handling.
  • Never make the shortcut the only way to find or run the action.
  • A Kbd after a button label becomes part of the button's accessible name.

Reference

  • Kbd docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Layout & utilities. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-kbd

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Better Typographyby jakubkrehel

Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.

TypographyExternalGitHub stars: 9.2K

Siteplane Codeby UI Skillbook

Inline code and code blocks with optional highlighting, titles, line numbers, marked lines, masking and copy.

Siteplane UI

Accessibilityby addyosmani

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

AccessibilityExternalGitHub stars: 3K

Accessibility Diffby AccessLint

Regression check that diffs a live page's accessibility violations against a baseline from uncommitted changes or a branch.

AccessibilityExternalGitHub stars: 114

Back to Siteplane UI