smithery/fusengine

laravel-blade

Create Blade templates with components, slots, layouts, and directives. Use when building views, reusable components, or templating.

Installation

$ npx skills add smithery/fusengine --skill laravel-blade

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from smithery/fusengine · top by installs.

npx skills add smithery/fusengine

Browse all from smithery/fusengine

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 8,591 B
  • docs SUMMARY.md 153 B

History

  1. First recorded snapshot · 0 installs

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:

  1. fuse-ai-pilot:explore-codebase - Check existing views, components structure
  2. fuse-ai-pilot:research-expert - Verify latest Blade docs via Context7
  3. 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

  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-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 @props to 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 @csrf in 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.