Mac ⌘ Windows Shortcuts

🔗 Live site: anassharnouby.github.io/macShortCuts

A simple reference site for people switching from Windows to Mac: look up any command and see its Mac and Windows keyboard shortcut side by side, browse shortcuts by category, or practice recalling them for real in a small memory game.

Why this exists

Switching from Windows to Mac means relearning muscle memory for things you already know how to do — copy, paste, take a screenshot, switch apps. This site exists to answer one question fast: "I know how to do this on Windows — what's the Mac equivalent?" (or vice versa), without digging through settings menus or forum posts.

Every shortcut is shown as plain keyboard symbols (⌘ ⌥ ⇧ ⌃) — no icons, screenshots, or clutter, just the answer.

Features

• Search everything from one box — search by action name ("copy"), category ("screenshots"), or a literal shortcut in any form: Ctrl+C, ctrl+c, ctrl c, or even just a bare modifier like ctrl to see every shortcut that starts with it.
• Browse by platform and category — separate Mac and Windows repositories, organized into the same categories (Text Editing, Window Management, App Switching, System, Screenshots, Files & Finder, Accessibility, and more), so browsing either side feels identical.
• Every entry is paired — each shortcut shows its counterpart on the other platform, or an explicit "No direct equivalent" when one doesn't exist.
• A memory game — pick a random action, press the real Mac shortcut for it, get it right and move on, get it wrong and try again. Only draws from shortcuts that are safe to press for real (nothing that would actually quit your browser, take a screenshot, or change a system setting).

Tech stack

Static site built with Astro and TypeScript, client-side search powered by Fuse.js, tested with Vitest (unit) and Playwright (end-to-end), deployed to GitHub Pages via GitHub Actions on every push to main.

Development

npm install
npm run dev          # start the local dev server
npm run test:unit    # run unit tests
npm run test:e2e     # run end-to-end tests
npm run build         # production build

How this was built

This project was built using GitHub's Spec Kit — a spec-driven development workflow where each feature starts as a written specification (what and why), then a technical plan (how), then a task breakdown, before any code is written. The specs/ directory contains the full history: every feature's spec, research decisions, data model, and task list, in the order they were built.