Claude Code Skills: tanítsd meg az AI-t a te projektedre

A Claude Code alapból is hasznos. De az igazi ereje akkor mutatkozik meg, amikor megtanítod a saját projektedre: milyen konvenciókat követsz, milyen struktúrát használsz, és milyen feladatokat kell rendszeresen elvégezni.

Erre két mechanizmus áll rendelkezésre: a CLAUDE.md fájl és a skills rendszer. Az előbbi a kontextust adja meg, az utóbbi az ismétlődő feladatokat automatizálja.

Mi az a CLAUDE.md?#

A CLAUDE.md egy egyszerű markdown fájl a projekt gyökerében. Amikor a Claude Code elindítja a munkát, automatikusan beolvassa ezt a fájlt, és a benne leírtakat utasításként követi.

Gondolj rá úgy, mint egy onboarding dokumentumra egy új kollégának. Leírod benne:

• Mit csinál a projekt
• Milyen technológiákat használ
• Milyen szabályokat kell követni
• Milyen elnevezési konvenciók vannak
• Hogyan kell buildolni, tesztelni, deployolni

Hogyan építs fel egy jó CLAUDE.md fájlt?#

A kulcs az, hogy konkrét és egyértelmű legyél. Ne írj általánosságokat, hanem a projekt specifikus szabályait fogalmazd meg.

# Projekt: Webshop Admin

## Tech Stack
- Next.js 15 (App Router)
- TypeScript strict mode
- Tailwind CSS v4
- Supabase (adatbázis + auth)
- Vitest (tesztek)

## Projekt Struktúra
- src/app/ - oldalak (App Router)
- src/components/ui/ - újrafelhasználható UI elemek
- src/components/features/ - feature-specifikus komponensek
- src/lib/ - segédfüggvények, konfigurációk
- src/hooks/ - custom React hookok

## Konvenciók

### Fájlok
- Komponensek: PascalCase (Button.tsx)
- Hookok: camelCase, use prefix (useAuth.ts)
- Segédfüggvények: camelCase (formatDate.ts)

### Komponensek
- Minden komponens saját mappában, index.tsx-szel
- Props type-ok a komponens fájlban, nem külön
- Server Component az alapértelmezett, "use client" csak ha kell

### CSS
- Tailwind utility classok, nincs inline style
- Bonyolultabb stílusok: globals.css utility classok
- Responsive: mobile-first (alap mobil, md: tablet, lg: desktop)

### Git
- Commit üzenetek magyarul
- Formátum: "feat: ...", "fix: ...", "refactor: ..."
- Minden commit egy logikai egység

## Fontos parancsok
- npm run dev - fejlesztői szerver
- npm run build - production build
- npm run test - tesztek futtatása
- npm run lint - linter ellenőrzés

## Tesztelési szabályok
- Minden új feature-höz kell teszt
- Vitest + React Testing Library
- Tesztfájlok a komponens mellé: Button.test.tsx

Ez a fájl biztosítja, hogy a Claude Code mindig a projekt szabályai szerint dolgozzon. Ha például kérsz egy új komponenst, automatikusan PascalCase fájlnevet használ, saját mappába teszi, és Server Component-ként hozza létre, hacsak nem kell kliens oldali funkcionalitás.

A Skills rendszer#

A CLAUDE.md a kontextust adja meg. A skills rendszer ennél tovább megy: előre definiált feladatokat hozhatsz létre, amelyeket a Claude Code egyetlen paranccsal végrehajt.

A skillek a .claude/skills/ mappában élnek, markdown fájlokként. Minden skill egy utasításkészlet, amely leírja, mit kell tenni.

Skill létrehozása#

Hozd létre a .claude/skills/ mappát a projekted gyökerében:

mkdir -p .claude/skills

Készíts egy skill fájlt:

# Deploy Skill

Amikor a felhasználó deployolni akar, kövesd ezeket a lépéseket:

## Lépések

1. Futtasd a lintert: `npm run lint`
2. Ha lint hiba van, javítsd ki automatikusan
3. Futtasd a teszteket: `npm run test`
4. Ha minden teszt zöld, készíts production buildet: `npm run build`
5. Ha a build sikeres, commitold a változásokat
6. Pushold a main branchre: `git push origin main`
7. Jelezd, hogy a deploy elindult (Cloudflare Pages automatikusan buildel)

## Fontos
- NE deployolj, ha bármely teszt elbukik
- A commit üzenet legyen: "deploy: [rövid leírás a változásokról]"
- Ha a build hibát dob, jelezd a hibát, ne próbáld meg deployolni

# Code Review Skill

Amikor a felhasználó code review-t kér, kövesd ezt a folyamatot:

## Ellenőrzési szempontok

1. **TypeScript típusok:** Vannak any típusok? Ha igen, jelezd
2. **Error handling:** Minden async függvényben van try-catch?
3. **Konvenciók:** A CLAUDE.md szabályait követi a kód?
4. **Biztonság:** Van felhasználói input, ami nincs validálva?
5. **Teljesítmény:** Van felesleges re-render, hiányzó memoizáció?
6. **Tesztek:** Vannak tesztek az új funkciókhoz?

## Kimenet formátuma

Készíts egy összefoglalót:
- Kritikus problémák (azonnal javítandó)
- Javaslatok (érdemes javítani)
- Pozitívumok (ami jól van megcsinálva)

Ha kérik, javítsd ki a kritikus problémákat automatikusan.

Skillek használata#

A skilleket a Claude Code interaktív felületén a / karakterrel hívhatod meg:

claude

> /deploy
# A Claude Code végrehajtja a deploy skill lépéseit

> /code-review
# Átnézi a kódot a megadott szempontok szerint

Természetes nyelvvel is hivatkozhatsz rájuk:

claude "futtasd le a deploy skillt"
claude "csinálj egy code review-t a legutóbbi változásokra"

Gyakorlati példák KKV környezetben#

Új fejlesztő onboarding#

Ha egy új fejlesztő csatlakozik a csapathoz, a CLAUDE.md segítségével azonnal produktív lehet. Nem kell órákat tölteni a projekt megismerésével, a Claude Code ismeri a szabályokat és segít az eligazodásban.

claude "mutasd be a projekt struktúráját és a legfontosabb
  konvenciókat"

Ismétlődő feladatok automatizálása#

Készíts skilleket a heti rendszerességgel végzett feladatokra:

• Dependency update: ellenőrzi az elavult csomagokat és frissíti őket
• Database backup check: megnézi, hogy a backupok rendben futnak-e
• Performance audit: Lighthouse tesztet futtat és jelenti az eredményt

Kód minőség fenntartása#

A code review skill biztosítja, hogy minden változás átmenjen egy automatikus ellenőrzésen. Ez különösen hasznos kis csapatoknál, ahol nincs mindig elérhető senior fejlesztő a review-ra.

Best practices#

Összefoglalás#

A CLAUDE.md és a skills rendszer az, ami a Claude Code-ot egy általános AI eszközből a te személyes fejlesztőtársaddá alakítja. A befektetés minimális: egy-két óra a dokumentáció megírására, amit hetente percek karbantartani. Cserébe az AI mindig a projekt szabályai szerint dolgozik, és az ismétlődő feladatokat egyetlen paranccsal elvégzi.

A sorozat következő részében egy konkrét felhasználási esetet mutatunk be: hogyan lehet a Remotion videó-könyvtárat Claude Code-dal kombinálni a tartalomgyártás automatizálására.