Cursor Composer (Wieloplikowa edycja agentowa)

1. Przegląd koncepcji i przeznaczenia

Wcześniej praca z kodem za pośrednictwem chatbotów przypominała grę w głuchy telefon: prosiłeś o utworzenie nowego przycisku, bot generował 20 linii kodu, a Ty kopiowałeś je do pliku A. Okazywało się jednak, że trzeba jeszcze zaktualizować typy w pliku B, style w pliku C oraz migrację bazy danych. To ręczne przenoszenie kodu zajmowało więcej czasu niż samo programowanie.

Cursor Composer to serce rewolucji w zakresie vibe codingu. Nie musisz już kopiować kodu ręcznie. Wystarczy wcisnąć jedną kombinację klawiszy i napisać polecenie ludzkim językiem:

„Dodaj ciemny motyw do strony, zapisuj wybór użytkownika w LocalStorage i dodaj przełącznik motywu do nagłówka.”

Composer samodzielnie skanuje Twój projekt, identyfikuje potrzebne pliki, wprowadza spójne zmiany we wszystkich czterech komponentach jednocześnie i prezentuje czytelny diff.

Kluczowa zasada inżynierska: możliwość tworzenia pełnoprawnych aplikacji webowych składających się z dziesiątek plików bez obaw o zagubienie się w bazie kodowej.

2. Jak działa Composer pod maską

┌─────────────────────────────────────────────────────────────┐
│                 JAK DZIAŁA AGENT CURSOR COMPOSER            │
├─────────────────────────────────────────────────────────────┤
│ 💬 Zapytanie użytkownika: „Utwórz stronę profilu użytkownika”│
├─────────────────────────────────────────────────────────────┤
│ 🔍 1. Skanowanie bazy kodu (@Codebase):                     │
│    Composer rozumie, jakie komponenty, style i typy już istnieją│
├─────────────────────────────────────────────────────────────┤
│ ✏️ 2. Równoległe wprowadzanie zmian w plikach:              │
│    • Tworzy: `src/app/profile/page.tsx`                    │
│    • Aktualizuje: `src/types/user.ts`                      │
│    • Dodaje odnośnik do menu: `src/components/Header.tsx`  │
├─────────────────────────────────────────────────────────────┤
│ 👁️ 3. Wyświetlanie wizualnego Diff (Czerwony / Zielony):    │
│    Widzisz każdą zmienioną linię i klikasz:                │
│    [✅ Zaakceptuj wszystkie zmiany] lub [❌ Odrzuć]         │
└─────────────────────────────────────────────────────────────┘

3. Złote zasady pracy z Composer

1. Zawsze przeglądaj Diff przed zatwierdzeniem: Nie klikaj ślepo Accept All. Przeskanuj wzrokiem zielone linie – czy agent przypadkiem nie usunął ważnej funkcjonalności?
2. Używaj symbolu @ do precyzowania kontekstu: Dodaj konkretny plik przez @Header.tsx, aby agent wiedział dokładnie, gdzie szukać.
3. Pracuj małymi krokami: Zamiast żądać „Zrób mi cały sklep internetowy”, poproś o: 1) Stworzenie karty produktu ➔ 2) Dodanie przycisku koszyka ➔ 3) Implementację naliczania sumy.