| name | finalcut-admin-design |
| description | Use this skill when designing, theming, or extending the Final Cut Filament admin panel — Resources, Resource viewSchema/infolists, custom Pages, Widgets, Notifications, badges, and Blade view overrides under `backend/app/Filament/` and `backend/resources/views/filament/`. Triggers on requests like "style this Filament resource", "add a dashboard widget", "the admin panel still looks like default Filament", "the booking status badge is the wrong color", or any work touching `AdminPanelProvider`, `viteTheme`, or the admin theme CSS. NOT for customer-facing work under `frontend/` — use the sibling `finalcut-design` skill for that. NOT the bundled `frontend-design` skill either — that one builds generic interfaces and doesn't know the Final Cut brand. |
| user-invocable | true |
This skill applies to work under backend/app/Filament/ and the admin panel at admin.finalcut.test. The brand is Final Cut ("The Cinematic Void Framework"); the admin surface is Filament v5 using the schema-first API (Filament\Schemas\Schema, Filament\Schemas\Components\Section). Patches you generate must not regress to v3-style Forms\Form idioms.
Defer to the canonical sources
The admin skill does not redefine tokens — it wires existing tokens into Filament. Read these first:
- Tokens / token mapping:
docs/design-system/DESIGN_SYSTEM.md § Token Mapping (the rule that primary is text-only, primary_container is fill, etc.).
- Spacing, motion, focus, breakpoints:
docs/design-system/DESIGN_SYSTEM_STRUCTURE.md.
- Currency / status / time conventions:
docs/architecture/DATA_MODELS.md, app/Enums/BookingStatus.php.
- Sibling customer-facing skill:
.claude/skills/finalcut-design/ — for any work under frontend/, route there instead.
What's in this skill
README.md — voice/tone for operators + visual foundations + Filament-specific rules.theme.css — a working, ready-to-deploy override sheet. Plain CSS (no Tailwind compile required) that re-skins Filament components using Final Cut tokens. Drop into backend/public/css/admin/finalcut-overrides.css and inject via registerRenderHook (see references/panel-provider.md).references/panel-provider.md — the two-file (or three, if Vite is added later) patch that brings the panel into the brand: AdminPanelProvider.php diff + the theme stylesheet path.references/token-mapping.md — load-bearing pitfalls. Read this before changing colors.references/resource-and-infolist-patterns.md — Form schema, viewSchema (Placeholder / HtmlString), table column patterns. Most Resources here are read-heavy, so view schemas dominate.references/notification-and-badge-mapping.md — Filament's 'success' | 'warning' | 'danger' | 'info' | 'gray' → Final Cut tokens. Plus Notification::make() theming.references/custom-page-patterns.md — Page class + Blade view conventions. Precedents: BookingLookup, SchedulePlanner, ActivityLog, CancellationFollowupQueue.references/widget-patterns.md — stat / chart / table widgets in the brand. None exist yet; this establishes the convention.references/content-fundamentals.md — voice, tone, casing, numbers/units adapted for admin operators.
Non-negotiables
- Token discipline.
primary (#FFB4A8) = text on maroon. primary_container (#550000) = fill. Confusing them is the #1 mistake — see references/token-mapping.md.
- Filament's stock semantic colors must be remapped.
'success'/'warning'/'danger'/'info'/'gray' resolve to Filament's default palette unless overridden in AdminPanelProvider->colors(). See references/notification-and-badge-mapping.md.
- Inline Tailwind classes inside
HtmlString and Placeholder->content() bypass theme.css. Look for class="pl-5 space-y-1" and similar baked into PHP strings — they need brand-correct utility classes or hand styling (see references/token-mapping.md § Inline-Tailwind pitfall).
rem units only for any custom CSS you write (borders, shadows, sub-pixel are exceptions). Filament's compiled CSS already mixes units; your additions must follow the project rule.- No emoji in admin copy. Sentence case for headings/buttons/menu items. ALL CAPS only for table-column eyebrows. 24-hour time. Tabular mono for digits operators compare. See
references/content-fundamentals.md.
- Heroicons line-style (
heroicon-o-*), not solid (heroicon-s-*) — matches the No-Line aesthetic of the design system.
- Filament v5 schema-first API only.
Filament\Schemas\Schema, Filament\Schemas\Components\Section. Don't reach for Forms\Form.
Quick-start triggers
- "style this Filament resource" → read
resource-and-infolist-patterns.md, then make the edit.
- "the admin panel still looks like default Filament" → produce the patch from
panel-provider.md (start with theme.css deployment).
- "add a dashboard widget" → read
widget-patterns.md, scaffold under backend/app/Filament/Widgets/.
- "the booking status badge is the wrong color" → read
notification-and-badge-mapping.md for the semantic-color override.
- "what should this confirmation copy say" → read
content-fundamentals.md.
If invoked without specific guidance, ask what surface (Resource / Page / Widget / global theme), then act as an expert designer working within the existing system.
