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. 04使用 Laravel 13+ 字体指令

适用场景

  1. 01创建可复用的界面元素
  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 组件和布局

使用组件封装标记和行为；优先使用插槽，而不是 include。

命令

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+：在布局的 <head> 中使用 @fonts 指令（搭配 Vite 字体插件），自动生成预加载链接和 @font-face 规则；使用 @fonts(["sans", "mono"]) 获取子集

评论

支持 Markdown