mcpField
F
fluxui-development

fluxui-development

github.com/laravelデザイン・UI3.7k44 回インストール2 週間前に更新
リポジトリ

fluxui-development について

LivewireとTailwind CSSのプロジェクトでFlux UIを使うための開発スキルです。無料版のコンポーネント選択、アイコン利用、ドキュメント確認、基本的な検証を案内します。

主な機能

  1. 01作業に応じた開発ガイド
  2. 02無料コンポーネントの選択支援
  3. 03Flux UIのアイコン利用案内
  4. 04描画と操作性の確認手順

活用シーン

  1. 01ページやUIコンポーネントの作成
  2. 02フォーム、モーダル、操作要素の実装
  3. 03利用可能なFluxコンポーネントの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/laravel/boost --skill fluxui-development

インストール後、Claude Code で/fluxui-developmentを入力して読み込まれたか確認します。

詳細

Flux UI 開発

適用する場面

次の場合にこのスキルを有効にします。

  • UI コンポーネントやページを作成するとき
  • フォーム、モーダル、インタラクティブ要素を扱うとき
  • 利用可能な Flux コンポーネントを確認するとき

ドキュメント

Flux UI の詳しいパターンとドキュメントについては、search-docs を使用してください。

基本的な使い方

このプロジェクトでは Flux UI の無料版を使用しており、無料コンポーネントとバリアントはすべて含まれていますが、Pro コンポーネントは含まれていません。

Flux UI は、Tailwind CSS で構築された Livewire 向けのコンポーネントライブラリです。使いやすく、カスタマイズしやすいコンポーネントを提供します。

利用可能な場合は Flux UI コンポーネントを使用してください。必要な Flux コンポーネントがない場合は、標準の Blade コンポーネントを使用してください。

<flux:button variant="primary">Click me</flux:button>

利用可能なコンポーネント（無料版）

利用可能：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

アイコン

Flux には、デフォルトのアイコンセットとして Heroicons が含まれています。Heroicons のサイトでアイコン名を正確に検索してください。アイコン名を推測したり、創作したりしないでください。

<flux:button icon="arrow-down-tray">Export</flux:button>

Heroicons で利用できないアイコンには、Lucide を使用してください。Artisan コマンドで必要なアイコンをインポートします。

php artisan flux:icon crown grip-vertical github

よく使われるパターン

フォームフィールド
<flux:field>
    <flux:label>Email</flux:label>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>
モーダル
<flux:modal wire:model="showModal">
    <flux:heading>Title</flux:heading>
    <p>Content</p>
</flux:modal>

検証

  1. コンポーネントが正しく描画されることを確認する
  2. インタラクティブな状態をテストする
  3. モバイルでのレスポンシブ対応を確認する

よくある落とし穴

  • 無料版で Pro 専用コンポーネントを使おうとする
  • カスタム実装を作成する前に、Flux コンポーネントが存在するか確認しない
  • コンポーネント固有のドキュメントに search-docs ツールを使用し忘れる
  • Flux の使用に関する既存のプロジェクトパターンに従わない

コメント

Markdown 対応