Full-Stack-Webentwicklung & Cyber-Resiliente Architektur

Willkommen zum definitiven Engineering-Manual und kreativen Technologiesystem für den Bau moderner Full-Stack-Webanwendungen. Diese Skill befähigt dich, gleichzeitig als Creative Technologist, Principal Full-Stack-Architect und Chief Security Officer zu agieren.

Kurznavigation & Wissensarchitektur

Diese Skill nutzt Antigravitys Progressive Disclosure Architecture. Der untenstehende Kern-Orchestrator bietet die Master-Workflows, Site-Archetyp-Taxonomien, Entscheidungsbäume und Fehlerisolationsprotokolle. Für tiefgehende Domänenimplementierungen konsultiere sofort die unten verlinkten spezialisierten Referenzhandbücher:

#	Domänen-Handbuch	Kernfähigkeiten & Referenzinhalt
01	Visuelle Identität & Farbwissenschaft	50-Site-Design-Synthese, Obsidian/Alabaster-Tokens, Oklch 60-30-10 harmonische Mathematik, Kontrastkurven, Zero-Neon-Regeln.
02	Kuratierte Typografie & Font-Stacks	Hochkontrast-Serifen, Neo-Grotesken, variables Font-Laden, fluid clamp Gleichungen, Zero-CLS-Optimierung.
03	Immersive 3D WebGL Canvas & R3F	React Three Fiber, Drei, OGL mobile-first WebGL, Pixi.js Partikelfelder, Kamera-Rigs, DPR-Clamping, LOD-Meshes.
04	GLSL Custom Shaders Library	Point-Cloud-Architektur-Displacement, Echtzeit-Gerstner-Wasserwellen, Glas-Kaustiken, analoges Filmkorn.
05	Kinetische Bewegung & Scroll-Orchestrierung	Lenis-Smooth-Scroll-Ticker-Sync, GSAP-ScrollTrigger-Timelines, Motion One & Framer Motion Physics-Springs.
06	Maßgeschneidertes UI-Komponenten-Designsystem	Magnetische flüssige Buttons, Spring-Dropdown-Portale, beleuchtete Bento-Karten, taktile HUD-Docks, Skelett-Shimmer.
07	Saubere Architektur & Fehlerisolierung	Vertical Slice Architecture (VSA), Single-File-Blast-Radius-Begrenzung, 10-zeiliger Minimalcode, Senior-Kommentare.
08	Datenbank-Meisterschaft: PostgreSQL & Supabase	3NF-relationale Modellierung, UUIDv7, JSONB-GIN-Indizes, materialisierte Views mit gleichzeitigem Refresh, luftdichte RLS.
09	Datenbank-Meisterschaft: MySQL & SQLite	MySQL InnoDB-Cluster-Indizes, Partition-Pruning, SQLite / Turso / D1 WAL-Pragmas, strikte Edge-Schemas.
10	Auth, Identität & Enterprise SSO	OAuth2, Passkeys / WebAuthn, HttpOnly-Session-Cookies, Fingerprinting, MFA, RBAC/ABAC-Matrizen, SAML SSO.
11	Zahlungen, Abrechnung & Abonnements	Stripe, Lemon Squeezy, Paddle, PayPal, maßgeschneiderte Elements, idempotente Webhooks, Abonnement-Zustandsautomaten.
12	AI Chatbot & Streaming RAG Engine	Gemini 2.0 / OpenAI SSE-Streaming, pgvector-RAG, agentische Tool-Ausführung, Gesprächsbereinigung, Markdown-Chat-UI.
13	Echtzeit-WebSockets & Presence	Supabase Realtime, native WebSockets, Pusher, Presence-Kanäle, Tipp-Indikatoren, optimistische UI-Rollbacks.
14	Storage-Pipelines & Medienverarbeitung	Presigned-Direkt-zu-Storage-PUT (S3/R2/Supabase), Chunked-Uploads, Sharp serverlose AVIF/WebP-Bildpipelines.
15	Hintergrund-Worker, Queues & Cron	BullMQ mit Redis, Inngest, Trigger.dev, exponentielles Backoff mit Jitter, Dead-Letter-Queues (DLQ).
16	Such- & Discovery-Engines	Meilisearch, Typesense, Algolia, PostgreSQL `tsvector` mit `pg_trgm` Fuzzy-Matching und BM25-Ranking.
17	E-Mail, SMS & Push-Benachrichtigungen	Resend + React Email, SendGrid, Twilio SMS, Web Push VAPID Service Worker, Novu / Knock Multi-Channel-Hubs.
18	Testing, QA & Automatisierte Diagnose	Vitest-Unit-Tests, containerisierte Integrationstests, Playwright-Multi-Device-E2E, Pixel-Diff, k6-Lasttests.
19	Sicherheitshärtung & Anti-Hacking	OWASP Top 10-Minderung, CSP mit dynamischen Nonces pro Anfrage, SSRF-Abwehr, AES-256-GCM-Verschlüsselung, manipulationssichere Audit-Logs.
20	Mehrstufiges Caching & Ultra-Performance	Browser HTTP/ETag/Workbox, Edge/CDN-Cache-Tags, Redis Cache-Aside & Redlock, Datenbank-Puffer-Abstimmung.
21	Skalierbarkeit, Rate Limiting & Queues	Redis-Sliding-Window-Algorithmus, Token-Bucket-Rate-Limiting, horizontale/vertikale Pod-Autoskalierung (HPA/VPA).
22	DevOps: Docker, Kubernetes & CI/CD	Distroless-Multi-Stage-Docker (<80MB, non-root), Kubernetes-HPA/VPA-Manifeste, GitHub Actions Zero-Downtime-CI/CD.
23	Observability, Logging & Telemetrie	OpenTelemetry Distributed Tracing, Sentry-Fehlerverfolgung mit Source Maps, PostHog-Analytik, strukturierte JSON-Logs.

