CommunityCodierung & Entwicklunggithub.com

teefayb/claude-code-setup-demo

Füge einen neuen Next.js-Routen-Handler unter src/app/api mit Zod-Validierung, konsistenten Fehlern und Vitest-Tests hinzu. Verwende diesen Skill, wenn du aufgefordert wirst, einen API-Endpunkt hinzuzufügen oder zu erweitern.

Was ist claude-code-setup-demo?

Dieser Skill automatisiert die Erstellung neuer oder die Erweiterung bestehender API-Routen in einer Next.js-Anwendung, die einem spezifischen, etablierten Codierungsmuster folgt. Er nutzt Zod für die Eingabevalidierung und Vitest für das Testen, um konsistente Fehlerformate und eine saubere Architektur zu gewährleisten. Der Skill ist besonders nützlich für Entwicklerteams, die Next.js-Projekte mit einem standardisierten API-Layer pflegen und unnötige Abweichungen vermeiden möchten. Er unterstützt die gängigsten Next.js- und TypeScript-Entwicklungsumgebungen. Die Funktionsweise: Der Skill analysiert zunächst vorhandene Quellcodedateien (z. B. `src/app/api/links/route.ts`), um die bestehenden Muster zu verstehen. Dann erstellt er eine Zod-Validierung in einer separaten Schema-Datei, eine Datenzugriffsschicht in einer Store-Datei und den eigentlichen Routen-Handler, der nur das Parsen, den Store-Aufruf und die Ergebniszuordnung übernimmt. Abschließend generiert er automatisch einen Vitest-Test, der verschiedene Fehlerklassen abdeckt, und führt die entsprechenden Build- und Test-Befehle aus.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/teefayb/claude-code-setup-demo/tree/HEAD/.claude/skills/add-api-route

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Füge die API-Route hinzu, die hier beschrieben ist: $ARGUMENTS

Falls Methode, Pfad oder Verhalten unklar sind, stelle vor dem Schreiben von Code eine kurze Frage.

Schritte

  1. Lies src/app/api/links/route.ts, src/lib/http.ts und src/lib/links/schema.ts, um die bestehenden Muster zu übernehmen. Erfinde kein neues Fehlerformat.
  2. Platziere die Eingabevalidierung in einem Zod-Schema in der entsprechenden src/lib/<domain>/schema.ts, nicht inline in der Route.
  3. Platziere den Datenzugriff in src/lib/<domain>/store.ts. Der Routen-Handler parst nur, ruft den Store auf und bildet die Ergebnisse auf Antworten ab.
  4. Erstelle src/app/api/<path>/route.ts:
    • export const dynamic = "force-dynamic";
    • Fehlerhaftes JSON → errorResponse(400, "invalid_json")
    • ZodError → validationError(err)
    • Nicht gefunden → errorResponse(404, "not_found")
    • Dynamische Segmente: { params }: { params: Promise<{ id: string }> } und await params.
  5. Schreibe route.test.ts neben der Route. Verwende useTempDataFile() aus @/test/temp-data-file und rufe die exportierten Handler mit new Request(...) auf. Decke ab: Erfolg, jede Validierungsfehlerklasse, nicht gefunden und fehlerhaftes JSON, wenn ein Body akzeptiert wird.
  6. Führe npx vitest run <die neue Testdatei> aus, dann npm run check, dann npm run build.
  7. Melde: den Endpunkt-Vertrag (Methode, Pfad, Request-Body, Antworten mit Statuscodes) und die ausgeführten Befehle mit ihren Ergebnissen.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Verwandte Skills