Cursor Composer (Mehrdater-Agenten-Bearbeitung)

1. Überblick über das Konzept und den Zweck

Früher glich die Arbeit mit Code über Chatbots einem Spiel „Stille Post“: Sie baten um eine neue Schaltfläche, der Bot generierte 20 Zeilen Code, und Sie kopierten diese manuell in Datei A. Dann stellte sich heraus, dass Typen in Datei B aktualisiert werden mussten, gefolgt von Styles in Datei C und schließlich einer Datenbank-Migration. Diese manuelle Übertragung des Codes kostete mehr Zeit als das eigentliche Programmieren.

Cursor Composer ist das Herzstück der Vibe-Coding-Revolution. Sie kopieren keinen Code mehr manuell. Sie drücken einfach eine Tastenkombination und formulieren Ihre Anfrage in natürlicher Sprache:

„Füge ein Dark Theme zur Website hinzu, speichere die Benutzerauswahl im LocalStorage und ergänze einen Toggle-Schalter im Header.“

Composer scannt Ihr Projekt selbstständig, identifiziert die relevanten Dateien, nimmt konsistente Änderungen an allen vier Komponenten gleichzeitig vor und zeigt Ihnen eine übersichtliche Diff-Ansicht.

Das zentrale ingenieurtechnische Prinzip lautet: Die Fähigkeit, vollständige Webanwendungen aus Dutzenden von Dateien zu erstellen, ohne Angst davor, sich im Codebase zu verlieren.

2. Wie Composer unter der Haube funktioniert

┌─────────────────────────────────────────────────────────────┐
│                 ЯК ПРАЦЮЄ АГЕНТ CURSOR COMPOSER             │
├─────────────────────────────────────────────────────────────┤
│ 💬 Запит користувача: «Створи сторінку профілю користувача» │
├─────────────────────────────────────────────────────────────┤
│ 🔍 1. Сканування кодової бази (@Codebase):                  │
│    Composer розуміє, які компоненти, стилі та типи вже є    │
├─────────────────────────────────────────────────────────────┤
│ ✏️ 2. Паралельне внесення змін у файли:                     │
│    • Створює: `src/app/profile/page.tsx`                    │
│    • Оновлює: `src/types/user.ts`                           │
│    • Додає посилання в меню: `src/components/Header.tsx`    │
├─────────────────────────────────────────────────────────────┤
│ 👁️ 3. Показ візуального Diff (Червоне / Зелене):            │
│    Ви бачите кожен змінений рядок і тиснете:                │
│    [✅ Прийняти всі зміни] або [❌ Відхилити]               │
└─────────────────────────────────────────────────────────────┘

3. Goldene Regeln für die Arbeit mit Composer

1. Prüfen Sie immer den Diff vor der Übernahme: Klicken Sie nicht blind auf Accept All. Scannen Sie die grünen Zeilen – hat der Agent versehentlich eine wichtige Funktion gelöscht?
2. Nutzen Sie das Symbol @ für Kontext: Fügen Sie eine spezifische Datei wie @Header.tsx hinzu, damit der Agent genau weiß, wo er hinschauen muss.
3. Arbeiten Sie in kleinen Schritten: Anstatt „Erstelle mir einen gesamten Online-Shop“ zu verlangen, gehen Sie so vor: 1) Erstelle eine Produktkarte ➔ 2) Füge einen Warenkorb-Button hinzu ➔ 3) Implementiere die Summenberechnung.