Expert assistant for Laravel 12 applications using TALL stack (Tailwind, Alpine.js, Laravel, Livewire) with Livewire Volt, Flux UI components, and domain-driven architecture patterns.
This skill provides expert guidance for developing Laravel 12 applications using the TALL stack (Tailwind CSS, Alpine.js, Laravel, Livewire) with Livewire Volt, Flux UI components, and domain-driven architecture patterns.
**Before making any changes, analyze the project structure:**
**Key Architecture Patterns:**
**Starting the development environment:**
```bash
composer run dev
```
This starts all required services (server, queue, logs, Vite).
**Individual services:**
```bash
php artisan serve
php artisan queue:listen --tries=1
php artisan pail --timeout=0
npm run dev
```
**For new Livewire components:**
1. Create the component:
```bash
php artisan make:livewire ComponentName
```
2. Follow established patterns:
- Use action classes for complex business logic
- Implement proper URL state management with `#[Url]` attributes
- Follow query builder patterns with filtering, sorting, and pagination
3. Create corresponding tests:
```bash
php artisan make:test Livewire/ComponentNameTest
```
**For new models:**
1. Create model with migration and factory:
```bash
php artisan make:model ModelName -mf
```
2. In the migration:
- Use custom primary key naming (e.g., `product_id`)
- Add comprehensive comments explaining field purposes
- Include proper foreign key relationships
- Add `created_at` and `updated_at` timestamps
3. In the model:
- Add `declare(strict_types=1)` at the top
- Mark class as `final`
- Set custom primary key in `$primaryKey` property
- Add comprehensive PHPDoc with `@property` annotations
- Define relationships with proper type hints
**Use the standardized component system:**
```blade
<x-ui.admin-page-layout
title="Page Title"
description="Page description"
:breadcrumbs="[['label' => 'Current Page']]"
:stats="$statsArray"
:show-filters="true"
search-placeholder="Search..."
:has-active-filters="$hasFilters"
>
<x-slot:actions>
<flux:button variant="primary" icon="plus">Add Item</flux:button>
</x-slot:actions>
<x-slot:filterSlot>
<!-- Custom filters -->
</x-slot:filterSlot>
<x-ui.admin-table
:headers="[
['label' => 'Name', 'field' => 'name', 'sortable' => true],
['label' => 'Status', 'field' => 'status', 'sortable' => false]
]"
:items="$paginatedItems"
:sort-by="$sortBy"
:sort-direction="$sortDirection"
>
@foreach($paginatedItems as $item)
<tr class="hover:bg-muted transition-colors">
<td class="px-6 py-4">{{ $item->name }}</td>
<td class="px-6 py-4">{{ $item->status }}</td>
</tr>
@endforeach
</x-ui.admin-table>
<x-ui.admin-pagination :items="$paginatedItems" item-name="items" />
</x-ui.admin-page-layout>
```
**Design System Requirements:**
**Running migrations:**
```bash
php artisan migrate
```
**Fresh migration with seeding:**
```bash
php artisan migrate:fresh --seed
```
**Creating migrations:**
```bash
php artisan make:migration create_table_name
```
**Important conventions:**
**Before committing, run:**
```bash
./vendor/bin/pint
./vendor/bin/phpstan analyse
php artisan test
```
**Writing tests:**
**Code style requirements:**
**After model changes:**
```bash
php artisan ide-helper:generate
php artisan ide-helper:models
```
**Building for production:**
```bash
npm run build
php artisan optimize:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear
```
1. **Never bypass the reusable UI components** - Always use `<x-ui.admin-page-layout>`, `<x-ui.admin-table>`, and `<x-ui.admin-pagination>` for admin pages
2. **Always use custom primary keys** - Never use default `id` field, follow table naming convention
3. **Strict typing is mandatory** - All new files must use `declare(strict_types=1)` and proper type hints
4. **Final classes by default** - Mark all classes as `final` unless inheritance is specifically needed
5. **Comprehensive testing required** - Write tests for all new components and models
6. **Follow established patterns** - Review existing code before implementing new features
7. **Use action classes for complex logic** - Don't embed complex business logic in Livewire components
8. **PHPDoc is mandatory** - Include `@property` annotations for all model attributes and relationships
```php
// app/Livewire/Admin/ProductIndex.php
<?php
declare(strict_types=1);
namespace App\Livewire\Admin;
use App\Models\Product;
use Livewire\Component;
use Livewire\WithPagination;
use Livewire\Attributes\Url;
final class ProductIndex extends Component
{
use WithPagination;
#[Url(as: 'q')]
public string $search = '';
#[Url]
public string $sortBy = 'name';
#[Url]
public string $sortDirection = 'asc';
public function sortBy(string $field): void
{
if ($this->sortBy === $field) {
$this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
} else {
$this->sortBy = $field;
$this->sortDirection = 'asc';
}
}
public function render()
{
$products = Product::query()
->when($this->search, fn($query) =>
$query->where('name', 'like', "%{$this->search}%")
)
->orderBy($this->sortBy, $this->sortDirection)
->paginate(15);
return view('livewire.admin.product-index', [
'products' => $products,
]);
}
}
```
```php
<?php
declare(strict_types=1);
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;
/**
* @property int $product_id
* @property string $name
* @property string $description
* @property int $price
* @property \Illuminate\Support\Carbon $created_at
* @property \Illuminate\Support\Carbon $updated_at
* @property-read \Illuminate\Database\Eloquent\Collection<int, \App\Models\Transaction> $transactions
*/
final class Product extends Model
{
use HasFactory;
protected $primaryKey = 'product_id';
protected $fillable = [
'name',
'description',
'price',
];
/**
* @return HasMany<Transaction>
*/
public function transactions(): HasMany
{
return $this->hasMany(Transaction::class, 'product_id', 'product_id');
}
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/laravel-tall-stack-development-guide/raw