skills.rest
karuhun-developer
karuhun-developerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

fluxui-development

Build Livewire component UIs using Flux UI components, icons, and Tailwind CSS patterns.

1|Updated Jun 6, 2026
Search Tags:#tailwind css#laravel#ui development#livewire#heroicons#blade components#flux ui
One-click install
npx skills add https://github.com/karuhun-developer/ecommerce --skill fluxui-development-karuhun-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fluxui-development
Source: https://github.com/karuhun-developer/ecommerce/tree/main/.cursor/skills/fluxui-development
Command: npx skills add https://github.com/karuhun-developer/ecommerce --skill fluxui-development-karuhun-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interactive Livewire interfaces from scratch is slow and inconsistent. This Skill provides ready-made patterns for Flux UI components so you can assemble forms, modals, tables, and other UI elements in Laravel Livewire applications without guessing component syntax or icon names. ## Core Features & Use Cases - Flux Component Patterns: Provides Blade snippets for buttons, inputs, modals, form fields, badges, tooltips, and other free-edition Flux components. - Icon Integration: Guides correct usage of Heroicons by exact name and Lucide icons imported via the php artisan flux:icon Artisan command. - Validation & Form Patterns: Shows standard field, label, input, and error wiring with wire:model for Livewire forms. - Use Case: When building an admin product form in a Laravel 13 + Livewire 4 project, use this Skill to compose flux:field, flux:input, flux:modal, and flux:button components with proper validation error display. ## Quick Start Ask the assistant to create a Livewire form with Flux UI components including an email field, validation errors, and a submit button.

Frequently Asked Questions about fluxui-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Flux UI components in Livewire?▼

Use Flux UI components directly in Blade templates with the flux: prefix, such as <flux:button variant="primary">. Bind interactive elements to Livewire state with wire:model, and prefer Flux components over custom Blade when one exists.

How do I create a form with validation using Flux UI?▼

Wrap inputs in flux:field with a flux:label, bind the input with wire:model, and add flux:error with the field name. This displays Livewire validation messages automatically next to the correct input.

Which components are included in the Flux UI free edition?▼

The free edition includes avatar, badge, brand, breadcrumbs, button, callout, checkbox, dropdown, field, heading, icon, input, modal, navbar, otp-input, profile, radio, select, separator, skeleton, switch, text, textarea, and tooltip. Pro components are not available.

How do I add Lucide icons to Flux UI in Laravel?▼

Run the Artisan command php artisan flux:icon followed by the icon names, for example php artisan flux:icon crown github. Heroicons are included by default, so only Lucide icons need explicit importing.

Why does a Flux UI component not render in my project?▼

The component may be Pro-only and unavailable in the free edition, or the icon name may not exist in Heroicons. Check the available free component list and verify exact icon names on the Heroicons site instead of guessing.

Related Skills

Explore More Software Engineering Skills→
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic
karuhun-developerkaruhun-developer

fluxui-development

Build Livewire component UIs using Flux UI components, icons, and Tailwind CSS patterns.

Official
Basic
mindspore-aimindspore-ai
258

triton-ascend-elementwise-reduce-fused

Fuse elementwise transforms and reductions into a single Triton kernel for Ascend.

Official
Advanced
middleware-labsmiddleware-labs
3

go-tester

Structure Go unit and integration tests with tables, mocks, and benchmarks.

Official
Advanced