Studio Hyra University

Claude Code Mastery

Einrichten, arbeiten und ausliefern wie ein professionelles Studio. Schritt für Schritt.

12 Lektionen · ~60 Min. · Expert

Lektion 01

Alles installieren

Bevor du eine einzige Zeile Code schreibst, muss deine Umgebung stimmen. In dieser Lektion installierst und verifizierst du jedes Tool. Beim ersten Mal dauert es 30-45 Minuten.

Offne VS Code und das Terminal

Offne VS Code. Klicke auf Terminal → New Terminal in der Menuleiste. Ein Bereich offnet sich unten.

Installiere Claude Code

Terminal

npm install -g @anthropic-ai/claude-code

Wenn du "npm: command not found" siehst: gehe zu nodejs.org, lade Node.js herunter und installiere es, schliesse das Terminal (klicke auf das X), offne ein neues (Terminal → New Terminal), versuche es erneut.

Starte Claude Code

Tippe claude, drucke Enter. Der Browser offnet sich zum Anmelden. Melde dich an, klicke auf Authorize, gehe zuruck zu VS Code.

Lass Claude den Rest installieren

Sag zu Claude

Prufe welche Entwicklungstools ich installiert habe. Ich brauche: Docker Desktop, Git, GitHub CLI, Supabase CLI und Vercel CLI. Installiere alles was fehlt. Hilf mir beim Erstellen von Accounts fur GitHub, Supabase und Vercel, falls ich noch keine habe.

Claude pruft dein System und installiert was fehlt. Unterwegs stellt Claude Fragen — beantworte sie und lass Claude arbeiten.

Wenn Claude sagt "Docker Desktop needs to be running": offne Docker Desktop aus Programme (Mac) oder Startmenu (Windows). Warte auf das Wal-Icon in deiner Menuleiste. Sag Claude, dass es lauft.

Verifizieren

Sag zu Claude

Prufe ob alles installiert ist. Zeig mir was funktioniert und was nicht.

Note

Das ist die einzige Setup-Lektion. Alles danach dreht sich um die Nutzung der Tools, nicht um die Installation.

Mach das jetzt

Führe alle fünf Versionschecks jetzt aus. Mach einen Screenshot. Das ist deine Entwicklungsumgebung, verifiziert.

Lektion 02

Deine erste CLAUDE.md

CLAUDE.md ist die erste Datei, die Claude liest. Jede Regel darin beeinflusst jede Zeile Code, die Claude schreibt. Wenn du sie richtig einrichtest, arbeitet Claude wie ein Senior Developer, der dein Projekt kennt.

CLAUDE.md ist die erste Datei, die Claude liest wenn du eine Session startest. Sie erzahlt Claude von deinem Projekt, deinen Regeln und deinem aktuellen Fortschritt.

Offne dein Projekt in VS Code

Klicke auf File → Open Folder und wahle deinen Projektordner.

Starte Claude Code

Terminal → New Terminal. Tippe claude, drucke Enter.

Bitte Claude es zu erstellen

Sag zu Claude

Erstelle eine CLAUDE.md fur dieses Projekt. Nimm auf: was das Projekt ist, in welcher Phase wir sind, was fertig ist und was als nachstes kommt, unsere kritischen Regeln (Design Tokens fur alle Farben, aller Text uber das Ubersetzungssystem, Benutzereingaben validieren, Buildcheck vor dem Committen), und eine Regel dass du den Status nach jedem Commit aktualisieren sollst. Basiere es auf dem was du im Projekt siehst.

Uberprufe es

Klicke auf CLAUDE.md in der linken Seitenleiste. Lies es. Andere alles was nicht zu deinem Projekt passt.

Teste es

Sag zu Claude

An welchem Projekt arbeiten wir? Was sind die kritischen Regeln?

Claude sollte aus deiner CLAUDE.md antworten.

Important

Aktualisiere den Status-Abschnitt nach jedem Commit. Eine veraltete CLAUDE.md ist schlimmer als keine CLAUDE.md, weil Claude ihr vertraut.

