메뉴
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 {!! !!}