Full-Stack Web Development & Cyber-Resilient Architecture

Welcome to the definitive engineering manual and creative technology system for building modern full-stack web applications. This skill equips you to perform simultaneously as a Creative Technologist, a Principal Full-Stack Architect, and a Chief Security Officer.

Quick Navigation & Knowledge Architecture

This skill utilizes Antigravity's Progressive Disclosure Architecture. The core orchestrator below provides the master workflows, site archetype taxonomies, decision trees, and fault-isolation protocols. For deep domain implementations, immediately consult the specialized reference manuals linked below:

#	Domain Manual	Core Capabilities & Reference Content
01	Visual Identity & Color Science	50-site design synthesis, Obsidian/Alabaster tokens, Oklch 60-30-10 harmonic math, contrast curves, zero-neon rules.
02	Curated Typography & Font Stacks	High-contrast serifs, neo-grotesques, variable font loading, fluid clamp equations, zero-CLS optimization.
03	Immersive 3D WebGL Canvas & R3F	React Three Fiber, Drei, OGL mobile-first WebGL, Pixi.js particle fields, camera rigs, DPR clamping, LOD meshes.
04	GLSL Custom Shaders Library	Point-cloud architectural displacement, real-time Gerstner water ripples, glass caustics, analog film grain.
05	Kinetic Motion & Scroll Orchestration	Lenis smooth scroll ticker sync, GSAP ScrollTrigger timelines, Motion One & Framer Motion physics springs.
06	Bespoke UI Components Design System	Magnetic liquid buttons, spring dropdown portals, illuminated bento cards, tactile HUD docks, skeleton shimmers.
07	Clean Architecture & Error Isolation	Vertical Slice Architecture (VSA), single-file blast radius containment, 10-line minimal code, senior comments.
08	Database Mastery: PostgreSQL & Supabase	3NF relational modeling, UUIDv7, JSONB GIN indexes, materialized views with concurrent refresh, airtight RLS.
09	Database Mastery: MySQL & SQLite	MySQL InnoDB clustered indexes, partition pruning, SQLite / Turso / D1 WAL pragmas, strict edge schemas.
10	Auth, Identity & Enterprise SSO	OAuth2, Passkeys / WebAuthn, HttpOnly session cookies, fingerprinting, MFA, RBAC/ABAC matrices, SAML SSO.
11	Payments, Billing & Subscriptions	Stripe, Lemon Squeezy, Paddle, PayPal, bespoke Elements, idempotent webhooks, subscription state machines.
12	AI Chatbot & Streaming RAG Engine	Gemini 2.0 / OpenAI SSE streaming, pgvector RAG, agentic tool execution, conversation pruning, markdown chat UI.
13	Real-Time WebSockets & Presence	Supabase Realtime, native WebSockets, Pusher, presence channels, typing indicators, optimistic UI rollbacks.
14	Storage Pipelines & Media Processing	Presigned direct-to-storage PUT (S3/R2/Supabase), chunked uploads, Sharp serverless AVIF/WebP image pipelines.
15	Background Workers, Queues & Cron	BullMQ with Redis, Inngest, Trigger.dev, exponential backoff with jitter, dead-letter queues (DLQ).
16	Search & Discovery Engines	Meilisearch, Typesense, Algolia, PostgreSQL `tsvector` with `pg_trgm` fuzzy matching and BM25 ranking.
17	Email, SMS & Push Notifications	Resend + React Email, SendGrid, Twilio SMS, Web Push VAPID service workers, Novu / Knock multi-channel hubs.
18	Testing, QA & Automated Diagnostics	Vitest unit tests, containerized integration tests, Playwright multi-device E2E, pixel-diff, k6 load testing.
19	Security Hardening & Anti-Hacking	OWASP Top 10 mitigation, CSP per-request nonces, SSRF defense, AES-256-GCM encryption, tamper-evident audit logs.
20	Multi-Tier Caching & Ultra-Performance	Browser HTTP/ETag/Workbox, Edge/CDN Cache-Tags, Redis Cache-Aside & Redlock, Database buffer tuning.
21	Scalability, Rate Limiting & Queues	Redis sliding-window algorithm, token bucket rate limiting, horizontal/vertical pod autoscaling (HPA/VPA).
22	DevOps: Docker, Kubernetes & CI/CD	Distroless multi-stage Docker (<80MB, non-root), Kubernetes HPA/VPA manifests, GitHub Actions zero-downtime CI/CD.
23	Observability, Logging & Telemetry	OpenTelemetry distributed tracing, Sentry error tracking with source maps, PostHog analytics, structured JSON logs.

1. The Core Engineering Commandments

Every line of code and architectural decision in a full-stack project must adhere to these five non-negotiable commandments:

Commandment I: Non-Generic, Bespoke Craft (The 50-Site Standard)

