docs: Add a KeyboardKey component

[LinKCoding]

Overview

Adds a styled KeyboardKey component to replace plain <kbd> tags in styleguide documentation, providing consistent keyboard key styling across all MDX files.
Adds a ESLint rule for mdx files in Storybook to use this new component

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1504
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

1. Go to Storybook and navigate to any of the updated component docs (Tabs, SkipToContent, Flyout, Modal, InfoTip)
2. Verify that keyboard keys (like "Tab", "Enter", etc.) are now styled with a monospace font, background, border, and shadow
3. Test in both light and dark mode
4. Locally, in a /packages/styleguide/**.mdx file, test that the new eslint error appears by adding a <kbd> element somewhere in the doc, e.g. <kbd>testing</kbd> — you may need to restart the ESLint server in your editor

5. ... 6. Profit!

PR Links and Envs

N/A

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 09cf2a8

---

☁️ Nx Cloud last updated this comment at 2026-01-06 17:14:19 UTC

[dreamwasp]

tried to figure out why the default doesn't work - kbd isn't recognized as a native component by Storybook so we'd have to write some custom webpack rules. doesn't seem like the juice is worth the squeeze, but we may want to add an eslint rule or something so folks use it. looks great tho and yr good 2 ship!

[codecademydev]

📬 Published Alpha Packages:

eslint-plugin-gamut@2.4.1-alpha.52d157.0
@codecademy/styleguide@78.5.5-alpha.52d157.0

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://695d43a8aead7fdf4d929a68--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/695d43a8aead7fdf4d929a68