mcpField
L
laravel:blade-components-and-layouts

laravel:blade-components-and-layouts

github.com/jpcaparasDevelopment157200 installsUpdated 17w ago
Repository

About laravel:blade-components-and-layouts

A Laravel skill for building reusable Blade components and layouts. It covers component structure, slots, attribute merging, and font handling in Laravel 13+.

Key features

  1. 01Reusable Blade components
  2. 02Named slots and layout stacks
  3. 03Merge passed attributes and classes
  4. 04Laravel 13+ font directives

Use cases

  1. 01Create reusable interface elements
  2. 02Organize page layouts and script stacks
  3. 03Preserve caller-provided component attributes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/jpcaparas/superpowers-laravel --skill laravel:blade-components-and-layouts

After installing, type/laravel:blade-components-and-layoutsin Claude Code to confirm it loaded.

Details

From the project README

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
<x-alert type="warning" :message="$msg" class="mb-4" />

// Layouts + stacks
@extends('layouts.app')
@push('scripts')
    <script>/* page script */</script>
@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 <head> to emit preload links and @font-face rules automatically; @fonts(["sans", "mono"]) for a subset

Comments

Markdown supported