mcpField
F
fluxui-development

fluxui-development

github.com/laravelDesign & UI3.7k44 installsUpdated 2w ago
Repository

About fluxui-development

A development skill for building interfaces with Flux UI in Livewire and Tailwind CSS projects. It guides component selection, icon use, documentation lookup, and basic verification within the free edition.

Key features

  1. 01Task-based development guidance
  2. 02Free component selection
  3. 03Flux UI icon instructions
  4. 04Rendering and interaction checks

Use cases

  1. 01Creating pages or UI components
  2. 02Building forms, modals, or interactions
  3. 03Checking available Flux components

Install

Copy the command and run it in a terminal.

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

After installing, type/fluxui-developmentin Claude Code to confirm it loaded.

Details

From the project README

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.

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

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.

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

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

php artisan flux:icon crown grip-vertical github

Common Patterns

Form Fields
<flux:field>
    <flux:label>Email</flux:label>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>
Modals
<flux:modal wire:model="showModal">
    <flux:heading>Title</flux:heading>
    <p>Content</p>
</flux:modal>

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

Comments

Markdown supported