Mach das jetzt

Erstelle die Datei jetzt sofort. Fülle Status, drei Regeln und zwei kritische Dateien ein. Stelle Claude eine Frage zu deinem Projekt. Sieh den Unterschied.

Lektion 03

Verbinde deine MCPs

MCPs lassen Claude direkt mit deiner Datenbank, deinem Deployment und deiner Dokumentation kommunizieren. Statt dass du Informationen zwischen Tools kopierst, greift Claude selbst darauf zu.

MCPs lassen Claude direkt mit deinen Services sprechen, anstatt dass du Informationen zwischen Tools hin und her kopierst.

Verbinde Supabase

Sag zu Claude

Richte die Supabase MCP ein, damit du direkt mit meiner Datenbank sprechen kannst.

Claude fragt nach Zugangsdaten. Finde sie auf supabase.com → dein Projekt → Settings → API. Kopiere die Project URL und den Service Role Key (klicke auf "Reveal") und fuge sie bei Claude ein.

Teste es:

Sag zu Claude

Welche Tabellen gibt es in meiner Datenbank?

Verbinde Context7

Sag zu Claude

Schlage die aktuelle Next.js-Dokumentation nach, wie man eine Seite mit dynamischen Routen erstellt.

Wenn Claude aktuelle Docs referenziert, funktioniert Context7.

Verbinde Vercel

Sag zu Claude

Richte die Vercel MCP ein, damit du direkt deployen kannst.

Verifiziere alle Verbindungen

Sag zu Claude

Welche MCPs hast du zur Verfugung? Teste jede einzelne.

Mach das jetzt

Richte das Supabase MCP jetzt ein. Frage Claude, deine Datenbank zu inspizieren. Wenn es zum ersten Mal deine tatsächlichen Tabellen auflistet, verstehst du, warum das wichtig ist.

Lektion 04

Erstelle deine ersten Skills

Skills sind wiederverwendbare Anweisungsdateien, die Claude konsistent machen. Diese Lektion erstellt drei echte, die du sofort nutzen wirst.

Skills sind Anweisungsdateien, die Claude sagen, wie DU die Dinge erledigt haben willst.

Erstelle Starter-Skills

Sag zu Claude

Erstelle einen Skills-Ordner unter .claude/skills/ mit drei Starter-Skills. Erstens, "critical" — unsere nicht verhandelbaren Regeln: Design Tokens fur Farben, Text uber das Ubersetzungssystem, Benutzereingaben validieren, niemals Secrets committen, Buildcheck vor dem Committen. Zweitens, "page-build" — Konventionen fur das Bauen von Seiten: Dateistruktur, Abstande, Typografie, Test-Checkliste. Drittens, "eod" (Ende des Tages) — die Abschlussroutine: CLAUDE.md aktualisieren, committen, pushen, zusammenfassen.

Uberprufe sie

Klicke auf .claude/skills/critical/SKILL.md in der linken Seitenleiste. Lies die Regeln. Fuge hinzu was fehlt. Entferne was nicht zutrifft.

Teste sie

Sag zu Claude

Welche Skills hast du zur Verfugung?

Dann teste mit einer echten Aufgabe:

Sag zu Claude

Ich mochte eine neue About-Seite bauen.

Claude sollte deinen Page-Build-Skill-Mustern folgen.

Spater mehr Skills hinzufugen

Sag zu Claude

Erstelle einen neuen Skill namens "security" mit Regeln fur Authentifizierung, Datenbanksicherheit und Eingabevalidierung in diesem Projekt.

Tip

Skills wachsen aus Fehlern. Jedes Mal wenn etwas schiefgeht, das eine Regel hatte verhindern konnen, fuge diese Regel hinzu. Nach ein paar Monaten ist das deine wertvollste Projektdatei.

Mach das jetzt

Erstelle alle drei Dateien jetzt sofort. Sie brauchen insgesamt 10 Minuten. Dann frage Claude, etwas Kleines zu bauen und beobachte, wie es deinen Mustern von der ersten Zeile an folgt.

