How do I install the Fluxui Development skill?

Run npx skillmds@latest add wendelladriel/fluxui-development in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Fluxui Development safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Fluxui Development?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Fluxui Development free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Fluxui Development?

wendelladriel (@wendelladriel) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Fluxui Development by wendelladriel

Name: Fluxui Development
Author: wendelladriel

Fluxui Development

Use this skill for Flux UI development in Livewire applications only. Trigger when working with <flux:*> components, building or customizing Livewire component UIs, creating forms, modals, tables, or other interactive elements. Covers: flux: components (buttons, inputs, modals, forms, tables, date-pickers, kanban, badges, tooltips, etc.), component composition, Tailwind CSS styling, Heroicons/Lucide icon integration, validation patterns, responsive design, and theming. Do not use for non-Livewire frameworks or non-component styling.

File contents

Flux UI Development

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

Check component renders correctly
Test interactive states
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

---name: fluxui-developmentdescription: Use this skill for Flux UI development in Livewire applications only. Trigger when working with <flux:*> components, building or customizing Livewire component UIs, creating forms, modals, tables, or other interactive elements. Covers: flux: components (buttons, inputs, modals, forms, tables, date-pickers, kanban, badges, tooltips, etc.), component composition, Tailwind CSS styling, Heroicons/Lucide icon integration, validation patterns, responsive design, and theming. Do not use for non-Livewire frameworks or non-component styling.license: MIT---# Flux UI Development## DocumentationUse `search-docs` for detailed Flux UI patterns and documentation.## Basic UsageThis 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.```blade<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## IconsFlux 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.```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:```bashphp artisan flux:icon crown grip-vertical github```## Common Patterns### Form Fields```blade<flux:field> <flux:label>Email</flux:label> <flux:input type="email" wire:model="email" /> <flux:error name="email" /></flux:field>```### Modals```blade<flux:modal wire:model="showModal"> <flux:heading>Title</flux:heading> <p>Content</p></flux:modal>```## Verification1. Check component renders correctly2. Test interactive states3. 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

Frequently asked questions