widgets — Skillopedia

FilamentPHP Widgets Generation Skill Overview This skill generates FilamentPHP v4 dashboard widgets including stats overview widgets, chart widgets, table widgets, and custom widgets. Documentation Reference CRITICAL: Before generating widgets, read: - Creating Widgets Generate with Artisan Stats Overview Widget Chart Widgets Line Chart Bar Chart Doughnut/Pie Chart Interactive Chart with Filters Table Widget Custom Widget Blade view ( ): Widget Registration Dashboard Widgets Resource Page Widgets Widget Configuration Output Generated widgets include: 1. Proper widget type selection 2. Data fe…

. number_format(Order::sum('total'), 2))\n ->description('This month')\n ->descriptionIcon('heroicon-o-currency-dollar')\n ->color('success')\n ->chart([1200, 1400, 1100, 1800, 2200, 1900, 2400])\n ->chartColor('success'),\n\n // Stat with extra info\n Stat::make('Pending Orders', Order::where('status', 'pending')->count())\n ->description('Requires attention')\n ->descriptionIcon('heroicon-o-clock')\n ->color('warning')\n ->extraAttributes([\n 'class' => 'cursor-pointer',\n 'wire:click' => 'goToOrders',\n ]),\n ];\n }\n\n // Optional: Make stats live\n protected static ?string $pollingInterval = '15s';\n\n // Optional: Column span\n protected int | string | array $columnSpan = 'full';\n}\n```\n\n## Chart Widgets\n\n### Line Chart\n\n```php\n\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Widgets\\ChartWidget;\nuse Illuminate\\Support\\Carbon;\n\nclass RevenueChart extends ChartWidget\n{\n protected static ?string $heading = 'Revenue';\n protected static ?int $sort = 2;\n protected int | string | array $columnSpan = 'full';\n\n protected function getData(): array\n {\n $data = collect(range(1, 12))->map(function ($month) {\n return Order::whereMonth('created_at', $month)\n ->whereYear('created_at', now()->year)\n ->sum('total');\n });\n\n return [\n 'datasets' => [\n [\n 'label' => 'Revenue',\n 'data' => $data->values()->toArray(),\n 'borderColor' => '#10b981',\n 'backgroundColor' => 'rgba(16, 185, 129, 0.1)',\n 'fill' => true,\n ],\n ],\n 'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n ];\n }\n\n protected function getType(): string\n {\n return 'line';\n }\n\n protected function getOptions(): array\n {\n return [\n 'plugins' => [\n 'legend' => [\n 'display' => false,\n ],\n ],\n 'scales' => [\n 'y' => [\n 'beginAtZero' => true,\n 'ticks' => [\n 'callback' => '(value) => \"$\" + value.toLocaleString()',\n ],\n ],\n ],\n ];\n }\n}\n```\n\n### Bar Chart\n\n```php\n\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Widgets\\ChartWidget;\n\nclass OrdersPerCategory extends ChartWidget\n{\n protected static ?string $heading = 'Orders by Category';\n protected static ?int $sort = 3;\n\n protected function getData(): array\n {\n $categories = \\App\\Models\\Category::withCount('orders')->get();\n\n return [\n 'datasets' => [\n [\n 'label' => 'Orders',\n 'data' => $categories->pluck('orders_count')->toArray(),\n 'backgroundColor' => [\n '#3b82f6',\n '#10b981',\n '#f59e0b',\n '#ef4444',\n '#8b5cf6',\n ],\n ],\n ],\n 'labels' => $categories->pluck('name')->toArray(),\n ];\n }\n\n protected function getType(): string\n {\n return 'bar';\n }\n}\n```\n\n### Doughnut/Pie Chart\n\n```php\n\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Widgets\\ChartWidget;\n\nclass OrderStatusChart extends ChartWidget\n{\n protected static ?string $heading = 'Order Status Distribution';\n protected static ?int $sort = 4;\n\n protected function getData(): array\n {\n $statuses = Order::selectRaw('status, COUNT(*) as count')\n ->groupBy('status')\n ->pluck('count', 'status');\n\n return [\n 'datasets' => [\n [\n 'data' => $statuses->values()->toArray(),\n 'backgroundColor' => [\n '#f59e0b', // pending - warning\n '#3b82f6', // processing - primary\n '#10b981', // completed - success\n '#ef4444', // cancelled - danger\n ],\n ],\n ],\n 'labels' => $statuses->keys()->map(fn ($s) => ucfirst($s))->toArray(),\n ];\n }\n\n protected function getType(): string\n {\n return 'doughnut'; // or 'pie'\n }\n\n protected function getOptions(): array\n {\n return [\n 'plugins' => [\n 'legend' => [\n 'position' => 'bottom',\n ],\n ],\n ];\n }\n}\n```\n\n### Interactive Chart with Filters\n\n```php\n\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Forms\\Components\\DatePicker;\nuse Filament\\Forms\\Components\\Select;\nuse Filament\\Widgets\\ChartWidget;\n\nclass FilterableRevenueChart extends ChartWidget\n{\n protected static ?string $heading = 'Revenue Over Time';\n\n public ?string $filter = 'week';\n\n protected function getFilters(): ?array\n {\n return [\n 'today' => 'Today',\n 'week' => 'Last 7 days',\n 'month' => 'This month',\n 'year' => 'This year',\n ];\n }\n\n protected function getData(): array\n {\n $data = match ($this->filter) {\n 'today' => $this->getTodayData(),\n 'week' => $this->getWeekData(),\n 'month' => $this->getMonthData(),\n 'year' => $this->getYearData(),\n };\n\n return [\n 'datasets' => [\n [\n 'label' => 'Revenue',\n 'data' => $data['values'],\n 'borderColor' => '#3b82f6',\n ],\n ],\n 'labels' => $data['labels'],\n ];\n }\n\n protected function getType(): string\n {\n return 'line';\n }\n\n private function getTodayData(): array\n {\n // Implementation\n }\n\n private function getWeekData(): array\n {\n // Implementation\n }\n\n private function getMonthData(): array\n {\n // Implementation\n }\n\n private function getYearData(): array\n {\n // Implementation\n }\n}\n```\n\n## Table Widget\n\n```php\n\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Tables;\nuse Filament\\Tables\\Table;\nuse Filament\\Widgets\\TableWidget as BaseWidget;\n\nclass LatestOrders extends BaseWidget\n{\n protected static ?string $heading = 'Latest Orders';\n protected static ?int $sort = 5;\n protected int | string | array $columnSpan = 'full';\n\n public function table(Table $table): Table\n {\n return $table\n ->query(\n Order::query()\n ->latest()\n ->limit(10)\n )\n ->columns([\n Tables\\Columns\\TextColumn::make('number')\n ->searchable(),\n Tables\\Columns\\TextColumn::make('customer.name')\n ->label('Customer')\n ->searchable(),\n Tables\\Columns\\BadgeColumn::make('status')\n ->colors([\n 'warning' => 'pending',\n 'primary' => 'processing',\n 'success' => 'completed',\n 'danger' => 'cancelled',\n ]),\n Tables\\Columns\\TextColumn::make('total')\n ->money('usd')\n ->sortable(),\n Tables\\Columns\\TextColumn::make('created_at')\n ->dateTime()\n ->sortable(),\n ])\n ->actions([\n Tables\\Actions\\Action::make('view')\n ->url(fn (Order $record): string => route('filament.admin.resources.orders.view', $record))\n ->icon('heroicon-o-eye'),\n ])\n ->paginated(false);\n }\n}\n```\n\n## Custom Widget\n\n```php\n\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Task;\nuse Filament\\Widgets\\Widget;\n\nclass TasksWidget extends Widget\n{\n protected static string $view = 'filament.widgets.tasks-widget';\n protected static ?int $sort = 6;\n protected int | string | array $columnSpan = 1;\n\n public array $tasks = [];\n\n public function mount(): void\n {\n $this->tasks = Task::where('user_id', auth()->id())\n ->whereNull('completed_at')\n ->orderBy('due_date')\n ->limit(5)\n ->get()\n ->toArray();\n }\n\n public function completeTask(int $taskId): void\n {\n Task::find($taskId)->update(['completed_at' => now()]);\n $this->mount(); // Refresh tasks\n }\n}\n```\n\nBlade view (`resources/views/filament/widgets/tasks-widget.blade.php`):\n\n```blade\n\u003cx-filament-widgets::widget>\n \u003cx-filament::section>\n \u003cx-slot name=\"heading\">\n My Tasks\n \u003c/x-slot>\n\n \u003cul class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n @forelse ($tasks as $task)\n \u003cli class=\"py-3 flex items-center justify-between\">\n \u003cdiv>\n \u003cp class=\"text-sm font-medium text-gray-900 dark:text-white\">\n {{ $task['title'] }}\n \u003c/p>\n \u003cp class=\"text-xs text-gray-500\">\n Due: {{ \\Carbon\\Carbon::parse($task['due_date'])->format('M j, Y') }}\n \u003c/p>\n \u003c/div>\n \u003cx-filament::icon-button\n icon=\"heroicon-o-check\"\n wire:click=\"completeTask({{ $task['id'] }})\"\n color=\"success\"\n />\n \u003c/li>\n @empty\n \u003cli class=\"py-3 text-sm text-gray-500\">\n No pending tasks\n \u003c/li>\n @endforelse\n \u003c/ul>\n \u003c/x-filament::section>\n\u003c/x-filament-widgets::widget>\n```\n\n## Widget Registration\n\n### Dashboard Widgets\n\n```php\n// In AdminPanelProvider.php\n->widgets([\n Widgets\\AccountWidget::class, // Default\n Widgets\\FilamentInfoWidget::class, // Default\n \\App\\Filament\\Widgets\\StatsOverview::class,\n \\App\\Filament\\Widgets\\RevenueChart::class,\n \\App\\Filament\\Widgets\\LatestOrders::class,\n])\n```\n\n### Resource Page Widgets\n\n```php\n// In resource class\npublic static function getWidgets(): array\n{\n return [\n Widgets\\PostStatsOverview::class,\n ];\n}\n\n// In ListRecords page\nprotected function getHeaderWidgets(): array\n{\n return [\n Widgets\\PostStatsOverview::class,\n ];\n}\n\nprotected function getFooterWidgets(): array\n{\n return [\n Widgets\\RecentPosts::class,\n ];\n}\n```\n\n## Widget Configuration\n\n```php\nclass MyWidget extends Widget\n{\n // Sort order\n protected static ?int $sort = 1;\n\n // Column span (1, 2, 'full', or responsive array)\n protected int | string | array $columnSpan = [\n 'md' => 2,\n 'xl' => 3,\n ];\n\n // Polling interval\n protected static ?string $pollingInterval = '10s';\n\n // Visibility\n public static function canView(): bool\n {\n return auth()->user()->isAdmin();\n }\n\n // Lazy loading\n protected static bool $isLazy = true;\n}\n```\n\n## Output\n\nGenerated widgets include:\n1. Proper widget type selection\n2. Data fetching methods\n3. Chart configuration\n4. Styling and layout\n5. Interactivity (filters, actions)\n6. Performance optimizations\n---","attachment_filenames":[],"attachments":[],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"FilamentPHP Widgets Generation Skill","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"This skill generates FilamentPHP v4 dashboard widgets including stats overview widgets, chart widgets, table widgets, and custom widgets.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Documentation Reference","type":"text"}]},{"type":"paragraph","content":[{"text":"CRITICAL:","type":"text","marks":[{"type":"strong"}]},{"text":" Before generating widgets, read:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"/home/mwguerra/projects/mwguerra/claude-code-plugins/filament-specialist/skills/docs/references/widgets/","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Creating Widgets","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Generate with Artisan","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Basic widget\nphp artisan make:filament-widget StatsOverview\n\n# Stats overview widget\nphp artisan make:filament-widget StatsOverview --stats-overview\n\n# Chart widget\nphp artisan make:filament-widget RevenueChart --chart\n\n# Table widget\nphp artisan make:filament-widget LatestOrders --table\n\n# Resource widget\nphp artisan make:filament-widget PostStats --resource=PostResource","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Stats Overview Widget","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse App\\Models\\User;\nuse Filament\\Widgets\\StatsOverviewWidget as BaseWidget;\nuse Filament\\Widgets\\StatsOverviewWidget\\Stat;\n\nclass StatsOverview extends BaseWidget\n{\n protected static ?int $sort = 1;\n\n protected function getStats(): array\n {\n return [\n // Basic stat\n Stat::make('Total Users', User::count())\n ->description('All registered users')\n ->descriptionIcon('heroicon-o-users')\n ->color('primary'),\n\n // Stat with trend\n Stat::make('New Users', User::whereMonth('created_at', now()->month)->count())\n ->description('32% increase')\n ->descriptionIcon('heroicon-m-arrow-trending-up')\n ->color('success')\n ->chart([7, 3, 4, 5, 6, 3, 5, 8]) // Sparkline data\n ->chartColor('success'),\n\n // Stat with decrease trend\n Stat::make('Bounce Rate', '21%')\n ->description('7% decrease')\n ->descriptionIcon('heroicon-m-arrow-trending-down')\n ->color('danger'),\n\n // Revenue stat with formatting\n Stat::make('Revenue', '

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.