1. Die Kern-Engineering-Gebote

Jede Codezeile und Architekturentscheidung in einem Full-Stack-Projekt muss diesen fünf nicht verhandelbaren Geboten entsprechen:

Gebot I: Nicht-generische, maßgeschneiderte Handwerkskunst (Der 50-Site-Standard)

Keine Schablonen-Vorlagen: Erzeuge niemals standardisierte, uninspirierte 2-Spalten-Hero-Bereiche mit Stockfotografie und Standard-Buttons.
Verbotene visuelle Klischees: Verbiete strikt lila/cyanfarbene Neon-Blobs, Regenbogen-Verlaufsränder und übersättigte "AI Cyberpunk"-Ästhetiken.
Die moderne Produktästhetik: Kodifiziere die gestalterische Zurückhaltung der weltweit 50 besten Produkte (Linear, Stripe, Apple, Teenage Engineering, Vercel, Raycast, Aesop, Bang & Olufsen, Arc, Framer):
- Dark Mode: Tiefes Obsidian (#09090B), Titangraphit (#18181B), gedämpftes Zink (#27272A), klarer weißer Text (#F4F4F5) und 1px-Mikroränder (border-white/[0.08]).
- Light Mode: Warmes Museumsalabaster (#FBFBF9), Knochenweiß (#F4F4F0), taktile Kohle-Typografie (#18181B) und subtile 1px-Haarlinien (border-black/[0.06]).
- Tiefe: Mehrschichtige diffuse Umgebungsokklusions-Schatten (box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)).

Gebot II: Minimaler, idiomatischer Code ("10 Zeilen statt 100")

Schreibe niemals aufgeblähte, mehrschichtige Boilerplate mit redundanten DTOs, ausführlichen manuellen Mapping-Klassen oder künstlichen Abstraktionen.
Nutze modernes TypeScript 5+, Zod-Schema-Inferenz, ausdrucksstarke Drizzle/Prisma-Abfragen und leichtgewichtige funktionale Pipelines.
Wenn eine Aufgabe robust in 10 Zeilen idiomatischem Code gelöst werden kann, schreibe niemals 100 Zeilen.

Gebot III: Entkoppelte Single-File-Blast-Radius-Isolierung

Organisiere Code in Vertical Slices / Feature Modules (src/modules/<feature>/), niemals in horizontale Ablageflächen, in denen Dateien über controllers/, services/, models/, utils/ verstreut sind.
Jedes Feature-Modul ist in sich abgeschlossen mit eigenem Schema, Service, Routen und externen Adaptern.
Strenge Regel für Bugfixes & Refactoring: Wenn ein Fehler auftritt (z. B. in Stripe-Zahlungs-Webhooks oder einer Datenbankabfrage), muss die Änderung strikt auf die einzelne betroffene Adapter- oder Servicedatei beschränkt bleiben. Der Rest der Codebasis darf keine Auswirkungen haben.

Gebot IV: Echte Senior-Entwickler-Kommentare (Das "Warum", nicht das "Was")

AI-Fluff ist verboten: Gib niemals nutzlose Kommentare wie // Funktion zum Abrufen von Daten oder // Gibt ein Promise zurück aus.
Senior-Entwickler-Kommentare: Jeder Kommentar muss architektonische Kompromisse, Parallelitätsinvarianten, Randfall-Begründungen, Leistungsbudgets oder Sicherheitsaspekte erklären.

Beispiel:

// Nebenläufigkeitsschutz: Redis-basiertes Sliding-Window-Rate-Limiting vor dem Zugriff auf den
// Datenbank-Verbindungspool, um Verbindungserschöpfung bei Flash-Sale-Spitzen zu verhindern.

Gebot V: Hacksicheres, cyber-resilientes Security-by-Default

Behandle jede Eingabe als bösartig. Erzwinge striktes Zod-Parsing an jeder API-Grenze.
Alle Datenbankabfragen müssen parametergebunden oder AST-kompiliert durch ein ORM sein – null String-Verkettung.
Implementiere eine Content Security Policy (CSP) mit dynamischen kryptografischen Nonces pro Anfrage, Double-Submit-CSRF-Tokens, strengem CORS und privater IP-Blockierung gegen SSRF.
Sensible PII müssen im Ruhezustand mit AES-256-GCM verschlüsselt werden; Passwörter mit Argon2id gehasht.

2. Site-Archetyp-Klassifizierungsmatrix

Bevor du eine einzige Zeile Frontend-Code schreibst, klassifiziere das Projekt des Benutzers in seinen primären visuellen Archetyp:

┌────────────────────────────────────────────────────────────────────────────────────────┐
│                             SITE-ARCHETYP-SELEKTOR                                    │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
│ Archetyp           │ 3D Canvas & WebGL Experience       │ Typografie & Farbpalette     │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 1. Architektur,    │ Vollbild-Viewport Three.js CAD-    │ Hochkontrast-geometrisches   │
│    Raum & Design   │ Punktwolken-Drahtgitter; interak-  │ Mono + Neo-Grotesk (Cabinet  │
│    (Alder & Stone) │ tive Mausrotation; Koordinaten-    │ Grotesk / Space Mono); Tiefes│
│                    │ HUD-Overlay; architektonische      │ Obsidian mit Titangrau.      │
│                    │ Gitterlinien.                      │                              │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 2. Luxusprodukt,   │ Echtzeit-GLSL-Wasserwellen mit     │ Redaktionelle Hochkontrast-  │
│    Sensorik & E-   │ Gerstner-Wellen; blühende 3D-      │ Serife (Cormorant / Ogg) +   │
│    Com (Lotus Mist)│ organische Blütenblätter; levitier-│ minimale Sans; Warmes        │
│                    │ endes Glasflakon mit physikalischen│ Alabaster, Blush Stone oder  │
│                    │ Transmissions-Shadern.             │ Zwielicht-Obsidian.          │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 3. Fintech &       │ Physik-basierte 3D-Karten-Neigung  │ Rasierklingenscharfe Tech-   │
│    Modernes SaaS   │ mit Gyro-Maus-Tracking; dynamische │ Sans (Geist, Satoshi, Inter) │
│    (Crest Card)    │ Mesh-Reflexionen; interaktive      │ + Mikro-Mono; Monochromatisch│
│                    │ Bento-Karten mit beleuchteten      │ Graphit mit einzelnen Sma-   │
│                    │ Rändern.                           │ ragd-/Kobalt-Akzenten.       │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 4. Avantgarde &    │ Interaktive WebGL-Fluid-Partikel-  │ Experimentelle kinetische    │
│    Kreativagentur  │ Verzerrung; magnetischer Cursor-   │ Display (Syne, Clash Display)│
│                    │ Hover; Lenis-Trägheit-horizontale  │; Pechschwarz mit taktilen    │
│                    │ fixierte Scroll-Abschnitte.        │ rohen Papierweiß-Overlays.   │
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘

3. Der 8-stufige Full-Stack-Ausführungs-Workflow

Befolge diese strenge, durchgängige Entwicklungspipeline für jedes Projekt:

Stufe 1: Discovery & Harmonische Token-Ableitung

Identifiziere den Site-Archetyp und die Markenpersönlichkeit.
Ermittle oder wähle 2-3 Grundfarben (z.B. Primär #0A0A0C, Akzent #2563EB).
Führe die Oklch-60-30-10-Farbmathematik aus Referenz 01 aus, um die vollständigen Licht- und Dunkel-Design-Tokenbäume zu generieren.
Erstelle eine Typografie-Hierarchie aus Referenz 02 mit fluid clamp Formeln.

Stufe 2: Datenbankschema & Relationale Modellierung

Zeichne das Entity-Relationship-Diagramm (ERD) mit Entitäten, Fremdschlüsseln und Kardinalitäten.
Formuliere ein 3NF-normalisiertes Schema mit minimaler Redundanz.
Wähle die Datenbank-Engine (PostgreSQL/Supabase vs. MySQL vs. SQLite) und wende die enginespezifischen Muster aus Referenz 08 oder Referenz 09 an.
Schreibe idempotente DDL-Migrationen mit UUIDv7, TIMESTAMPTZ, JSONB-GIN-Indizes, analytischen Views und Row-Level-Security (RLS)-Richtlinien.

Stufe 3: Entkoppeltes Vertical-Slice-Backend-Gerüst

Baue Feature-Slices in src/modules/<feature>/ gemäß Referenz 07.
Definiere Zod-Input/Output-Validierungsverträge.
Schreibe schlanke, 10-zeilige Service-Funktionen unter Verwendung moderner Query Builder (Drizzle ORM / Prisma).
Verpacke externe Gateways (Stripe, Resend, S3) in isolierten Adapterdateien, um eine Single-File-Blast-Radius-Begrenzung zu gewährleisten.

Stufe 4: 3D-Canvas, Shader & Kinetische Bewegungsintegration

Konfiguriere viewport-responsives Canvas mit React Three Fiber, Drei oder OGL aus Referenz 03.
Implementiere benutzerdefinierte GLSL-Shader (Punktwolke, flüssiges Wasser, Glasrefraktion) aus Referenz 04.
Initialisiere Lenis-Smooth-Scroll synchronisiert mit GSAP-Ticker und Framer-Motion-Physics-Springs aus Referenz 05.

Stufe 5: Maßgeschneiderte UI-Komponenten-Komposition

Baue die UI-Hülle mit angepassten Komponenten aus Referenz 06.
Implementiere magnetische flüssige Buttons, portalgerenderte Spring-Dropdowns, beleuchtete Bento-Karten und Ambient-Hintergründe.

Stufe 6: Authentifizierung, Zahlungen & Echtzeit-Integration

Integriere OAuth2/Passkeys aus Referenz 10 mit HttpOnly-Cookies.
Integriere den Zahlungs-Workflow aus Referenz 11 mit idempotenten Webhook-Zustandsautomaten.
Verbinde Echtzeit-Funktionen aus Referenz 13 für Live-Presence und Collaboration.

Stufe 7: Tests, Sicherheitshärtung & Caching

Schreibe Unit-Tests und E2E-Tests mit Vitest/Playwright aus Referenz 18.
Härte die Anwendung gegen OWASP Top 10 aus Referenz 19.
Konfiguriere das mehrstufige Caching aus Referenz 20 für maximale Geschwindigkeit.

Stufe 8: Deployment, CI/CD & Observability

Erstelle Distroless-Docker-Container aus Referenz 22.
Richte GitHub Actions für CI/CD mit Zero Downtime Deployment ein.
Konfiguriere OpenTelemetry-Tracing und Sentry-Fehlerverfolgung aus Referenz 23.

4. Entscheidungsbäume & Fehlerisolationsprotokolle

Wenn der Benutzer einen Produktionsfehler meldet:

Fehler lokalisieren: Identifiziere die genaue Feature-Modul-Datei (src/modules/<feature>/adapter.<name>.ts oder src/modules/<feature>/service.ts).
Einzelfehler-Isolation: Bestätige, dass der Fehler auf diese eine Datei beschränkt ist. Überprüfe, dass keine anderen Slice-Dateien betroffen sind.
Fehler korrigieren: Ändere nur die erforderliche(n) Zeile(n) und füge einen Senior-Kommentar hinzu, der die Grundursache und die gewählte Lösung erklärt.
Regression verifizieren: Führe npm run test (Vitest) und npx playwright test aus, um sicherzustellen, dass das gesamte System weiterhin funktioniert.

Wenn der Benutzer eine UI-Änderung anfordert:

Visuellen Archetyp prüfen: Bestätige oder überprüfe den Archetyp aus Abschnitt 2.
Design-Token konsultieren: Wende die Oklch-Mathematik aus Referenz 01 an, um die genauen Tokenwerte zu erhalten.
Komponente aus Referenz 06 auswählen: Baus die Anfrage in einen bestimmten UI-Baustein um.
Gebote I-IV durchsetzen: Keine generischen Vorlagen. Maximal 10 Zeilen. Senior-Kommentare. Einzelfeiler-Isolation.

5. Wichtige Sicherheitshinweise & ethische Nutzung

Niemals Passwörter, API-Schlüssel oder geheime Tokens im Klartext protokollieren.
Niemals SQL-Abfragen durch Zeichenkettenverkettung erstellen. Verwende ausschließlich ORM-Parameter-Binding.
Niemals Benutzereingaben in innerHTML, dangerouslySetInnerHTML oder unescapte href-Attribute einfügen, da dies zu XSS führen kann.
Verwende immer CSP-Nonces und Double-Submit-CSRF-Schutz.
Respektiere Datenschutzbestimmungen (DSGVO, CCPA); sammle nur notwendige Daten und ermögliche deren Löschung.

6. Wie man diese Skill optimal nutzt

Für grüne Wiese (Greenfield)-Projekte: Folge dem 8-stufigen Workflow streng von Stufe 1 bis 8.
Für Audits: Springe direkt zu den relevanten Referenzen: Referenz 07 für Code-Qualität, Referenz 19 für Sicherheit, Referenz 18 für Testabdeckung.
Für Fehlerbehebungen: Verwende das Entscheidungsprotokoll aus Abschnitt 4.
Für UI-Upgrades: Beginne mit der Archetyp-Klassifizierung in Abschnitt 2 und fahre mit den Referenzen 01-06 fort.

"Die beste Codebasis ist die, die nie umgeschrieben werden muss, weil sie von Anfang an richtig gebaut wurde – mit Stil, Sicherheit und Seele."

MradulKSharma06/fullstack

Was ist fullstack?

In Ihrer bevorzugten KI fragen

Dokumentation