Kompletný sprievodca nastavením Claude Code
Laravel 12 • Inertia.js • Vue 3 • PrimeVue • PostgreSQL • Pest
Začať s inštaláciou →Kľúčový problém: Laravel má obrovský povrch (Eloquent, Blade, Livewire, Inertia, Queues...). Bez správnej konfigurácie AI generuje kód pre iný stack než používate, alebo mieša zastarané vzory.
Route::auth() (zastarané)Repozitár richardhowes/claude-code-laravel automaticky detekuje váš frontend stack:
# V Claude Code terminále:
/plugin marketplace add jpcaparas/superpowers-laravel
/plugin install superpowers-laravel@superpowers-laravel-marketplace
# Overenie inštalácie:
/help
# Mali by ste vidieť:
# /superpowers-laravel:brainstorm
# /superpowers-laravel:write-plan
# /superpowers-laravel:execute-plan
# /superpowers-laravel:laravel-tdd# Vytvor konfiguračný súbor v projekte
touch .claude-hooks-config.sh
# Obsah .claude-hooks-config.sh:
export CLAUDE_HOOKS_LARAVEL_STACK="inertia-vue"
export CLAUDE_HOOKS_LARAVEL_LINT_CMD="composer lint"
export CLAUDE_HOOKS_LARAVEL_FORMAT_CMD="composer format"
export CLAUDE_HOOKS_LARAVEL_TEST_CMD="composer test"# Inštalácia nástrojov
composer require --dev \
phpstan/larastan \
laravel/pint \
rector/rector \
pestphp/pest
# Pridaj skripty do composer.json:
{
"scripts": {
"lint": "phpstan analyse --memory-limit=2G",
"format": "pint",
"refactor": "rector process",
"test": "pest"
}
}# Klonovanie rozšírených hooks pre Inertia+Vue
git clone https://github.com/richardhowes/claude-code-laravel.git /tmp/claude-laravel
# Kopírovanie relevantných súborov
cp /tmp/claude-laravel/stacks/laravel-inertia-vue.sh ~/.claude/stacks/
cp /tmp/claude-laravel/claude-md-stacks/inertia-vue.md ~/.claude/
cp -r /tmp/claude-laravel/hooks/* ~/.claude/hooks/Obsahuje smart-lint.sh, smart-test.sh a stack-špecifické pravidlá
.claude/
├── settings.json # Hlavná konfigurácia hooks
├── CLAUDE.md # Ústava agenta
│
├── agents/ # Špecializovaní agenti
│ ├── feature-builder.md # E2E scaffolding
│ ├── eloquent-expert.md # DB vzory
│ └── inertia-specialist.md # Vue + Inertia
│
├── hooks/ # Automatizačné skripty
│ ├── smart-lint.sh # PHPStan + Pint
│ ├── smart-test.sh # Pest runner
│ └── db-safety.sh # Ochrana pred migrate:fresh
│
├── stacks/ # Stack-špecifické moduly
│ └── laravel-inertia-vue.sh
│
└── skills/ # Laravel skills (z superpowers)
├── laravel:tdd-with-pest/
├── laravel:eloquent-relationships/
├── laravel:form-requests/
└── laravel:quality-checks/| laravel:tdd-with-pest | Test-Driven Development |
| laravel:eloquent-relationships | Eloquent vzory |
| laravel:form-requests | Validácia |
| laravel:quality-checks | Pint, PHPStan |
| laravel:transactions | DB transakcie |
| /laravel-tdd | TDD workflow |
| /laravel-check | Quality gates |
| /brainstorm | Návrh riešenia |
| /write-plan | Implementačný plán |
| /execute-plan | Exekúcia plánu |
Pre Laravel + Inertia + PrimeVue stack je kritické definovať správne vzory a zakázať zastarané konvencie.
# CLAUDE.md - Laravel 12 + Inertia + Vue + PrimeVue
## Technologický Stack
- Laravel 12 (bez Http/Kernel.php)
- Inertia.js 2.x (Vue adapter)
- Vue 3 (Composition API, <script setup>)
- PrimeVue 4.x (Unstyled Mode + Tailwind)
- PostgreSQL 15
- Pest pre testovanie
## MUSÍŠ dodržiavať:
1. Používaj `Inertia::render()` pre všetky views
2. Vue komponenty v `resources/js/Pages/`
3. PrimeVue s Tailwind passthrough: `:pt="{ ... }"`
4. Repository pattern pre databázové operácie
5. Form Requests pre validáciu
6. Pest + Factories pre testovanie
## NIKDY nerob:
- NEVRACAJ `view()` z Controllerov (len Inertia::render)
- NEPOUŽÍVAJ Blade šablóny pre UI
- NEPOUŽÍVAJ `Route::auth()` (zastarané)
- NEDOPYTUJ DB priamo v Controlleroch
- NEPOUŽÍVAJ PrimeVue predvolené témy (len Unstyled)
- NEPOUŽÍVAJ Options API vo Vue
## Štruktúra projektu:
```
app/
├── Http/Controllers/ # Tenké controllery
├── Services/ # Business logika
├── Repositories/ # DB operácie
├── Actions/ # Single-action classes
└── Models/ # Eloquent modely
resources/js/
├── Pages/ # Inertia pages
│ ├── Dashboard/
│ └── Users/
├── Components/ # Vue komponenty
│ ├── ui/ # PrimeVue wrappers
│ └── [feature]/
├── Composables/ # Vue composables
└── Layouts/ # App layouts
```
## PrimeVue Patterns:
```vue
<DataTable
:value="items"
:pt="{
table: 'min-w-full divide-y divide-gray-200',
thead: 'bg-gray-50',
tbody: 'divide-y divide-gray-200'
}"
>
```render() namiesto view()
Unstyled + Tailwind PT
Pest + Factories
Laravel projekty potrebujú špeciálne hooks pre bezpečnosť databázy a kvalitu kódu.
Chráni pred náhodným vymazaním databázy:
#!/bin/bash
# .claude/hooks/db-safety.sh
input=$(cat)
command=$(echo "$input" | jq -r '.command')
if [[ "$command" == *"migrate:fresh"* ]] || \
[[ "$command" == *"migrate:reset"* ]] || \
[[ "$command" == *"db:wipe"* ]]; then
echo "⚠️ VAROVANIE: Deštruktívna databázová operácia!"
echo "Príkaz: $command"
echo "Si si istý, že chceš vymazať všetky dáta?"
exit 2 # Pozastaví agenta
fi#!/bin/bash
# Spustí sa po každej editácii PHP súboru
echo "🔍 Running Laravel quality checks..."
# Pint (formatting)
./vendor/bin/pint --test
if [ $? -ne 0 ]; then
echo "⚠️ Formatting issues. Running pint..."
./vendor/bin/pint
fi
# PHPStan (static analysis)
./vendor/bin/phpstan analyse --memory-limit=2G
if [ $? -ne 0 ]; then
echo "❌ PHPStan errors found"
exit 1
fi
echo "✅ All checks passed"{
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [{
"type": "command",
"command": "$CLAUDE_PROJECT_DIR/.claude/hooks/smart-lint.sh"
}]
}
],
"PreToolUse": [
{
"matcher": "Bash",
"hooks": [{
"type": "command",
"command": "$CLAUDE_PROJECT_DIR/.claude/hooks/db-safety.sh"
}]
}
]
}
}Tento agent vytvorí kompletný "vertikálny rez" pre novú funkciu — od databázy po Vue komponenty.
+ Migrácia
+ Seeder
web.php
CRUD metódy
Index, Create, Edit
# .claude/agents/feature-builder.md
name: laravel-feature-builder
description: End-to-end scaffolding funkcií pre Laravel/Inertia
## Misia
Vytvor kompletný vertikálny rez pre funkciu.
## Kroky
1. Model & Migrácia: Vytvor štruktúru databázy
2. Factory & Seeder: Zabezpeč dummy dáta
3. Routes: Zaregistruj vo web.php (middleware: auth)
4. Controller: Implementuj CRUD metódy
5. Vue Pages: Vytvor Index.vue, Create.vue, Edit.vue
## PrimeVue Integrácia
Pri vytváraní tabuliek použi:
```vue
<DataTable :value="items" :pt="{ table: 'min-w-full' }">
```
Zabezpeč, že všetky tlačidlá používajú PrimeButton s Tailwind.<?php
class UserController
{
public function index()
{
return Inertia::render(
'Users/Index',
['users' => User::paginate()]
);
}
public function store(
StoreUserRequest $request
) {
User::create(
$request->validated()
);
return redirect()
->route('users.index');
}
}<!-- Pages/Users/Index.vue -->
<script setup>
import { Head } from '@inertiajs/vue3'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
defineProps<{
users: Paginated<User>
}>()
</script>
<template>
<Head title="Users" />
<DataTable
:value="users.data"
:pt="{
table: 'min-w-full'
}"
>
<Column field="name" header="Meno" />
<Column field="email" header="Email" />
</DataTable>
</template>Dôležité: Pre PrimeVue neexistuje hotový Claude Code skill. Tieto patterns si musíte pridať do CLAUDE.md manuálne.
<DataTable
:value="items"
:pt="{
table: 'min-w-full divide-y',
thead: 'bg-gray-50',
tbody: 'divide-y divide-gray-200',
row: 'hover:bg-gray-50'
}"
><Button
label="Uložiť"
:pt="{
root: 'bg-primary text-white
px-4 py-2 rounded-lg
hover:bg-primary/90'
}"
/><InputText
v-model="form.name"
:pt="{
root: 'w-full border rounded-lg
px-3 py-2
focus:ring-2 focus:ring-primary'
}"
/><Dialog
v-model:visible="showDialog"
:pt="{
root: 'bg-white rounded-xl shadow-xl',
header: 'border-b p-4',
content: 'p-4',
footer: 'border-t p-4'
}"
>55 ⭐ • Claude Code Plugin
20+ Laravel skills, TDD, Sail/non-Sail detekcia, monorepo podpora.
Multi-stack hooks
Auto-detekcia stacku (Inertia+Vue, Livewire, Filament). Smart hooks.
Oficiálny MCP Server
MCP server od Laravel tímu pre AI-powered development.
7.6k ⭐ • Univerzálne hooks
Auto-aktivácia skills, dev docs pattern. Funguje s akýmkoľvek stackom.