. number_format(Order::sum('total'), 2))\n ->description('This month')\n ->descriptionIcon('heroicon-o-currency-dollar')\n ->color('success')\n ->chart([1200, 1400, 1100, 1800, 2200, 1900, 2400])\n ->chartColor('success'),\n\n // Stat with extra info\n Stat::make('Pending Orders', Order::where('status', 'pending')->count())\n ->description('Requires attention')\n ->descriptionIcon('heroicon-o-clock')\n ->color('warning')\n ->extraAttributes([\n 'class' => 'cursor-pointer',\n 'wire:click' => 'goToOrders',\n ]),\n ];\n }\n\n // Optional: Make stats live\n protected static ?string $pollingInterval = '15s';\n\n // Optional: Column span\n protected int | string | array $columnSpan = 'full';\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Chart Widgets","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Line Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Widgets\\ChartWidget;\nuse Illuminate\\Support\\Carbon;\n\nclass RevenueChart extends ChartWidget\n{\n protected static ?string $heading = 'Revenue';\n protected static ?int $sort = 2;\n protected int | string | array $columnSpan = 'full';\n\n protected function getData(): array\n {\n $data = collect(range(1, 12))->map(function ($month) {\n return Order::whereMonth('created_at', $month)\n ->whereYear('created_at', now()->year)\n ->sum('total');\n });\n\n return [\n 'datasets' => [\n [\n 'label' => 'Revenue',\n 'data' => $data->values()->toArray(),\n 'borderColor' => '#10b981',\n 'backgroundColor' => 'rgba(16, 185, 129, 0.1)',\n 'fill' => true,\n ],\n ],\n 'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n ];\n }\n\n protected function getType(): string\n {\n return 'line';\n }\n\n protected function getOptions(): array\n {\n return [\n 'plugins' => [\n 'legend' => [\n 'display' => false,\n ],\n ],\n 'scales' => [\n 'y' => [\n 'beginAtZero' => true,\n 'ticks' => [\n 'callback' => '(value) => \"$\" + value.toLocaleString()',\n ],\n ],\n ],\n ];\n }\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Bar Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Widgets\\ChartWidget;\n\nclass OrdersPerCategory extends ChartWidget\n{\n protected static ?string $heading = 'Orders by Category';\n protected static ?int $sort = 3;\n\n protected function getData(): array\n {\n $categories = \\App\\Models\\Category::withCount('orders')->get();\n\n return [\n 'datasets' => [\n [\n 'label' => 'Orders',\n 'data' => $categories->pluck('orders_count')->toArray(),\n 'backgroundColor' => [\n '#3b82f6',\n '#10b981',\n '#f59e0b',\n '#ef4444',\n '#8b5cf6',\n ],\n ],\n ],\n 'labels' => $categories->pluck('name')->toArray(),\n ];\n }\n\n protected function getType(): string\n {\n return 'bar';\n }\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Doughnut/Pie Chart","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Widgets\\ChartWidget;\n\nclass OrderStatusChart extends ChartWidget\n{\n protected static ?string $heading = 'Order Status Distribution';\n protected static ?int $sort = 4;\n\n protected function getData(): array\n {\n $statuses = Order::selectRaw('status, COUNT(*) as count')\n ->groupBy('status')\n ->pluck('count', 'status');\n\n return [\n 'datasets' => [\n [\n 'data' => $statuses->values()->toArray(),\n 'backgroundColor' => [\n '#f59e0b', // pending - warning\n '#3b82f6', // processing - primary\n '#10b981', // completed - success\n '#ef4444', // cancelled - danger\n ],\n ],\n ],\n 'labels' => $statuses->keys()->map(fn ($s) => ucfirst($s))->toArray(),\n ];\n }\n\n protected function getType(): string\n {\n return 'doughnut'; // or 'pie'\n }\n\n protected function getOptions(): array\n {\n return [\n 'plugins' => [\n 'legend' => [\n 'position' => 'bottom',\n ],\n ],\n ];\n }\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Interactive Chart with Filters","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Forms\\Components\\DatePicker;\nuse Filament\\Forms\\Components\\Select;\nuse Filament\\Widgets\\ChartWidget;\n\nclass FilterableRevenueChart extends ChartWidget\n{\n protected static ?string $heading = 'Revenue Over Time';\n\n public ?string $filter = 'week';\n\n protected function getFilters(): ?array\n {\n return [\n 'today' => 'Today',\n 'week' => 'Last 7 days',\n 'month' => 'This month',\n 'year' => 'This year',\n ];\n }\n\n protected function getData(): array\n {\n $data = match ($this->filter) {\n 'today' => $this->getTodayData(),\n 'week' => $this->getWeekData(),\n 'month' => $this->getMonthData(),\n 'year' => $this->getYearData(),\n };\n\n return [\n 'datasets' => [\n [\n 'label' => 'Revenue',\n 'data' => $data['values'],\n 'borderColor' => '#3b82f6',\n ],\n ],\n 'labels' => $data['labels'],\n ];\n }\n\n protected function getType(): string\n {\n return 'line';\n }\n\n private function getTodayData(): array\n {\n // Implementation\n }\n\n private function getWeekData(): array\n {\n // Implementation\n }\n\n private function getMonthData(): array\n {\n // Implementation\n }\n\n private function getYearData(): array\n {\n // Implementation\n }\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Table Widget","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Order;\nuse Filament\\Tables;\nuse Filament\\Tables\\Table;\nuse Filament\\Widgets\\TableWidget as BaseWidget;\n\nclass LatestOrders extends BaseWidget\n{\n protected static ?string $heading = 'Latest Orders';\n protected static ?int $sort = 5;\n protected int | string | array $columnSpan = 'full';\n\n public function table(Table $table): Table\n {\n return $table\n ->query(\n Order::query()\n ->latest()\n ->limit(10)\n )\n ->columns([\n Tables\\Columns\\TextColumn::make('number')\n ->searchable(),\n Tables\\Columns\\TextColumn::make('customer.name')\n ->label('Customer')\n ->searchable(),\n Tables\\Columns\\BadgeColumn::make('status')\n ->colors([\n 'warning' => 'pending',\n 'primary' => 'processing',\n 'success' => 'completed',\n 'danger' => 'cancelled',\n ]),\n Tables\\Columns\\TextColumn::make('total')\n ->money('usd')\n ->sortable(),\n Tables\\Columns\\TextColumn::make('created_at')\n ->dateTime()\n ->sortable(),\n ])\n ->actions([\n Tables\\Actions\\Action::make('view')\n ->url(fn (Order $record): string => route('filament.admin.resources.orders.view', $record))\n ->icon('heroicon-o-eye'),\n ])\n ->paginated(false);\n }\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Custom Widget","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"\u003c?php\n\ndeclare(strict_types=1);\n\nnamespace App\\Filament\\Widgets;\n\nuse App\\Models\\Task;\nuse Filament\\Widgets\\Widget;\n\nclass TasksWidget extends Widget\n{\n protected static string $view = 'filament.widgets.tasks-widget';\n protected static ?int $sort = 6;\n protected int | string | array $columnSpan = 1;\n\n public array $tasks = [];\n\n public function mount(): void\n {\n $this->tasks = Task::where('user_id', auth()->id())\n ->whereNull('completed_at')\n ->orderBy('due_date')\n ->limit(5)\n ->get()\n ->toArray();\n }\n\n public function completeTask(int $taskId): void\n {\n Task::find($taskId)->update(['completed_at' => now()]);\n $this->mount(); // Refresh tasks\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Blade view (","type":"text"},{"text":"resources/views/filament/widgets/tasks-widget.blade.php","type":"text","marks":[{"type":"code_inline"}]},{"text":"):","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"blade"},"content":[{"text":"\u003cx-filament-widgets::widget>\n \u003cx-filament::section>\n \u003cx-slot name=\"heading\">\n My Tasks\n \u003c/x-slot>\n\n \u003cul class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n @forelse ($tasks as $task)\n \u003cli class=\"py-3 flex items-center justify-between\">\n \u003cdiv>\n \u003cp class=\"text-sm font-medium text-gray-900 dark:text-white\">\n {{ $task['title'] }}\n \u003c/p>\n \u003cp class=\"text-xs text-gray-500\">\n Due: {{ \\Carbon\\Carbon::parse($task['due_date'])->format('M j, Y') }}\n \u003c/p>\n \u003c/div>\n \u003cx-filament::icon-button\n icon=\"heroicon-o-check\"\n wire:click=\"completeTask({{ $task['id'] }})\"\n color=\"success\"\n />\n \u003c/li>\n @empty\n \u003cli class=\"py-3 text-sm text-gray-500\">\n No pending tasks\n \u003c/li>\n @endforelse\n \u003c/ul>\n \u003c/x-filament::section>\n\u003c/x-filament-widgets::widget>","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Widget Registration","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Dashboard Widgets","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"// In AdminPanelProvider.php\n->widgets([\n Widgets\\AccountWidget::class, // Default\n Widgets\\FilamentInfoWidget::class, // Default\n \\App\\Filament\\Widgets\\StatsOverview::class,\n \\App\\Filament\\Widgets\\RevenueChart::class,\n \\App\\Filament\\Widgets\\LatestOrders::class,\n])","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Resource Page Widgets","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"// In resource class\npublic static function getWidgets(): array\n{\n return [\n Widgets\\PostStatsOverview::class,\n ];\n}\n\n// In ListRecords page\nprotected function getHeaderWidgets(): array\n{\n return [\n Widgets\\PostStatsOverview::class,\n ];\n}\n\nprotected function getFooterWidgets(): array\n{\n return [\n Widgets\\RecentPosts::class,\n ];\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Widget Configuration","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"php"},"content":[{"text":"class MyWidget extends Widget\n{\n // Sort order\n protected static ?int $sort = 1;\n\n // Column span (1, 2, 'full', or responsive array)\n protected int | string | array $columnSpan = [\n 'md' => 2,\n 'xl' => 3,\n ];\n\n // Polling interval\n protected static ?string $pollingInterval = '10s';\n\n // Visibility\n public static function canView(): bool\n {\n return auth()->user()->isAdmin();\n }\n\n // Lazy loading\n protected static bool $isLazy = true;\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Output","type":"text"}]},{"type":"paragraph","content":[{"text":"Generated widgets include:","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Proper widget type selection","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data fetching methods","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Chart configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Styling and layout","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactivity (filters, actions)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Performance optimizations","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}}]},"metadata":{"date":"2026-06-05","name":"widgets","author":"@skillopedia","source":{"stars":32,"repo_name":"claude-code-plugins","origin_url":"https://github.com/mwguerra/claude-code-plugins/blob/HEAD/filament-specialist/skills/widgets/SKILL.md","repo_owner":"mwguerra","body_sha256":"d1efb925465be6f9f09d7e93ffb197d102ab9451d287f72700814027a117391b","cluster_key":"d4095af9e542db83726352f2a09eb5d0ba90d6d0ad04bf8d48a1194677360971","clean_bundle":{"format":"clean-skill-bundle-v1","source":"mwguerra/claude-code-plugins/filament-specialist/skills/widgets/SKILL.md","bundle_sha256":"3e875278e843589da2bac64780f497a0c14a9aa0da1f9320fd8a054bd39d4da0","attachment_count":0,"text_attachments":0,"binary_attachments":0},"cluster_size":1,"skill_md_path":"filament-specialist/skills/widgets/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"web-development","import_tag":"clean-skills-v1","description":"Create FilamentPHP v4 dashboard widgets - stats overviews, charts, and custom components"}},"renderedAt":1782980210681}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.