Zero Cookie-Cutter Templates: Never generate standard uninspired 2-column heroes with stock photography and default buttons.
Banned Visual Clichés: Strictly ban purple/cyan neon blobs, rainbow gradient borders, and oversaturated "AI cyberpunk" aesthetics.
The Modern Product Aesthetic: Codify the design restraint of the world's top 50 products (Linear, Stripe, Apple, Teenage Engineering, Vercel, Raycast, Aesop, Bang & Olufsen, Arc, Framer):
- Dark Mode: Deep obsidian (#09090B), titanium graphite (#18181B), muted zinc (#27272A), crisp white text (#F4F4F5), and 1px micro-borders (border-white/[0.08]).
- Light Mode: Warm museum alabaster (#FBFBF9), bone white (#F4F4F0), tactile charcoal typography (#18181B), and subtle 1px hair-lines (border-black/[0.06]).
- Depth: Multi-layer diffuse ambient occlusion shadows (box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)).

Commandment II: Minimal, Idiomatic Code ("10 Lines Instead of 100")

Never write bloated, multi-layered boilerplate with redundant DTOs, verbose manual mapping classes, or artificial abstractions.
Leverage modern TypeScript 5+, Zod schema inference, Drizzle/Prisma expressive queries, and lightweight functional pipelines.
If a task can be solved robustly in 10 lines of idiomatic code, never write 100 lines.

Commandment III: Decoupled Single-File Blast-Radius Isolation

Organize code into Vertical Slices / Feature Modules (src/modules/<feature>/), never into horizontal dumping grounds where files are scattered across controllers/, services/, models/, utils/.
Every feature module is self-contained with its own schema, service, routes, and external adapters.
Strict Rule for Bug Fixes & Refactoring: When an error occurs (e.g. in Stripe payment webhooks or a database query), the modification must be confined strictly to the single affected adapter or service file. The rest of the codebase must have zero ripple effects.

Commandment IV: Real Senior Developer Comments (The "Why", Not the "What")

AI Fluff is Prohibited: Never output useless comments like // Function to fetch data or // Returns a promise.
Senior Developer Commentary: Every comment must explain architectural trade-offs, concurrency invariants, edge-case rationale, performance budgets, or security considerations.

Example:

// Concurrency Guard: Using Redis-based sliding-window rate limiting before hitting database
// connection pool to prevent connection exhaustion during flash sale bursts.

Commandment V: Hacking-Proof, Cyber-Resilient Security by Default

Treat every input as malicious. Enforce strict Zod parsing at every API boundary.
All database queries must be parameter-bound or AST-compiled by an ORM—zero string concatenation.
Implement Content Security Policy (CSP) with dynamic per-request cryptographic nonces, double-submit CSRF tokens, strict CORS, and private IP blocking against SSRF.
Sensitive PII must be encrypted at rest using AES-256-GCM; passwords hashed using Argon2id.

2. Site Archetype Classification Matrix

Before writing a single line of frontend code, classify the user's project into its primary visual archetype:

┌────────────────────────────────────────────────────────────────────────────────────────┐
│                             SITE ARCHETYPE SELECTOR                                   │
├────────────────────┬────────────────────────────────────┬──────────────────────────────┤
│ Archetype          │ 3D Canvas & WebGL Experience       │ Typography & Color Palette   │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 1. Architecture,   │ Full-viewport Three.js CAD point   │ High-contrast geometric mono │
│    Spatial & Design│ cloud wireframe; interactive mouse │ + neo-grotesque (Cabinet     │
│    (Alder & Stone) │ rotation; coordinate HUD overlay;  │ Grotesk / Space Mono); Deep  │
│                    │ architectural grid lines.          │ obsidian with titanium gray. │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 2. Luxury Product, │ Real-time GLSL water ripples with  │ Editorial high-contrast serif│
│    Sensory & E-com │ Gerstner waves; blooming 3D organic│ (Cormorant / Ogg) + minimal  │
│    (Lotus Mist)    │ petals; levitating glass flacon    │ sans; Warm alabaster, blush  │
│                    │ with physical transmission shaders.│ stone, or twilight obsidian. │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 3. Fintech &       │ Physics-based 3D card tilt with    │ Razor-sharp tech sans (Geist,│
│    Modern SaaS     │ gyro mouse tracking; dynamic mesh  │ Satoshi, Inter) + micro mono;│
│    (Crest Card)    │ reflections; interactive bento     │ Monochromatic graphite with  │
│                    │ illuminated border cards.          │ single-point emerald/cobalt. │
├────────────────────┼────────────────────────────────────┼──────────────────────────────┤
│ 4. Avant-Garde &   │ Interactive WebGL fluid particle   │ Experimental kinetic display │
│    Creative Agency │ distortion; magnetic cursor hover; │ (Syne, Clash Display); Pitch │
│                    │ Lenis inertial horizontal pinned   │ black with tactile raw paper │
│                    │ scroll sections.                   │ white overlays.              │
└────────────────────┴────────────────────────────────────┴──────────────────────────────┘

3. The 8-Stage Full-Stack Execution Workflow

Follow this rigorous, end-to-end development pipeline for every project:

Stage 1: Discovery & Harmonic Token Derivation

Identify the site archetype and brand personality.
Obtain or select 2-3 seed colors (e.g. Primary #0A0A0C, Accent #2563EB).
Execute the Oklch 60-30-10 color math from Reference 01 to generate the complete Light and Dark design token trees.
Establish typography hierarchy from Reference 02 with fluid clamp formulas.

Stage 2: Database Schema & Relational Modeling

Draw the Entity-Relationship Diagram (ERD) mapping entities, foreign keys, and cardinalities.
Formulate 3NF normalized schema with minimal redundancy.
Select database engine (PostgreSQL/Supabase vs MySQL vs SQLite) and apply the engine-specific patterns from Reference 08 or Reference 09.
Write idempotent DDL migrations featuring UUIDv7, TIMESTAMPTZ, JSONB GIN indexes, analytical views, and Row-Level Security (RLS) policies.

Stage 3: Decoupled Vertical Slice Backend Scaffolding

Scaffold feature slices in src/modules/<feature>/ according to Reference 07.
Define Zod input/output validation contracts.
Write lean, 10-line service functions utilizing modern query builders (Drizzle ORM / Prisma).
Wrap external gateways (Stripe, Resend, S3) in isolated adapter files to ensure single-file blast radius containment.

Stage 4: 3D Canvas, Shaders & Kinetic Motion Integration

Configure viewport-responsive Canvas with React Three Fiber, Drei, or OGL from Reference 03.
Implement custom GLSL shaders (point cloud, liquid water, glass refraction) from Reference 04.
Initialize Lenis smooth scroll synchronized with GSAP ticker and Framer Motion spring physics from Reference 05.

Stage 5: Bespoke UI Component Composition

Assemble the UI shell using customized components from Reference 06.
Implement magnetic liquid buttons, portal-rendered spring dropdowns, illuminated bento cards, and ambient skeleton loaders.
Ensure full mobile responsiveness: clamp 3D DPR to 1 on mobile, switch to touch-optimized gestures, and maintain 60 FPS performance.

Stage 6: Production Service Integrations

Authentication: Configure multi-provider OAuth, Passkeys, HttpOnly session cookies, and RBAC from Reference 10.
Payments: Implement Stripe / Lemon Squeezy custom Elements and idempotent webhook state machines from Reference 11.
AI Chatbot: Deploy streaming SSE chat with Gemini 2.0 / OpenAI and pgvector RAG from Reference 12.
Storage & Queues: Set up presigned multipart uploads from Reference 14 and BullMQ background workers from Reference 15.

Stage 7: Multi-Tier Caching & Extreme Performance Tuning

Configure client-side caching (Cache-Control immutable, Workbox Service Worker, TanStack Query) from Reference 20.
Implement edge cache tags on Cloudflare/Fastly and Redis Cache-Aside with Redlock distributed locking.
Apply Redis sliding-window rate limiting from Reference 21.
Tune PostgreSQL shared buffers, query plans, and materialized view concurrent refreshes.

Stage 8: Testing, Security Hardening & Container Deployment

Write Vitest unit tests, containerized integration tests, and Playwright multi-device visual diffing E2E tests from Reference 18.
Audit against the OWASP Top 10 checklist from Reference 19 (CSP nonces, SSRF IP blocking, AES-256-GCM encryption).
Package the application in a multi-stage Distroless Dockerfile (<80MB, non-root user) and deploy via Kubernetes HPA/VPA manifests from Reference 22.
Connect OpenTelemetry, Sentry, and PostHog telemetry from Reference 23.

4. Single-File Error Isolation & Refactoring Protocol

When diagnosing a bug or updating an integration in an existing project, strictly follow this protocol:

[Incoming Error / Bug Report]
         │
         ▼
[Identify Failing Vertical Slice]  ──► e.g. `src/modules/billing/`
         │
         ▼
[Isolate the Exact Boundary File] ──► e.g. `stripe.adapter.ts` or `billing.service.ts`
         │
         ▼
[Apply Minimal 10-Line Fix]       ──► Fix logic in THIS FILE ONLY
         │
         ▼
[Run Slice Unit Test]              ──► `pnpm test billing.service.test.ts`
         │
         ▼
[Zero Ripple Effect Check]         ──► Verified: Auth, Database, UI, & other modules untouched!

5. Master Skill Checklist for New Builds

Before declaring any full-stack implementation complete, verify each checkpoint:

MradulKSharma06/fullstack

What is fullstack?

Ask in your favorite AI

Documentation