Problem: programujesz sam, a zadań jest za dużo

Siedzisz przed ekranem. Masz do napisania 3 endpointy, poprawić CSS na mobile, dodać walidację formularza, zaktualizować dokumentację i wgrać na serwer. Sam. Kopiujesz fragmenty z ChatGPT, wklejasz, poprawiasz błędy, kopiujesz kolejne. Tracisz czas na przełączanie się między czatem a kodem.

Narzędzia AI do kodowania zmieniają to całkowicie. AI siedzi wewnątrz Twojego edytora (VSCode). Widzi Twoje pliki, czyta je, edytuje, uruchamia komendy, commituje zmiany. Nie kopiujesz — rozmawiasz. Mówisz "dodaj walidację do formularza kontaktowego" i AI to robi. W Twoim projekcie, w Twoich plikach.

Na rynku jest kilka takich narzędzi — Claude Code, Cursor, Windsurf, GitHub Copilot, Codex. My używamy Claude Code (bo ma agentów, skille i pamięć projektu), ale zasady vibe coding są uniwersalne. Ten poradnik uczy setup z Claude Code — koncepcje działają wszędzie.

Co potrzebujesz na start

Nasz setup to VSCode + rozszerzenie Claude Code + GitLens. Wszystko w jednym oknie — kod, AI, historia zmian. Nie musisz otwierać osobnego terminala (choć możesz).

Krok 1: Zainstaluj VSCode i rozszerzenia

VSCode (edytor kodu)

Jeśli jeszcze nie masz — pobierz Visual Studio Code z oficjalnej strony (darmowy, Windows/Mac/Linux). To Twoje centrum dowodzenia — tutaj piszesz kod, rozmawiasz z Claude i przeglądasz zmiany.

Rozszerzenie Claude Code

Otwórz VSCode → kliknij ikonę rozszerzeń (kwadraciki po lewej, lub Ctrl+Shift+X) → wyszukaj "Claude Code" → zainstaluj.

Po instalacji zobaczysz ikonę Claude w pasku bocznym. Kliknij — otworzy się panel czatu. Tutaj rozmawiasz z AI który widzi Twój projekt.

GitLens — kto co zmienił

W rozszerzeniach wyszukaj "GitLens" → zainstaluj. GitLens pokazuje przy każdej linii kodu kto ją napisał i kiedy. Gdy zaczniecie pracować z agentami AI — zobaczysz że 🤖 Backer zmienił backend, a 🤖 Frontik frontend. Bez GitLens tego nie widać.

Opcjonalnie: przydatne rozszerzenia

Node.js (wymagane do CLI)

Claude Code potrzebuje Node.js (v18+). Otwórz terminal w VSCode (Ctrl+` lub Cmd+` na Mac) i sprawdź:

# Sprawdź czy masz Node.js
node --version
# Powinno pokazać v18+ lub nowszy

# Jeśli nie masz — zainstaluj:
# macOS:
brew install node
# Windows: pobierz z nodejs.org

# Zainstaluj Claude Code
npm install -g @anthropic-ai/claude-code

CLAUDE.md — pamięć projektu

CLAUDE.md to plik Markdown w katalogu głównym projektu. Claude Code czyta go automatycznie przy każdym uruchomieniu. To tutaj opisujesz: co to za projekt, jak jest zbudowany, jakie są zasady.

# CLAUDE.md — Kontekst projektu

## Projekt
Strona firmowa w PHP + vanilla JS. Hosting: shared (Apache).

## Struktura katalogów
├── includes/         # Klasy PHP
├── api/              # Endpointy REST
├── assets/           # CSS, JS, obrazki
├── config/           # Konfiguracja (.env, JSONy)
└── templates/        # Szablony HTML

## Stack
- PHP 8.3, vanilla JS (ES2024+), CSS Custom Properties
- JSON jako baza danych (bez SQL)
- Dark theme domyślny

## Zasady
- Zawsze polski (kod, komentarze, commity)
- Przed edycją → ZAWSZE przeczytaj plik
- CRUD: "dodaj" = dodaj + edytuj + usuń + lista
- Security: CSRF, rate limiting, CSP nonce
- NIE commituj: .env, config/*.php z kluczami

## Aktualny stan
Strona w budowie. Gotowe: strona główna, cennik.
W trakcie: blog, formularz kontaktowy.

Uprawnienia — co Claude może robić

Otwórz VSCode i utwórz plik konfiguracji uprawnień:

{
  "permissions": {
    "defaultMode": "bypassPermissions",
    "deny": [
      "Bash(rm -rf:*)",
      "Bash(git push --force:*)",
      "Bash(git reset --hard:*)"
    ],
    "ask": [
      "Bash(lftp:*)"
    ]
  }
}

Pierwszy skill — automatyzacja

Skill to instrukcja Markdown, która mówi Claude'owi CO i JAK zrobić. Zamiast za każdym razem tłumaczyć "sprawdź serwery, pokaż wyniki w tabeli" — tworzysz skill i wywołujesz go jednym słowem.

mkdir -p .claude/skills/health-check
touch .claude/skills/health-check/SKILL.md

# Health Check — Monitoring serwerów

Sprawdź czy serwery produkcyjne działają.

## Instrukcja dla Claude:

1. Wykonaj `curl -sI https://twoja-strona.pl/`
2. Sprawdź HTTP status (200 = OK)
3. Zmierz czas odpowiedzi
4. Pokaż wyniki w tabeli:
   | Strona | Status | Czas |
5. Jeśli coś nie działa → pokaż alert

Teraz w Claude Code wystarczy powiedzieć "sprawdź serwery" — Claude rozpozna skill i go uruchomi.

Hooks — automatyczne akcje

Hook to akcja, która wykonuje się automatycznie po konkretnym zdarzeniu. Na przykład: po każdej edycji pliku JSON — waliduj go.

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hook": "if [[ \"$CLAUDE_FILE_PATH\" == *.json ]]; then python3 -m json.tool \"$CLAUDE_FILE_PATH\" > /dev/null 2>&1 && echo '✅ JSON OK' || echo '❌ Błąd JSON!'; fi"
      }
    ]
  }
}

Agenci — wyspecjalizowani pomocnicy

Agent to Claude z konkretną rolą. Zamiast jednego Claude'a który robi wszystko — masz specjalistów:

---
name: Securitor
description: Security audit — OWASP, CORS, CSP
model: opus
---

# Securitor — Agent Bezpieczeństwa

Jesteś Securitorem. Twoja rola: audyt bezpieczeństwa.

## Co sprawdzasz:
- CSP z nonce na inline scripts
- CORS — nie używaj wildcard (*)
- Rate limiting na API
- Sekrety w kodzie (klucze API, hasła)
- CSRF tokeny na formularzach
- Sanityzacja inputu (XSS, SQL injection)