fluxui-development_skill

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

PHP

3.3k

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

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

SKILL.md2.8 KB

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

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.