메뉴
Standard-Stack, Backend-Anbindung (n8n-Webhook / FastAPI / AI-Streaming) und Vercel-Deploy für Next.js/React-Frontends. Verwenden beim Bauen/Debuggen von UI, bei Tailwind, bei n8n-Webhook- oder FastAPI-Anbindung, beim AI-Chat-Streaming und beim Deployen nach Vercel. Lauffähiges Beispiel: frontend-starter/.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Härtetest für einen FERTIGEN Plan — unerbittliches Interview zu jedem Aspekt des Vorhabens, bevor gebaut wird. NUR auf ausdrücklichen Wunsch verwenden („grill mich", „zerpflück meinen Plan", „stress-teste das"). Bei vager oder unklarer Idee stattdessen den Skill idee-klaeren nutzen.
Hilft Einsteiger:innen, aus einer Idee einen klaren, baubaren Auftrag für Claude Code zu machen — egal ob sie noch KEINE Idee haben (Inspiration/Ideen-Menü) ODER eine Idee haben, sie aber nicht als klare Anweisung formulieren können. Verwenden ganz am Anfang, wenn jemand unsicher ist was/wie zu bauen, seine Idee/seinen Prozess vage beschreibt, oder einen Workflow/eine App planen will, bevor gebaut wird.
Deutschsprachiger Pruefbericht-Template fuer Kunden-Workflows. Verwenden nach Workflow-Fertigstellung fuer kundenfertigen Report mit Testergebnissen, Validierung und Security-Status.
Stack und Muster für ein eigenes Python-Backend (Muster B — Compute-/DB-/Geo-Service via FastAPI + Docker). Verwenden beim Bauen/Erweitern/Deployen eines eigenen Backends, wenn n8n nicht reicht (schwere Rechen-/DB-/Geo-Logik, Routing, Raster), bei FastAPI, uvicorn, Dockerfile oder psycopg/Postgres-DSN. Lauffähiges Beispiel: backend-example/.
Rezept zum Anlegen eines NEUEN Frontends (Next.js 16 + React 19 + TS + Tailwind 4). Verwenden wenn ein neues Web-Frontend gestartet/gescaffolded werden soll, oder wenn entschieden werden muss welches Backend-Muster (n8n-Webhook vs. FastAPI-Proxy vs. AI-Streaming vs. statisch) passt.
Dokumentiert n8n-Workflows automatisch mit erklärenden Sticky-Note-Nodes in einfacher Sprache, damit Einsteiger nachvollziehen können, was passiert. Verwenden nach dem Bauen/Validieren eines Workflows oder wenn der User um Dokumentation, Erklärung, Kommentare oder Sticky Notes für einen Workflow bittet.
| name | frontend-build |
| description | Standard-Stack, Backend-Anbindung (n8n-Webhook / FastAPI / AI-Streaming) und Vercel-Deploy für Next.js/React-Frontends. Verwenden beim Bauen/Debuggen von UI, bei Tailwind, bei n8n-Webhook- oder FastAPI-Anbindung, beim AI-Chat-Streaming und beim Deployen nach Vercel. Lauffähiges Beispiel: frontend-starter/. |
Verbindliche Konventionen für Web-Frontends. Ziel: keine Stack-Drift, keine bekannten Fehler wiederholen. Für neue Projekte siehe Skill frontend-scaffold. Lauffähiges Beispiel in diesem Repo: frontend-starter/.
| Bereich | Festlegung |
|---|---|
| Framework | Next.js 16 (App Router), next@16.x |
| UI | React 19, react/react-dom@^19 |
| Sprache | TypeScript 5.9 (neuestes 5.x, kein TS 6), strict: true |
| Styling | Tailwind CSS 4 (CSS-first: @import "tailwindcss" in der globalen CSS, kein tailwind.config.ts; PostCSS-Plugin @tailwindcss/postcss) |
| Paketmanager | npm — kein pnpm/yarn/bun |
| Pfad-Alias | @/* → ./* |
| Map-Apps | maplibre-gl@^4.7, dynamisch importiert (SSR-safe), OSM-Raster ohne API-Key |
tsconfig Eckwerte: noEmit, jsx: preserve, moduleResolution: bundler, module: esnext, skipLibCheck, paths: {"@/*": ["./*"]}.
Auf current-stable pinnen und bewusst nachziehen — nicht Bleeding-Edge jagen, aber auch nicht Majors zurückfallen lassen. Konkret: Framework/React/Tailwind auf dem aktuellen stabilen Major (Stand 2026-06: Next 16, React 19, Tailwind 4), TypeScript bewusst auf dem neuesten 5.x halten, bis sich der jüngste TS-Major (6.x) gesetzt hat. Tailwind 3→4 ist Breaking (CSS-first, kein JS-Config).
Ordnerkonvention: app/ (Routes) · components/ (UI) · lib/ (n8n.ts bzw. api.ts, types.ts).
n8n ist Backend #1. Erst wenn n8n für den Fall nicht sinnvoll ist, eine Stufe runter:
backend-fastapi (+ Beispiel backend-example/).NEXT_PUBLIC_N8N_BASE=https://… (Client-seitig).lib/n8n.ts, z.B. ${NEXT_PUBLIC_N8N_BASE}/webhook/<pfad>..body (vgl. CLAUDE.md) — der n8n-Workflow muss das berücksichtigen, nicht das Frontend.frontend/ (Next.js, Vercel) + backend/ (FastAPI, Docker auf VPS). Die Service-Seite steht im Skill backend-fastapi — hier nur die Frontend-/Proxy-Seite.frontend/next.config.mjs proxyt /api/* an den Backend-Service → kein CORS:// frontend/next.config.mjs
const backend = process.env.BACKEND_URL || "http://127.0.0.1:8080";
/** @type {import('next').NextConfig} */
export default {
async rewrites() {
return [{ source: "/api/:path*", destination: `${backend}/:path*` }];
},
};
/api/... auf (nie die Backend-URL hart codieren).BACKEND_URL als Vercel-Env auf die Backend-Subdomain setzen.Nur wenn eine Chat-UI Token-Streaming ins eigene Frontend braucht (sonst AI über n8n!). Dünner Route Handler, kein eigenes Backend. Provider: Anthropic direkt (Vercel-freundlich, Env-Key).
Deps: ai@^6, @ai-sdk/anthropic@^3, @ai-sdk/react@^3. Env: ANTHROPIC_API_KEY.
lib/ai/model.ts — eine Stelle für Provider + Modell:
import { anthropic } from "@ai-sdk/anthropic"; // liest ANTHROPIC_API_KEY aus der Env
export const getModel = () => anthropic("claude-opus-4-8");
app/api/chat/route.ts — Streaming-Endpoint:
import { streamText, convertToModelMessages, type UIMessage } from "ai";
import { getModel } from "@/lib/ai/model";
export async function POST(req: Request) {
const { messages }: { messages: UIMessage[] } = await req.json();
const result = streamText({ model: getModel(), messages: await convertToModelMessages(messages) });
return result.toUIMessageStreamResponse();
}
Client ("use client") mit useChat aus @ai-sdk/react (Default-Endpoint POST /api/chat):
const { messages, sendMessage, status } = useChat();
// senden: sendMessage({ text: input })
// rendern: message.parts.filter(p => p.type === "text").map(p => p.text).join("")
.sqlite ist nach dem Request weg. Chatverlauf/Daten → Supabase/Postgres oder n8n.npx vercel login (Browser-Login macht der User), dann npx vercel --prod. Geht ohne GitHub-Repo. Env-Vars vorher per npx vercel env add <NAME> production setzen (oder im Dashboard).git push deployt automatisch.NEXT_PUBLIC_* ist build-time — Env vor dem Build setzen; nach Änderung neu deployen, sonst greift der alte Wert.rootDirectory = frontend setzen..env.local, nie ins Repo.npm run build lokal — Build muss grün sein (fängt SSR-/Type-Fehler vor Vercel ab).npm run dev für visuelle Preview der Änderung.git push.NEXT_PUBLIC_N8N_BASEBACKEND_URL (Prod)ANTHROPIC_API_KEY.env.local / Vercel-Dashboard, nie im Repo.<button>, <nav>, <main>, <label for>) statt klickbarer <div>.:focus-Zustand.alt; Icons-only-Buttons mit aria-label.aria-invalid/aria-describedby./api- bzw. Webhook-Calls.console.log-Reste committen.