Code Snippets: Context Engineering auf GitHub

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.

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# CLAUDE.md, Snippet-Repo Stil-Regeln

## Farben
--primary: #25201A --accent: #2d5fc2 --bg: #FAF7F0

## Fonts
Headlines: DM Serif Display + Body: DM Sans + UI: IBM Plex Mono

## 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.

Empfohlene Repo-Struktur

snippets/ · ordnerstruktursnippets/
├── 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

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.

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.

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