playbooks

home / skills / laravel / boost / fluxui-development

fluxui-development skill

/.ai/fluxui-pro/skill/fluxui-development

This skill helps you build UI with Flux UI Pro components in Laravel Livewire, replacing HTML elements and accelerating component-driven interfaces.

npx playbooks add skill laravel/boost --skill fluxui-development

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.8 KB
---
name: fluxui-development
description: "Develops UIs with Flux UI Pro components. Activates when creating buttons, forms, modals, inputs, tables, charts, date pickers, or UI components; replacing HTML 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."
license: MIT
metadata:
  author: laravel
---
# Flux UI Development

## When to Apply

Activate this skill when:

- Creating new UI components or pages
- Working with forms, modals, or interactive elements
- Styling components with Flux UI patterns
- Checking available Flux components

## Documentation

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

## Basic Usage

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

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.

<!-- Basic Button -->
```blade
<flux:button variant="primary">Click me</flux:button>
```

## Available Components (Pro Edition)

Available: accordion, autocomplete, avatar, badge, brand, breadcrumbs, button, calendar, callout, card, chart, checkbox, command, composer, context, date-picker, dropdown, editor, field, file-upload, heading, icon, input, kanban, modal, navbar, otp-input, pagination, pillbox, popover, profile, radio, select, separator, skeleton, slider, switch, table, tabs, text, textarea, time-picker, toast, tooltip

## Icons

Flux includes [Heroicons](https://heroicons.com/) as its default icon set. Search for exact icon names on the Heroicons site - do not guess or invent icon names.

<!-- Icon Button -->
```blade
<flux:button icon="arrow-down-tray">Export</flux:button>
```

For icons not available in Heroicons, use [Lucide](https://lucide.dev/). Import the icons you need with the Artisan command:

```bash
php artisan flux:icon crown grip-vertical github
```

## Common Patterns

### Form Fields

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

### Tables

<!-- Table -->
```blade
<flux:table>
    <flux:table.head>
        <flux:table.row>
            <flux:table.cell>Name</flux:table.cell>
        </flux:table.row>
    </flux:table.head>
</flux:table>
```

## Verification

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

## Common Pitfalls

- 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

Overview

This skill develops UIs using the Flux UI Pro component library for Livewire and Tailwind CSS. It activates when creating or refactoring buttons, forms, modals, inputs, tables, charts, date/time pickers, or other UI components. The goal is consistent, accessible, and responsive interfaces by preferring Flux components and patterns over custom markup.

How this skill works

The skill scans your intent and code context to suggest or generate Flux components and Blade snippets, replacing native HTML where appropriate. It references the Pro component set (buttons, fields, tables, modals, charts, etc.), Heroicons for icons, and provides commands for importing additional Lucide icons. It also guides verification steps for rendering, interaction, and responsiveness.

When to use it

  • Creating new UI components or pages in a Laravel + Livewire project
  • Building or refactoring forms, modals, tables, or interactive elements
  • Replacing native HTML elements with Flux components for consistency
  • Styling components to match Flux UI patterns and Tailwind utility usage
  • Checking available Flux Pro components before inventing custom implementations

Best practices

  • Always search Flux docs or available components before creating custom UI to avoid duplication
  • Prefer <flux:field> patterns for form labels, inputs, and errors to ensure accessibility
  • Use Heroicons with exact names; import non-Heroicons via php artisan flux:icon
  • Test rendered components for interactive states (hover, focus, disabled) and mobile responsiveness
  • Fallback to standard Blade components only when a Flux component does not meet requirements

Example use cases

  • Replace native form markup with a Flux field: label, input, and error components wired to Livewire models
  • Create a modal using <flux:modal> for confirmation flows with accessible focus management
  • Render paginated data with <flux:table> and <flux:pagination> for consistent table layout and controls
  • Add a chart component from Flux for dashboard visualizations and ensure responsive behavior
  • Use Flux date-picker and time-picker components for complex scheduling inputs

FAQ

What icon sets does Flux use and how do I add others?

Flux uses Heroicons by default; use exact Heroicon names. For icons not in Heroicons, import Lucide icons with php artisan flux:icon followed by the icon names.

What should I verify after adding a Flux component?

Verify the component renders correctly, test interactive states (hover, focus, active, disabled), and confirm mobile responsiveness and Livewire bindings work as expected.