mcpField
F
fluxui-development

fluxui-development

github.com/laravel设计与 UI3.7k44 次安装2 周前更新
代码仓库

关于 fluxui-development

为使用 Livewire 和 Tailwind CSS 的项目提供 Flux UI 开发指导，适用于创建界面、表单和交互组件。它强调优先选用免费版现有组件，并通过文档查询和验证步骤辅助实现。

主要功能

  1. 01按需启用的开发指导
  2. 02免费版组件选择建议
  3. 03Flux UI 图标使用说明
  4. 04渲染与交互验证步骤

适用场景

  1. 01创建页面或 UI 组件
  2. 02实现表单、模态框和交互元素
  3. 03查找可用的 Flux 组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/laravel/boost --skill fluxui-development

安装后在 Claude Code 中输入/fluxui-development确认已加载。

详细介绍

Flux UI 开发

适用场景

在以下情况下启用此技能：

  • 创建 UI 组件或页面
  • 处理表单、模态框或交互元素
  • 检查可用的 Flux 组件

文档

使用 search-docs 查找详细的 Flux UI 模式和文档。

基本用法

此项目使用 Flux UI 免费版，其中包含所有免费组件和变体，但不包含 Pro 组件。

Flux UI 是一个基于 Tailwind CSS 构建的 Livewire 组件库，提供易于使用和自定义的组件。

优先使用 Flux UI 组件。若没有适用于需求的 Flux 组件，则使用标准 Blade 组件。

<flux:button variant="primary">Click me</flux:button>

可用组件（免费版）

可用组件：avatar、badge、brand、breadcrumbs、button、callout、checkbox、dropdown、field、heading、icon、input、modal、navbar、otp-input、profile、radio、select、separator、skeleton、switch、text、textarea、tooltip

图标

Flux 默认包含 Heroicons 图标集。请在 Heroicons 网站上搜索准确的图标名称，不要猜测或编造图标名称。

<flux:button icon="arrow-down-tray">Export</flux:button>

对于 Heroicons 中没有的图标，请使用 Lucide。使用 Artisan 命令导入所需图标：

php artisan flux:icon crown grip-vertical github

常见模式

表单字段
<flux:field>
    <flux:label>Email</flux:label>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>
模态框
<flux:modal wire:model="showModal">
    <flux:heading>Title</flux:heading>
    <p>Content</p>
</flux:modal>

验证

  1. 检查组件是否正确渲染
  2. 测试交互状态
  3. 验证移动设备上的响应式表现

常见问题

  • 尝试在免费版中使用仅限 Pro 的组件
  • 创建自定义实现前未检查是否存在 Flux 组件
  • 忘记使用 search-docs 工具查阅特定组件的文档
  • 未遵循项目中现有的 Flux 用法模式

评论

支持 Markdown