Save this content to: .claude/skills/fluxui-development/SKILL.md

# 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

Flux documentation: https://fluxui.dev/docs. Flux Free only; Pro components are not installed.

## 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.

<!-- Basic Button -->
```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

## 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
wp acorn 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>
```

### Modals

<!-- Modal -->
```blade
<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

## WooCommerce Integration

When styling WooCommerce templates (like single product or archives):
- Override the default WooCommerce templates by copying them to `resources/views/woocommerce/`.
- Replace native unstyled HTML inputs/buttons with their Flux UI equivalents (e.g., `<flux:button>` for Add to Cart).
- Use Tailwind CSS and Flux wrappers (like `flux:field`) to gracefully handle raw WooCommerce outputs.

## Common Pitfalls

- Trying to use Pro-only components in the free edition
- Not checking if a Flux component exists before creating custom implementations
- Guessing a component's props instead of checking https://fluxui.dev/docs
- Not following existing project patterns for Flux usage
- Forgetting to wrap floating/absolute WooCommerce elements in flexible Tailwind containers to prevent overlap