AgentSkillsCN

fluxui-development

使用Flux UI Free组件开发UI界面。当创建按钮、表单、模态框、输入框、下拉菜单、复选框，或UI组件时，可激活该功能；用Flux组件替换HTML表单元素；在Flux组件中进行开发；或者当用户提及Flux、组件库、UI组件、表单字段，或询问可用的Flux组件时，可激活该功能。

SKILL.md
--- frontmatter
name: fluxui-development
description: >-
  Develops UIs with Flux UI Free components. Activates when creating buttons, forms, modals,
  inputs, dropdowns, checkboxes, or UI components; replacing HTML form elements with Flux;
  working with flux: components; or when the user mentions Flux, component library, UI components,
  form fields, or asks about available Flux components.

Flux UI Development

When to Apply

Activate this skill when:

  • •Creating UI components or pages
  • •Working with forms, modals, or interactive elements
  • •Checking available Flux components

Documentation

Use search-docs for detailed Flux UI patterns and documentation.

Basic Usage

This project uses the free edition of Flux UI, which includes all free components and variants but not Pro components.

Flux UI is a component library for Livewire built with Tailwind CSS. It provides components that are easy to use and customize.

Use Flux UI components when available. Fall back to standard Blade components when no Flux component exists for your needs.

<code-snippet name="Basic Button" lang="blade"> <flux:button variant="primary">Click me</flux:button> </code-snippet>

Available Components (Free Edition)

Available: 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

Icons

Flux includes Heroicons as its default icon set. Search for exact icon names on the Heroicons site - do not guess or invent icon names.

<code-snippet name="Icon Button" lang="blade"> <flux:button icon="arrow-down-tray">Export</flux:button> </code-snippet>

For icons not available in Heroicons, use Lucide. Import the icons you need with the Artisan command:

bash
php artisan flux:icon crown grip-vertical github

Common Patterns

Form Fields

<code-snippet name="Form Field" lang="blade"> <flux:field> <flux:label>Email</flux:label> <flux:input type="email" wire:model="email" /> <flux:error name="email" /> </flux:field> </code-snippet>

Modals

<code-snippet name="Modal" lang="blade"> <flux:modal wire:model="showModal"> <flux:heading>Title</flux:heading> <p>Content</p> </flux:modal> </code-snippet>

Verification

  1. •Check component renders correctly
  2. •Test interactive states
  3. •Verify mobile responsiveness

Common Pitfalls

  • •Trying to use Pro-only components in the free edition
  • •Not checking if a Flux component exists before creating custom implementations
  • •Forgetting to use the search-docs tool for component-specific documentation
  • •Not following existing project patterns for Flux usage