filament-pro_skill

Overview

This skill is Filament Pro, an expert toolkit for building production-grade admin panels with Filament v4 (2026). It focuses on rapid CRUD surface construction, custom data sources, nested resources, and AI-augmented form and panel generation. The skill delivers practical patterns to integrate non-Eloquent data, optimize UI performance, and manage complex relationships consistently.

How this skill works

Filament Pro provides actionable patterns and code snippets to treat external APIs or JSON-B stores as first-class table and form sources using the Custom Data Source pattern. It documents nested resource wiring, Livewire/Alpine.js client helpers, and performance hygiene like deferred loading and preloading. The skill also prescribes UX systems (Swiss Style, Bento Grid) and troubleshooting steps to keep forms fast and accessible.

When to use it

• When you need tables or forms driven by an external API rather than Eloquent models.
• When building multi-level admin panels with Projects -> Tasks -> Comments style nesting.
• When you want to reduce server round-trips using client-side state helpers (Alpine + Livewire).
• When TipTap-rich editors or heavy UI components cause slowness and need lazy-loading.
• When you must meet strict performance and accessibility targets in admin UIs.

Best practices

• Expose external sources via a query-like service (e.g., ExternalApiService::getInvoicesQuery()) to keep Table/Form code clean.
• Avoid heavy queries inside table/form definitions; use getEloquentQuery(), computed props, or deferred loaders.
• Use entangle() sparingly and rely on afterStateUpdatedJs or lightweight Alpine inputs for client-only transformations.
• Lazy-load heavy TipTap extensions and large visualization libs (Chart.js/D3) with dynamic imports.
• Integrate Spatie permissions and Filament policies—never hardcode permissions in resources.

Example use cases

• Render a 3rd-party billing provider’s invoices as a Filament Table powered by a Custom Data Source.
• Create nested Filament resources for Projects with inline Task relation managers and comment threads.
• Build an AI-assisted form generator that scaffolds form fields and validation using Filament field primitives and TipTap blocks.
• Optimize a dashboard with live charts, deferred table loading, and responsive Bento Grid layouts for mobile.
• Replace monolithic controllers by moving CRUD and UI logic into Filament Resources and RelationManagers.