Lektion 05

Wie du deinen Tag startest

Die ersten 2 Minuten einer Claude Code Session bestimmen die Qualität von allem, was danach kommt.

Mach das jedes Mal wenn du mit der Arbeit beginnst. 2 Minuten.

Offne dein Projekt und starte Claude Code

Offne VS Code. File → Open Folder → dein Projekt. Terminal → New Terminal. Tippe claude.

Important

Arbeitest du an mehreren Projekten? Frag Claude: "An welchem Projekt arbeiten wir?" Wenn es den falschen Namen nennt, hast du den falschen Ordner geoffnet.

Prufe den Status

Sag zu Claude

Was ist unser aktueller Status? Woran haben wir letztes Mal gearbeitet und was kommt als nachstes?

Wenn der Status nicht stimmt:

Sag zu Claude

Die Kontaktseite ist eigentlich fertig. Aktualisiere den Status: wir beginnen als nachstes mit der Insights-Seite.

Bestatige woran wir arbeiten

Sag zu Claude

Woran sollten wir heute arbeiten?

Mach das jetzt

Mach morgen früh das 3-Schritte-Ritual, bevor du Code anfasst. Achte darauf, wie Claudes erste Antwort nützlicher ist als sonst.

Lektion 06

Wie du ein Feature baust

Der Schritt-für-Schritt-Prozess, um alles zu bauen. Planen, in Teilen bauen, unterwegs testen, zweiter Durchgang, committen.

Beginne mit einem Plan

Drucke Shift+Tab. Prufe ob unten links Plan Mode steht.

Sag zu Claude

Ich mochte ein Kontaktformular zur Seite hinzufugen. Fang noch nicht an zu bauen, plane zuerst den Ansatz. Was brauchen wir? Wie soll es funktionieren?

Lies den Plan. Passe an was nicht stimmt:

Sag zu Claude

Ich mochte auch, dass es mir eine E-Mail schickt. Und lass das Telefonfeld weg — nur Name, E-Mail und Nachricht.

Drucke Shift+Tab um den Plan-Modus zu verlassen.

Baue Stuck fur Stuck

Sag zu Claude

Beginne mit der Formular-Komponente. Felder fur Name, E-Mail und Nachricht. Verwende unsere Design Tokens.

Prufe das Ergebnis im Browser. Dann:

Sag zu Claude

Lass das Formular jetzt wirklich funktionieren. Schick mir eine E-Mail wenn jemand es absendet.

Gib Feedback

Sag zu Claude

Die Abstande sind zu eng. Fuge mehr Platz zwischen den Feldern hinzu. Der Absende-Button soll grosser sein und zum Button-Stil der Homepage passen.

Zweiter Durchgang

Sag zu Claude

Uberprufe alles was du gerade gebaut hast. Funktioniert es auf einem Handy? Verwenden die Farben Design Tokens? Ist Text hardcodiert? Gibt es Sicherheitsprobleme mit dem Formular? Behebe was du findest.

Speichern

Sag zu Claude

Alles sieht gut aus. Committen und pushen.

Claude committet, pusht und aktualisiert den CLAUDE.md-Status.

Mach das jetzt

Beim nächsten Feature, das du baust, mache Schritt 1 (planen) und Schritt 4 (zweiter Durchgang). Nur die zwei. Der Plan verbessert den Build. Der zweite Durchgang fängt auf, was du übersehen hast.

Lektion 07

Wie du Qualität prüfst

Zwei Qualitätschecks: der schnelle vor jedem Commit, der gründliche am Ende einer Phase.

Schneller Check (vor jedem Commit)

Sag zu Claude

Baue das Projekt und stelle sicher dass es keine Fehler gibt.

Grundlicher Check (nach Abschluss eines grossen Features)

Sag zu Claude

Mache einen grundlichen Qualitatscheck. Suche nach: hardcodierten Farben die Design Tokens verwenden sollten, Text der in Ubersetzungsdateien stehen sollte, Eingabefeldern ohne Validierung, Seiten die auf Mobilgeraten umbrechen, und Sicherheitsproblemen. Behebe alles was du findest.

