SKILL.md
<objective> Covers Laravel Blade templating: anonymous and class-based components, named slots and attribute bags ($attributes->merge()), layouts (component-based and @extends/@section inheritance), directives (@if, @foreach, @auth, @can, and advanced ones like @once/@use/@inject/@switch/stacks), custom directives (Blade::if, Blade::directive), security (XSS/CSRF escaping), Vite asset integration, forms/validation helpers (@error), and fragments for HTMX-style partial updates. </objective>
Laravel Blade
Agent Workflow (MANDATORY)
Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:
- fuse-ai-pilot:explore-codebase - Check existing views, components structure
- fuse-ai-pilot:research-expert - Verify latest Blade docs via Context7
- mcpcontext7query-docs - Query specific patterns (components, slots)
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
Blade is Laravel's templating engine. It provides a clean syntax for PHP in views while compiling to pure PHP for performance.
| Component Type | When to Use |
|---|---|
| Anonymous | Simple UI, no logic needed |
| Class-based | Dependency injection, complex logic |
| Layout | Page structure, reusable shells |
| Dynamic | Runtime component selection |
Critical Rules
- Always escape output - Use
{{ }}not{!! !!}unless absolutely necessary - Use @props - Declare expected props explicitly
- Merge attributes - Allow class/attribute overrides with
$attributes->merge() - Prefer anonymous - Use class components only when logic is needed
- Use named slots - For complex layouts with multiple content areas
- CSRF in forms - Always include
@csrfin forms
Decision Guide
Component Type Selection
Need dependency injection?
├── YES → Class-based component
└── NO → Anonymous component
│
Need complex props logic?
├── YES → Class-based component
└── NO → Anonymous component
Layout Strategy
Simple page structure?
├── YES → Component layout (<x-layout>)
└── NO → Need fine-grained sections?
├── YES → @extends/@section
└── NO → Component layout
Key Concepts
| Concept | Description | Reference |
|---|---|---|
| @props | Declare component properties | [components.md](references/components.md) |
| $attributes | Pass-through HTML attributes | [slots-attributes.md](references/slots-attributes.md) |
| x-slot | Named content areas | [slots-attributes.md](references/slots-attributes.md) |
| @yield/@section | Traditional layout inheritance | [layouts.md](references/layouts.md) |
| $loop | Loop iteration info | [directives.md](references/directives.md) |
Reference Guide
Concepts (WHY & Architecture)
| Topic | Reference | When to Consult |
|---|---|---|
| Components | [components.md](references/components.md) | Class vs anonymous, namespacing |
| Slots & Attributes | [slots-attributes.md](references/slots-attributes.md) | Data flow, $attributes bag |
| Layouts | [layouts.md](references/layouts.md) | Page structure, inheritance |
| Directives | [directives.md](references/directives.md) | @if, @foreach, @auth, @can |
| Security | [security.md](references/security.md) | XSS, CSRF, escaping |
| Vite | [vite.md](references/vite.md) | Asset bundling |
| Advanced Directives | [advanced-directives.md](references/advanced-directives.md) | @once, @use, @inject, @switch, stacks |
| Custom Directives | [custom-directives.md](references/custom-directives.md) | Blade::if, Blade::directive |
| Advanced Components | [advanced-components.md](references/advanced-components.md) | @aware, shouldRender, index |
| Forms & Validation | [forms-validation.md](references/forms-validation.md) | @error, form helpers |
| Fragments | [fragments.md](references/fragments.md) | @fragment, HTMX integration |
Templates (Complete Code)
| Template | When to Use |
|---|---|
| [ClassComponent.php.md](references/templates/ClassComponent.php.md) | Component with logic/DI |
| [AnonymousComponent.blade.md](references/templates/AnonymousComponent.blade.md) | Simple reusable UI |
| [LayoutComponent.blade.md](references/templates/LayoutComponent.blade.md) | Page layout structure |
| [FormComponent.blade.md](references/templates/FormComponent.blade.md) | Form with validation |
| [CardWithSlots.blade.md](references/templates/CardWithSlots.blade.md) | Named slots pattern |
| [DynamicComponent.blade.md](references/templates/DynamicComponent.blade.md) | Runtime component |
| [AdvancedDirectives.blade.md](references/templates/AdvancedDirectives.blade.md) | @once, @use, @inject, @switch |
| [CustomDirectives.php.md](references/templates/CustomDirectives.php.md) | Create custom directives |
| [AdvancedComponents.blade.md](references/templates/AdvancedComponents.blade.md) | @aware, shouldRender, index |
| [Fragments.blade.md](references/templates/Fragments.blade.md) | HTMX partial updates |
Quick Reference
Anonymous Component
{{-- resources/views/components/alert.blade.php --}}
@props(['type' => 'info', 'message'])
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>
Class Component
// app/View/Components/Alert.php
class Alert extends Component
{
public function __construct(
public string $type = 'info',
public string $message = ''
) {}
public function render(): View
{
return view('components.alert');
}
}
Named Slots
<x-card>
<x-slot:header class="font-bold">
Title
</x-slot>
Content goes here
<x-slot:footer>
Footer content
</x-slot>
</x-card>
Attribute Merging
@props(['disabled' => false])
<button {{ $attributes->merge([
'type' => 'submit',
'class' => 'btn btn-primary'
])->class(['opacity-50' => $disabled]) }}
@disabled($disabled)
>
{{ $slot }}
</button>
Best Practices
DO
- Use
@propsto document expected props - Use
$attributes->merge()for flexibility - Prefer anonymous components for simple UI
- Use named slots for complex layouts
- Keep components focused and reusable
DON'T
- Use
{!! !!}without sanitization - Forget
@csrfin forms - Put business logic in Blade templates
- Create deeply nested component hierarchies
- Hardcode classes (allow overrides)
Laravel 13 Notes
Attributes Controllers #[Middleware] et #[Authorize]
Laravel 13 supporte les attributs PHP sur les classes ET méthodes de controllers pour déclarer middleware et autorisations (remplace __construct middleware boilerplate).
use Illuminate\Routing\Attributes\Middleware;
use Illuminate\Routing\Attributes\Authorize;
#[Middleware(['auth', 'verified'])]
final class PostController extends Controller
{
#[Authorize('viewAny', Post::class)]
public function index() { return view('posts.index'); }
#[Middleware('throttle:60,1')]
#[Authorize('create', Post::class)]
public function store(StorePostRequest $request) { /* ... */ }
}
Le middleware passé via attribut s'applique avant les middlewares groupes/routes. #[Authorize] jette AuthorizationException (403) si la policy refuse.