Roast My Website

Führe aus: npx @studiohyra/claude-code-starter init roast-my-website. Das erstellt ein privates GitHub-Repo, scaffoldet Next.js mit Tailwind und TypeScript, installiert Skills und konfiguriert Claude Code.

Öffne das Projekt in VS Code. Öffne das Terminal. Tippe claude.

Passe CLAUDE.md an: Ändere den Projektnamen zu "Roast My Website." Setze Phase 1 auf IN PROGRESS. Füge Regeln hinzu: keine hardcodierten Farben, jeder Text über i18n, Build vor jedem Commit ausführen.

Test: Frage Claude "An welchem Projekt arbeiten wir?" Es sollte mit der Beschreibung der Roast-App antworten.

Du hast jetzt: ein Repo, eine konfigurierte Claude Code Umgebung und einen Plan.

Sage Claude: "Plane das: eine Homepage mit einem Formular, in dem Nutzer eine Website-URL einfügen. Ein Eingabefeld, ein Absende-Button. Dunkles Design mit unseren Design Tokens. i18n für die Labels. Noch keine Datenbank, nur die UI."

Überprüfe den Plan. Dann: "Baue es."

Claude erstellt: die Homepage unter src/app/[locale]/page.tsx, eine RoastForm-Komponente und i18n-Strings in en.json. Das Formular validiert die URL (ist es eine echte URL?). Beim Absenden passiert noch nichts. Das kommt in Lektion 3.

Test: npm run dev, öffne localhost:3000. Füge eine URL ein. Sieh, wie das Formular funktioniert. Probiere eine ungültige URL. Sieh die Validierung.

Du hast jetzt: eine funktionierende Homepage mit einem validierten URL-Formular. 20 Minuten.

Sage Claude: "Erstelle eine API-Route unter /api/roast. Sie empfängt eine URL per POST. Sie soll: den HTML-Code und die Meta-Tags der Website abrufen, diese an die Claude API mit einem Roasting-Prompt schicken, JSON zurückgeben mit einem Gesamtscore (1-10) und vier Kategorien (Design, Copy, UX, erster Eindruck), jeweils mit einem Score und 2-3 Sätzen Feedback."

Der KI-Prompt ist der Schlüssel. Er muss brutale, aber spezifische Bewertungen produzieren: "Du bist ein brutal ehrlicher Website-Kritiker. Denke an Simon Cowell. Bewerte 1-10. Sei spezifisch über die tatsächlichen Elemente, die du siehst. Sei witzig, nicht gemein. Eine 5 ist Durchschnitt. Die meisten Seiten bekommen 4-6."

Claude baut: die API-Route mit Zod-Validierung, Website-Abruf, KI-Prompt und typisierter Response.

Verbinde das Formular mit der API. Submit ruft /api/roast auf, zeigt das Ergebnis an.

Test: Füge eine echte URL ein. Warte auf den Roast. Lies ihn. 30-40 Minuten.

Sage Claude: "Baue eine Roast-Ergebnis-Komponente. Großer Gesamtscore mit Farbverlauf (rot für niedrig, grün für hoch). Vier Kategorie-Karten: Design, Copy, UX, erster Eindruck. Jeweils mit Score und Feedback. Dunkles Theme, großzügige Abstände. Mach es so, dass Leute es screenshotten und teilen."

Claude erstellt: RoastResult-Komponente, ScoreCircle (animierter Score-Indikator), CategoryCard. Der Score-Kreis füllt sich mit Farbe basierend auf dem Score.

Zweiter Durchgang: "Überprüfe die Roast-Anzeige. Prüfe auf hardcodierte Farben, fehlende i18n, Mobile-Layout-Probleme, Accessibility."

Phase 1 ist fertig. Du hast: URL einfügen, eine schöne Roast-Seite bekommen.

Führe deinen Qualitätscheck durch: npm run build (keine Fehler). Führe /phase-check aus, wenn du den Skill hast. Committen. 30 Minuten.

Sage Claude: "Erstelle eine Supabase-Migration für eine roasts-Tabelle. Spalten: id (uuid), url (text), domain (text, extrahierte Domain), overall_score (integer 1-10), categories (jsonb), created_at (timestamptz). RLS: Jeder kann lesen, nur die API kann einfügen. Index auf overall_score für die Rangliste."

Wenn du das Supabase MCP verbunden hast, inspiziert Claude dein Schema und führt die Migration direkt aus. Falls nicht, generiert es SQL für das Supabase-Dashboard.

Aktualisiere die API-Route: Nach dem Generieren des Roasts, in Supabase speichern. Die Roast-ID zurückgeben, damit das Frontend auf eine teilbare Seite weiterleitet.

Flow: POST /api/roast generiert den Roast, speichert in Supabase, gibt die ID zurück. Frontend leitet weiter zu /roast/[id].

Test: Roaste eine Website. Prüfe das Supabase-Dashboard. Der Roast ist in der Tabelle. 20-30 Minuten.