Was diese Checks finden

Farben direkt geschrieben statt Design Tokens (bricht wenn du das Theme wechselst)
Text auf Englisch direkt in einer Komponente statt in der Ubersetzungsdatei (bricht andere Sprachen)
Formulare die jede Eingabe akzeptieren ohne zu prufen ob sie gultig ist
Seiten die auf dem Desktop gut aussehen aber auf dem Handy uberlaufen
Endpunkte die jeder im Internet missbrauchen kann

Tip

Je ofter du Qualitatschecks machst, desto weniger finden sie. Deine Skills verhindern die meisten Probleme von Anfang an.

Mach das jetzt

Durchsuche deinen src/-Ordner jetzt nach Hex-Farben. Wenn du welche in Komponenten-Dateien findest, ersetze sie durch CSS-Variablen. Das ist ein Qualitätscheck erledigt.

Lektion 08

Wie du deinen Tag beendest

Die letzten 5 Minuten deiner Session bereiten den Erfolg von morgen vor.

5 Minuten am Ende jeder Session.

Aktualisiere den Status

Sag zu Claude

Wir sind fur heute fertig. Aktualisiere CLAUDE.md mit dem was wir abgeschlossen haben, was noch lauft und womit wir nachstes Mal anfangen sollen.

Committen und pushen

Sag zu Claude

Committe alles und pushe zu GitHub.

Verifizieren

Sag zu Claude

Hat der Push funktioniert? Ist alles committet?

Note

Morgen fruh liest Claude die CLAUDE.md die du gerade aktualisiert hast. Claude weiss genau was fertig ist und was als nachstes kommt. Keine "wo war ich?"-Verwirrung.

Mach das jetzt

Mach es heute Abend. Status aktualisieren, Restart-Notizen schreiben, committen, pushen. Morgen früh die Notizen lesen und merken, wie viel schneller deine Session startet.

Lektion 09

Deine Skills-Bibliothek aufbauen

Du hast mit drei Skills angefangen. So baust du sie zu einer Wissensbasis aus, die Claude jede Woche besser macht.

Fuge jedes Mal eine Regel hinzu wenn etwas schiefgeht

Beispiel: du deployst und die niederlandische Ubersetzung fehlt.

Sag zu Claude

Fuge eine neue Regel zu unserem Critical-Skill hinzu: vor dem Committen von Textanderungen verifizieren, dass alle Ubersetzungsdateien die neuen Keys haben.

Erstelle neue Skills wenn Muster entstehen

Sag zu Claude

Erstelle einen neuen Skill namens "database" mit Regeln fur unseren Umgang mit Datenbankarbeit. Beinhalte: immer Sicherheitsrichtlinien auf neuen Tabellen erstellen, immer bestehende Tabellen prufen bevor Anderungen gemacht werden, immer testen dass Daten korrekt gespeichert werden.

Uberprufe deine Skills monatlich

Sag zu Claude

Zeig mir alle unsere aktuellen Skills. Sind welche veraltet? Uberschneiden sich welche? Schlage Verbesserungen vor.

Tip

Nach drei Monaten hat dein Critical-Skill 15-20 Regeln. Jede davon ist ein Fehler der nie wieder vorkommt. Neue Teammitglieder erben dein gesamtes Wissen sofort.

Mach das jetzt

Denke an die letzten drei Dinge, die schiefgelaufen sind. Schreibe jede Prävention als Regel in deinen Critical-Skill. Drei Debugging-Sessions komprimiert in drei Zeilen.

Lektion 10

Tests die sich aufbauen

Tests sind ein Sicherheitsnetz, das mit jedem Feature wächst. Playwright-Tests für jede Seite, jede Locale, jeden Viewport.

Bitte Claude Tests zu schreiben

Sag zu Claude

