Live-Masterclass

❯

Von 0 auf produktiv

Claude Code im Entwickleralltag — einem Entwickler live über die Schulter geschaut, am echten Projekt.

Terminal IDE-Extension Desktop & Web Kein Kontextwechsel

01

❯ claude --show agenda

Was euch erwartet

01EinführungCLI · IDE · Desktop7′

02settings.jsonBerechtigungen & Hooks5′

03CLAUDE.mdDas Projektgedächtnis6′

04RulesKontextsensitive Leitplanken6′

05HooksErzwungene Garantien6′

06SkillsWiederverwendbare Playbooks5′

07Live: FeatureDokumente herunterladen12′

08Live: BugfixiOS-Navigation fixieren8′

02

❯ man claude-code

Kein Chat-Fenster.
Ein agentisches CLI.

Claude Code arbeitet dort, wo ihr arbeitet: im echten Repo. Es liest Dateien, führt Befehle aus, schreibt Code und lässt Tests laufen — jeder heikle Schritt nur mit eurer Freigabe.

Der Kern

Terminal

Volle Kontrolle, überall — auch über SSH und in der CI. Tool-Calls und Permissions sichtbar im Verlauf.

Heute hier

IDE-Extension

VS Code & JetBrains. Diffs inline, eure Selektion wandert als Kontext direkt in den Prompt.

Skaliert

Desktop & Web

claude.ai/code für parallele und Cloud-Agents, wenn eine Aufgabe größer wird als ein Fenster.

03

❯ cat .claude/ # das Harness

Claude ist so gut wie
sein Harness.

Vier Schichten geben Claude Kontext und Leitplanken — von passiv bis erzwungen.

CLAUDE.mdGedächtnis — automatisch geladen, weiß wie das Projekt tickt

RulesLeitplanken — laden nach Pfad, genau dann wenn relevant

HooksGarantien — Shell-Skripte, vom Harness erzwungen

SkillsPlaybooks — laden nach Absicht, wiederverwendbar

settings.jsonFundament — Berechtigungen & Registrierung der Hooks

04

❯ cat .claude/settings.json

settings.json — Berechtigungen & Hooks

permissions.allow — was Claude ohne Rückfrage darf (Bash, Edit, Read).
settings.local.json — persönlich & ungetrackt; hier WebSearch & Playwright-Pfade.
hooks — registriert die Pre-Commit-Skripte (Details gleich).
Prinzip: Berechtigung = Vertrauen mit Geltungsbereich. Eng starten, gezielt öffnen.

.claude/settings.json

"permissions": {
  "allow": [
    "Bash(*)", "Edit(*)",
    "Read(*)", "WebFetch(*)"
  ]
},
"hooks": {
  "PreToolUse": [{
    "matcher": "Bash",
    "if": "Bash(git commit*)" // nur bei commit
  }]
}

05

❯ head CLAUDE.md

CLAUDE.md — das Projektgedächtnis

Bei jeder Session automatisch geladen. Claude „weiß", wie dieses Projekt funktioniert — ohne dass ihr es jedes Mal erklärt.

Commands — dev, worker, lint, Migrationen
Docker-Tabelle — 5 Container, Tests laufen im Container
Key-Files-Tabelle — Claudes Landkarte durchs Repo
Do-NOT-Liste — nie db:migrate, kein any, keine hartkodierten Strings

CLAUDE.md

## Do NOT
- Use Options API
- Hardcode user-facing strings (i18n)
- Use the any type
- Run db:generate / db:migrate — NEVER

| Purpose      | File              |
| Chat stream  | server/api/chat.. |
| Hybrid search| db/document-chu.. |
# kuratiert, nicht erschöpfend →
# zeigt auf .claude/rules/

06

❯ ls .claude/rules/

Rules — Leitplanken,
die nach Pfad laden

Jede Rule hat ein paths:-Frontmatter und lädt nur, wenn Claude Dateien in diesem Bereich anfasst. Schlanker Kontext, kein Wissensverlust.

gdpr.md	server, db — Cascade-Delete, Export, Verschlüsselung
api-endpoints.md	server/api — Zod-Validierung, OpenAPI-Pflicht
frontend.md	app, i18n — Nuxt UI, Strings in beiden Sprachen
forms.md	Formulare — Inline-Validierung, Toasts nur bei Server-Fehlern
database.md	db — Migrationen nie automatisch ausführen
security · testing · docker · queue · docs	je nach Bereich

Wie ein erfahrener Kollege, der genau im richtigen Moment über die Schulter schaut.

07

❯ git commit -m "feat: ..."

Hooks — erzwungene Garantien

Rules sind Empfehlungen, die das Modell befolgen soll. Hooks sind Skripte, die der Harness erzwingt — egal, was das Modell vorhat.

test-before-commit.sh — npm run test:run im Container. Rote Tests → Commit blockiert.
docs-check.sh — neuer Endpoint oder Schema-Änderung ohne Doku → Commit blockiert.
Escape-Hatch: SKIP_DOCS_CHECK=1 git commit …

PreToolUse · docs-check.sh

✓ Running unit tests… passed

[docs-check] Commit blocked —
doc-worthy changes, no docs:
  • new API endpoint:
     documents/[id]/download.get.ts

