mcpField
L
laravel-filament-v5-ui-ux

laravel-filament-v5-ui-ux

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

laravel-filament-v5-ui-ux について

laravel-filament-v5-ui-ux は、Filament 5 の画面向けに出典付きの再利用可能なコード構成を提供します。管理パネルを構築・再編する開発者向けで、API や実装には laravel-filament-v5 と併用します。

主な機能

  1. 01画面種別ごとの参考構成
  2. 02出典情報付きの貼り付け可能なコード
  3. 03テーブル・フォーム・レコード詳細
  4. 04ダッシュボード・パネル・操作フィードバック

活用シーン

  1. 01Filament 5 のレコードテーブル構築
  2. 02フォーム項目とページレイアウトの配置
  3. 03管理ダッシュボードとナビゲーションの設計

インストール

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

$npx skills add https://github.com/jotafurtado/dev-skills --skill laravel-filament-v5-ui-ux

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
RELEASE.md
agents/
openai.yaml
evals/
eval_queries.json
evals.json
references/
action-feedback.md
dashboard.md
form-fields.md
form-inputs.md
form-layout.md
panel-shell.md
record-detail.md
table.md

詳細

Laravel Filament v5 UI/UX

Filament 5 の画面向けリファレンス構成集です。インストール済みバージョンの API、セキュリティ、実装、テストは laravel-filament-v5 に委ねてください。

使い方

作成するものに合った行を以下から見つけ、該当ファイルを読み、「When」がタスクに合う構成を選んでください。貼り付けて、モデル、フィールド、リレーションを調整します。各構成には、出典となった公式ドキュメントとスクリーンショットが含まれています。

必須のワークフロー、スクリーンショットの確認、判断の記録はありません。合う構成を選んで作成してください。

複数の構成が合う場合は、「Not when」にタスクの内容が記載されていないものを優先してください。該当するものがない場合はその旨を伝え、構成を即興で作る代わりに、未対応パターンとして画面を記録してください。

振り分け

作成または再構成するもの参照先
レコードテーブルreferences/table.md
フォームまたはスキーマのページ構造 — エントリーポイント、グループ化、列、セクション、タブ、ウィザード、密度references/form-layout.md
構造内に配置する一般的なフォームフィールド — 形状、ラベル、ガイダンス、状態references/form-fields.md
構造内に配置するコレクション、アップロード、リレーション、リッチコンテンツのコントロールreferences/form-inputs.md
レコードの詳細とインフォリストreferences/record-detail.md
運用ダッシュボードとウィジェットreferences/dashboard.md
パネルのシェル、ナビゲーション、ブランディング、認証画面references/panel-shell.md
アクション、確認、オーバーレイ、通知、コールアウト、空の状態references/action-feedback.md

上記の各ファイルはリファレンス構成集で、出典情報付きの貼り付け可能なコードが含まれています。action-feedback.md は複数の画面にまたがり、ほかのファイルの内容に追加して適用します。

各ファイルは、対象範囲の画面に関する唯一の情報源です。

併用

構成はコードであるため、実装作業では API シグネチャ、認可、セキュリティ、テストに laravel-filament-v5 を使用します。構成をリリースするタスクでは、両方をインストールしてください。

npx skills add jotafurtado/dev-skills --skill laravel-filament-v5-ui-ux --skill laravel-filament-v5

シグネチャが既知のものとして扱う前に、対応するスキルを見つけてください。該当するのは、読み取り可能な SKILL.md の frontmatter にある name が正確に laravel-filament-v5 と記載されている場合です。次の順に検索し、最初に見つかった時点で終了します。

  1. このスキルと並ぶディレクトリ（../laravel-filament-v5/SKILL.md）。
  2. 編集中のプロジェクト：.agents/skills（Cursor と Codex）、次に .claude/skills（Claude Code）。
  3. ホームディレクトリ：.agents/skills、.claude/skills、.cursor/skills、次に .codex/skills。

この確認を行うリポジトリ内のスクリプトは maintenance/filament-ui-ux/scripts/discover_sibling_skill.py です。このスキルのインストール済みコピーにはスクリプトが含まれていないため、ファイルを読み、同じ順序で確認してください。一致するファイルがない場合、代替となる構成モジュールや、再構成されたシグネチャはありません。配置のみの作業では構成を貼り付けてもかまいませんが、対応するスキルファイルが見つからなかったことを明記してください。コードをリリースするタスクは中止し、上記のインストールを求めてください。

優先事項

公式の Filament 構成は、無関係なタイポグラフィ、配色、独自のカードシステム、CSS 優先のレイアウトを求める一般的なフロントエンドの助言に優先します。互換性のあるアクセシビリティ、キーボード操作、レスポンシブ対応、パフォーマンス、UX コピーに関するガイダンスは維持してください。

確立されたパネルテーマを維持してください。カスタム Blade、Livewire、CSS を記述する前に、確認した公式コンポーネントの名前と、それでは対応できない具体的な不足点を示し、カスタム画面は可能な限り小さくしてください。

API シグネチャ、インストール済みバージョンとの互換性、セキュリティ境界、実装、テストは laravel-filament-v5 に委ねてください。

コメント

Markdown 対応