utility

Keyboard Shortcuts Panel

Floating panel showing available keyboard shortcuts.

keyboard shortcuts panel help | Claude 4.6 Opus

Prompt 

# Role
You are a Senior Software Engineer and Performance Expert specializing in developer tooling interfaces and keyboard-driven UX patterns.

# Objective
Build a keyboard shortcuts help panel that displays available shortcuts in a clean, grouped modal — triggered by a keypress and styled with distinctive keyboard key visuals.

# Instructions
1. Implement the trigger mechanism:
   - Listen for the `?` key press (Shift + /) to open the panel
   - Toggle behavior: pressing `?` again closes the panel
2. Build the modal panel:
   - Centered floating panel with dark background and subtle border
   - Backdrop overlay with slight opacity (click to close)
   - Smooth fade-in and scale-up entrance animation
3. Organize shortcuts into grouped sections:
   - **Navigation**: Home (`H`), Search (`/`), Next (`J`), Previous (`K`)
   - **Actions**: New (`N`), Save (`⌘ S`), Delete (`⌘ ⌫`), Copy (`⌘ C`)
   - **Editor**: Bold (`⌘ B`), Italic (`⌘ I`), Code (`⌘ E`), Link (`⌘ K`)
   - Each section with a subtle heading and divider
4. Style each shortcut row:
   - Left side: styled `<kbd>` elements with raised 3D border effect
   - Right side: brief description (under 5 words)
   - Use monospace font for all key labels
5. Close behavior:
   - Escape key closes the panel
   - Clicking outside the panel closes it
   - Transition out with fade effect

# Constraints
- Vanilla HTML, CSS, and JavaScript only — no dependencies
- Style `<kbd>` elements with a raised 3D effect: `border-bottom: 2px solid`, `box-shadow`, and `border-radius: 4px`
- Use monospace font (`font-family: monospace`) for key labels
- Keep descriptions under 5 words for scannability
- Panel should not exceed 500px width
- Must be keyboard-accessible: focus management within the panel

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Include at least 12 shortcut entries across 3 groups
- Clean, well-indented code with comments for each section

Notes

Prompt

Role

You are a Senior Software Engineer and Performance Expert specializing in developer tooling interfaces and keyboard-driven UX patterns.

Objective

Build a keyboard shortcuts help panel that displays available shortcuts in a clean, grouped modal — triggered by a keypress and styled with distinctive keyboard key visuals.

Instructions

  1. Implement the trigger mechanism:
    • Listen for the ? key press (Shift + /) to open the panel
    • Toggle behavior: pressing ? again closes the panel
  2. Build the modal panel:
    • Centered floating panel with dark background and subtle border
    • Backdrop overlay with slight opacity (click to close)
    • Smooth fade-in and scale-up entrance animation
  3. Organize shortcuts into grouped sections:
    • Navigation: Home (H), Search (/), Next (J), Previous (K)
    • Actions: New (N), Save (⌘ S), Delete (⌘ ⌫), Copy (⌘ C)
    • Editor: Bold (⌘ B), Italic (⌘ I), Code (⌘ E), Link (⌘ K)
    • Each section with a subtle heading and divider
  4. Style each shortcut row:
    • Left side: styled <kbd> elements with raised 3D border effect
    • Right side: brief description (under 5 words)
    • Use monospace font for all key labels
  5. Close behavior:
    • Escape key closes the panel
    • Clicking outside the panel closes it
    • Transition out with fade effect

Constraints

  • Vanilla HTML, CSS, and JavaScript only — no dependencies
  • Style <kbd> elements with a raised 3D effect: border-bottom: 2px solid, box-shadow, and border-radius: 4px
  • Use monospace font (font-family: monospace) for key labels
  • Keep descriptions under 5 words for scannability
  • Panel should not exceed 500px width
  • Must be keyboard-accessible: focus management within the panel

Output Format

  • Single HTML file with embedded <style> and <script> blocks
  • Include at least 12 shortcut entries across 3 groups
  • Clean, well-indented code with comments for each section

Notes

  • Style <kbd> elements with a raised 3D effect border for realistic key appearance.
  • Keep descriptions under 5 words for maximum scannability.
  • Consider adding a search/filter input at the top for panels with many shortcuts.

Related Prompts

View prompt details

Theme Switcher Toggle

Animated dark/light mode toggle with system detection.

# Role You are a Senior Software Engineer and Performance Expert specializing in theme systems, CSS transitions, and client-side state management. # Objective Create a theme switcher component with an animated sun/moon toggle, system preference detection, localStorage persistence, and smooth color transitions across the entire page. # Instructions 1. Build the toggle button: - Circular button containing a sun icon (light mode) and moon icon (dark mode) - Smooth morph transition between icons: combine rotate (360°) + scale (0 → 1) - Transition duration: 300ms ease - Button styled with subtle border, hover effect 2. Implement theme detection and initialization: - On page load, check localStorage for saved preference - If no saved preference, detect system preference using `window.matchMedia('(prefers-color-scheme: dark)')` - Apply the resolved theme immediately (before paint to avoid flash) 3. Handle theme switching: - Toggle adds/removes `.dark` class on `<html>` element - Save the user's choice to `localStorage` as one of: `'light'`, `'dark'`, or `'system'` - Apply `transition: background-color 300ms, color 300ms` to body and key elements 4. Support three states (optional enhancement): - Light → Dark → System → Light cycle - System mode listens to `matchMedia` changes and updates in real-time 5. Add the toggle to a sample page: - Position in the top-right corner (fixed or absolute) - Include sample content sections to demonstrate theme changes # Constraints - Vanilla HTML, CSS, and JavaScript — no frameworks - Apply theme class to `<html>` before DOM renders to prevent flash of wrong theme (script in `<head>`) - Use `matchMedia` for system preference detection — not user-agent parsing - Store preference as `'light'`, `'dark'`, or `'system'` string in localStorage - Icon transition must be smooth — no abrupt swaps - Respect `prefers-reduced-motion`: skip animation if reduced motion is preferred # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a sample page with header, text, and cards to demonstrate theme switching - Well-commented code with the theme initialization script in `<head>` and interactive logic before `</body>`

theme toggle dark-mode +1
GPT 5.3 Ultra