Create FilamentPHP v4 dashboard pages with single-tab or multi-tab layouts, message callouts, and widget integration
View on GitHubmwguerra/claude-code-plugins
filament-specialist
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/mwguerra/claude-code-plugins/blob/main/filament-specialist/skills/filament-dashboard/SKILL.md -a claude-code --skill filament-dashboardInstallation paths:
.claude/skills/filament-dashboard/# FilamentPHP Dashboard Page Generation Skill
## Overview
This skill generates FilamentPHP v4 dashboard pages that follow a consistent pattern:
- Extends `Filament\Pages\Page`
- Supports single-tab (no tabs UI) or multi-tab layouts
- Includes optional color-coded message callouts
- Renders widgets using the standard Filament widgets component
- Uses Livewire reactive tabs with `$activeTab` state
## Documentation Reference
**CRITICAL:** Before generating dashboard pages, read:
- `/home/mwguerra/projects/mwguerra/claude-code-plugins/filament-specialist/skills/filament-docs/references/general/06-navigation/`
- `/home/mwguerra/projects/mwguerra/claude-code-plugins/filament-specialist/skills/filament-docs/references/widgets/`
## Pattern Architecture
A dashboard page in this style has 3 pieces:
1. **Filament Page class** (PHP)
- Extends `Filament\Pages\Page`
- Sets `$view`
- Declares navigation metadata (icon/label/group/sort)
- Stores Livewire public state: `$activeTab`
- Provides `getTabs(): array` and `getActiveTabData(): ?array`
2. **Blade view** (`resources/views/filament/{panel}/pages/{slug}.blade.php`)
- Renders tabs navigation (optional, for multi-tab)
- Renders optional message callout (color-coded)
- Renders widgets using: `<x-filament-widgets::widgets :widgets="$activeTabData['widgets']" />`
3. **Widgets** (Filament Widgets)
- Each tab is basically "a widget list"
- Widgets are referenced as `::class` strings
## Tab Schema Contract
Each tab must follow this array schema:
```php
[
'key' => 'overview', // Required: unique identifier
'title' => 'Overview', // Required: display title
'icon' => 'heroicon-o-chart-bar', // Optional: Heroicon name
'message' => '<strong>Note:</strong> ...', // Optional: HTML message
'messageColor' => 'blue', // Optional: blue|green|purple|orange|indigo|gray
'widgets' => [ // Optional: wi