Die meisten Vibe Coders prompten jedes Projekt von null. Gleicher Cookie-Banner, gleiche Meta-Tags, gleiche Scroll-Animationen — jedes Mal neu generiert, jedes Mal leicht anders, jedes Mal 10 Minuten verschwendet. Der Fix ist Context Engineering — ein Begriff den Shopify-CEO Tobi Lütke im Juni 2025 prägte: "the art of providing all the context for the task to be plausibly solvable by the LLM". Nicht clevere Prompts, sondern ein reichhaltiges Umfeld mit Zielen, Constraints und Beispielen.

I

CLAUDE.md: Das Gedächtnis deines Repos

Eine CLAUDE.md im Repository-Root definiert projektweite Regeln. Claude Code lädt sie hierarchisch: Enterprise-Level (/etc/claude-code/CLAUDE.md), User-Level (~/.claude/CLAUDE.md), Projekt-Level (Repo-Root), Verzeichnis-spezifisch, und Personal Overrides (.local.md, git-ignored): Farbpalette, CSS-Reset, Schriftpaar, Breakpoints, Namenskonventionen. Wenn du einem neuen Chat dieses File übergibst, kennt die KI dein Ästhetik-System sofort — keine wiederholende Erklärung nötig.

# CLAUDE.md — Snippet-Repo Stil-Regeln ## Farben --primary: #0F172A --accent: #1A56DB --bg: #F8FAFF ## Fonts Headlines + Body: Montserrat ## Regeln - Vanilla HTML/CSS/JS, keine Frameworks - Semantic HTML: header, main, article, footer - Mobile-First, Breakpoints: 375, 640, 768, 1024 - Alle Scripts: defer. Scroll-Listener: passive - prefers-reduced-motion: Animationen deaktivieren

Alle großen AI-Coding-Tools haben eigene Varianten: Cursor nutzt .cursor/rules/*.mdc, GitHub Copilot liest .github/copilot-instructions.md, Windsurf nutzt .windsurfrules. Das Prinzip ist identisch — kontextreiche Konfiguration schlägt clevere Einzelprompts. Ergänzt wird die CLAUDE.md durch eine INITIAL.md für Feature-Requests — so hat die KI bei jedem Start Ziel, Constraints und Stil gleichzeitig im Kontext.

II

Empfohlene Repo-Struktur

snippets/ ├── layouts/ │ ├── hero-fullscreen.html │ ├── bento-grid.html │ └── sticky-nav.html ├── components/ │ ├── modal.html │ ├── toast-notification.html │ └── scroll-reveal.css ├── threejs/ │ ├── particle-scene.html │ └── orbit-controls.html ├── animations/ │ ├── gsap-reveal.js │ └── intersection-observer.js └── CLAUDE.md ← Stil-Regeln für die KI
III

Die besten Vibe-Coding-Repos auf GitHub

awesome-vibecoding (roboco-io)

Kuratierte Liste: Tools, Workflows, Ressourcen. Der Startpunkt für jeden Vibe Coder.

context-engineering-intro (coleam00)

CLAUDE.md-Templates und PRP-Blueprints. Zeigt wie Context Engineering in der Praxis funktioniert.

vibe-coding-prompt-template (KhazP)

5-Stage-Workflow von der Idee zum MVP. Strukturierte Prompts statt Chaos.

claude-code-settings (feiskyer)

Custom Commands: /specify, /plan, /implement. Drei Befehle die den Workflow standardisieren.

Awesome-Vibe-Coding (0xWelt)

Open-Source-Projekte und Learning-Ressourcen. Fokus auf funktionierende Beispiele.

Kernerkenntnis

Context Engineering ersetzt Prompt Engineering als wichtigste Fähigkeit für Vibe Coders. Nicht der einzelne Prompt entscheidet über die Qualität — sondern das Umfeld aus CLAUDE.md, Snippets und Beispielen das du der KI gibst.

IV

Memories-Integration: Compound Returns

Das Snippet-Repo wird zum Produktivitäts-Multiplikator wenn du es in Claude's Memories speicherst: "Mein Snippet-Repo liegt unter github.com/[username]/snippets. Nutze bei jedem neuen Webprojekt die passenden Snippets." Ab jetzt beginnt jedes Projekt mit getesteter Basis statt leerer Datei.

Fortgeschrittene verpacken Snippets als Claude Skill: SKILL.md + Snippet-Dateien als Referenzen. Progressive Disclosure — Claude lädt nur was er braucht. Wichtig: Alle großen AI-Coding-Tools haben eigene Varianten: Cursor nutzt .cursor/rules/*.mdc, GitHub Copilot liest .github/copilot-instructions.md, Windsurf nutzt .windsurfrules. Die CLAUDE.md ist also nicht Claude-exklusiv — das Prinzip ist universell. Claude Code geht noch weiter mit Hooks: PreToolUse, PostToolUse, UserPromptSubmit und SessionStart ermöglichen Auto-Formatierung und Tests ohne manuelle Eingriffe.

Dieses Thema ist Teil des Web Dev for Vibe Coders Guide. Verwandte Artikel: Claude Skills erstellen und Vibe Coding Tools im Vergleich.

Häufige Fragen

Was ist der Unterschied zwischen Snippets und einem Claude Skill?

Snippets sind passive Code-Bausteine die du oder die KI manuell einbindest. Ein Skill ist ein aktives Regelwerk das Claude automatisch lädt wenn die Aufgabe passt. Snippets im Skill verpacken kombiniert beides.

Wie halte ich Snippets aktuell?

Bei jedem abgeschlossenen Projekt: Prüfen ob ein Snippet verbessert werden kann. Neue Patterns direkt committen. Git log zeigt die Evolution. Fortgeschrittene nutzen Claude Code Hooks (PreToolUse, PostToolUse, SessionStart) für automatische Formatierung und Tests bei jedem File Write.

Was ist Context Engineering?

Der Nachfolger von Prompt Engineering. Statt einen perfekten Prompt zu schreiben, baust du ein reichhaltiges Umfeld — CLAUDE.md, Snippets, Beispiele, Constraints — das die KI beim ersten Versuch zum richtigen Ergebnis führt.

Quellen

SashiDo — "Master Vibe Coding: Top 10 GitHub Repositories" (2026)

KDnuggets — "10 GitHub Repositories to Master Vibe Coding"

github.com/coleam00/context-engineering-intro

github.com/roboco-io/awesome-vibecoding

Snyk — "Personalization in Vibe Coding" (CLAUDE.md-Hierarchie)

bonigarcia/context-engineering — Blueprint für Production-Grade GenAI

vibecodesource.com — Open-Source Hub mit Prompt-Bibliothek

Weiterlesen

Vibe Coding: Website erstellen von der Idee bis zum Deploy Website mit Vibe Coding bauen: Prompt strukturieren, HTML generieren, auf Vercel deployen. Komplettanleitung mit 4-Phase... Web Dev for Vibe Coders: Der komplette Guide 2026 Websites bauen mit Vibe Coding: Vom Prompt über Vanilla JS und Three.js bis zum Vercel-Deploy. Der Komplett-Guide mit W... Vibe Coding Tools 2026: Cursor, Windsurf, Copilot, Lovable und Claude im Vergleich Preise, Features und Limits aller Vibe Coding Tools im Vergleich: Cursor, Windsurf, GitHub Copilot, Lovable, Bolt.new, v...