Digital Garden

Interactive knowledge tiles, architecture notes and practical guides on modern frontend architecture, accessibility, performance, and AI.

20 of 20 tiles

KI & Agents

Context Engineering

Wie Context Engineering und MCP-Wissensgraphen verhindern, dass Coding-Agenten in Legacy-Codebases ertrinken.

Context EngineeringModel Context ProtocolGraphify
CONTEXT ENGINEERING
Graphify
Agent
graphify_detect()
Legacy Repo
Tree-sitter ➔ 3 God-Nodes kartiert
GraphRAG Topologie
KI & Agents

3D-Druck MCP

Schnittstellen für KI-Agenten zur autonomen Steuerung, Fehleranalyse und G-Code-Generierung im 3D-Druck.

Model Context Protocol3D-DruckKiln
MCP 3D FABRICATION
Geometrie
Agent
compile_scad()
Klipper / Bambu
OpenSCAD ➔ Manifold STL
0 Non-Manifold
UI & Design Systems

Generative UI

Wie moderne KI-Agenten Interfaces über Design-Tokens und Tool-Calling steuern, statt rohen Code zu halluzinieren.

Generative UIDesign TokensReact
Generative UI Pipeline
Constrained UI
Agent IntentTool Calling
Zod Schema (Typed)
Design TokensW3C DTCG Standard
CLS: 0.00
Component: <FlightTicketCard />140ms
Performance & Architektur

Enterprise Architektur

Verstehe Architekturrollen, finde deinen Entwicklungsweg und ordne ihre Aufgaben im KI-Zeitalter ein.

TOGAFArchiMateNIST AI RMF
UI & Design Systems

Ambient Mode

Wie Licht, Tageszeit und Jahreszeiten einer Website Leben geben, ohne die Lesbarkeit zu verlieren.

CSSMedia QueriesDesign Tokens
KI & Agents

AI Landscape

Why single models fail in production: Routing, SLMs, Frontier Reasoning, and deterministic ML in compound architectures.

Compound AI SystemsSLMsReasoning
Text (LLMs)
KI & Agents

Web MCP

Lokale Browser-Tools und Schnittstellen für autonome KI-Agenten sicher bereitstellen.

WebMCPChrome CanaryAI Agents
document.modelContext
WEBMCP TRIAL
Agent
Structured Tools
Browser
readOnlyHint:calculate_contrast
4.82:1 (PASS AA)
KI & Agents

WebNN

Lokale KI-Modelle hardwarebeschleunigt per NPU und GPU ohne Serverkosten direkt im Browser ausführen.

WebNNWebGPUONNX Runtime
navigator.ml
NPU ACCELERATED
ONNX
WebNN Dispatch
NPU Chip
Webcam-Blur:NPU (DirectML)
12ms • 60 FPS
UI & Design Systems

Explainable Text

Clarify compact texts with interactive inline expansions without context switching.

StretchTextMicro-InteractionsUI & UX
Inline StretchText
TYPEWRITER STREAM

Drucker mit FDM und leisem Geräusch im Betrieb.

CLS = 0CONCISE READ
KI & Agents

Embeddings

Verstehe, wie Embeddings verwandte Inhalte finden und worauf es bei einer semantischen Suche ankommt.

VektorenKosinus-ÄhnlichkeitRAG
UI & Design Systems

Icon-Bibliotheken

Kriterien, Bundle-Größen und Best Practices moderner SVG-Icon-Sets im Praxistest.

SVG IconsLucideTree-Shaking
Web Standards & a11y

Accessibility

Rechtssichere und barrierefreie Webanwendungen nach BITV 2.0, BFSG und WCAG 2.2 AA gestalten.

WCAG 2.2BITV 2.0BFSG
Performance & Architektur

Performance

Core Web Vitals, Ladezeiten und Web Worker für maximale Frontend-Geschwindigkeit optimieren.

Core Web VitalsINPLCP
Workflows & Testing

Testing

Zuverlässige automatisierte Teststrategien mit Vitest, Testing Library und Playwright etablieren.

VitestPlaywrightTesting Library

RUNNING 0/4

Workflows & Testing

Git Workflows

Trunk-Based Development, Branching-Modelle und Rebase-Strategien für agile Teams.

GitTrunk-BasedRebase
Performance & Architektur

MDX

Markdown und interaktive React-Komponenten zu lebendiger technischer Dokumentation verschmelzen.

MDXReactServer Components

MDX Source

# Hallo Welt

Das ist **MDX**.
Performance & Architektur

Intuitive Suche

Ultraschnelle Suche im Browser mit In-Memory-Indizierung und Latenzen unter 50 Millisekunden.

Instant SearchIn-Memory IndexSpeculation Rules

Wie funktionieren React Server Components?

↵
Intent Match: 99%
Semantischer Vektor
KI & Agents

Smart Suggestions

Kontextsensitive Nutzerführung und Next-Best-Action direkt im Browser ohne Tracking realisieren.

Next-Best-ActionOn-DeviceSession-Vektoren
Empfohlen für deinen Stack

Next.js App Router & RSC

98% Match

UI & Design Systems

UI-Komponenten

Wiederverwendbare UI-Komponenten, Headless Primitives und Design-Tokens im direkten Vergleich.

ReactHeadless UIDesign Tokens
Design System
KI & Agents

Idea Scratcher

Agenten-Workflows, Signale und Zustandsautomaten visuell entwerfen und mit Gemini testen.

ZustandsautomatenSignalsWorkflows