macOS Cheat-Sheets für Windows-Umsteiger

Vier druckfertige Tastatur-Spickzettel im Format 4×6″ für den Umstieg von Windows auf macOS – mit Fokus auf Entwickler-Workflows: Terminal, IntelliJ IDEA, Browser-DevTools und die deutsche Mac-Tastatur (QWERTZ).

Reines HTML + eine gemeinsame style.css. Kein Build, keine Abhängigkeiten.

1 · macOS · Fenster · Terminal

2 · Debugging · Web · iOS · Android

3 · IntelliJ IDEA · macOS

4 · Dev-Sonderzeichen · DE-Mac

Die Karten

#	Datei	Thema
1	card1.html	macOS-Grundlagen: System & Apps, Bearbeiten, Text-Navigation, Terminal, Fenster kacheln, Screenshots, Finder, zsh/bash
2	card2.html	Debugging: Browser-DevTools, iOS-Simulator, Android-Emulator
3	card3.html	IntelliJ IDEA auf macOS: Spring Boot, Vue/NPM, Selenium, Playwright, Appium
4	card4.html	Programmier-Sonderzeichen auf der deutschen Mac-Tastatur

Tastensymbole

Symbol	Taste	Symbol	Taste	Symbol	Taste
⌘	Command	⇧	Shift	⎋	Esc
⌥	Option/Alt	⏎	Return	🌐fn	Funktion
⌃	Control	⌫	Delete	⇥ / ␣	Tab / Space

Format

• 4×6″ @ 300 dpi → PNG mit 2400×3600 px (logisch 1200×1800, in 2× gerendert für scharfen Druck).
• 4×6″ ist ein Standard-Fotoformat (10×15 cm) – die PNGs lassen sich direkt als Fotoabzug bestellen.

Nutzung

• Ansehen: cardN.html im Browser öffnen oder das fertige cardN.png anschauen.
• Drucken: cardN.png auf 10×15-cm-Fotopapier, oder im Browser aus der HTML drucken (Seite anpassen / „an Seite anpassen“).
• Bestellen: PNGs bei einem Foto-Dienst als 4×6″-Abzug hochladen.

Bearbeiten & Pflegen

Zwei Claude-Code-Skills in .claude/skills/ automatisieren die Pflege:

• add-card – neue Karte anlegen oder Zeilen/Sektionen/Legende bearbeiten, im einheitlichen HTML/CSS-Muster.
• render-cards – nach jeder Änderung die PNGs neu erzeugen.

Kurz die Anatomie einer Karte:

.card → .hd (Titel + Legende)
      → .cols → 2× .col → mehrere .sec → h2 + Zeilen
.r  = eine Zeile:  <span class="keys"> Tasten </span> <span class="d"> Beschreibung </span>
kbd = eine Taste:  <kbd>⌘</kbd>

Die Seite ist fix 1200×1800 mit overflow:hidden – Inhalt muss passen, sonst wird er abgeschnitten. Nach dem Editieren immer neu rendern und prüfen, dass nichts beschnitten ist.

PNGs neu rendern

Ein Shell-Skript für alle Plattformen – macOS, Linux, WSL und Git Bash unter Windows. Es findet Chrome oder Edge selbst und rendert alle Karten neu:

bash render.sh

Erwartete Ausgabe: vier PNGs mit je 2400×3600 px. Unter Windows in Git Bash oder WSL ausführen (nicht in PowerShell). Ggf. einmalig ausführbar machen: chmod +x render.sh.

Struktur

.
├── card1.html … card4.html   # die vier Karten (HTML)
├── card1.png  … card4.png    # gerenderte Druckvorlagen (2400×3600)
├── style.css                 # gemeinsames Layout für alle Karten
├── render.sh                 # PNGs neu erzeugen (macOS/Linux/WSL/Git Bash)
├── README.md
├── LICENSE
└── .claude/skills/           # Pflege-Skills (add-card, render-cards)

Lizenz

MIT – frei nutzen, anpassen, teilen.