tompec/fluxui-docs-skill

Overview

This skill exposes the Flux UI component library for Livewire applications, built with Tailwind CSS. It gives quick access to free, accessible, and composable UI primitives and documentation to speed up interface development. Use it to find reference docs, props, and ready-to-use code examples for common UI elements.

How this skill works

Search the component index to locate the component you need, then open the reference for full API details, props, and code examples. Many component references include metadata listing related Flux components used in examples, helping you discover patterns and composable building blocks. Use the docs section for installation, theming, patterns, and upgrade guidance to integrate components with your Livewire app.

When to use it

• Building or prototyping Livewire UIs that need Tailwind-styled, accessible components.
• When you want copy-pasteable examples for buttons, forms, modals, tables, and more.
• Standardizing UI across a Livewire app with consistent components and patterns.
• When implementing dark mode, theming, or component customization for a Tailwind project.
• When you need quick reference for component props and related usage patterns.

Best practices

• Start with the Installation and Theming docs to ensure components integrate cleanly with your Tailwind setup.
• Follow the component examples exactly first, then adapt markup and props to your app logic.
• Use components_used metadata to identify complementary components and reproduce real-world patterns.
• Prefer composable components (Button, Field, Card) over one-off markup to keep UI consistent.
• Test accessibility and keyboard interactions included in examples, especially for modal, dropdown, and tooltip components.

Example use cases

• Create a consistent form UI using Field, Input, Checkbox, Select, and Button with validation wiring in Livewire.
• Build a dashboard layout combining Sidebar and Header layouts, with Cards, Tables, and Pagination for data pages.
• Add modals and confirmation flows using Modal and Callout for destructive actions.
• Implement user profiles with Avatar, Profile, and Badge components for account pages.
• Display loading states using Skeleton components while fetching table or card data.