Update docs/** · openapi.ts · CLAUDE.md
$ exit 2  # blockiert

08

❯ ls .claude/skills/ # neu für diese Masterclass

Skills — Playbooks,
die nach Absicht laden

Ein Ordner mit SKILL.md. Claude lädt ihn on demand, wenn die Aufgabe passt — oder ihr ruft /skill-name auf. Wiederkehrende, konventionslastige Workflows: einmal sauber kodiert.

/add-i18n-string	UI-String in beide Locale-Dateien + Sync-Prüfung
/scaffold-api-endpoint	Zod-Schema, Auth/Scope, Audit-Log, OpenAPI, Doku
/create-migration	Schema + GDPR-Pflichten — führt nie selbst aus
/scaffold-form	Formular nach dem forms.md-Pattern

Rules = passiv (nach Pfad). Skills = aktiv (nach Absicht). Zusammen: reproduzierbare Qualität.

09

❯ claude --plan-first # spec → test → code → grün

Erst Spec, dann Test,
dann Code.

Ein Agent wird stark, wenn das Ziel deterministisch ist. Spezifikation und Tests geben ihm genau das — und euch ein objektives „fertig".

Der Ablauf

1 · Spec — Plan Mode: erst die Akzeptanzkriterien, dann Code. Ihr nehmt die Absicht ab, nicht 300 Zeilen Diff.
2 · Test (rot) — Tests sind die ausführbare Spec. Erst schreiben, bewusst rot.
3 · Code — bis die Tests grün sind. Nicht mehr, nicht weniger.
4 · Grün → Review — objektives „fertig", dann erst der Diff-Review.

Warum mit einem Agenten

Klares Ziel — Claude weiß, wann es fertig ist.
Selbstkorrektur: Tests laufen, Fehler lesen, fixen — die Schleife, die Claude stark macht.
Weniger „sieht plausibel aus, ist aber falsch".
Der test-before-commit-Hook wird zum Sicherheitsnetz, nicht zur Hürde.

Logik testet ihr per Unit-Test; reine Optik (wie der iOS-Bug gleich) per Spec + klarem Verifikations-Protokoll.

10

❯ claude "feature: dokumente herunterladen" LIVE

Demo 1 — Feature

Originaldokumente ansehen & herunterladen. Die Datei liegt verschlüsselt auf der Platte — bisher gibt es keinen Weg zurück zum Client.

Endpoint GET /documents/[id]/download
Entschlüsseln readDecrypted() (AES-256-GCM)
Frontend Ansehen + Herunterladen je Zeile
i18n + OpenAPI + Doku

Diff nicht blind abnicken

Wird die Berechtigung geprüft, bevor entschlüsselt wird?
Path-Traversal-Schutz übernommen?
Content-Disposition RFC-6266 (Umlaute)?
Dateien ohne Original → sauberes 404?
Greift gleich der docs-check-Hook?

11

❯ claude "bug: ios nav nicht fixiert" LIVE

Demo 2 — Bugfix

Auf iOS-Safari verrutscht die untere Navigation beim Ein-/Ausblenden der Adressleiste und überlappt den Home-Indicator.

Ursache zuerst verstehen, nicht übermalen
nuxt.config viewport-fit=cover ergänzen
Layout dvh-Höhe robust machen
NavBar Safe-Area-Padding unten

Diff nicht blind abnicken

Bleibt das Desktop-Layout (md:) unangetastet?
Safe-Area korrekt, kein doppeltes Padding?
Kein Layout-Shift — springt nichts?
Im Browser verifizieren (iOS-Sim)

12

❯ git diff # bevor ihr abnickt

Schnelligkeit ersetzt
kein Urteilsvermögen.

Claude ist schnell. Ihr bleibt verantwortlich für jeden Diff, der ins Repo geht.

Lest den Diff — besonders an Sicherheits-, GDPR- und Auth-Stellen.
Prompts sind Spezifikationen — präzise rein, präzise raus.
Plan Mode nutzen — erst den Plan sehen, dann editieren lassen.
Garantien in Hooks — nicht in Hoffnung.

13

❯ while true; do beobachten; kodieren; erzwingen; done # der Zyklus

Jeder Fehler ist
ein Harness-Bug.

Code fixen behebt das Symptom. Den Harness fixen verhindert die Wiederholung — und macht jeden nächsten Lauf besser.

1 · BeobachtenWo patzt Claude, wo entsteht Reibung im Review? Das ist dein Signal.

2 · KodierenLektion in CLAUDE.md, Rule oder Skill schreiben — # hängt sie direkt an CLAUDE.md an.

3 · ErzwingenWo es zählt: als Hook oder CI-Gate hart machen — aus „soll" wird „muss".

4 · ↻ WiederholenDer Harness compounded: jeder Durchlauf macht den nächsten produktiver.

14

❯ ls roadmap/ # wohin von hier

Wohin als Nächstes

Reichweite

MCP & Connectors

Claude an externe Systeme anbinden — Jira, GitLab, Sentry, DB, Playwright. Connectors sind gehostete Remote-MCP-Server: dasselbe Protokoll, nur fertig betrieben.

Qualität

Statische Analyse

Lint, Typecheck, Security-Scan (z. B. Semgrep) als PostToolUse-Hook nach jedem Edit — Probleme fallen sofort auf, nicht erst beim Commit.

Durchsetzung

Adherence-Gates

Soft Rules → harte Checks. Du prüfst Outcomes, nicht Absicht: kein any, kein console.log, Doku da, Tests grün — als Gate.

Skalierung

CI & Automation

Claude headless in der GitLab CI: automatischer MR-Review, geplante Agents für wiederkehrende Aufgaben (Aufräumen, Triage, Doku-Sync).

Spezialisierung

Subagents & Commands

Spezialisierte Agenten (code-reviewer, security-review) in .claude/agents/ und eigene /commands für eure Routinen.

Sicherheit

Permissions härten

Von Bash(*) zu gezielten Allowlists. Skill /fewer-permission-prompts wertet eure Transkripte aus und schlägt eine engere Liste vor.

15

❯ claude --summary