Create Blade templates with components, slots, layouts, and directives. Use when building views, reusable components, or templating.
View on GitHubFebruary 2, 2026
Select agents to install to:
npx add-skill https://github.com/fusengine/agents/blob/main/plugins/laravel-expert/skills/laravel-blade/SKILL.md -a claude-code --skill laravel-bladeInstallation paths:
.claude/skills/laravel-blade/# Laravel Blade
## Agent Workflow (MANDATORY)
Before ANY implementation, launch in parallel:
1. **fuse-ai-pilot:explore-codebase** - Check existing views, components structure
2. **fuse-ai-pilot:research-expert** - Verify latest Blade docs via Context7
3. **mcp__context7__query-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
1. **Always escape output** - Use `{{ }}` not `{!! !!}` unless absolutely necessary
2. **Use @props** - Declare expected props explicitly
3. **Merge attributes** - Allow class/attribute overrides with `$attributes->merge()`
4. **Prefer anonymous** - Use class components only when logic is needed
5. **Use named slots** - For complex layouts with multiple content areas
6. **CSRF in forms** - Always include `@csrf` in 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-attribu