重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/fusengine/agents --skill laravel-blade在任何实现之前,使用 TeamCreate 生成 3 个代理:
实现之后,运行 fuse-ai-pilot:sniper 进行验证。
Blade 是 Laravel 的模板引擎。它为视图中的 PHP 提供了简洁的语法,同时编译为纯 PHP 以获得高性能。
| 组件类型 | 使用时机 |
|---|---|
| 匿名组件 | 简单的 UI,无需逻辑 |
| 基于类的组件 | 依赖注入,复杂逻辑 |
| 布局组件 | 页面结构,可复用的外壳 |
| 动态组件 | 运行时组件选择 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
{{ }} 而不是 {!! !!}$attributes->merge() 允许类/属性覆盖@csrfNeed dependency injection?
├── YES → Class-based component
└── NO → Anonymous component
│
Need complex props logic?
├── YES → Class-based component
└── NO → Anonymous component
Simple page structure?
├── YES → Component layout (<x-layout>)
└── NO → Need fine-grained sections?
├── YES → @extends/@section
└── NO → Component layout
| 概念 | 描述 | 参考 |
|---|---|---|
| @props | 声明组件属性 | components.md |
| $attributes | 传递 HTML 属性 | slots-attributes.md |
| x-slot | 命名的内容区域 | slots-attributes.md |
| @yield/@section | 传统的布局继承 | layouts.md |
| $loop | 循环迭代信息 | directives.md |
| 主题 | 参考 | 何时查阅 |
|---|---|---|
| 组件 | components.md | 类组件 vs 匿名组件,命名空间 |
| 插槽与属性 | slots-attributes.md | 数据流,$attributes 包 |
| 布局 | layouts.md | 页面结构,继承 |
| 指令 | directives.md | @if, @foreach, @auth, @can |
| 安全 | security.md | XSS, CSRF, 转义 |
| Vite | vite.md | 资源打包 |
| 高级指令 | advanced-directives.md | @once, @use, @inject, @switch, stacks |
| 自定义指令 | custom-directives.md | Blade::if, Blade::directive |
| 高级组件 | advanced-components.md | @aware, shouldRender, index |
| 表单与验证 | forms-validation.md | @error, 表单助手 |
| 片段 | fragments.md | @fragment, HTMX 集成 |
| 模板 | 使用时机 |
|---|---|
| ClassComponent.php.md | 包含逻辑/依赖注入的组件 |
| AnonymousComponent.blade.md | 简单的可复用 UI |
| LayoutComponent.blade.md | 页面布局结构 |
| FormComponent.blade.md | 包含验证的表单 |
| CardWithSlots.blade.md | 命名插槽模式 |
| DynamicComponent.blade.md | 运行时组件 |
| AdvancedDirectives.blade.md | @once, @use, @inject, @switch |
| CustomDirectives.php.md | 创建自定义指令 |
| AdvancedComponents.blade.md | @aware, shouldRender, index |
| Fragments.blade.md | HTMX 部分更新 |
{{-- resources/views/components/alert.blade.php --}}
@props(['type' => 'info', 'message'])
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>
// 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');
}
}
<x-card>
<x-slot:header class="font-bold">
Title
</x-slot>
Content goes here
<x-slot:footer>
Footer content
</x-slot>
</x-card>
@props(['disabled' => false])
<button {{ $attributes->merge([
'type' => 'submit',
'class' => 'btn btn-primary'
])->class(['opacity-50' => $disabled]) }}
@disabled($disabled)
>
{{ $slot }}
</button>
@props 来记录预期的属性$attributes->merge() 以获得灵活性{!! !!}@csrf每周安装量
64
代码仓库
GitHub 星标数
4
首次出现
2026年2月1日
安全审计
安装于
gemini-cli62
opencode62
cursor60
codex59
github-copilot57
kimi-cli57
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
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 |
{{ }} not {!! !!} unless absolutely necessary$attributes->merge()@csrf in formsNeed dependency injection?
├── YES → Class-based component
└── NO → Anonymous component
│
Need complex props logic?
├── YES → Class-based component
└── NO → Anonymous component
Simple page structure?
├── YES → Component layout (<x-layout>)
└── NO → Need fine-grained sections?
├── YES → @extends/@section
└── NO → Component layout
| Concept | Description | Reference |
|---|---|---|
| @props | Declare component properties | components.md |
| $attributes | Pass-through HTML attributes | slots-attributes.md |
| x-slot | Named content areas | slots-attributes.md |
| @yield/@section | Traditional layout inheritance | layouts.md |
| $loop | Loop iteration info | directives.md |
| Topic | Reference | When to Consult |
|---|---|---|
| Components | components.md | Class vs anonymous, namespacing |
| Slots & Attributes | slots-attributes.md | Data flow, $attributes bag |
| Layouts | layouts.md | Page structure, inheritance |
| Directives | directives.md | @if, @foreach, @auth, @can |
| Security | security.md |
| Template | When to Use |
|---|---|
| ClassComponent.php.md | Component with logic/DI |
| AnonymousComponent.blade.md | Simple reusable UI |
| LayoutComponent.blade.md | Page layout structure |
| FormComponent.blade.md | Form with validation |
| CardWithSlots.blade.md | Named slots pattern |
| DynamicComponent.blade.md | Runtime component |
| AdvancedDirectives.blade.md |
{{-- resources/views/components/alert.blade.php --}}
@props(['type' => 'info', 'message'])
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>
// 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');
}
}
<x-card>
<x-slot:header class="font-bold">
Title
</x-slot>
Content goes here
<x-slot:footer>
Footer content
</x-slot>
</x-card>
@props(['disabled' => false])
<button {{ $attributes->merge([
'type' => 'submit',
'class' => 'btn btn-primary'
])->class(['opacity-50' => $disabled]) }}
@disabled($disabled)
>
{{ $slot }}
</button>
@props to document expected props$attributes->merge() for flexibility{!! !!} without sanitization@csrf in formsWeekly Installs
64
Repository
GitHub Stars
4
First Seen
Feb 1, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli62
opencode62
cursor60
codex59
github-copilot57
kimi-cli57
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
125,600 周安装
| XSS, CSRF, escaping |
| Vite | vite.md | Asset bundling |
| Advanced Directives | advanced-directives.md | @once, @use, @inject, @switch, stacks |
| Custom Directives | custom-directives.md | Blade::if, Blade::directive |
| Advanced Components | advanced-components.md | @aware, shouldRender, index |
| Forms & Validation | forms-validation.md | @error, form helpers |
| Fragments | fragments.md | @fragment, HTMX integration |
| @once, @use, @inject, @switch |
| CustomDirectives.php.md | Create custom directives |
| AdvancedComponents.blade.md | @aware, shouldRender, index |
| Fragments.blade.md | HTMX partial updates |