mcpField
L
laravel:blade-components-and-layouts

laravel:blade-components-and-layouts

github.com/jpcaparas開発157200 回インストール17 週間前に更新
リポジトリ

laravel:blade-components-and-layouts について

Laravel で再利用可能な Blade コンポーネントとレイアウトを作るためのスキルです。コンポーネント構成、スロット、属性のマージ、Laravel 13+ のフォント処理を扱います。

主な機能

  1. 01再利用可能な Blade コンポーネント
  2. 02名前付きスロットとレイアウトスタック
  3. 03渡された属性やクラスのマージ
  4. 04Laravel 13+ のフォントディレクティブ

活用シーン

  1. 01再利用可能な UI 要素の作成
  2. 02ページレイアウトとスクリプトスタックの整理
  3. 03呼び出し元から渡された属性の保持

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/laravel:blade-components-and-layoutsを入力して読み込まれたか確認します。

詳細

Blade コンポーネントとレイアウト

コンポーネントでマークアップと振る舞いをカプセル化し、インクルードよりスロットを優先します。

コマンド

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

パターン

  • コンポーネントは単純に保ちます。データを受け取り、マークアップを出力します
  • コンポーネントで渡されたクラスや属性を尊重するために、merge() を使用します
  • 読みやすさのため、名前付きスロットを優先します
  • 巨大なコンポーネントではなく、小さく再利用可能なアトムを切り出します
  • Laravel 13 以降：Vite フォントプラグインとともに、レイアウトの <head> で @fonts ディレクティブを使用すると、プリロードリンクと @font-face ルールが自動的に出力されます。サブセットには @fonts(["sans", "mono"]) を使用します

コメント

Markdown 対応