メニュー
Blade templating patterns including components, slots, directives, and layouts.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
PHP Artisan CLI patterns including make commands, flags, custom commands, and AI-friendly usage.
Advanced Eloquent ORM patterns including relationships, eager loading, factories, and query optimization.
Laravel development best practices covering service providers, dependency injection, facades, and the Laravel Way.
Laravel Tinker best practices for debugging, testing ideas, and data exploration. When and how to use safely.
Laravel-native error handling patterns. Renderable exceptions, Livewire traits strategies, and user-facing notifications.
Integrate Anthropic Claude API with Laravel. HTTP client, message format, error handling. Use when calling Claude models from Laravel applications.
| name | blade-mastery |
| description | Blade templating patterns including components, slots, directives, and layouts. |
// resources/views/components/button.blade.php
<button {{ $attributes->merge(['class' => 'btn btn-primary']) }}>
{{ $slot }}
</button>
// Usage
<x-button class="btn-lg">Submit</x-button>
php artisan make:component Alert
// app/View/Components/Alert.php
class Alert extends Component
{
public function __construct(
public string $type = 'info',
public string $message = '',
) {}
public function render()
{
return view('components.alert');
}
}
{{-- resources/views/components/alert.blade.php --}}
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>
{{-- Component --}}
<div class="card">
{{ $slot }}
</div>
{{-- Usage --}}
<x-card>
<p>Card content</p>
</x-card>
{{-- Component --}}
<div class="card">
<div class="card-header">{{ $header }}</div>
<div class="card-body">{{ $slot }}</div>
<div class="card-footer">{{ $footer }}</div>
</div>
{{-- Usage --}}
<x-card>
<x-slot:header>Card Title</x-slot:header>
<p>Card content</p>
<x-slot:footer>Footer text</x-slot:footer>
</x-card>
{{-- Component --}}
<button {{ $attributes->merge(['class' => 'btn']) }}>
{{ $slot }}
</button>
{{-- Usage: class="btn btn-primary" (merged) --}}
<x-button class="btn-primary">Click</x-button>
<div {{ $attributes->class(['active' => $isActive]) }}>
@if ($condition)
{{-- content --}}
@elseif ($other)
{{-- content --}}
@else
{{-- content --}}
@endif
@unless ($condition)
{{-- shown if false --}}
@endunless
@empty ($items)
<p>No items</p>
@endempty
@foreach ($items as $item)
{{ $item->name }}
@if ($loop->first) First! @endif
@if ($loop->last) Last! @endif
@endforeach
@forelse ($items as $item)
{{ $item->name }}
@empty
<p>No items</p>
@endforelse
@auth
Welcome, {{ auth()->user()->name }}
@endauth
@guest
<a href="/login">Login</a>
@endguest
@can('update', $post)
<a href="{{ route('posts.edit', $post) }}">Edit</a>
@endcan
@cannot('delete', $post)
<p>You cannot delete this post</p>
@endcannot
{{-- resources/views/components/layouts/app.blade.php --}}
<!DOCTYPE html>
<html>
<head>
<title>{{ $title ?? 'My App' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
{{ $slot }}
</body>
</html>
{{-- Page view --}}
<x-layouts.app title="Home">
<h1>Welcome</h1>
</x-layouts.app>
{{-- Layout --}}
<head>
@stack('styles')
</head>
<body>
{{ $slot }}
@stack('scripts')
</body>
{{-- Page --}}
@push('styles')
<link rel="stylesheet" href="custom.css">
@endpush
@push('scripts')
<script src="custom.js"></script>
@endpush
✅ Extract repeated elements into components
✅ Use named slots for complex layouts
✅ Merge attributes for flexibility
✅ Use @stack for page-specific assets
❌ Don't put logic in views
❌ Don't create giant blade files
❌ Don't skip escaping with {!! !!}