Sage Claude: "Erstelle eine dynamische Route unter /[locale]/roast/[id]/page.tsx. Lies den Roast aus Supabase anhand der ID. Zeige das Roast-Ergebnis an. Füge generateMetadata hinzu: Titel 'Website Roast: [domain] scored [score]/10'. Füge OpenGraph-Tags für Social-Sharing-Vorschauen hinzu."

Claude baut: die dynamische Seite, Supabase-Abfrage, 404-Handling, SEO-Metadaten mit dynamischem Titel und Beschreibung.

Füge Teilen hinzu: ein "Diesen Roast teilen"-Button der die URL kopiert, und ein "Noch eine Website roasten"-Button zurück zur Homepage.

Test: Roaste eine Seite, kopiere die URL, öffne im Inkognito-Modus. Der Roast lädt für jeden mit dem Link. 20 Minuten.

Sage Claude: "Baue eine Rangliste für die Homepage. Frage Supabase nach den 10 Roasts mit dem niedrigsten overall_score ab. Zeige: Rang, Domain, Score mit Farbe, eine Zeile aus dem firstImpression-Feedback. Jede Zeile verlinkt zum vollständigen Roast. Füge Scroll-Animationen hinzu."

Edge Cases: Weniger als 10 Roasts? Zeige was da ist. Gleichstand? Sortiere nach neuesten zuerst.

Platziere die Rangliste unter dem Formular. Der Flow: Die Rangliste sehen, sich fragen ob die eigene Seite dort landen würde, URL einfügen.

Phase 2 fertig. Roasts werden in der Datenbank gespeichert, haben teilbare URLs, die schlechtesten erscheinen auf der Rangliste.

Phase-Check durchführen. Reparieren, was er findet. Committen. 25 Minuten.

Zuerst: Verifiziere, dass alle englischen Strings über next-intl laufen. Frage Claude: "Zeige mir alle i18n-Keys. Gibt es hardcodierte Strings in Komponenten?"

Wähle deine zweite Sprache. Spanisch, Deutsch, Französisch, was zu deiner Zielgruppe passt. Sage Claude: "Erstelle es.json, indem du alle Strings aus en.json ins Spanische übersetzt. Informeller Ton."

Der wichtige Teil: Der KI-Output selbst. Aktualisiere die API-Route, um eine Locale zu akzeptieren: POST /api/roast mit url und locale. Der KI-Prompt passt sich an: "Antworte auf Spanisch. Behalte die brutale Ehrlichkeit."

Aktualisiere die Routing-Konfiguration, um die neue Locale einzubeziehen. Test: Wechsle zu /es/ in der URL. Interface ist Spanisch. Roaste eine Seite. Feedback kommt auf Spanisch zurück.

Das Muster: Eine dritte Sprache hinzufügen sind die gleichen Schritte, die gleichen 15 Minuten. Deshalb lohnt sich i18n vom ersten Tag an. 20 Minuten.

Sage Claude: "Schreibe Playwright-Tests für Roast My Website. Teste: Homepage 200-Status für beide Locales, Formular rendert mit korrektem Placeholder, leerer Submit zeigt Fehler, ungültige URL zeigt Fehler, Ranglisten-Bereich rendert, eine Roast-Seite lädt mit Score und Kategorien, kein Mobile-Overflow bei 375px, zweite Sprache zeigt korrekten Text."

Claude schreibt 8+ Tests. Ausführen: npx playwright test e2e/roast.spec.ts.

Beim ersten Durchlauf werden meist 1-2 echte Probleme gefunden: ein Mobile-Overflow, ein fehlender Translation-Key, eine Komponente die mit Null-Daten nicht umgehen kann. Das ist normal. Reparieren.

Nachdem die Tests bestehen: Das ist dein permanentes Sicherheitsnetz. Jede zukünftige Änderung automatisch verifiziert in 30 Sekunden. 20 Minuten.

Letzter Qualitätscheck: npm run build (keine Fehler). npx playwright test (alles besteht). Führe /phase-check ein letztes Mal aus.

Deployen: Wenn Vercel CLI verbunden ist, führe vercel --prod aus. Falls nicht: Auf GitHub pushen, das Repo auf vercel.com importieren, Umgebungsvariablen hinzufügen (Supabase URL, Anon Key, KI-API-Key), deployen.

Teste die Live-App: Öffne deine Vercel-URL. Roaste eine Website. Prüfe, ob es speichert. Prüfe, ob der teilbare Link funktioniert. Prüfe die Rangliste. Wechsle die Sprache.

Teile es: Poste auf LinkedIn ("Ich habe das mit Claude Code gebaut. Füge deine URL ein und finde heraus, wie schlecht deine Website wirklich ist."). Schicke es Kollegen ("Probier mal unsere Firmenseite zu roasten."). Füge es deinem Portfolio hinzu.

Du hast jetzt: eine live, deployte, mehrsprachige, KI-gesteuerte Webanwendung mit Datenbank, teilbaren Seiten, einer Rangliste und automatisierten Tests. Von Grund auf gebaut. 20 Minuten fürs Deployment.