# Laravel:blade Components And Layouts > Compose UIs with Blade components, slots, and layouts; keep templates pure and testable - Skill: `jpcaparas/laravel-blade-components-and-layouts` (Agent Skill) - Install (CLI): `npx skillmds@latest add jpcaparas/laravel-blade-components-and-layouts` - Raw SKILL.md: https://api.skillmd.com/api/skills/jpcaparas/laravel-blade-components-and-layouts/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: jpcaparas (https://skillmd.com/u/jpcaparas) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jpcaparas/laravel-blade-components-and-layouts --- # Blade Components and Layouts Encapsulate markup and behavior with components; prefer slots over includes. ## Commands ``` sail artisan make:component Alert # or: php artisan make:component Alert // Use component // Layouts + stacks @extends('layouts.app') @push('scripts') @endpush ``` ## Patterns - Keep components dumb: pass data in, emit markup out - Use `merge()` to honor passed classes/attributes in components - Prefer named slots for readability - Extract small, reusable atoms rather than giant organisms - Laravel 13+: use the `@fonts` directive (with the Vite font plugin) in layout `` to emit preload links and `@font-face` rules automatically; `@fonts(["sans", "mono"])` for a subset