Schreibe Tests fur unsere Kontaktseite und fuhre sie aus. Stelle sicher: die Seite ladt in allen unseren Sprachen, das Formular zeigt Fehler bei leerem oder ungultigem Absenden, eine gultige Einsendung funktioniert, und nichts lauft auf einem Handybildschirm uber. Sag mir was besteht und was fehlschlagt.

Fehler beheben

Sag zu Claude

Der Handy-Test ist fehlgeschlagen. Was stimmt nicht? Behebe es und fuhre den Test erneut aus.

Alle Tests vor dem Committen ausfuhren

Sag zu Claude

Fuhre alle Tests aus um sicherzustellen dass nichts kaputt ist.

Alles grun? Diese Tests sind permanent. Nutze sie vor jeder grossen Anderung.

Tip

Du beschreibst was funktionieren soll. Claude schreibt die Tests, fuhrt sie aus, behebt was fehlschlagt.

Mach das jetzt

Nimm die Seite mit den wenigsten Tests. Frage Claude, Tests mit der Vier-Punkte-Struktur zu schreiben. Führe sie aus. Repariere was fehlschlägt. Committen.

Lektion 11

Docker von Null

Konsistente Umgebungen in 15 Minuten. Von Null bis laufend in Docker.

Wann brauchst du Docker?

Nur du: Nice to have. Uberspringe es vorerst.
Du und jemand anderes: richte es ein. Verhindert "funktioniert auf meinem Rechner."
Echtes Deployment: dringend empfohlen.

Stelle sicher dass Docker Desktop lauft

Offne Docker Desktop. Warte auf das Wal-Icon in deiner Menuleiste.

Bitte Claude Docker einzurichten

Sag zu Claude

Richte Docker fur unser Projekt ein. Ich mochte es wahrend der Entwicklung in einem Container laufen lassen, damit Anderungen sofort im Browser sichtbar sind. Erstelle alle benotigten Dateien.

Starte es

Sag zu Claude

Starte das Projekt in Docker.

Claude startet Docker und nennt dir die Adresse. Offne sie im Browser. Bearbeite eine Datei in VS Code — der Browser aktualisiert sich automatisch.

Stoppe es

Sag zu Claude

Stoppe die Docker-Container.

Mach das jetzt

Erstelle Dockerfile.dev und docker-compose.yml. Führe docker compose up dev aus. Sieh dein Projekt in Docker. Das ist das komplette Setup.

Lektion 12

Das System nach 30 Tagen

Wie dein Projekt nach einem Monat mit diesem Workflow aussieht. Der kumulative Effekt.

Tag 1 vs Tag 30

TAG 1

CLAUDE.md hat 5 Grundregeln
3 Starter-Skills
Keine Tests
Du erklarst das Projekt jede Session neu
"Ich denke es sieht gut aus"

TAG 30

CLAUDE.md hat 15+ Regeln, immer akkurat
8-10 Skills, jeder aus echter Erfahrung
100+ Tests, laufen in 30 Sekunden
Claude kennt das Projekt sofort
Systematischer Qualitatscheck bei jedem Commit

Jeder Skill macht Claude schlauer. Jeder Test macht Anderungen sicherer. Jedes CLAUDE.md-Update macht den Morgen schneller. Das System wird besser je mehr du es nutzt.

Tip

Nicht jede Gewohnheit sitzt ab Tag 1. Das Morgenritual braucht eine Woche. Der zweite Durchgang fuhlt sich teuer an bis er einen Bug fangt. Skills fuhlen sich wie Overhead an bis sie zum dritten Mal denselben Fehler verhindern. Gib dem Ganzen 30 Tage.

Mach das jetzt

Setze dir eine Erinnerung für 30 Tage ab jetzt. Öffne diese Lektion erneut. Vergleiche wo du bist mit wo du angefangen hast.

Jetzt bauen.

Dein Setup ist produktionsreif. Dein Workflow ist professionell. Zeit, etwas Echtes zu bauen.

Workshop: Roast My WebsiteWorkshop: Roast My Website Kontaktiere unsKontaktiere uns